/* ==========================================================
   YOUTH QUOTA FEATURED LEGISLATURES
   All classes prefixed with yqf-
========================================================== */

:root{
    --yqf-green:#0B6B3A;
    --yqf-green2:#148C4F;
    --yqf-blue:#0A2D5E;
    --yqf-gold:#D4A017;
    --yqf-red:#F44336;
    --yqf-bg:#F7F9FC;
    --yqf-text:#243042;
    --yqf-shadow:0 15px 45px rgba(0,0,0,.08);
    --yqf-radius:18px;
}

.yqf-section{

    padding:100px 0;

    background:
    linear-gradient(to bottom,#ffffff,#f7fafc);

    overflow:hidden;

    position:relative;

}

.yqf-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(11,107,58,.04);

    border-radius:50%;

    top:-250px;

    right:-120px;

}

.yqf-section::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(212,160,23,.05);

    border-radius:50%;

    left:-100px;

    bottom:-120px;

}

.yqf-container{

    width:92%;

    max-width:1400px;

    margin:auto;

    position:relative;

    z-index:2;

}

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

.yqf-heading{

    text-align:center;

    margin-bottom:70px;

}

.yqf-mini-title{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#e9f7ef;

    color:var(--yqf-green);

    padding:8px 18px;

    border-radius:50px;

    font-weight:600;

    font-size:14px;

    letter-spacing:.5px;

}

.yqf-heading h2{

    margin-top:20px;

    font-size:48px;

    color:var(--yqf-blue);

    font-weight:800;

}

.yqf-heading h2 span{

    color:var(--yqf-green);

}

.yqf-heading p{

    max-width:760px;

    margin:20px auto 0;

    color:#666;

    font-size:18px;

    line-height:1.9;

}

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

.yqf-slider-wrapper{

    position:relative;

}

.yqf-slider{

    overflow:hidden;

}

.yqf-track{

    display:flex;

    transition:transform .7s ease;

    gap:25px;

}

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

.yqf-card{

    flex:0 0 calc(25% - 19px);

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--yqf-shadow);

    transition:.35s;

    border:1px solid #edf0f5;

    position:relative;

}

.yqf-card:hover{

    transform:translateY(-10px);

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

}

.yqf-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:

    linear-gradient(90deg,

    var(--yqf-green),

    var(--yqf-gold));

}

/* =======================
PHOTO
======================= */

.yqf-photo{

    position:relative;

    height:260px;

    overflow:hidden;

    background:#eef2f6;

}

.yqf-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.yqf-card:hover .yqf-photo img{

    transform:scale(1.08);

}

/* =======================
VERIFIED BADGE
======================= */

.yqf-verified{

    position:absolute;

    top:18px;

    left:18px;

    background:linear-gradient(45deg,

    var(--yqf-green),

    #1da85d);

    color:#fff;

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:6px;

    box-shadow:0 8px 20px rgba(0,0,0,.2);

}

.yqf-verified i{

    color:#fff;

}

/* =======================
BODY
======================= */

.yqf-body{

    padding:28px;

}

.yqf-body h3{

    font-size:16px;

    color:var(--yqf-blue);

    margin-bottom:15px;

    font-weight:400;

}

/* =======================
META
======================= */

.yqf-meta{

    margin-bottom:25px;

}

.yqf-meta p{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

    color:#666;

    font-size:15px;

}

.yqf-meta i{

    color:var(--yqf-green);

    width:18px;

}

/* =======================
STATS
======================= */

.yqf-stats{

    display:grid;

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

    gap:10px;

    margin:25px 0;

}

.yqf-stats div{

    text-align:center;

    background:#f8fafc;

    border-radius:12px;

    padding:18px 10px;

    transition:.3s;

}

.yqf-stats div:hover{

    background:#eaf7ef;

}

.yqf-stats h4{

    color:var(--yqf-green);

    font-size:28px;

    font-weight:800;

    margin-bottom:5px;

}

.yqf-stats span{

    color:#666;

    font-size:13px;

}

/* =======================
RATING
======================= */

.yqf-rating{

    text-align:center;

    margin-bottom:25px;

}

.yqf-stars{

    color:#FFC107;

    font-size:20px;

    letter-spacing:3px;

    margin-bottom:8px;

}

.yqf-rating p{

    color:#777;

    font-size:14px;

}

/* =======================
BUTTON
======================= */

.yqf-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:5px;

    background:linear-gradient(45deg,

    var(--yqf-green),

    var(--yqf-green2));

    color:#fff;

    padding:4px;

    border-radius:8px;

    font-weight:400;

    transition:.35s;

}

