/* ==========================================
   PEEPAL SERVICE CARDS
   ========================================== */

.pes-gallery-section{
    width:100%;
    padding:20px;
    background:#fff;
    overflow:hidden;
}

.pes-gallery-slider{
    position:relative;
    padding-bottom:90px;
}

.pes-gallery-slider .splide__track{
    overflow:visible;
}

.pes-gallery-slider .splide__slide{
    padding:15px;
    box-sizing:border-box;
}

/* CARD */

.event-card{
    position:relative;
    display:block;
    width:100%;
    text-decoration:none;
    transition:.35s ease;
}

.event-card:hover{
    transform:translateY(-8px);
}

/* BACKGROUND */

.event-card-bg{
    width:100%;
    display:block;
}

/* ICON */

.event-icon{

    position:absolute;

    top:90px;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    z-index:5;

    transition:.35s ease;

}

.event-card:hover .event-icon{

    transform:translateX(-50%) scale(1.05);

}

/* ==========================================
   CONTENT
========================================== */

.event-content{
    position:absolute;
    left:36px;
    right:36px;
    bottom:36px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    color:#111;
}

/* TITLE */

.event-content h2{
    margin:0;
    font-size:24px;
    font-weight:400;
    line-height:1.15;

    height:58px;
    display:flex;
    align-items:flex-end;

    font-family:inherit;
}

/* SUB TITLE */

.event-content h3{
    margin:10px 0 10px;

    font-size:17px;
    font-weight:400;
    line-height:1.25;

    height:48px;
}

/* DESCRIPTION */

.event-content p{
    margin:0;

    font-size:13px;
    line-height:1.45;
    color:#9a9a9a;

    height:58px;
}

/* BUTTON */

.event-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:165px;
    height:44px;

    background:#000;
    color:#fff;

    border-radius:999px;

    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

    transition:.35s;

    flex-shrink:0;
}

.event-arrow{
    font-size:20px;
    transition:.35s;
}

.event-card:hover .event-btn{
    background:#ff2c43;
}

.event-card:hover .event-arrow{
    transform:translate(4px,-4px);
}

/* SPLIDE ARROWS */

.pes-gallery-slider .splide__arrows{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    display:flex;

    gap:16px;

}

.pes-gallery-slider .splide__arrow{

    position:static;

    width:52px;

    height:52px;

    border-radius:50%;

    border:1px solid #111;

    background:#fff;

    opacity:1;

    transition:.3s;

}

.pes-gallery-slider .splide__arrow svg{

    fill:#111;

}

.pes-gallery-slider .splide__arrow:hover{

    background:#111;

}

.pes-gallery-slider .splide__arrow:hover svg{

    fill:#fff;

}

.pes-gallery-slider .splide__pagination{

    display:none;

}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:1600px){

    .event-icon {
        width: 160px;
        top: 30px;
    }

    .event-content {
        left: 36px;
        right: 50px;
        bottom: 36px;
    }

.event-content h2{

    font-size:21px;

}

.event-content h3{

    font-size:16px;

}

.event-content p{

    font-size:13px;

}

}

@media(max-width:1200px){

.event-icon{

    width:135px;
    top:70px;

}

.event-content{

    left:40px;
    right:40px;
    bottom:40px;

}

.event-content h2{

    font-size:38px;

}

.event-content h3{

    font-size:24px;

}

.event-content p{

    font-size:17px;

}

.event-btn{

    padding:16px 34px;
    font-size:15px;

}

}

@media(max-width:768px){

.event-icon{

    width:105px;
    top:60px;

}

.event-content{

    left:28px;
    right:28px;
    bottom:28px;

}

.event-content h2{

    font-size:28px;

}

.event-content h3{

    font-size:18px;

}

.event-content p{

    font-size:14px;

}

.event-btn{

    width:100%;
    padding:15px;

    font-size:14px;

}

}