/* 
Responsive Stylesheet for domain.com
Breakpoints:
- 320px (small mobile)
- 480px (mobile)
- 768px (tablet)
- 1024px (desktop)
- 1440px (large desktop)
*/

/* Small Mobile (320px) */
@media (max-width: 320px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-content {
        padding: 40px 0;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .btn {
        padding: 10px 20px;
    }
    
    .stats-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    /* About Section */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .stat-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }
    
    .stat-number {
        font-size: 1.5rem;
        margin-right: 10px;
        margin-bottom: 0;
    }
    
    /* Services section */
    .service-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .service-image {
        height: 160px;
    }
    
    .service-content h3 {
        font-size: 1.2rem;
    }
    
    .service-content p {
        font-size: 0.9rem;
    }
    
    /* Benefits section */
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Testimonials section */
    .testimonials-container {
        padding: 0 5px;
    }
    
    .testimonial {
        padding: 15px 12px;
    }
    
    .testimonial-text {
        font-size: 0.9rem;
    }
    
    .testimonial-text::before,
    .testimonial-text::after {
        font-size: 30px;
        opacity: 0.2;
    }
    
    /* Pricing Section */
    .pricing-card {
        padding: 15px 10px;
    }
    
    .pricing-name {
        font-size: 1.2rem;
    }
    
    .pricing-price {
        font-size: 1.8rem;
    }
    
    .pricing-features {
        padding-left: 0;
    }
    
    .pricing-features li {
        font-size: 0.85rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    footer {
        padding: 40px 0 20px;
    }
    
    footer .logo {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    footer h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .footer-links ul li {
        margin-bottom: 8px;
    }
    
    .copyright {
        padding-top: 20px;
        font-size: 0.8rem;
    }
    
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-content p {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    
    /* Header and Navigation */
    header {
        padding: 0;
    }
    
    header .container {
        padding: 10px 15px;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .logo {
        font-size: 1.4rem;
    }
    
    nav {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background-color: white;
        transition: left 0.3s ease;
        box-shadow: var(--shadow);
        z-index: 999;
    }
    
    nav.menu-open {
        left: 0;
    }
    
    nav ul {
        flex-direction: column;
        padding: 20px;
    }
    
    nav ul li {
        margin-bottom: 15px;
    }
    
    nav ul li a {
        font-size: 1rem;
        padding: 5px 0;
        display: block;
    }
    
    /* Grid layouts */
    .about-grid,
    .benefits-grid,
    .services-grid,
    .pricing-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    /* Sections spacing */
    section {
        padding: 50px 0;
    }
    
    section h2 {
        margin-bottom: 30px;
        font-size: 1.7rem;
    }
    
    /* Hero section */
    .hero {
        min-height: 70vh;
        padding-top: 60px;
    }
    
    .hero-content {
        padding: 0 15px;
    }
    
    .hero h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    .hero p {
        margin-bottom: 25px;
        font-size: 1rem;
    }
    
    /* About section */
    .about {
        padding: 40px 0;
    }
    
    .about-grid {
        gap: 30px;
    }
    
    .about-content p {
        font-size: 0.95rem;
        margin-bottom: 15px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .stat-item {
        padding: 15px 10px;
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
    
    .stat-label {
        font-size: 0.85rem;
    }
    
    /* Services section */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .service-card {
        max-width: 100%;
        margin: 0 auto;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        width: 100%;
    }
    
    .service-image {
        height: 180px;
    }
    
    .service-content {
        padding: 15px;
    }
    
    .service-content h3 {
        margin-bottom: 10px;
        font-size: 1.3rem;
    }
    
    .service-content p {
        font-size: 0.95rem;
    }
    
    /* Benefits section */
    .benefits {
        padding: 45px 0;
    }
    
    .benefits h2 {
        margin-bottom: 25px;
        color: white;
    }
    
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .benefit-item {
        padding: 20px 15px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .benefit-icon {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    
    .benefit-item h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
        color: white;
    }
    
    .benefit-item p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Testimonials */
    .testimonials {
        padding: 45px 0;
    }
    
    .testimonials h2 {
        margin-bottom: 25px;
    }
    
    .testimonials-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
        padding: 0 10px;
    }
    
    .testimonial {
        width: 100%;
        margin: 0;
        padding: 20px 15px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    }
    
    .testimonial-text {
        font-size: 0.95rem;
    }
    
    .testimonial-text::before,
    .testimonial-text::after {
        font-size: 30px;
    }
    
    .testimonial-author {
        font-size: 0.9rem;
        padding-top: 10px;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
    
    /* Form and other sections */
    .form-container {
        padding: 20px 15px;
        margin: 0 10px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-control {
        padding: 10px;
    }
    
    .checkbox-group {
        margin-bottom: 12px;
    }
    
    .checkbox-group input[type="checkbox"] {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }
    
    .checkbox-group label {
        font-size: 0.9rem;
    }
    
    /* Pricing */
    .pricing {
        padding: 45px 0;
    }
    
    .pricing h2 {
        margin-bottom: 25px;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 10px;
    }
    
    .pricing-card {
        padding: 20px 15px;
        margin-bottom: 20px;
        box-shadow: 0 3px 15px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.05);
    }
    
    .pricing-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    
    .pricing-name {
        font-size: 1.3rem;
        color: var(--color-secondary);
    }
    
    .pricing-price {
        font-size: 2rem;
        font-weight: bold;
    }
    
    .pricing-price span {
        font-size: 0.9rem;
        opacity: 0.7;
    }
    
    .pricing-features {
        margin-bottom: 20px;
        padding-left: 5px;
    }
    
    .pricing-features li {
        margin-bottom: 8px;
        font-size: 0.95rem;
        position: relative;
        padding-left: 20px;
    }
    
    .pricing-features li:before {
        left: 0;
        top: 4px;
    }
    
    .pricing-card .btn {
        width: 100%;
        padding: 12px;
    }
    
    /* FAQ */
    .faq-question {
        padding: 15px;
        font-size: 0.95rem;
    }
    
    .faq-item.active .faq-answer {
        padding: 15px;
    }
    
    /* Benefits */
    .benefit-item {
        padding: 20px 15px;
    }
}

/* Tablet (768px) */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    
    section {
        padding: 60px 0;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    nav {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 80%;
        height: calc(100vh - 80px);
        background-color: white;
        transition: left 0.3s ease;
        box-shadow: var(--shadow);
    }
    
    nav.menu-open {
        left: 0;
    }
    
    nav ul {
        flex-direction: column;
        padding: 30px;
    }
    
    nav ul li {
        margin-bottom: 20px;
    }
    
    /* Grid layouts */
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* About section - tablet */
    .about {
        padding: 55px 0;
    }
    
    .about-content {
        padding-right: 20px;
    }
    
    .about-content p {
        font-size: 0.95rem;
    }
    
    .stat-item {
        padding: 20px 15px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    /* Services section - tablet */
    .services {
        padding: 55px 0;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .service-card {
        max-width: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    
    .service-content {
        padding: 18px;
    }
    
    .service-content h3 {
        font-size: 1.3rem;
    }
    
    /* Benefits section - tablet */
    .benefits {
        padding: 55px 0;
    }
    
    .benefit-item {
        padding: 20px 15px;
    }
    
    .benefit-icon {
        font-size: 2.2rem;
        margin-bottom: 12px;
    }
    
    /* Testimonials - tablet */
    .testimonials {
        padding: 55px 0;
    }
    
    .testimonials-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 15px;
    }
    
    .testimonial {
        padding: 25px 20px;
    }
    
    .testimonial-text {
        font-size: 0.95rem;
    }
    
    /* Pricing - tablet */
    .pricing {
        padding: 55px 0;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .pricing-card {
        padding: 25px 15px;
        max-width: 100%;
    }
    
    .pricing-name {
        font-size: 1.4rem;
    }
    
    .pricing-features li {
        font-size: 0.9rem;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Cookie popup */
    .cookie-content {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    
    .cookie-content p {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    /* Improved navigation */
    header .container {
        padding: 15px;
    }
    
    .logo {
        font-size: 1.5rem;
    }
    
    nav ul li a {
        font-size: 1rem;
    }
    
    /* Policy pages */
    .policy-container {
        padding: 25px 20px;
    }
    
    .policy-container h1 {
        font-size: 1.8rem;
    }
    
    .policy-container h2 {
        font-size: 1.4rem;
    }
}

/* Desktop (1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }
    
    /* Ensure desktop is still properly formatted */
    .services-grid,
    .benefits-grid,
    .pricing-grid {
        gap: 25px;
    }
    
    .testimonials-container {
        gap: 25px;
    }
    
    /* Adjust hero for medium screens */
    .hero h1 {
        font-size: 2.8rem;
    }
    
    .hero-content {
        max-width: 550px;
    }
}

/* Medium Desktop (1200px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .container {
        max-width: 1140px;
    }
    
    /* Add breathing room */
    section {
        padding: 90px 0;
    }
    
    /* Desktop optimizations */
    .service-image {
        height: 220px;
    }
    
    .hero h1 {
        font-size: 3.5rem;
    }
    
    .testimonial {
        padding: 35px;
    }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
    }
    
    section {
        padding: 100px 0;
    }
    
    h1 {
        font-size: 4rem;
    }
    
    h2 {
        font-size: 3rem;
    }
    
    /* Enhanced desktop experience */
    .hero-content {
        max-width: 650px;
    }
    
    .service-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .service-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .pricing-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .btn {
        padding: 14px 28px;
    }
    
    .service-image {
        height: 240px;
    }
    
    .testimonial-text {
        font-size: 1.1rem;
    }
}

/* Ensure the menu toggle and visibility is properly handled */
@media (min-width: 769px) {
    nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        box-shadow: none !important;
        background: none !important;
    }
    
    .menu-toggle {
        display: none !important;
    }
}