.yqf-btn:hover{

    background:linear-gradient(45deg,

    var(--yqf-blue),

    var(--yqf-green));

    transform:translateY(-3px);

}

/* =======================
ARROWS
======================= */

.yqf-arrow{

    position:absolute;

    top:45%;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:var(--yqf-green);

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

    cursor:pointer;

    z-index:20;

    transition:.35s;

}

.yqf-arrow:hover{

    background:var(--yqf-green);

    color:#fff;

}

.yqf-prev{

    left:-28px;

}

.yqf-next{

    right:-28px;

}

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

.yqf-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:40px;

}

.yqf-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#d4d4d4;

    cursor:pointer;

    transition:.3s;

}

.yqf-dot.active{

    background:var(--yqf-green);

    width:32px;

    border-radius:20px;

}
/* ==========================================================
   PART B
   RESPONSIVE + PREMIUM EFFECTS
========================================================== */

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

.yqf-card{
    transform-origin:center;
}

.yqf-card:hover .yqf-body h3{
    color:var(--yqf-green);
}

.yqf-card:hover .yqf-verified{
    transform:scale(1.05);
}

.yqf-card:hover .yqf-btn i{
    transform:translateX(6px);
}

.yqf-btn i{
    transition:.35s;
}

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

.yqf-photo::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
            to top,
            rgba(10,45,94,.45),
            rgba(10,45,94,0)
    );

    pointer-events:none;

}

/* ===========================
   GLOW EFFECT
=========================== */

.yqf-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(11,107,58,.15),
    transparent 70%);

    top:-80px;

    right:-80px;

    opacity:0;

    transition:.5s;

}

.yqf-card:hover::after{

    opacity:1;

}

/* ===========================
   SMOOTH ANIMATION
=========================== */

@keyframes yqfFadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.yqf-card{

    animation:yqfFadeUp .8s ease;

}

/* ===========================
   DOT ANIMATION
=========================== */

.yqf-dot{

    transition:
    width .35s,
    background .35s,
    transform .35s;

}

.yqf-dot:hover{

    transform:scale(1.2);

}

/* ===========================
   ARROW EFFECT
=========================== */

.yqf-arrow{

    transition:
    transform .35s,
    background .35s,
    color .35s;

}

.yqf-arrow:hover{

    transform:scale(1.08);

}

/* ===========================
   BUTTON SHINE
=========================== */

.yqf-btn{

    position:relative;

    overflow:hidden;

}

.yqf-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

    rgba(255,255,255,.25);

    transform:skewX(-25deg);

    transition:.7s;

}

.yqf-btn:hover::before{

    left:130%;

}

/* ===========================
   RATING STARS
=========================== */

.yqf-stars i{

    transition:.3s;

}

.yqf-card:hover .yqf-stars i{

    transform:scale(1.15);

}

/* ===========================
   SCROLLBAR
=========================== */

.yqf-slider::-webkit-scrollbar{

    display:none;

}

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

@media(max-width:1200px){

    .yqf-card{

        flex:0 0 calc(50% - 15px);

    }

    .yqf-heading h2{

        font-size:40px;

    }

}

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

@media(max-width:768px){

    .yqf-section{

        padding:70px 0;

    }

    .yqf-card{

        flex:0 0 100%;

    }

    .yqf-heading{

        margin-bottom:45px;

    }

    .yqf-heading h2{

        font-size:32px;

    }

    .yqf-heading p{

        font-size:16px;

    }

    .yqf-arrow{

        display:none;

    }

    .yqf-photo{

        height:250px;

    }

    .yqf-body{

        padding:22px;

    }

}

/* ===========================
   SMALL PHONES
=========================== */

@media(max-width:480px){

    .yqf-mini-title{

        font-size:12px;

    }

    .yqf-heading h2{

        font-size:28px;

    }

    .yqf-stats{

        gap:8px;

    }

    .yqf-stats h4{

        font-size:22px;

    }

    .yqf-btn{

        padding:13px;

    }

}

/* ===========================
   LARGE DESKTOP
=========================== */

@media(min-width:1600px){

    .yqf-container{

        max-width:1550px;

    }

    .yqf-card{

        flex:0 0 calc(25% - 20px);

    }

}

/* ===========================
   REDUCED MOTION
=========================== */

@media(prefers-reduced-motion:reduce){

    .yqf-track,
    .yqf-card,
    .yqf-btn,
    .yqf-arrow{

        transition:none !important;

    }

}
.yqf-slider{
    overflow:hidden;
    position:relative;
}
.yqf-track{
    display:flex;
    transition:transform .6s ease;
    will-change:transform;
}