/* =========================================================

   SECTION CLEANING DETAILS

========================================================= */



.section-cleaning-details{



    position:relative;



    overflow:hidden;



    background:#020817;



    padding:16px;



}



/* =========================================================

   CONTAINER

========================================================= */



.section-cleaning-details__container{



    max-width:95%;



    margin:0 auto;



    display:grid;



    grid-template-columns:1.45fr 360px;



    gap:14px;



    align-items:start;



}



/* =========================================================

   LEFT / RIGHT

========================================================= */



.section-cleaning-details__left,

.section-cleaning-details__right{



    background:

        linear-gradient(

            180deg,

            rgba(6,18,48,0.96),

            rgba(4,13,35,0.98)

        );



    border:1px solid rgba(255,255,255,0.05);



    border-radius:16px;



    padding:16px;



}



/* =========================================================

   TITLE

========================================================= */



.section-cleaning-details__title{



    color:#ffffff;



    font-size:14px;



    font-weight:700;



    margin-bottom:16px;



}



/* =========================================================

   SERVICES

========================================================= */



.section-cleaning-details__services{



    display:grid;



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



    gap:12px;



    margin-bottom:14px;



}



/* =========================================================

   SERVICE

========================================================= */



.section-cleaning-details__service{



    background:

        linear-gradient(

            180deg,

            rgba(8,24,60,0.95),

            rgba(5,17,45,0.98)

        );



    border:1px solid rgba(255,255,255,0.04);



    border-radius:14px;



    padding:14px;



    min-height:155px;



}



.section-cleaning-details__service-icon{



    width:42px;

    height:42px;



    border-radius:12px;



    background:

        linear-gradient(

            180deg,

            rgba(37,99,235,0.22),

            rgba(37,99,235,0.08)

        );



    display:flex;



    align-items:center;



    justify-content:center;



    margin-bottom:14px;



}



.section-cleaning-details__service-icon svg{



    width:18px;

    height:18px;



    color:#3b82f6;



}



.section-cleaning-details__service h3{



    color:#ffffff;



    font-size:13px;



    line-height:1.5;



    margin-bottom:10px;



}



.section-cleaning-details__service p{



    color:rgba(255,255,255,0.68);



    font-size:11px;



    line-height:1.8;



}



/* =========================================================

   BOTTOM

========================================================= */



.section-cleaning-details__bottom{



    display:grid;



    grid-template-columns:1fr 0.8fr 0.9fr;



    gap:14px;



    margin-bottom:14px;



}



/* =========================================================

   CARD

========================================================= */



.section-cleaning-details__card{



    background:

        linear-gradient(

            180deg,

            rgba(8,24,60,0.95),

            rgba(5,17,45,0.98)

        );



    border:1px solid rgba(255,255,255,0.04);



    border-radius:14px;



    padding:14px;



}



.section-cleaning-details__card-title{



    color:#ffffff;



    font-size:13px;



    font-weight:700;



    margin-bottom:14px;



}



/* =========================================================

   BEFORE AFTER

========================================================= */



.section-cleaning-details__before-after{



    display:grid;



    grid-template-columns:1fr 1fr;



    gap:10px;



    margin-bottom:14px;



}



.section-cleaning-details__before,

.section-cleaning-details__after{



    position:relative;



}



.section-cleaning-details__before span,

.section-cleaning-details__after span{



    position:absolute;



    top:8px;

    left:8px;



    z-index:2;



    font-size:10px;



    background:rgba(0,0,0,0.5);



    color:#ffffff;



    padding:4px 8px;



    border-radius:999px;



}



.section-cleaning-details__before img,

.section-cleaning-details__after img{



    width:100%;



    border-radius:10px;



    display:block;



}



/* =========================================================

   TEMPERATURES

========================================================= */



.section-cleaning-details__temperatures{



    display:flex;



    align-items:center;



    justify-content:space-between;



    gap:10px;



}



.section-cleaning-details__temperatures strong{



    display:block;



    color:#ef4444;



    font-size:28px;



    margin-bottom:4px;



}



.section-cleaning-details__green{



    color:#34d399 !important;



}



.section-cleaning-details__temperatures span{



    color:rgba(255,255,255,0.62);



    font-size:10px;



}



.section-cleaning-details__temperatures svg{



    width:18px;

    height:18px;



    color:#3b82f6;



}



/* =========================================================

   FREQUENCY

========================================================= */



.section-cleaning-details__frequency{



    display:flex;



    gap:14px;



    margin-bottom:14px;



}



.section-cleaning-details__frequency-icon{



    width:44px;

    height:44px;



    border-radius:12px;



    background:

        linear-gradient(

            180deg,

            rgba(37,99,235,0.22),

            rgba(37,99,235,0.08)

        );



    display:flex;



    align-items:center;



    justify-content:center;



    flex-shrink:0;



}



.section-cleaning-details__frequency-icon svg{



    width:18px;

    height:18px;



    color:#3b82f6;



}



.section-cleaning-details__frequency p{



    color:rgba(255,255,255,0.72);



    font-size:11px;



    line-height:1.9;



}



/* =========================================================

   WARNING

========================================================= */



.section-cleaning-details__warning{



    display:flex;



    gap:12px;



    padding:12px;



    border-radius:12px;



    background:rgba(255,255,255,0.03);



}



.section-cleaning-details__warning-icon{



    width:34px;

    height:34px;



    border-radius:999px;



    border:1px solid rgba(255,255,255,0.08);



    display:flex;



    align-items:center;



    justify-content:center;



    flex-shrink:0;



}



.section-cleaning-details__warning-icon svg{



    width:16px;

    height:16px;



    color:#ffffff;



}



