/*==============================
        TREATMENT HERO
==============================*/
body.services-page{
    background: linear-gradient(
        135deg,
        #f3f9f5,
        #edf6f0) !important;
 
}

.services-page .treatment-services,
.services-page .appointment-strip{
    background:transparent;
}
.treatment-hero{
    width:100%;
    min-height:460px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
    url("../images/hero/treatment-hero-sec.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.05);
}

.container{
    width:100%;
    max-width:1250px;
    margin:auto;
    padding:0 7%;
    position:relative;
    z-index:2;
}

.hero-content{
    max-width:420px;
}

.hero-content h1{

    font-family:'Playfair Display',serif;
    font-size:56px;
    font-weight:700;
   color: #16834b;
    margin-bottom:25px;
    line-height:1.1;
}

.hero-content p{

    font-family:'Poppins',sans-serif;
    color:#4d545b;
    font-size:15px;
    line-height:1.8;
    margin-bottom:35px;
}

.breadcrumb{

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

    font-family:'Poppins',sans-serif;
    font-size:14px;
}

.breadcrumb a{
    color:#04610e;
    text-decoration:none;
    transition:.3s;
}

.breadcrumb a:hover{
    color:#0c2001;
}

.breadcrumb span:last-child{
    color:#1b5101;
    font-weight:600;
}


/*==============================
        TABLET
==============================*/

@media(max-width:991px){

.treatment-hero{

    min-height:360px;
    background-position:65% center;
}

.hero-content{
    max-width:380px;
}

.hero-content h1{
    font-size:46px;
}

.hero-content p{
    font-size:14px;
}

.treatment-hero::before{

    width:420px;
    height:420px;
    left:45%;
}

.treatment-hero::after{
    display:none;
}

}


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

@media(max-width:768px){

.treatment-hero{

    min-height:300px;
    align-items:flex-end;
    padding:60px 0;
    background-position:72% center;
}

.container{
    padding:0 25px;
}

.hero-content{
    max-width:100%;
}

.hero-content h1{
    font-size:38px;
}

.hero-content p{
    font-size:14px;
    margin-bottom:22px;
}

.breadcrumb{
    font-size:13px;
}

.treatment-hero::before{
    display:none;
}

}


/*==============================
      SMALL MOBILE
==============================*/

@media(max-width:480px){

.treatment-hero{

    min-height:260px;
    padding:45px 0;
}

.hero-content h1{
    font-size:30px;
}

.hero-content p{
    font-size:13px;
    line-height:1.7;
}

.breadcrumb{
    font-size:12px;
    gap:8px;
}

}

/*  Treatment section  */
/*==================================
       TREATMENT SERVICES
==================================*/

.treatment-services{
    width:100%;
    padding:50px 0;
    background:#ffffff;
}

.treatment-services .container{
    width:95%;
    max-width:1450px;
    margin:auto;
}

/*=========================
      SECTION HEADING
=========================*/

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-heading span{
    display:inline-block;
    position:relative;
    font-size:13px;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    color: #35a967;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:15px;
}

.section-heading span::before,
.section-heading span::after{
    content:"";
    position:absolute;
    top:50%;
    width:55px;
    height:2px;
    background:#7aa44b;
}

.section-heading span::before{
    right:110%;
}

.section-heading span::after{
    left:110%;
}

.section-heading h2{
    font-family:'Playfair Display',serif;
    font-size:42px;
    color:#0f3d02;
    margin-bottom:15px;
}

.section-heading h2 em{
    color: #35a967;
    font-style:italic;
}

.section-heading p{
    max-width:650px;
    margin:auto;
    font-family:'Poppins',sans-serif;
    font-size:15px;
    color:#666;
    line-height:1.8;
}

/*=========================
        GRID
=========================*/

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
   gap:30px 20px;   /* row-gap column-gap */
    align-items:stretch;
}

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

.service-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
    transition:.35s;

    display:flex;
    flex-direction:column;
    height:100%;
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/*=========================
        IMAGE
=========================*/

.service-card img{
    width:100%;
    height:190px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.service-card:hover img{
    transform:scale(1.08);
}

/*=========================
       CONTENT
=========================*/

.service-content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    text-align:center;
    padding:22px 20px;
}

.service-content h3{
    font-family:'poppins',serif;
    font-size:20px;
    color:#0f3d02;
    line-height:1.35;
    margin-bottom:12px;
   
    min-height:60px;
}

.service-content p{
    font-family:'Poppins',sans-serif;
    font-size:14px;
    color:#666;
    line-height:1.7;
    margin-bottom:16px;

    flex-grow:1;
}

.service-content a{
    margin-top:auto;

    display:inline-block;

    text-decoration:none;
    color:#5a8f2d;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:600;

    transition:.3s;
}

.service-content a:hover{
    color:#1f2937;
    letter-spacing:.5px;
}

/*=========================
        TABLET
=========================*/

@media(max-width:991px){

.services-grid{
    grid-template-columns:repeat(2,1fr);
}

.section-heading h2{
    font-size:36px;
}

.service-card img{
    height:180px;
}
.service-content{
    padding:20px 18px;
}

.service-content h3{
    font-size:22px;
    min-height:55px;
}

}

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

@media(max-width:768px){

.treatment-services{
    padding:70px 0;
}

.services-grid{
    grid-template-columns:1fr;
}

.section-heading{
    margin-bottom:45px;
}

.section-heading span::before,
.section-heading span::after{
    width:35px;
}

.section-heading h2{
    font-size:30px;
}

.section-heading p{
    font-size:14px;
}

.service-card img{
    height:220px;
}

.service-content{
    padding:20px 18px;
}

.service-content h3{
    font-size:21px;
    min-height:auto;
}

}

/*=========================
      SMALL MOBILE
=========================*/

@media(max-width:480px){

.treatment-services{
    padding:55px 0;
}

.section-heading h2{
    font-size:26px;
}

.section-heading p{
    font-size:13px;
}

.service-card img{
    height:210px;
}

.service-content h3{
    font-size:20px;
}

.service-content p{
    font-size:13px;
}

.service-content a{
    font-size:13px;
}

}

/*  --------------------------- Appointment section  ---------       */

/*==================================
      APPOINTMENT STRIP
==================================*/

.appointment-strip{
    width:100%;
    padding:15px 0 30px;
    background:#e7f2d9;
}

.appointment-strip .container{
    width:95%;
    max-width:1450px;
    margin:auto;
}

.appointment-box{

    background: linear-gradient(
        135deg,
        #e2f7e8,
        #cbe0d2) ;
    border:1px solid #e7ece5;
    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 30px;

    position:relative;
    overflow:hidden;
}

/* Decorative dots */

.appointment-box::after{
    display:none;
}

.appointment-icon{
    width:62px;
    height:62px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:22px;
    flex-shrink:0;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.appointment-icon i{
    font-size:28px;
    color:#4f8b3b;
}

.appointment-content{
    flex:1;
}

.appointment-content h3{

    font-family:'Poppins',sans-serif;
    font-size:20px;
    font-weight:600;
    color:#1d2433;
    margin-bottom:6px;
}

.appointment-content p{

    font-family:'Poppins',sans-serif;
    font-size:14px;
    color:#667085;
    line-height:1.7;
}

.appointment-btn{
    margin-left:35px;
}

.appointment-btn a{

    display:inline-block;

    padding:14px 28px;

     background: #16834b;
    color:#fff;

    text-decoration:none;

    border-radius:6px;

    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:600;

    transition:.3s;
}

.appointment-btn a:hover{

    background:#2f6d1c;
    transform:translateY(-2px);
}

/*=========================
        TABLET
=========================*/

@media(max-width:991px){

.appointment-box{

    padding:20px;
    gap:20px;
}

.appointment-content h3{
    font-size:20px;
}

.appointment-btn{
    margin-left:0;
}

}

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

@media(max-width:768px){

.appointment-box{

    flex-direction:column;
    text-align:center;
    padding:25px 20px;
}

.appointment-icon{
    margin:0;
}

.appointment-content{
    margin:18px 0;
}

.appointment-btn{
    margin:0;
}

.appointment-box::after{
    display:none;
}

.appointment-content h3{
    font-size:20px;
}

}

/*=========================
      SMALL MOBILE
=========================*/

@media(max-width:480px){

.appointment-content h3{
    font-size:18px;
}

.appointment-content p{
    font-size:13px;
}

.appointment-btn a{
    padding:12px 22px;
    font-size:13px;
}

}