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

.expertise-hero{
    width:100%;
}

.expertise-hero img{
    width:100%;
    display:block;
}


/* ====================================
   INTRO
==================================== */

.expertise-intro{
    padding:60px 0 30px;
}

.section-title{
    color:#691C2C;
    font-family:'Merriweather', serif;
    margin-bottom:15px;
    font-size:clamp(28px,4vw,40px);
}

.section-description{
    max-width:700px;
    color:#555;
    line-height:1.7;
    font-size:clamp(18px,3vw,20px);
}


/* ====================================
   CAROUSEL
==================================== */

.expertise-section{
    padding:20px 0 80px;
}

.expertise-carousel-wrapper{
    position:relative;
}

.expertise-carousel{

    display:flex;

    align-items:center;

    gap:50px;

    justify-content:flex-start;

    overflow:hidden;

    min-height:340px;

    overflow:visible;
}


.expertise-card img{
    width:30%;
    height:auto;
    margin-bottom:15px;
}

.expertise-card h3{

    height:140px;

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

    color:#691C2C;

    font-size:clamp(22px,5vw,32px);
    line-height:1.25;

    margin:0;
}
.expertise-card p{

    height:90px;

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

    font-size:clamp(18px,3vw,22px);
    line-height:1.6;

    color:#555;

    margin-top:15px;
}


.expertise-card{

    flex:0 0 220px;

    aspect-ratio:3 / 4;

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

    background:#fff;

    border:1px solid #d8d8d8;
    border-radius:10px;

    padding:25px;

    text-align:center;

    transition:.3s ease;
    cursor:pointer;
}

.expertise-card{
    transition:.3s ease;
}

.expertise-card:hover{

    border-color:#691C2C;

    box-shadow:
        0 0 0 2px #691C2C,
        0 10px 25px rgba(0,0,0,.12);
}


/* ====================================
   NAV BUTTONS
==================================== */

.carousel-btn{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:50px;
    height:50px;

    border:none;
    border-radius:12px;

    background:rgba(105,28,44,.08);
    color:rgba(105,28,44,.25);

    cursor:pointer;

    transition:all .3s ease;

    z-index:10;

    opacity:0; /* hidden by default */
}

.expertise-carousel-wrapper:hover .carousel-btn{
    opacity:1; /* show when hovering carousel */
}

.expertise-card:hover{
    border-color:#691C2C;
    box-shadow:
        0 0 0 2px #691C2C,
        0 8px 20px rgba(105,28,44,.15);
    transform:translateY(-4px);
}

.carousel-btn.disabled{

    opacity:0 !important;
    pointer-events:none;
}

.prev-btn{
    left:-25px;
}

.next-btn{
    right:-25px;
}

/* CTA */

.cta-section{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    margin-top:80px;
}

.cta-content{
    background:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:60px;
}

.cta-content h2{
    font-size:3rem;
    color:#222;
    margin-bottom:30px;
}

.cta-btn{
    display:inline-block;

    background:var(--primary);
    color:white;

    text-decoration:none;

    padding:16px 28px;
    width:fit-content;

    text-transform:uppercase;
    letter-spacing:1px;
    font-size:.85rem;

    transition:
        transform .3s ease,
        background-color .3s ease;
}

.cta-btn:hover{
    transform:scale(1.05);
}

.cta-image{
    height:100%;
}

.cta-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

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

@media(max-width:768px){

    .expertise-carousel{
        display:flex;
        overflow-x:auto;
        gap:30px;
        scroll-snap-type:x mandatory;
        padding-bottom:10px;
        justify-content:flex-start;
    }

    .expertise-card{

        flex:0 0 85%;

        scroll-snap-align:center;

        transform:none;
        opacity:1;
    }

    .expertise-card:hover,
    .expertise-card.active{

        transform:none;
    }

    .carousel-btn{
        display:none;
    }

    .expertise-detail-box{
        min-height:250px;
        padding:25px;
    }

}