*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
}

:root{

    --primary:#0D73C7;
    --primary-dark:#095FA6;

    --accent:#84C51A;

    --text:#1F2937;

    --white:#fff;

    --container:1200px;

}

.container{

    width:min(90%,var(--container));

    margin:auto;

}

.logo{

    width:300px;

    height:auto;

}

nav{

    display:flex;

    gap:40px;

}

nav a{

    color:var(--text);

}

nav a:hover{

    color:var(--primary);

}

.btn-primary{

    background:var(--accent);

    color:white;

    text-decoration:none;

    padding:14px 28px;

    border-radius:50px;

    font-weight:bold;

    transition:.3s;

    border:none;
    
    outline:none;

}

.btn-primary:hover{

    background:var(--primary);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 32px;

    border:2px solid var(--primary);

    border-radius:999px;

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:var(--primary);

    color:white;

}

.badge{

    display:inline-block;

    padding:14px 28px;

    background:#EAF8D2;

    color:var(--accent);

    border-radius:999px;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

/*=================================
 HERO
=================================*/

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-top:80px;

    background:var(--primary);

    text-align:center;

}

.hero .container{

    max-width:900px;

}

.hero h1{

    margin-top:20px;

    font-size:3.6rem;

    line-height:1.1;

    color:#fff;

    font-weight:800;

}

.hero p{

    margin:20px auto 0;

    max-width:700px;

    font-size:1.15rem;

    line-height:1.7;

    color:rgba(255,255,255,.82);

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:50px;

}

/*===============================
 HERO - CTA BUTTONS (pill outline)
================================*/

.hero-cta{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:45px;

}

.hero-cta a{

    border:2px solid #fff;

    color:#fff;

    padding:14px 32px;

    border-radius:999px;

    font-weight:600;

    font-size:1rem;

    white-space:nowrap;

    transition:.3s;

}

.hero-cta a:hover{

    background:var(--accent);

    border-color:var(--accent);

    color:#fff;

}

/*===============================
 HERO - SERVICE CARDS
================================*/

.hero-cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    max-width:1100px;

    margin:65px auto 0;

}

.hero-card{

    background:#fff;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    transition:.3s;

}

.hero-card:hover{

    transform:translateY(-8px);

}

.hero-card-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:#EAF8D2;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 18px;

    font-size:1.6rem;

    color:var(--accent);

}

.hero-card h3{

    color:var(--primary);

    font-size:1.15rem;

    font-weight:700;

    margin-bottom:8px;

}

.hero-card p{

    color:#6B7280;

    font-size:.92rem;

    line-height:1.5;

    margin:0;

}

/*===============================
 SERVICES
================================*/

.services{

    padding:120px 0;

    background:#F8FAFC;

}

.section-tag{

    display:inline-block;

    padding:12px 24px;

    background:#EAF8D2;

    color:var(--accent);

    border-radius:999px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:28px; 
}

.services h2{

    margin-top:25px;

    font-size:3rem;

    color:var(--primary);

}

.section-description{

    margin:20px auto 60px;

    max-width:700px;

    color:#6B7280;

    font-size:1.15rem;

}

.service-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.service-card{

    background:white;

    padding:45px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.3s;

}

.service-card:hover{

    transform:translateY(-8px);

}

.icon{

    font-size:3rem;

    margin-bottom:20px;

}

.service-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.service-card p{

    color:#6B7280;

    line-height:1.8;

}

/*=================================
ADDITIONAL SERVICES GRID
==================================*/

.service-grid-extra{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-top:35px;

}

.mini-service-card{

    background:#fff;

    padding:28px 16px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:.3s;

}

.mini-service-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.1);

}

.mini-service-card .icon-circle{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#EAF8D2;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 14px;

    font-size:1.25rem;

    color:var(--accent);

}

.mini-service-card h4{

    color:var(--primary);

    font-size:.98rem;

    font-weight:600;

    margin:0;

    line-height:1.4;

}

/*=================================
POPULAR SERVICES
==================================*/

