/* 1. Use a more-intuitive box-sizing model. */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Remove default margin */
* { margin: 0; }

/* 3. Allow percentage-based heights in the application */
html, body { height: 100%; }

/* Typographic tweaks! 4. Add accessible line-height 5. Improve text rendering */
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* 6. Improve media defaults */
img, picture, video, canvas, svg { display: block; max-width: 100%; }

/* 7. Remove built-in form typography styles */
input, button, textarea, select { font: inherit; }

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* 9. Create a root stacking context */
#root, #__next { isolation: isolate; }

:root { --blackish: #192124; --mainColor: #007cca; }

body { font-family: "Inter", sans-serif; }

.nav-and-hero-container { background: linear-gradient(180deg, rgba(236, 241, 243, 0) 0%, #ecf9ff 62.5%); }

.nav-and-hero { background: radial-gradient(50% 50% at 50% 0%, rgba(0, 124, 202, 0.35) 0%, rgba(14, 131, 205, 0.25) 27.08%, rgba(102, 177, 223, 0.25) 48.44%, rgba(255, 255, 255, 0) 100%); }

.hero { display: flex; flex-direction: column; gap: 35px; }

main, section, footer { /* width: 1315px; */ max-width: 1024px; margin: 0 auto; padding: 2rem 10px; }

.nav { display: flex; justify-content: space-between; align-items: center; gap: 18px; }

.nav { display: flex; justify-content: space-between; align-items: center; gap: 18px; }

.nav .logo { flex-grow: 1; }

.nav .logo a { text-decoration: none; }

.nav .nav-link { font-size: 12px; line-height: 14px; color: var(--blackish); text-decoration: none; }

.nav .sign-in { font-size: 12px; line-height: 14px; text-decoration: none; padding: 8px 12px; background: #ffffff; border: 0.5px solid #b3bec4; border-radius: 6px; color: var(--blackish); }

.hero h1 { font-weight: bold; font-size: 24pt; line-height: 120%; text-align: center; color: var(--blackish); }

.hero h2 { font-family: Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal; font-size: 16pt; line-height: 133%; text-align: center; color: #5a6d79; }

.hero .ctas { display: flex; justify-content: center; gap: 35px; }

.btn { background: var(--mainColor); border-radius: 8px; width: 243px; height: 40px; display: flex; justify-content: center; align-items: center; text-decoration: none; text-transform: uppercase; font-style: normal; font-weight: 600; font-size: 15px; color: #ffffff; border: none; }

h3 { font-weight: bold; font-size: 16pt; line-height: 2rem; text-align: center; color: var(--blackish); margin: 2rem 0; }

.intro { display: flex; flex-direction: column; gap: 35px; }

.intro .text { font-style: normal; font-weight: 600; font-size: 16pt; line-height: 32px; text-align: center; color: var(--mainColor); }

.intro .learn-more { font-style: normal; font-weight: 600; font-size: 15px; line-height: 18px; text-align: center; text-decoration-line: underline; color: #838383; }

.items { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }

.item { flex-basis: 20%; display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* .item:nth-child(2n+1) { background: yellow; } .item:nth-child(2n) { background: red; } */
.item .image { width: 168px; height: 168px; background: rgba(0, 124, 202, 0.08); background: rgba(202, 202, 0, 0.08); border-radius: 84px; display: flex; align-items: center; justify-content: center; }

.item .image img { width: 100px; height: 100px; }

.item .image span { font-size: 96px; }

.item h4 { font-weight: 600; font-size: 24px; line-height: 29px; text-align: center; /* Grayscale / Gray 900 */ color: var(--blackish); }

.item .text { text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 26px; text-align: center; color: #5a6d79; }

/* plans && pricing  */
.plans-detail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

@media (max-width: 1024px) { .plans-detail { grid-template-columns: 1fr; } }

.plan { flex: 1; display: flex; flex-direction: column; gap: 10px; background: #ecf1f3; border-radius: 20px; padding: 40px 20px; }

.plan hr { display: block; width: 100%; height: 3px; border: none; background: #fff; opacity: 0.3; }

.plan .name { font-size: 26px; line-height: 31px; text-align: center; /* Grayscale / Gray 900 */ color: var(--blackish); }

.plan .price { font-size: 32pt; line-height: 72px; text-align: center; color: #231f20; vertical-align: middle; }

.plan .promo { font-size: 16pt; color: #838383; text-decoration: line-through; }

.plan .description { font-weight: bold; font-style: italic; line-height: 72px; text-align: center; }

.plan ul { margin: 0; padding: 0; list-style: none; list-style-position: inside; flex-grow: 1; }

.plan li:before { content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='31' height='31' viewBox='0 0 31 31' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M15.0377 24.0614C10.0626 24.0614 6.01468 20.0135 6.01468 15.0384C6.01468 10.0633 10.0626 6.01539 15.0377 6.01539C20.0128 6.01539 24.0607 10.0633 24.0607 15.0384C24.0607 20.0135 20.0128 24.0614 15.0377 24.0614ZM15.0378 3.75964C8.80854 3.75964 3.75903 8.80915 3.75903 15.0384C3.75903 21.2677 8.80854 26.3172 15.0378 26.3172C21.266 26.3172 26.3166 21.2677 26.3166 15.0384C26.3166 8.80915 21.266 3.75964 15.0378 3.75964Z' fill='%23007CCA'/><path fill-rule='evenodd' clip-rule='evenodd' d='M19.6844 10.0379C19.4032 9.83614 19.0118 9.90069 18.8101 10.1821L12.9473 18.361L10.9902 16.4011C10.832 16.2427 10.6012 16.1808 10.385 16.2387C10.1687 16.2966 9.99975 16.4656 9.94175 16.6819C9.88376 16.8983 9.94553 17.1292 10.1038 17.2876L12.583 19.7679C12.7147 19.8947 12.8944 19.9587 13.0766 19.9439C13.2587 19.929 13.4256 19.8366 13.535 19.6901L19.8285 10.9127C20.0302 10.6313 19.9656 10.2396 19.6844 10.0379Z' fill='%23007CCA' stroke='%23007CCA' stroke-width='0.841992'/></svg>"); display: inline-block; width: 30px; height: 30px; margin-right: 5px; }

.plan li { font-family: Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal; font-size: 20px; line-height: 30px; /* or 140% */ color: #5a6d79; display: flex; margin: 0.5em 0; }

.plan .btn { align-self: center; flex-grow: 0; }

.plans-smallprint { margin-top: 1rem; padding: 0 20px; font-size: .8rem; text-align: center; }

/* try  */
.try-container { background: var(--mainColor); }

.try { display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 20px; font-family: Helvetica, Arial, sans-serif; font-size: 2em; color: white; text-align: center; }

.try h3 { margin-top: 0; text-align: left; color: white; }

.try-button { background: #ffffff; border-radius: 8px; font-weight: 600; font-size: 15px; line-height: 18px; text-align: center; padding: 11px; display: inline-block; color: #231f20; text-decoration: none; }

/* footer */
footer .links { border-bottom: 1px solid #5a6d79; display: flex; justify-content: start; gap: 10px; height: 40px; }

footer .links :first-child, footer .copyright :first-child { flex-grow: 1; }

footer .copyright { margin-top: 10px; display: flex; justify-content: start; gap: 10px; font-style: normal; font-weight: normal; font-size: 13px; line-height: 16px; /* Grayscale / Gray 600 */ color: #5a6d79; opacity: 0.7; }

footer .links a { font-style: normal; font-weight: normal; font-size: 15px; line-height: 18px; color: var(--blackish); text-decoration: none; }

footer .copyright a { font-family: "Trebuchet MS", sans-serif, sans-serif; font-style: normal; font-weight: normal; font-size: 13px; line-height: 16px; text-align: right; color: #5a6d79; opacity: 0.7; text-decoration: none; }

/* .rect1 { opacity: 0.5; background: #5a6d79; border-radius: 10px; width: 100px; height: 100px; position: absolute; animation: wobble 5s ease-in-out infinite alternate; } */
@keyframes wobble { 33% { transform: rotate(2deg); }
  66% { transform: rotate(-2deg); } }

.illustration { text-align: center; justify-content: center; display: flex; }

.illustration svg { height: 30vh; perspective: 50px; }

.illustration svg circle { fill: rgba(200, 200, 220, 0.2); }

.illustration svg #image1 { animation: wobble 10s ease-in-out infinite alternate; transform-origin: 50% 50%; }

#illustration { animation: wobble3d2 10s ease-in-out infinite alternate; /* animation-name: wobble3d2; animation-duration: 10s; animation-fill-mode: both; */ }

#illustration2 { animation: wobble3d2 10s ease-in-out infinite alternate; /* animation-name: wobble3d2; animation-duration: 10s; animation-fill-mode: both; */ }

@keyframes wobble3d2 { 33% { transform: rotate3d(0, 1, 0, 5deg); }
  66% { transform: rotate3d(0, 1, 0, -5deg); } }

@keyframes wobble3d { 0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); } }

.content { font-family: Helvetica, Arial, sans-serif; min-height: 50vh; }

.content h1 { font-style: normal; font-weight: bold; font-size: 24pt; line-height: 120%; color: var(--blackish); margin-bottom: 2rem; }

.post-list { padding: 0; list-style: none; }

.post-list li { margin: 0 0 1rem 0; }

.post-link { text-align: left; font-size: 1.5rem; margin: 1rem 0; }

.post-link a { text-decoration: none; color: inherit; }

.post-date { color: #838383; }

.post-content p { margin-bottom: 0.5rem; }

#map { height: 400px; }

.pulsating-button { background-color: yellow; border: 3px dotted green; border-radius: 5px; font-size: 10pt; font-weight: bold; animation: pulse 1s infinite ease-in-out; }

@keyframes pulse { 0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); } }

.page-content p { margin: 1rem 0; }

/*# sourceMappingURL=main.css.map */