@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --brand-dark-blue: #0b1f2d;
    --brand-light-blue: #66bfed;
}

.bg-brand-dark-blue {
    background-color: var(--brand-dark-blue);
}

.bg-brand-light-blue {
    background-color: var(--brand-light-blue);
}

body {
    margin: 0;
    overflow: auto;
    background: var(--brand-dark-blue);
    font-family: 'Poppins', sans-serif !important;
}

#hero-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -10;
}

#hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 10;
    max-width: 90%;
}

.hero-heading {
    font-size: 3.5rem;
    font-weight: bold;
    max-width: 900px;
    margin: 0 auto;
}

.hero-inner-text {
    font-size: 1.2rem;
    margin-top: 10px;
}

.cta-btn {
display: inline-block;
padding: 12px 24px;
font-weight: bold;
border-radius: 8px;
text-decoration: none;
transition: 0.3s ease-in-out;
}

.cta-btn:hover {
transform: scale(1.05);
}

.fade-in-left, .fade-in-right {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease-out, transform 1s ease-out;
}
#what-we-do {
    background-color: white;
}

.nav-link {
font-size: 1rem;
font-weight: 600;
transition: color 0.3s ease;
}

.nav-link:hover {
color: #facc15;
}

.nav-link-mobile {
display: block;
padding: 12px 16px;
font-size: 1rem;
font-weight: 600;
transition: color 0.3s ease;
}

.nav-link-mobile:hover {
color: #1e3a8a;
}

.sticky-nav {
position: fixed;
top: 0;
width: 100%;
background: var(--brand-dark-blue);
backdrop-filter: blur(10px);
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
padding: 10px 0;
transition: all 0.3s ease-in-out;
}

.sticky-nav .nav-link, .sticky-nav .nav-logo {
font-size: 0.9rem !important;
}

.nav-link.active {
color: #facc15 !important;
font-weight: 700;
}

#mobile-menu {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.mobile-menu-active #mobile-menu {
opacity: 1;
transform: translateY(0);
}

.mobile-menu-active #mobile-overlay {
opacity: 1;
}

.scroll-down {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
opacity: 0.8;
transition: opacity 0.3s ease-in-out;
}

.scroll-down:hover {
opacity: 1;
}

#cookie-modal {
opacity: 1;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.bg-white\/10 {
background: rgba(255, 255, 255, 0.1);
}

.backdrop-blur-lg {
backdrop-filter: blur(12px);
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.animate-fade-in {
animation: fadeIn 0.5s ease-in-out;
}

#accept-cookies {
cursor: pointer;
position: relative;
z-index: 10000;
}

@media (max-width: 768px) {
    .hero-heading {
    font-size: 2.2rem;
    max-width: 100%;
    padding: 0 10px;
    }

    .hero-inner-text {
    font-size: 1rem;
    padding: 0 15px;
    }

    .cta-btn {
    padding: 10px 20px;
    font-size: 1rem;
    }
}