:root {

    --primary-color: #f0c27b;

    --secondary-color: #d59b6a;

    --background-color: #f4e8c8;

    --background-light-color: #fcf5e8;

    --text-color: #4a4a4a;

    --text-light-color: #6b6b6b;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {



    font-family: 'Arial', sans-serif;

    line-height: 1.6;

    color: var(--text-color);

    background-color: #FFFFFF;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Navigation */

.navbar {

    background-color: white;

    padding: 1rem 0;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

}



.navbar .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--primary-color);

    text-decoration: none;

}



.nav-links a {

    color: var(--text-color);

    text-decoration: none;

    margin-left: 2rem;

    transition: color 0.3s ease;

}



.nav-links a:hover {

    color: var(--primary-color);

}



/* Hero Section */

.hero {

    padding: 120px 0 80px;

    background-color: var(--background-light-color);

}



.hero .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.hero h1 {

    font-size: 3.5rem;

    margin-bottom: 1.5rem;

    line-height: 1.2;

}



.hero p {

    font-size: 1.25rem;

    color: var(--text-light-color);

    margin-bottom: 2rem;

}



.hero-image img {

    width: 100%;

    border-radius: 10px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.1);

}



/* Buttons */

.cta-button {

    background-color: var(--primary-color);

    color: white;

    padding: 1rem 2rem;

    border: none;

    border-radius: 50px;

    font-size: 1.1rem;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.cta-button:hover {

    background-color: var(--secondary-color);

}



/* Features Section */

.features {

    padding: 80px 0;

    background-color: white;

}



.features h2 {

    text-align: center;

    font-size: 2.5rem;

    margin-bottom: 3rem;

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

}



.feature-card {

    padding: 2rem;

    text-align: center;

    background-color: var(--background-light-color);

    border-radius: 10px;

    transition: transform 0.3s ease;

}



.feature-card:hover {

    transform: translateY(-5px);

}



.feature-card i {

    font-size: 2.5rem;

    color: var(--primary-color);

    margin-bottom: 1rem;

}



/* Responsive Design */

@media (max-width: 768px) {

    .hero .container {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .nav-links {

        display: none;

    }



    .hero h1 {

        font-size: 2.5rem;

    }

}

/* ... (previous styles remain the same until benefits section) ... */



/* Benefits Section */

.benefits {

    padding: 100px 0;

    background: linear-gradient(135deg, var(--background-light-color) 0%, white 100%);

}



.benefits h2 {

    text-align: center;

    font-size: 2.5rem;

    margin-bottom: 3rem;

    color: var(--text-color);

}



.benefits-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2.5rem;

    padding: 1rem;

}



.benefit-card {

    background: white;

    border-radius: 20px;

    padding: 2.5rem 2rem;

    text-align: left;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.benefit-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.3s ease;

}



.benefit-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.1);

}



.benefit-card:hover::before {

    transform: scaleX(1);

}



.benefit-card i {

    font-size: 2.5rem;

    color: var(--primary-color);

    margin-bottom: 1.5rem;

    display: inline-block;

    transition: transform 0.3s ease;

}



.benefit-card:hover i {

    transform: scale(1.1);

}



.benefit-card h3 {

    font-size: 1.5rem;

    margin-bottom: 1rem;

    color: var(--text-color);

}



.benefit-card p {

    color: var(--text-light-color);

    line-height: 1.7;

    margin-bottom: 1.5rem;

}



.benefit-stats {

    display: flex;

    align-items: center;

    margin-top: 1.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid rgba(0,0,0,0.1);

}



.stat {

    flex: 1;

}



.stat-number {

    font-size: 1.8rem;

    font-weight: bold;

    color: var(--primary-color);

    margin-bottom: 0.5rem;

}



.stat-label {

    font-size: 0.9rem;

    color: var(--text-light-color);

}



/* Enhanced Mobile Responsiveness */

@media (max-width: 768px) {

    /* Navigation */

    .navbar {

        padding: 1rem;

    }



    .nav-links {

        position: fixed;

        top: 70px;

        left: 0;

        width: 100%;

        background: white;

        padding: 1rem;

        box-shadow: 0 2px 4px rgba(0,0,0,0.1);

        display: none;

        flex-direction: column;

        align-items: center;

    }



    .nav-links.active {

        display: flex;

    }



    .nav-links a {

        margin: 1rem 0;

        font-size: 1.1rem;

    }



    .menu-toggle {

        display: block;

        font-size: 1.5rem;

        color: var(--text-color);

        cursor: pointer;

    }



    /* Hero Section */

    .hero {

        padding: 100px 0 60px;

        text-align: center;

    }



    .hero h1 {

        font-size: 2.5rem;

    }



    .hero p {

        font-size: 1.1rem;

    }



    /* Benefits Section */

    .benefits {

        padding: 60px 0;

    }



    .benefits h2 {

        font-size: 2rem;

        margin-bottom: 2rem;

    }



    .benefits-grid {

        gap: 1.5rem;

        padding: 0.5rem;

    }



    .benefit-card {

        padding: 2rem 1.5rem;

    }



    .benefit-stats {

        flex-direction: column;

        text-align: center;

    }



    .stat {

        margin: 1rem 0;

    }



    /* Features Section */

    .features-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }



    /* Pricing Section */

    .pricing-cards {

        grid-template-columns: 1fr;

        gap: 1.5rem;

        padding: 0 1rem;

    }

}



/* Touch Device Optimizations */

@media (hover: none) {

    .benefit-card:hover {

        transform: none;

    }



    .benefit-card::before {

        transform: scaleX(1);

    }



    .cta-button:hover {

        animation: none;

    }

}



/* Cookie Banner Container */

#cookie-banner {

    display: none; /* Hidden by default */

    position: fixed;

    bottom: 0;

    width: 100%;

    background: linear-gradient(135deg, var(--background-light-color) 0%, white 100%);

    color: var(--text-color);

    text-align: center;

    padding: 10px 7px;

    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);

    z-index: 1000;

    font-family: 'Arial', sans-serif;

    font-size: 16px;

}



/* Inner Container for Content */

.cookie-container {

    max-width: 800px;

    margin: 0 auto;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

}



/* Text Styling */

.cookie-container p {

    margin: 0;

    flex: 1;

    padding-right: 15px;

    color: var(--text-color);

    font-size: 15px;

}



/* Button Styling */

.cookie-container button {

    margin: 5px;

    padding: 10px 20px;

    border: none;

    border-radius: 25px;

    cursor: pointer;

    font-size: 14px;

    font-weight: bold;

    transition: all 0.3s ease;

}



/* Accept Button */

#accept-cookies {

    background-color: var(--primary-color);

    color: white;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



#accept-cookies:hover {

    background-color: var(--secondary-color);

}



/* Decline Button */

#decline-cookies {

    background-color: white;

    color: var(--primary-color);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    border: 1px solid var(--primary-color);

}



#decline-cookies:hover {

    background-color: var(--primary-color);

    color: white;

}



/* Responsive Layout for Smaller Screens */

@media (max-width: 768px) {

    .cookie-container {

        flex-direction: column;

        text-align: center;

    }



    .cookie-container p {

        margin-bottom: 15px;

        padding-right: 0;

    }



    .cookie-container button {

        width: 100%;

    }

}