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

.services-hero{

    position:relative;

    width:100%;

    margin-top:110px;

    min-height:760px;

    background-image:url("../images/services/services-hero.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.services-hero-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        linear-gradient(
            rgba(0,0,0,.42),
            rgba(0,0,0,.42)
        );

}

.services-hero-content{

    width:100%;

    max-width:1400px;

    padding:0 60px;

    color:#fff;

}

.services-label{

    display:inline-block;

    margin-bottom:20px;

    font-size:14px;

    letter-spacing:4px;

    text-transform:uppercase;

    opacity:.85;

}

.services-hero h1{

    max-width:700px;

    margin:0;

    font-size:64px;

    font-weight:300;

    line-height:1.1;

}

.services-hero p{

    max-width:620px;

    margin:28px 0 42px;

    font-size:20px;

    line-height:1.8;

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

}

.services-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:220px;

    height:58px;

    border-radius:999px;

    background:#ffffff;

    color:#222;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.35s;

}

.services-btn:hover{

    transform:translateY(-4px);

}

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

.services-navigation{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    margin:45px auto 60px;

    flex-wrap:nowrap;

}

.services-navigation a{

    display:flex;

    justify-content:center;

    align-items:center;

    width:260px;

    height:120px;

    background:#fff;

    border-radius:28px;

    text-decoration:none;

    color:#2d2d2d;

    font-size:22px;

    font-weight:500;

    text-align:center;

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

    transition:.35s;

}

.services-navigation a:hover{

    transform:translateY(-6px);

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

}

/* =======================================================
   SERVICE SECTION
======================================================= */

.service-section{

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;

    gap:50px;

    max-width:1450px;

    margin:40px auto;

    padding:0 40px;

}

.service-section.reverse{

    direction:rtl;

}

.service-section.reverse>*{

    direction:ltr;

}

.service-image{

    width:100%;

    height:560px;

    background:#f4f4f4;

    border-radius:32px;

    overflow:hidden;

    box-shadow:
        0 18px 60px rgba(0,0,0,.06);

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s;

}

.service-section:hover .service-image img{

    transform:scale(1.03);

}

.service-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.service-tag{

    display:inline-flex;

    align-self:flex-start;

    margin-bottom:20px;

    padding:8px 18px;

    border-radius:999px;

    background:#f6f2ef;

    color:#9a7a6b;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

}

.service-content h2{

    margin:0 0 28px;

    font-size:52px;

    font-weight:300;

    line-height:1.15;

    color:#2c2c2c;

}

.service-description{

    margin:0 0 22px;

    font-size:18px;

    line-height:1.9;

    color:#646464;

}

/* =======================================================
   BENEFITS
======================================================= */

.service-benefits{

    display:grid;

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

    gap:20px;

    margin:28px 0;

}

.benefit-card{

    padding:28px;

    background:#ffffff;

    border-radius:24px;

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

    transition:
        transform .35s,
        box-shadow .35s;

}

.benefit-card:hover{

    transform:translateY(-6px);

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

}

.benefit-card span{

    display:block;

    margin-bottom:16px;

    font-size:14px;

    letter-spacing:2px;

    color:#b79a8b;

}

.benefit-card h3{

    margin:0 0 10px;

    font-size:20px;

    font-weight:500;

    color:#2c2c2c;

}

.benefit-card p{

    margin:0;

    font-size:16px;

    line-height:1.7;

    color:#666;

}

/* =======================================================
   PRICE CARD
======================================================= */

.service-price-card{

    margin:28px 0 20px;

    padding:34px;

    background:#ffffff;

    border-radius:30px;

    box-shadow:0 18px 50px rgba(0,0,0,.05);

}

.price-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

.price-text{

    display:flex;

    flex-direction:column;

}

.price-text span{

    font-size:18px;

    font-weight:500;

    color:#2b2b2b;

}

.price-text small{

    margin-top:6px;

    font-size:15px;

    color:#8a8a8a;

}

.price-divider{

    height:1px;

    margin:26px 0;

    background:#ececec;

}

.price-free{

    font-size:26px;

    font-weight:600;

    color:#6c8b68;

}

.price-value{

    font-size:26px;

    font-weight:600;

    color:#b77d86;

}

/* =======================================================
   CLEANING
======================================================= */

