/*==================================================
                OUR MINISTRY SECTION
==================================================*/

.ministry-section{

    background-image:url("../imgbg1.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



/*==================================================
                SECTION TITLE
==================================================*/

.section-title h2{

    color:#0B3B75;

    font-size:38px;

    font-weight:700;

    margin-bottom:10px;

    position:relative;

    display:inline-block;

}



.section-title h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-12px;

    transform:translateX(-50%);

    width:90px;

    height:4px;

    border-radius:20px;

    background:#B48B3C;

}



.section-title p{

    color:#666;

    max-width:650px;

    margin:25px auto 0;

    line-height:1.8;

}



/*==================================================
                SCROLLABLE TABS
==================================================*/

.tab-wrapper{

    display:flex;

    justify-content:center;

    gap:15px;

    margin:50px 0 40px;

    overflow-x:auto;

    scrollbar-width:none;

    -ms-overflow-style:none;

    scroll-behavior:smooth;

    padding-bottom:5px;

}



.tab-wrapper::-webkit-scrollbar{

    display:none;

}



.tab-btn{

    border:2px solid #0B3B75;

    background:#fff;

    color:#0B3B75;

    border-radius:50px;

    padding:12px 26px;

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    transition:.35s;

    white-space:nowrap;

    font-weight:600;

    flex-shrink:0;

}



.tab-btn i{

    color:#B48B3C;

    font-size:18px;

}



.tab-btn:hover{

    background:#0B3B75;

    color:#fff;

}



.tab-btn:hover i{

    color:#fff;

}



.tab-btn.active{

    background:#0B3B75;

    color:#fff;

    border-color:#B48B3C;

}



.tab-btn.active i{

    color:#B48B3C;

}



/*==================================================
                SLIDER AREA
==================================================*/

.ministry-slider{

    display:flex;

    align-items:center;

    gap:18px;

    position:relative;

}



/*==================================================
                NAVIGATION BUTTONS
==================================================*/

.slider-nav{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#0B3B75;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s;

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

    flex-shrink:0;

}



.slider-nav:hover{

    background:#B48B3C;

    transform:scale(1.08);

}



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

.cards-container{

    overflow:hidden;

    width:100%;

}



.cards-track{

    display:flex;

    gap:25px;

    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



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

.ministry-card{

    position:relative;

    min-width:calc(25% - 19px);

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fafafa 55%,
        #f2f2f2 100%
    );

    border-radius:20px;

    border-top:5px solid #B48B3C;

    border-bottom:4px solid #0B3B75;

    border-left:1px solid rgba(255,255,255,.7);

    border-right:1px solid rgba(255,255,255,.7);

    padding:35px 28px;

    overflow:hidden;

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    box-shadow:
        0 10px 35px rgba(0,0,0,.08),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 -2px 4px rgba(0,0,0,.04);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

/* Shine Effect - Hidden Initially */
.ministry-card::before{

    content:"";

    position:absolute;

    top:-40%;

    left:-140%;

    width:45%;

    height:200%;

    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,.9) 50%,
        transparent 100%
    );

    transform:rotate(25deg);

    transition:left .7s ease;

    pointer-events:none;

}

/* Hover Effect */
.ministry-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.15),
        inset 0 2px 2px rgba(255,255,255,.9);

}

/* Shine Animation */
.ministry-card:hover::before{

    left:160%;

}



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

.card-icon{

    width:75px;

    height:75px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#0B3B75;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.4s;

    box-shadow:0 8px 20px rgba(11,59,117,.25);

}

.card-icon i{

    color:#B48B3C;

    font-size:30px;

}

/* Optional Icon Animation */
.ministry-card:hover .card-icon{

    transform:scale(1.08) rotate(5deg);

    box-shadow:0 12px 28px rgba(11,59,117,.35);

}


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

.ministry-card h3{

    color:#0B3B75;

    font-size:26px;

    font-weight:700;

    margin-bottom:15px;

}



