/*=========================================
    OUR TREATMENTS SECTION START
=========================================*/

.treatments-section{
    width:100%;
    padding:60px 0;
    background:#f5f9ff;
    position:relative;
    overflow:hidden;
}

.treatments-section .container{
    width:90%;
    max-width:1320px;
    margin:auto;
}

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

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

.section-heading h2{
    font-size:48px;
    font-weight:800;
    color:#162b57;
    margin-bottom:18px;
    font-family:'Poppins',sans-serif;
}

.heading-line{
    width:70px;
    height:4px;
    background:#2d67f5;
    margin:auto;
    border-radius:30px;
    margin-bottom:18px;
}

.section-heading p{
    font-size:19px;
    color:#666;
    line-height:1.8;
    font-weight:500;
}

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

.treatments-grid{

    display:grid;

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

    gap:35px;

}

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

.treatment-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

    transition:.45s;

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

}

.treatment-card:hover{

    transform:translateY(-14px);

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

}

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

.card-image{

    height:250px;

    overflow:hidden;

    position:relative;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

    display:block;

}

.treatment-card:hover .card-image img{

    transform:scale(1.10);

}

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

.image-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(32,90,255,.18);

    opacity:0;

    transition:.45s;

}

.treatment-card:hover .image-overlay{

    opacity:1;

}

.image-overlay i{

    width:70px;

    height:70px;

    background:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:#2d67f5;

    transform:scale(.5);

    transition:.45s;

}

.treatment-card:hover .image-overlay i{

    transform:scale(1);

}

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

.card-content{

    padding:30px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.card-content h3{

    font-size:25px;

    font-weight:600;

    color:#1a2b57;

    line-height:1.25;

    margin-bottom:18px;

}

.card-content p{

    font-size:15px;

    color:#666;

    line-height:1.9;

    margin-bottom:30px;

    flex:1;

}

/*=========================================
        LEARN MORE BUTTON
=========================================*/

.learn-btn{

    width:100%;

    height:58px;

    background:#2d67f5;

    color:#fff;

    text-decoration:none;

    border-radius:12px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 22px;

    font-size:17px;

    font-weight:600;

    overflow:hidden;

    position:relative;

    z-index:1;

    transition:.45s;

}

/* Left to Right Transparent Hover Effect */

.learn-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:130%;

    height:100%;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.28) 45%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,.28) 55%,
        rgba(255,255,255,0) 100%
    );

    transform:skewX(-25deg);

    transition:.65s;

    z-index:-1;

}

.learn-btn:hover::before{

    left:120%;

}

.learn-btn span{

    position:relative;

    z-index:2;

}

.learn-btn i{

    font-size:18px;

    position:relative;

    z-index:2;

    transition:.35s;

}

.learn-btn:hover i{

    transform:translateX(8px);

}

.learn-btn:hover{

    color:#fff;

    box-shadow:0 12px 30px rgba(45,103,245,.35);

}


/*=========================================
        RESPONSIVE
=========================================*/


/* Laptop */

@media(max-width:1200px){

.treatments-grid{

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

gap:25px;

}

.card-content{

padding:24px;

}

.card-content h3{

font-size:30px;

}

}


/* Tablet */

@media(max-width:992px){

.section-heading h2{

font-size:40px;

}

.section-heading p{

font-size:17px;

}

.treatments-grid{

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

gap:28px;

}

.card-image{

height:230px;

}

.card-content h3{

font-size:28px;

}

.card-content p{

font-size:16px;

}

.learn-btn{

height:55px;

font-size:16px;

}

}


/* Mobile */

@media(max-width:768px){

.treatments-section{

padding:70px 0;

}

.section-heading{

margin-bottom:40px;

}

.section-heading h2{

font-size:34px;

}

.heading-line{

width:60px;

height:3px;

}

.section-heading p{

font-size:16px;

line-height:1.7;

}

.treatments-grid{

grid-template-columns:1fr;

gap:28px;

}

.card-image{

height:220px;

}

.card-content{

padding:22px;

}

.card-content h3{

font-size:26px;

margin-bottom:15px;

}

.card-content p{

font-size:15px;

line-height:1.8;

margin-bottom:22px;

}

.learn-btn{

height:54px;

padding:0 20px;

font-size:16px;

}

}


/* Small Mobile */

@media(max-width:480px){

.treatments-section{

padding:60px 0;

}

.treatments-section .container{

width:92%;

}

.section-heading h2{

font-size:30px;

}

.section-heading p{

font-size:15px;

}

.card-image{

height:200px;

}

.card-content{

padding:20px;

}

.card-content h3{

font-size:24px;

}

.card-content p{

font-size:14px;

}

.learn-btn{

height:52px;

font-size:15px;

padding:0 18px;

}

.learn-btn i{

font-size:16px;

}

}