*, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; font-family: "Open Sans", sans-serif; background: hsl(210, 29%, 12%); color: hsl(210, 40%, 98%); font-size: 16px; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; margin: 0; line-height: 1.2; } a { text-decoration: none; color: inherit; } img { max-width: 100%; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-topbar { display: none; background: hsl(210, 35%, 8%); border-bottom: 1px solid rgba(44.88, 56.1, 67.32, 0.6); } @media (min-width: 768px) { .nav-topbar { display: block; } } .nav-topbar .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; color: hsl(210, 15%, 60%); gap: 1.5rem; } .nav-topbar a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; gap: 0.4rem; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .nav-topbar a:hover { color: hsl(195, 100%, 45%); } .nav-topbar a svg { flex-shrink: 0; } .nav-main { position: relative; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; } .nav-main.scrolled { -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } .nav-main .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; padding-top: 0.75rem; padding-bottom: 0.75rem; } .nav-logo img { height: 48px; width: auto; display: block; } @media (max-width: 767px) { .nav-logo img { height: 40px; } } @media (min-width: 768px) { #main-menu { display: block; } } @media (max-width: 767px) { #main-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); border-top: 1px solid #e5e5e5; z-index: 99; } #main-menu.visible { display: block; } } #main-menu ul { list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { #main-menu ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; gap: 2rem; } } @media (max-width: 767px) { #main-menu ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 1rem 1.5rem; gap: 0.25rem; } } #main-menu li { list-style: none; } #main-menu a { display: block; font-family: "Montserrat", sans-serif; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #555; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } #main-menu a:hover { color: hsl(195, 100%, 45%); } @media (max-width: 767px) { #main-menu a { padding: 0.6rem 0; font-size: 0.875rem; border-bottom: 1px solid #f0f0f0; } } #main-menu li.active > a { color: hsl(195, 100%, 45%); } #main-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 0.25rem; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 5px; } @media (max-width: 767px) { #main-menu-btn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } } #main-menu-btn span { display: block; width: 24px; height: 2px; background: #444; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #main-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #main-menu-btn.active span:nth-child(2) { opacity: 0; } #main-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } #home { position: relative; min-height: 100vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; overflow: hidden; } #home video.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #home .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, hsla(210, 35%, 8%, 0.88) 0%, hsla(210, 29%, 12%, 0.75) 50%, hsla(210, 25%, 18%, 0.6) 100%); } #home .hero-content { position: relative; z-index: 1; text-align: center; max-width: 800px; padding: 0 1.5rem; } #home .hero-eyebrow { font-family: "Montserrat", sans-serif; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: hsl(195, 100%, 45%); margin-bottom: 1.5rem; } @media (min-width: 768px) { #home .hero-eyebrow { font-size: 1rem; } } #home h1 { font-size: clamp(2.25rem, 7vw, 4.5rem); font-weight: 800; margin-bottom: 1.5rem; color: hsl(210, 40%, 98%); } #home .text-gradient { background: linear-gradient(90deg, hsl(195, 100%, 45%), hsl(180, 80%, 55%)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } #home .hero-desc { font-size: 1rem; color: hsl(210, 15%, 60%); max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.75; } @media (min-width: 768px) { #home .hero-desc { font-size: 1.125rem; } } #home .hero-buttons { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; gap: 1rem; } .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: hsl(195, 100%, 45%); color: hsl(210, 29%, 8%); padding: 1rem 2rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; font-family: "Montserrat", sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; -webkit-box-shadow: 0 4px 20px rgba(0, 172.125, 229.5, 0.3); -moz-box-shadow: 0 4px 20px rgba(0, 172.125, 229.5, 0.3); box-shadow: 0 4px 20px rgba(0, 172.125, 229.5, 0.3); -webkit-transition: filter 0.2s ease; transition: filter 0.2s ease; } .btn-primary:hover { filter: brightness(1.1); } .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(247.86, 249.9, 251.94, 0.3); color: hsl(210, 40%, 98%); padding: 1rem 2rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; font-family: "Montserrat", sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .btn-outline:hover { border-color: hsl(195, 100%, 45%); color: hsl(195, 100%, 45%); } .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); color: hsl(210, 15%, 60%); -webkit-transition: color 0.2s ease; transition: color 0.2s ease; animation: bounce 2s infinite; } .hero-scroll:hover { color: hsl(195, 100%, 45%); } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } #about { padding: 6rem 0; background: hsl(210, 35%, 8%); } #about .about-grid { display: grid; gap: 4rem; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; } @media (min-width: 992px) { #about .about-grid { grid-template-columns: 1fr 1fr; } } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .stat-card { background: hsl(210, 29%, 15%); padding: 1.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; border: 1px solid hsl(210, 20%, 22%); text-align: center; } .stat-card .stat-value { font-family: "Montserrat", sans-serif; font-size: 1.875rem; font-weight: 800; color: hsl(195, 100%, 45%); margin-bottom: 0.25rem; } .stat-card .stat-label { font-size: 0.875rem; color: hsl(210, 15%, 60%); } .about-text h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 1.5rem; } .about-text h2 span { color: hsl(195, 100%, 45%); } .about-text p { color: hsl(210, 15%, 60%); line-height: 1.75; margin: 0 0 1.5rem; } .highlights { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 0.75rem; } .highlights li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; gap: 0.75rem; font-size: 0.9375rem; color: rgba(247.86, 249.9, 251.94, 0.9); } .highlights li svg { flex-shrink: 0; color: hsl(195, 100%, 45%); } #services { padding: 6rem 0; background: linear-gradient(180deg, hsl(210, 29%, 12%) 0%, hsl(210, 35%, 8%) 100%); } #services .section-header { text-align: center; margin-bottom: 4rem; } #services .section-header h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 1rem; } #services .section-header h2 span { color: hsl(195, 100%, 45%); } #services .services-grid { display: grid; gap: 1.5rem; } @media (min-width: 576px) { #services .services-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { #services .services-grid { grid-template-columns: repeat(4, 1fr); } } .service-card { background: hsl(210, 29%, 15%); padding: 2rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; border: 1px solid hsl(210, 20%, 22%); -webkit-transition: border-color 0.3s ease; transition: border-color 0.3s ease; } .service-card:hover { border-color: rgba(0, 172.125, 229.5, 0.4); } .service-card:hover .service-icon { background: rgba(0, 172.125, 229.5, 0.2); } .service-icon { width: 56px; height: 56px; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; background: rgba(0, 172.125, 229.5, 0.1); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; margin-bottom: 1.25rem; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; color: hsl(195, 100%, 45%); } .service-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; } .service-card p { font-size: 0.9375rem; color: hsl(210, 15%, 60%); line-height: 1.7; margin: 0; } #contact { padding: 6rem 0; background: linear-gradient(180deg, hsl(210, 29%, 12%) 0%, hsl(210, 35%, 8%) 100%); } #contact .section-header { text-align: center; margin-bottom: 4rem; } #contact .section-header h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 1rem; } #contact .section-header h2 span { color: hsl(195, 100%, 45%); } #contact .contact-grid { display: grid; gap: 2rem; max-width: 700px; margin: 0 auto; } @media (min-width: 576px) { #contact .contact-grid { grid-template-columns: repeat(3, 1fr); } } .contact-card { background: hsl(210, 29%, 15%); padding: 2rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; border: 1px solid hsl(210, 20%, 22%); text-align: center; -webkit-transition: border-color 0.3s ease; transition: border-color 0.3s ease; display: block; } .contact-card:hover { border-color: rgba(0, 172.125, 229.5, 0.4); } .contact-card:hover svg { transform: scale(1.1); } .contact-card svg { color: hsl(195, 100%, 45%); -webkit-transition: transform 0.3s ease; transition: transform 0.3s ease; margin-bottom: 1rem; display: block; margin-left: auto; margin-right: auto; } .contact-card .contact-label { font-size: 0.875rem; color: hsl(210, 15%, 60%); margin-bottom: 0.25rem; } .contact-card .contact-value { font-size: 0.9375rem; font-weight: 600; color: hsl(210, 40%, 98%); display: block; } #offer { padding: 6rem 0; background: hsl(210, 35%, 8%); } #offer .section-header { text-align: center; margin-bottom: 4rem; } #offer .section-header h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 1rem; } #offer .section-header h2 span { color: hsl(195, 100%, 45%); } #offer .offer-grid { display: grid; gap: 1.5rem; } @media (min-width: 576px) { #offer .offer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { #offer .offer-grid { grid-template-columns: repeat(3, 1fr); } } .offer-card { background: hsl(210, 29%, 15%); padding: 2.5rem 2rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; border: 1px solid hsl(210, 20%, 22%); text-align: center; -webkit-transition: border-color 0.3s ease; transition: border-color 0.3s ease; } .offer-card:hover { border-color: rgba(0, 172.125, 229.5, 0.4); } .offer-card:hover .offer-icon { background: rgba(0, 172.125, 229.5, 0.2); } .offer-card .offer-icon { width: 72px; height: 72px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: rgba(0, 172.125, 229.5, 0.1); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; margin: 0 auto 1.5rem; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; color: hsl(195, 100%, 45%); } .offer-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; } .offer-card p { font-size: 0.9375rem; color: hsl(210, 15%, 60%); line-height: 1.7; margin: 0; } #cta { padding: 5rem 0; background: linear-gradient(135deg, hsl(210, 29%, 12%) 0%, hsl(195, 40%, 12%) 100%); border-top: 1px solid rgba(0, 172.125, 229.5, 0.1); border-bottom: 1px solid rgba(0, 172.125, 229.5, 0.1); } #cta .cta-content { text-align: center; max-width: 700px; margin: 0 auto; } #cta .cta-content h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 1.5rem; } #cta .cta-content h2 span { color: hsl(195, 100%, 45%); } #cta .cta-content p { font-size: 1.0625rem; color: hsl(210, 15%, 60%); line-height: 1.75; margin: 0 0 2.5rem; } .glow-line { width: 64px; height: 2px; background: linear-gradient(90deg, transparent, rgba(0, 172.125, 229.5, 0.6), transparent); margin: 0 auto; } footer { background: hsl(210, 29%, 12%); border-top: 1px solid rgba(44.88, 56.1, 67.32, 0.5); padding: 2.5rem 0; } footer .footer-main { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; gap: 1.5rem; text-align: center; } @media (min-width: 768px) { footer .footer-main { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; text-align: left; } } footer .footer-logo { font-family: "Montserrat", sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; } footer .footer-logo span:first-child { color: hsl(210, 40%, 98%); } footer .footer-logo span.accent { color: hsl(195, 100%, 45%); } footer .footer-tagline { font-size: 0.75rem; color: hsl(210, 15%, 60%); margin-top: 0.25rem; } footer .footer-links { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; gap: 1.5rem; font-size: 0.9375rem; color: hsl(210, 15%, 60%); } footer .footer-links a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; gap: 0.4rem; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } footer .footer-links a:hover { color: hsl(195, 100%, 45%); } footer .footer-bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(44.88, 56.1, 67.32, 0.5); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; gap: 0.5rem; text-align: center; font-size: 0.8125rem; color: hsl(210, 15%, 60%); } @media (min-width: 768px) { footer .footer-bottom { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } } footer .footer-bottom a:hover { color: hsl(195, 100%, 45%); } #cookie-information { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: hsl(210, 29%, 15%); border-top: 1px solid hsl(210, 20%, 22%); padding: 1rem 1.5rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; gap: 1rem; font-size: 0.875rem; color: hsl(210, 15%, 60%); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #cookie-information a { color: hsl(195, 100%, 45%); } #cookie-information button, #cookie-information .cookie-accept { background: hsl(195, 100%, 45%); color: hsl(210, 29%, 8%); border: none; padding: 0.5rem 1.25rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; font-family: "Montserrat", sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; }