.gold-line{

    width:70px;

    height:4px;

    background:#B48B3C;

    border-radius:20px;

    margin:0 auto 22px;

}



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

.ministry-card p{

    color:#666;

    line-height:1.8;

    flex:1;

    margin-bottom:28px;

}



/*==================================================
                READ MORE BUTTON
==================================================*/

.read-more{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    text-decoration:none;

    background:#B48B3C;

    color:#fff;

    padding:12px 24px;

    border-radius:40px;

    font-weight:600;

    transition:.35s;

}



.read-more i{

    transition:.35s;

}



.read-more:hover{

    background:#0B3B75;

    color:#fff;

}



.read-more:hover i{

    transform:translateX(6px);

}



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

.ministry-card:hover{

    transform:translateY(-12px);

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

}



.ministry-card:hover .card-icon{

    background:#B48B3C;

    transform:rotate(8deg) scale(1.08);

}



.ministry-card:hover .card-icon i{

    color:#fff;

}



/*==================================================
                DOTS
==================================================*/

.slider-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:35px;

}



.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#d0d0d0;

    cursor:pointer;

    transition:.35s;

}



.dot.active{

    width:36px;

    border-radius:20px;

    background:#B48B3C;

}



/*==================================================
                SCROLL ANIMATION
==================================================*/

.ministry-card{

    opacity:0;

    transform:translateY(50px);

}



.ministry-card.show{

    opacity:1;

    transform:translateY(0);

    transition:.7s ease;

}



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

@media(max-width:991px){

    .ministry-card{

        min-width:calc(50% - 13px);

    }

}



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

@media(max-width:768px){

    .ministry-section{
        padding:50px 0;
    }

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

    .section-title p{
        font-size:15px;
        padding:0 20px;
    }

    /*==========================
            TABS
    ==========================*/

    .tab-wrapper{

        display:grid;

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

        gap:12px;

        padding:0 15px;

        margin:30px 0;

        overflow:visible;

    }

    .tab-btn{

        width:100%;

        justify-content:center;

        padding:11px;

        font-size:14px;

    }

    /*==========================
        SLIDER
    ==========================*/

    .ministry-slider{

        position:relative;

        padding:0 50px;

    }

    .slider-nav{

        display:flex;

        align-items:center;

        justify-content:center;

        position:absolute;

        top:50%;

        transform:translateY(-50%);

        width:38px;

        height:38px;

        border-radius:50%;

        background:#0B3B75;

        color:#fff;

        z-index:20;

    }

    .prev-btn{

        left:5px;

    }

    .next-btn{

        right:5px;

    }

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

    .cards-track{

        gap:15px;

    }

    .ministry-card{

        min-width:100%;

        border-radius:18px;

        padding:30px 25px 35px;

    }

    .card-icon{

        width:60px;

        height:60px;

    }

    .card-icon i{

        font-size:24px;

    }

    .ministry-card h3{

        font-size:22px;

    }

    .ministry-card p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:25px;

    }

    .read-more{

        padding:10px 22px;

        font-size:15px;

    }

}



/*==================================================
            EXTRA SMALL DEVICES
==================================================*/

@media(max-width:480px){


        .ministry-slider{
        position:relative;
    }

    .slider-nav{
        display:flex !important;

        position:absolute;

        top:50%;

        transform:translateY(-50%);

        width:40px;

        height:40px;

        border-radius:50%;

        background:#0B3B75;

        color:#fff;

        z-index:999;

        align-items:center;

        justify-content:center;
    }

    .prev-btn{
        left:8px;
    }

    .next-btn{
        right:8px;
    }


    .tab-btn{

        padding:9px 18px;

        font-size:13px;

    }



    .ministry-card{

        min-width:100%;

        padding:22px 18px;

    }

}





/* ---------------flicker issue----------------- */

.cards-track,
.resources-track,
.publication-track {
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.cards-track,
.resources-track,
.publication-track,
.hero-slider,
.slider,
video {
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}