/* CSS Reset and Base Styles */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #ffffff;
    line-height: 1.6;
}

div,
section,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
a,
button,
input,
textarea,
span,
img,
header,
footer,
nav,
article,
aside {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #111;
    margin-top: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.cta-button {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border: 2px solid #000;
}

.cta-button:hover {
    background-color: #fff;
    color: #000;
}

.underline {
    height: 3px;
    width: 60px;
    background-color: #000;
    margin: 10px auto 30px;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
}

/* Advertisement Header */
.ad-header {
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px 20px;
    font-size: 0.85rem;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
}

.ad-header p {
    margin: 0;
}

/* Page Loader */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.loader-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-text {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #000;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Navigation */
.main-header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: #000;
    letter-spacing: -1px;
}

.desktop-nav {
    display: flex;
    gap: 30px;
}

.desktop-nav a {
    font-weight: 500;
    color: #333;
    position: relative;
}

.desktop-nav a:hover {
    color: #000;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #000;
    transition: width 0.3s;
}

.desktop-nav a:hover::after {
    width: 100%;
}

.header-cta {
    display: block;
}

.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    z-index: 1001;
    /* Ensure distinct from other elements but managed by media query */
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #000;
    transition: all 0.3s ease;
}

/* Mobile Menu Overlay - Robust Drawer Implementation */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semitransparent backdrop */
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

/* The actual menu panel (drawer) */
.mobile-nav {
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    /* 75% of device width as requested */
    height: 100%;
    background-color: #fff;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    padding-left: 30px;
    align-items: flex-start;
    /* Left align items in drawer */
    gap: 25px;
}

.mobile-menu-overlay.active .mobile-nav {
    transform: translateX(0);
}

.close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    /* Inside the drawer area visually because drawer is right-aligned */
    font-size: 2.5rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2002;
    /* Above drawer */
    color: #000;
    /* Since close-menu is sibling to mobile-nav in HTML, but fixed inside overlay container, 
       it stays in place. But we want it to slide? 
       If it's sibling, it won't slide with .mobile-nav. 
       However, simplified approach: keep it fixed on the overlay. 
       Since overlay covers screen, button appears at top right of screen. 
       Drawer is at right of screen. So button appears ON TOP of drawer.
       This is acceptable and standard. */
    display: none;
    /* Hidden by default, shown on mobile */
}

.mobile-nav a {
    font-size: 1.2rem;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    width: 80%;
    padding-bottom: 10px;
    display: block;
}

.mobile-cta {
    margin-top: 20px;
    width: 80%;
    text-align: center;
}

/* Hero Section */
.hero-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.subheadline {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
}

.hero-features {
    margin-bottom: 40px;
}

.hero-features li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.hero-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #000;
    font-weight: bold;
}

.hero-cta {
    padding: 15px 30px;
    font-size: 1.1rem;
}

.hero-image-wrapper {
    position: relative;
}

.hero-img {
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.hero-img:hover {
    transform: translateY(-5px);
}

/* About Section */
.about-section {
    background-color: #fff;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #444;
}

.about-image img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Why Us Section */
.why-us-section {
    background-color: #f8f8f8;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-card .icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.feature-card p {
    color: #666;
    font-size: 0.95rem;
}

/* Testimonials Section */
.testimonials-section {
    background-color: #fff;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: #fafafa;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.stars {
    color: #ffd700;
    /* Gold for stars */
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.review-text {
    font-style: italic;
    color: #444;
    margin-bottom: 20px;
}

.author {
    font-weight: 700;
    text-align: right;
    color: #000;
}

/* FAQ Section */
.faq-section {
    background-color: #fff;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px 0;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question:hover {
    color: #555;
}

.toggle-icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding-bottom: 20px;
    color: #555;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    /* Adjust as needed */
}

.faq-item.active .toggle-icon {
    transform: rotate(45deg);
}

/* Footer */
.main-footer {
    background-color: #111;
    color: #fff;
    padding: 80px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 60px;
}

.footer-column h3 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 25px;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    display: inline-block;
}

.footer-column p {
    color: #bbb;
    margin-bottom: 10px;
}

.footer-column a {
    color: #bbb;
}

.footer-column a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-disclaimer-box {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 20px;
    border: 1px solid #333;
    color: #888;
    font-size: 0.9rem;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #222;
    padding-top: 20px;
    color: #666;
    font-size: 0.85rem;
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: -100%;
    /* Hidden by default */
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    padding: 20px;
    transition: bottom 0.5s ease;
}

.cookie-banner.show {
    bottom: 0;
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cookie-content h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.cookie-content p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    flex: 1;
    min-width: 200px;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.btn-primary,
.btn-secondary {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    border-radius: 4px;
}

.btn-primary {
    background-color: #000;
    color: #fff;
}

.btn-secondary {
    background-color: #eee;
    color: #333;
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10001;
    /* Above everything */
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: #fff;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    border-radius: 8px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #aaa;
}

.close-modal:hover {
    color: #000;
}

/* Responsive Media Queries for Mobile/Tablet */
@media (max-width: 900px) {

    .hero-grid,
    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .hero-image-wrapper {
        order: 1;
    }

    .desktop-nav,
    .header-cta {
        display: none;
    }

    .hamburger-menu {
        display: flex;
    }

    .ad-header {
        font-size: 0.75rem;
    }

    .close-menu {
        display: block;
        /* Show close menu X on mobile */
    }
}

@media (max-width: 600px) {
    .section {
        padding: 60px 0;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .feature-card {
        padding: 30px 20px;
    }
}