.section-cleaning-details__warning strong{



    display:block;



    color:#ffffff;



    font-size:11px;



    margin-bottom:4px;



}



.section-cleaning-details__warning p{



    color:rgba(255,255,255,0.66);



    font-size:10px;



    line-height:1.7;



}



/* =========================================================

   STEPS

========================================================= */



.section-cleaning-details__steps{



    display:flex;



    flex-direction:column;



    gap:12px;



}



.section-cleaning-details__step{



    display:flex;



    gap:12px;



}



.section-cleaning-details__step span{



    width:26px;

    height:26px;



    border-radius:999px;



    background:#2563eb;



    color:#ffffff;



    font-size:11px;



    font-weight:700;



    display:flex;



    align-items:center;



    justify-content:center;



    flex-shrink:0;



}



.section-cleaning-details__step strong{



    display:block;



    color:#ffffff;



    font-size:11px;



    margin-bottom:4px;



}



.section-cleaning-details__step p{



    color:rgba(255,255,255,0.66);



    font-size:10px;



    line-height:1.7;



}



/* =========================================================

   CTA

========================================================= */



.section-cleaning-details__cta{



    display:flex;



    align-items:center;



    justify-content:space-between;



    gap:14px;



    padding:14px;



    border-radius:14px;



    background:

        linear-gradient(

            90deg,

            rgba(8,24,60,0.95),

            rgba(5,17,45,0.98)

        );



    border:1px solid rgba(255,255,255,0.04);



}



.section-cleaning-details__cta-left{



    display:flex;



    align-items:center;



    gap:14px;



}



.section-cleaning-details__cta-icon{



    width:48px;

    height:48px;



    border-radius:999px;



    border:2px solid rgba(59,130,246,0.6);



    display:flex;



    align-items:center;



    justify-content:center;



}



.section-cleaning-details__cta-icon svg{



    width:20px;

    height:20px;



    color:#ffffff;



}



.section-cleaning-details__cta strong{



    display:block;



    color:#ffffff;



    font-size:13px;



    margin-bottom:4px;



}



.section-cleaning-details__cta p{



    color:rgba(255,255,255,0.66);



    font-size:11px;



}



.section-cleaning-details__cta-button{



    height:40px;



    padding:0 18px;



    border-radius:10px;



    background:

        linear-gradient(

            90deg,

            #2563eb,

            #3b82f6

        );



    display:inline-flex;



    align-items:center;



    gap:10px;



    text-decoration:none;



    color:#ffffff;



    font-size:12px;



    font-weight:600;



}



/* =========================================================

   BENEFITS

========================================================= */



.section-cleaning-details__benefits{



    margin-bottom:14px;



}



.section-cleaning-details__benefit{



    display:flex;



    gap:12px;



    padding:12px 0;



    border-bottom:1px solid rgba(255,255,255,0.04);



}



.section-cleaning-details__benefit:last-child{



    border-bottom:none;



}



.section-cleaning-details__benefit svg{



    width:18px;

    height:18px;



    color:#3b82f6;



    flex-shrink:0;



    margin-top:2px;



}



.section-cleaning-details__benefit strong{



    display:block;



    color:#ffffff;



    font-size:12px;



    margin-bottom:4px;



}



.section-cleaning-details__benefit p{



    color:rgba(255,255,255,0.66);



    font-size:10px;



    line-height:1.7;



}



/* =========================================================

   PRICING

========================================================= */



.section-cleaning-details__pricing{



    background:

        linear-gradient(

            180deg,

            rgba(8,24,60,0.95),

            rgba(5,17,45,0.98)

        );



    border:1px solid rgba(255,255,255,0.04);



    border-radius:14px;



    padding:14px;



}



.section-cleaning-details__price-box{



    display:flex;



    gap:14px;



    margin-bottom:16px;



}



.section-cleaning-details__price-icon{



    width:52px;

    height:52px;



    border-radius:14px;



    background:

        linear-gradient(

            180deg,

            rgba(37,99,235,0.22),

            rgba(37,99,235,0.08)

        );



    display:flex;



    align-items:center;



    justify-content:center;



    flex-shrink:0;



}



.section-cleaning-details__price-icon svg{



    width:20px;

    height:20px;



    color:#3b82f6;



}



.section-cleaning-details__price-box span{



    display:block;



    color:rgba(255,255,255,0.62);



    font-size:10px;



    margin-bottom:4px;



}



.section-cleaning-details__price-box strong{



    display:block;



    color:#ffffff;



    font-size:28px;



    margin-bottom:6px;



}



.section-cleaning-details__price-box p{



    color:rgba(255,255,255,0.66);



    font-size:10px;



}



.section-cleaning-details__booking-button{



    width:100%;



    height:42px;



    border-radius:10px;



    background:

        linear-gradient(

            90deg,

            #2563eb,

            #3b82f6

        );



    display:flex;



    align-items:center;



    justify-content:center;



    gap:10px;



    text-decoration:none;



    color:#ffffff;



    font-size:12px;



    font-weight:600;



    margin-bottom:12px;



}



.section-cleaning-details__pricing-note{



    display:block;



    text-align:center;



    color:rgba(255,255,255,0.55);



    font-size:10px;



}



/* =========================================================

   RESPONSIVE

========================================================= */



@media(max-width:1200px){



    .section-cleaning-details__container{



        grid-template-columns:1fr;



    }



    .section-cleaning-details__services{



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



    }



    .section-cleaning-details__bottom{



        grid-template-columns:1fr;



    }



}



@media(max-width:768px){



    .section-cleaning-details{



        padding:14px;



    }



    .section-cleaning-details__services{



        grid-template-columns:1fr;



    }



    .section-cleaning-details__cta{



        flex-direction:column;



        align-items:flex-start;



    }



}