.popular-services{

    margin-top:70px;

    text-align:center;

}

.popular-services span{

    display:block;

    margin-bottom:30px;

    font-size:1.1rem;

    font-weight:700;

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:2px;

}

.service-tags{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}

.tag{

    padding:14px 28px;

    border:2px solid #D9EFD1;

    border-radius:999px;

    background:white;

    color:var(--text);

    font-weight:600;

    transition:.3s;

    cursor:pointer;

}

.tag:hover{

    background:var(--primary);

    color:white;

    border-color:var(--primary);

    transform:translateY(-4px);

}

/*=================================
ABOUT STRIP
==================================*/

.about-strip{

    padding:90px 0;

    background:linear-gradient(135deg,#0D73C7,#0B5EA7);

    text-align:center;

}

.about-strip .container{

    max-width:900px;

}

.about-strip h2{

    margin:28px 0 25px;

    color:#fff;

    font-size:3rem;

    line-height:1.2;

}

.about-strip p{

    color:rgba(255,255,255,.90);

    font-size:1.15rem;

    line-height:1.9;

}

.white-tag{

    display:inline-block;

    background:rgba(255,255,255,.15);

    color:#fff;

}

/*=================================
WHY US
==================================*/

.why-us{

    padding:120px 0;

    background:#fff;

    text-align:center;

}

.benefits-grid{

    margin-top:90px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.benefit-card{

    padding:40px 30px;

    border-radius:25px;

    background:#fff;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.3s;

}

.benefit-card:hover{

    transform:translateY(-8px);

}

.benefit-icon{

    width:95px;

    height:95px;

    margin:auto;

    border-radius:50%;

    background:#EAF8D2;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2.2rem;

    margin-bottom:25px;

}

.why-us h2{

    margin-top:0;

    margin-bottom:25px;

    font-size:3rem;

     color:var(--primary);

}

.benefit-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.benefit-card p{

    color:#6B7280;

    line-height:1.8;

}

/*=================================
GALLERY
==================================*/

.gallery{

    padding:100px 0 80px;

    background:#F8FAFC;

    text-align:center;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.gallery-item{

    overflow:hidden;

    border-radius:25px;

    cursor:pointer;

    height:320px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.gallery-item.large{

    height:420px;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery h2{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:25px;

    line-height:1.15;

}

.gallery .section-description{

    max-width:720px;

    margin:0 auto 70px;

    font-size:1.15rem;

    line-height:1.8;

    color:#6B7280;

}

/*=================================
REVIEWS
==================================*/

.reviews{

    padding:120px 0;

    background:#fff;

    text-align:center;

}

.reviews-grid{

    margin-top:70px;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:30px;

    align-items:stretch;

}

.review-card{

    background:#fff;

    border-radius:25px;

    padding:40px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    transition:.35s;

}

.review-card:hover{

    transform:translateY(-8px);

}

.featured{

    text-align:left;

}

.stars{

    color:#84C51A;

    font-size:1.5rem;

    margin-bottom:25px;

}

.review-text{

    font-size:1.25rem;

    line-height:1.8;

    color:#4B5563;

    margin-bottom:35px;

}

.review-card p{

    line-height:1.8;

    color:#6B7280;

}

.review-card h4{

    color:var(--primary);

    margin-top:30px;

    margin-bottom:8px;

}

.review-card span{

    color:#94A3B8;

    font-size:.9rem;

}

.reviews h2{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:25px;

    line-height:1.15;

}

/*==================================
BOOKING
==================================*/

.booking{

    padding:120px 0;
    background:#F8FBFF;

}

.booking .section-header{

    max-width:760px;
    margin:0 auto 70px;
    text-align:center;

}

.booking .section-title{

    color:var(--primary);

}

.booking .section-description{

    max-width:720px;
    margin:20px auto 0;

}

.booking-form{

    background:#fff;
    border-radius:30px;
    padding:55px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.form-group{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:25px;

}

.input-wrap{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.input-wrap label{

    font-size:.78rem;
    font-weight:700;
    color:#6B7280;
    text-transform:uppercase;
    letter-spacing:.6px;

}

.input-wrap.full{

    margin-bottom:30px;

}

.booking-form input,
.booking-form select,
.booking-form textarea{

    width:100%;
    height:58px;

    border:1px solid #DDE5ED;
    border-radius:16px;

    padding:0 18px;

    font-size:15px;
    font-family:inherit;

    background:#fff;

    transition:.25s;

}

.booking h2{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:25px;

    line-height:1.15;

}

.booking-form textarea{

    height:160px;
    padding:18px;
    resize:vertical;

}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{

    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(13,115,199,.10);

}

.booking-form select{

    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230D73C7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 20px center;
    padding-right:46px;

}

.booking-form input[type="date"]{

    appearance:none;
    -webkit-appearance:none;

}

.booking-form input[type="date"]::-webkit-calendar-picker-indicator{

    cursor:pointer;
    opacity:.65;

}

/*==================================
SECTION TITLES
==================================*/

.form-title{

    margin:42px 0 20px;
    font-size:20px;
    font-weight:700;
    color:#111827;

}

/*==================================
SERVICES
==================================*/

.checkbox-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;

}

.service-option{

    position:relative;

    display:flex;
    align-items:center;
    gap:14px;

    padding:18px 22px 18px 52px;

    border:1px solid #E5EDF5;
    border-radius:18px;

    background:#fff;

    cursor:pointer;
    transition:.25s;

    font-size:16px;
    font-weight:500;
    color:#374151;

}

.service-option:hover{

    border-color:var(--primary);
    box-shadow:0 12px 28px rgba(13,115,199,.10);
    transform:translateY(-2px);

}

.service-option input{

    position:absolute;
    opacity:0;
    width:1px;
    height:1px;

}

.service-option::before{

    content:"";
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);

    width:20px;
    height:20px;

    border:2px solid #D9E3EE;
    border-radius:6px;
    background:#fff;

    transition:.2s;

}

.service-option:has(input:checked)::before{

    background:var(--accent);
    border-color:var(--accent);

}

.service-option:has(input:checked)::after{

    content:"";
    position:absolute;
    left:24px;
    top:47%;

    width:6px;
    height:11px;

    border:solid #fff;
    border-width:0 2px 2px 0;

    transform:translateY(-60%) rotate(45deg);

}

.service-option:has(input:checked){

    border-color:var(--accent);
    background:#F3FBEA;
    color:#1F2937;

}

/*==================================
FREQUENCY
==================================*/

.frequency-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:30px;

}

.frequency-option{

    position:relative;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    height:64px;

    padding-left:48px;

    border:1px solid #E5EDF5;
    border-radius:18px;

    background:#fff;

    cursor:pointer;
    transition:.25s;

    font-size:16px;
    font-weight:500;
    color:#374151;

}

.frequency-option:hover{

    border-color:var(--primary);
    box-shadow:0 12px 28px rgba(13,115,199,.10);

}

.frequency-option input{

    position:absolute;
    opacity:0;
    width:1px;
    height:1px;

}

.frequency-option::before{

    content:"";
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);

    width:20px;
    height:20px;

    border:2px solid #D9E3EE;
    border-radius:50%;
    background:#fff;

    transition:.2s;

}

.frequency-option::after{

    content:"";
    position:absolute;
    left:23px;
    top:50%;

    width:10px;
    height:10px;

    border-radius:50%;
    background:var(--accent);

    transform:translateY(-50%) scale(0);
    transition:.2s;

}

.frequency-option:has(input:checked)::before{

    border-color:var(--accent);

}

.frequency-option:has(input:checked)::after{

    transform:translateY(-50%) scale(1);

}

.frequency-option:has(input:checked){

    border-color:var(--accent);
    background:#F3FBEA;
    color:#1F2937;

}

/*==================================
BUTTON
==================================*/

.booking-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    width:100%;
    max-width:380px;

    margin:45px auto 0;

    padding:18px 28px;
    font-size:18px;

    cursor:pointer;

}

.booking-btn i{

    font-size:20px;

}

/*==================================
FOOTER
==================================*/

.footer{

    background:#0F172A;
    color:#fff;

    padding:80px 0 25px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

}

.footer-logo{

    width:190px;

    margin-bottom:20px;

}

.footer-text{

    color:#CBD5E1;

    line-height:1.8;

    margin-bottom:25px;

    max-width:320px;

}

.footer-contact p{

    color:#CBD5E1;

    margin-bottom:12px;

}

.footer h4{

    color:#fff;

    font-size:20px;

    margin-bottom:25px;

}

.footer ul{

    list-style:none;

}

.footer li{

    margin-bottom:14px;

    color:#CBD5E1;

}

.footer a{

    color:#CBD5E1;

    text-decoration:none;

    transition:.3s;

}

.footer a:hover{

    color:var(--accent);

}

.social-links{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    margin-top:60px;

    padding-top:25px;

    text-align:center;

    color:#94A3B8;

    font-size:15px;

}

/*==================================
HEADER
==================================*/

.header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:all .35s ease;

    background:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

    transition:all .35s ease;

}

/*==================================
HEADER ON SCROLL
==================================*/

.header.scrolled{

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.header.scrolled .container{

    padding:8px 0;

}

.header .logo{

    

    transition:.35s;

}

.header.scrolled .logo{

    width:165px;

}

body.menu-open{

    overflow:hidden;

}

.desktop-btn{

    transition:all .35s ease;

}

.header.scrolled .desktop-btn{

    padding:14px 28px;

    font-size:.95rem;

}

/*==================================================
RESPONSIVE - TABLETS
==================================================*/

@media (max-width:992px){

    /*--------------------
    GLOBAL
    --------------------*/

    .container{

        width:min(92%,1200px);

    }

    section{

        padding:90px 0 !important;

    }

    h1{

        font-size:4rem !important;

    }

    h2{

        font-size:2.5rem !important;

    }

    .section-description{

        max-width:700px;

        font-size:1.05rem;

    }

    /*--------------------
    HEADER
    --------------------*/

    .header .container{

        padding:20px 0;

        gap:20px;

    }

    .logo{

        width:220px;

    }

    nav{

        gap:24px;

    }

    nav a{

        font-size:.95rem;

    }

    .btn-primary{

        padding:12px 24px;

        font-size:15px;

    }

    /*--------------------
    HERO
    --------------------*/

    .hero{

        min-height:auto;

        padding-top:70px;

        padding-bottom:100px;

    }

    .hero h1{

        font-size:3rem !important;

    }

    .hero-cards{

        grid-template-columns:repeat(2,1fr);

        max-width:700px;

    }

    .hero p{

        font-size:1.15rem;

        max-width:650px;

    }

    .hero-buttons{

        gap:18px;

        margin-top:40px;

    }

    /*--------------------
    SERVICES
    --------------------*/

    .service-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .service-grid-extra{

        grid-template-columns:repeat(3,1fr);

    }

    .service-card{

        padding:35px;

    }

    .popular-services{

        margin-top:60px;

    }

    /*--------------------
    ABOUT
    --------------------*/

    .about-strip h2{

        font-size:2.6rem;

    }

    /*--------------------
    WHY US
    --------------------*/

    .benefits-grid{

        grid-template-columns:repeat(2,1fr);

        gap:25px;

    }

    .benefit-card{

        padding:35px;

    }

    /*--------------------
    GALLERY
    --------------------*/

    .gallery-grid{

        gap:18px;

    }

    .gallery-item{

        height:260px;

    }

    .gallery-item.large{

        height:340px;

    }

    /*--------------------
    REVIEWS
    --------------------*/

    .reviews-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .featured{

        text-align:center;

    }

    /*--------------------
    BOOKING
    --------------------*/

    .booking-form{

        padding:40px;

    }

    .form-group{

        grid-template-columns:repeat(2,1fr);

    }

    .checkbox-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .frequency-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .booking-btn{

        width:300px;

    }

    /*--------------------
    FOOTER
    --------------------*/

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

        gap:40px;

    }

}

/*==================================================
RESPONSIVE - TABLETS PEQUEÑAS / MOBILE
==================================================*/

@media (max-width:768px){

    /*--------------------
    GLOBAL
    --------------------*/

    section{

        padding:70px 0 !important;

    }

    .container{

        width:92%;

    }

    h1{

        font-size:3.2rem !important;

        line-height:1.15;

    }

    h2{

        font-size:2.2rem !important;

        line-height:1.2;

    }

    .section-description{

        font-size:1rem;

        margin:20px auto 40px;

    }

    /*--------------------
    HEADER
    --------------------*/

   .header .container{

    padding:16px 0;

}

    .logo{

        width:160px;
        display:block;

    }

  
    header .btn-primary{

        display:none;

    }

    /*--------------------
    HERO
    --------------------*/

  .hero{

    padding-top:50px;

    padding-bottom:70px;

}

    .badge{

        font-size:.8rem;

        padding:12px 22px;

    }

    .hero h1{

        margin-top:22px;
        font-size:2.4rem !important;
        line-height:1.15;
        letter-spacing:-1px;

    }

    .hero-cta{

        flex-direction:column;
        align-items:center;

    }

    .hero-cta a{

        width:100%;
        max-width:320px;
        text-align:center;

    }

    .hero-cards{

        grid-template-columns:1fr;
        max-width:400px;
        gap:16px;
        margin-top:45px;

    }

    .hero p{

        font-size:1rem;

        line-height:1.8;
        margin:28px auto 38px;
        max-width:340px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:16px;

        margin-top:35px;

    }

    .hero-buttons a{

        width:280px;

        justify-content:center;

    }

     .hero .badge{

        display:none !important;

    }

    /*--------------------
    SERVICES
    --------------------*/

    .service-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .service-grid-extra{

        grid-template-columns:repeat(2,1fr);

        gap:16px;

    }

    .service-card{

        padding:35px 28px;

    }

    .service-tags{

        gap:12px;

    }

    .tag{

        padding:12px 20px;

        font-size:.9rem;

    }

    /*--------------------
    ABOUT
    --------------------*/

    .about-strip{

        padding:70px 0;

    }

    .about-strip h2{

        font-size:2.2rem;

    }

    /*--------------------
    WHY US
    --------------------*/

    .benefits-grid{

        grid-template-columns:1fr;

    }

    .benefit-card{

        padding:35px;

    }

    /*--------------------
    GALLERY
    --------------------*/

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item,

    .gallery-item.large{

        height:300px;

    }

    /*--------------------
    REVIEWS
    --------------------*/

    .review-card{

        padding:30px;

    }

    .review-text{

        font-size:1.05rem;

    }

    /*--------------------
    BOOKING
    --------------------*/

    .booking-form{

        padding:30px;

    }

    .form-group{

        grid-template-columns:1fr;

        gap:16px;

    }

    .checkbox-grid{

        grid-template-columns:1fr;

    }

    .frequency-grid{

        grid-template-columns:1fr;

    }

    .booking-btn{

        width:100%;

    }

    /*--------------------
    FOOTER
    --------------------*/

    .footer{

        text-align:center;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .footer-logo{

        margin:0 auto 25px;

    }

    .footer-text{

        margin:0 auto 25px;

    }

    .social-links{

        align-items:center;

    }

}

/*==================================================
RESPONSIVE - MOBILE
==================================================*/

@media (max-width:576px){

    /*--------------------
    GLOBAL
    --------------------*/

    .container{

        width:94%;

    }

    section{

        padding:60px 0 !important;

    }

    h1{

        font-size:2.5rem !important;

        line-height:1.15;

        letter-spacing:-1px;

    }

    h2{

        font-size:1.9rem !important;

        line-height:1.25;

    }

    .section-tag{

        padding:10px 18px;

        font-size:.72rem;

        letter-spacing:1px;

        margin-bottom:20px;

    }

    .section-description{

        font-size:.95rem;

        line-height:1.7;

        margin:18px auto 35px;

    }

    /*--------------------
    HEADER
    --------------------*/

    .header .container{

        padding:15px 0;

    }

    .logo{

        width:150px;

    }

    nav{

        gap:14px;

    }

    nav a{

        font-size:.9rem;

    }

    /*--------------------
    HERO
    --------------------*/

    .hero{

        padding-top:40px;

        padding-bottom:60px;

    }

    .hero h1{

        font-size:2rem !important;

    }

    .hero-card{

        padding:26px 20px;

    }

    .badge{

        font-size:.72rem;

        padding:10px 18px;

    }

    .hero p{

        font-size:.95rem;

        margin-top:24px;

    }

    .hero-buttons{

        margin-top:30px;

    }

    .hero-buttons a{

        width:100%;

        max-width:280px;

        height:52px;

        font-size:15px;

    }

    /*--------------------
    SERVICES
    --------------------*/

    .service-card{

        padding:28px 24px;

        border-radius:20px;

    }

    .icon{

        font-size:2.5rem;

    }

    .service-card h3{

        font-size:1.2rem;

    }

    .popular-services{

        margin-top:45px;

    }

    .tag{

        width:100%;

        text-align:center;

    }

    /*--------------------
    ABOUT
    --------------------*/

    .about-strip{

        padding:60px 0;

    }

    .about-strip h2{

        font-size:1.9rem;

    }

    .about-strip p{

        font-size:.95rem;

    }

    /*--------------------
    WHY US
    --------------------*/

    .benefit-card{

        padding:30px 24px;

    }

    .benefit-icon{

        width:75px;

        height:75px;

        font-size:1.8rem;

    }

    /*--------------------
    GALLERY
    --------------------*/

    .gallery-item,

    .gallery-item.large{

        height:240px;

        border-radius:18px;

    }

    /*--------------------
    REVIEWS
    --------------------*/

    .review-card{

        padding:24px;

        border-radius:20px;

    }

    .review-text{

        font-size:1rem;

        margin-bottom:25px;

    }

    .stars{

        font-size:1.2rem;

    }

    /*--------------------
    BOOKING
    --------------------*/

    .booking-form{

        padding:22px;

        border-radius:22px;

    }

    .booking-form input,

    .booking-form select,

    .booking-form textarea{

        height:54px;

        font-size:14px;

    }

    .booking-form textarea{

        height:140px;

    }

    .form-title{

        font-size:18px;

    }

    .service-option{

        min-height:58px;

        font-size:15px;

        padding:14px 16px 14px 46px;

    }

    .frequency-option{

        min-height:58px;

        font-size:15px;

        padding-left:44px;

    }

    .service-option::before,

    .frequency-option::before{

        left:14px;

    }

    .service-option::after{

        left:19px;

    }

    .frequency-option::after{

        left:19px;

    }

    .booking-btn{

        width:100%;

        height:56px;

        font-size:16px;

    }

    /*--------------------
    FOOTER
    --------------------*/

    .footer{

        padding:60px 0 20px;

    }

    .footer-logo{

        width:160px;

    }

    .footer h4{

        font-size:18px;

    }

    .footer-text,

    .footer li,

    .footer a,

    .footer-contact p{

        font-size:.95rem;

    }

    .footer-bottom{

        margin-top:40px;

        font-size:.85rem;

    }

}

/*==============================
MOBILE MENU
==============================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:#fff;

    border-radius:12px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    color:var(--primary);

    font-size:22px;

    cursor:pointer;

    transition:.25s;

}

.menu-toggle:hover{

    transform:translateY(-2px);

}

@media(max-width:768px){

    .desktop-btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .nav-menu{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        background:#fff;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        box-shadow:-10px 0 40px rgba(0,0,0,.15);

        transition:.35s;

        z-index:999;

    }

    .nav-menu.active{

        right:0;

    }

    .nav-menu a{

        font-size:20px;

    }

}