.cleaning-grid{

    display:grid;

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

    gap:16px;

    margin:26px 0;

}

.cleaning-item{

    display:flex;

    align-items:center;

    padding:20px 24px;

    background:#ffffff;

    border-radius:18px;

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

    transition:.35s;

}

.cleaning-item::before{

    content:"✓";

    margin-right:14px;

    color:#b77d86;

    font-weight:600;

}

.cleaning-item:hover{

    transform:translateY(-4px);

}

.service-note-card{

    margin-top:20px;

    padding:28px;

    border-radius:24px;

    background:#f6f2ef;

    color:#5f5f5f;

    font-size:17px;

    line-height:1.8;

}

/* =======================================================
   UPHOLSTERY
======================================================= */

.upholstery-services{

    display:grid;

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

    gap:18px;

    margin:26px 0;

}

.upholstery-item{

    padding:20px 24px;

    background:#ffffff;

    border-radius:18px;

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

    transition:.35s;

}

.upholstery-item:hover{

    transform:translateY(-5px);

}

.materials-card{

    margin-top:20px;

    padding:40px;

    border-radius:30px;

    background:#2c2c2c;

    color:#ffffff;

}

.materials-count{

    display:block;

    margin-bottom:12px;

    font-size:64px;

    font-weight:300;

    line-height:1;

}

.materials-card h3{

    margin:0 0 16px;

    font-size:28px;

    font-weight:400;

}

.materials-card p{

    margin:0;

    font-size:17px;

    line-height:1.8;

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

}

/* =======================================================
   FEATURES
======================================================= */

.services-features{

    max-width:1450px;

    margin:70px auto;

    padding:0 40px;

}

.features-header{

    text-align:center;

    margin-bottom:40px;

}

.features-header span{

    display:block;

    margin-bottom:16px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:14px;

    color:#b77d86;

}

.features-header h2{

    margin:0;

    font-size:54px;

    font-weight:300;

    color:#2c2c2c;

}

.features-header p{

    max-width:760px;

    margin:30px auto 0;

    font-size:18px;

    line-height:1.8;

    color:#6b6b6b;

}

.features-grid{

    display:grid;

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

    gap:28px;

}

.feature-card{

    padding:42px 34px;

    background:#ffffff;

    border-radius:30px;

    text-align:center;

    box-shadow:0 18px 50px rgba(0,0,0,.05);

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

}

.feature-card span{

    display:block;

    margin-bottom:22px;

    font-size:52px;

    font-weight:300;

    color:#b77d86;

}

.feature-card h3{

    margin:0 0 16px;

    font-size:24px;

    font-weight:500;

}

.feature-card p{

    margin:0;

    line-height:1.8;

    color:#6a6a6a;

}

/* =======================================================
   CTA
======================================================= */

.services-cta{

    position:relative;

    max-width:1450px;

    height:600px;

    margin:50px auto 80px;

    border-radius:36px;

    overflow:hidden;

    background:
        linear-gradient(rgba(25,25,25,.60), rgba(25,25,25,.60)),
        url("../images/services/services-cta.jpg")
        center/cover no-repeat;

}

.services-cta-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px;

}

.services-cta-label{

    margin-bottom:18px;

    letter-spacing:4px;

    text-transform:uppercase;

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

    font-size:14px;

}

.services-cta h2{

    margin:0;

    color:#ffffff;

    font-size:60px;

    font-weight:300;

}

.services-cta p{

    max-width:760px;

    margin:30px 0 46px;

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

    font-size:20px;

    line-height:1.9;

}

.services-cta .services-btn{

    background:#ffffff;

    color:#2d2d2d;

}

.services-cta .services-btn:hover{

    transform:translateY(-4px);

    background:#f5f5f5;

}

.services-cta{

    display:flex;

    align-items:center;

    justify-content:center;

}

.services-cta-overlay{

    width:100%;

    height:100%;

}

.services-cta{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 1450px !important;
    min-width: 1450px !important;
    height: 600px !important;
    margin: 40px auto !important;
    overflow: hidden !important;
    flex: none !important;
}
.services-cta{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 1450px !important;
    min-width: 1450px !important;
    height: 600px !important;
    margin: 40px auto !important;
    overflow: hidden !important;
    flex: none !important;
}