/*==============================================================
    LEADERSHIP PAGE
    Sarbabharatiya Sangeet O Sanskriti Parishad
==============================================================*/

:root{

    --primary:#7b1e1e;
    --secondary:#c79a2d;
    --dark:#1e1e1e;
    --text:#666666;
    --border:#ececec;
    --light:#fafafa;
    --white:#ffffff;

    --shadow:0 20px 50px rgba(0,0,0,.08);

}


/*==============================================================
    PAGE
==============================================================*/

.leadership-page{

    padding:90px 0;

    background:#ffffff;

}


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

.leadership-hero{

    position:relative;

    overflow:hidden;

    padding:110px 0;

    background:#fbf8f3;

    border-bottom:1px solid #efefef;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(255,255,255,.92),

    rgba(255,255,255,.96)

    );

}

.hero-watermark{

    position:absolute;

    right:60px;

    top:50%;

    transform:translateY(-50%);

    width:330px;

    opacity:.05;

    pointer-events:none;

    user-select:none;

}

.hero-content{

    position:relative;

    z-index:5;

    text-align:center;

}

.breadcrumb-area{

    margin-bottom:20px;

    color:#777;

    font-size:15px;

}

.breadcrumb-area a{

    text-decoration:none;

    color:#777;

}

.breadcrumb-area span{

    margin:0 6px;

}

.hero-subtitle{

    display:inline-block;

    color:var(--secondary);

    font-size:18px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.hero-content h1{

    font-size:64px;

    font-weight:700;

    color:#1b1b1b;

    margin-bottom:20px;

}

.hero-content h1 span{

    color:var(--primary);

}

.hero-content p{

    font-size:22px;

    color:#666;

    margin-bottom:30px;

}

.hero-divider{

    width:120px;

    height:4px;

    background:linear-gradient(

    90deg,

    var(--secondary),

    var(--primary),

    var(--secondary)

    );

    border-radius:50px;

    margin:auto;

}


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

.leader-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    position:relative;

    height:100%;

    border:1px solid #ededed;

}

.leader-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 28px 60px rgba(0,0,0,.15);

}

.card-top-line{

    height:5px;

    background:linear-gradient(

    90deg,

    var(--secondary),

    var(--primary)

    );

}
/*==============================================================
    LEADER IMAGE
==============================================================*/

.leader-image{

    position:relative;

    overflow:hidden;

    height:340px;

    background:#f5f5f5;

}

.leader-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s ease;

}

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

    transform:scale(1.06);

}


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

.leader-content{

    position:relative;

    background:#fff;

    text-align:center;

    padding:55px 25px 35px;

}


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

.leader-icon{

    position:absolute;

    left:50%;

    top:-32px;

    transform:translateX(-50%);

    width:64px;

    height:64px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        #4d1010
    );

    border:4px solid #d8a43b;

    display:flex;

    align-items:center;

    justify-content:center;

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

}

.leader-icon i{

    color:#fff;

    font-size:22px;

}


/*==============================================================
    DESIGNATION
==============================================================*/

.leader-designation{

    display:block;

    color:var(--secondary);

    font-size:15px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:15px;

}


/*==============================================================
    NAME
==============================================================*/

.leader-content h3{

    margin:0;

    font-size:29px;

    font-weight:700;

    color:#222;

    line-height:1.4;

    min-height:78px;

}


/*==============================================================
    GOLD DIVIDER
==============================================================*/

.leader-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:20px;

}

.leader-divider span{

    width:42px;

    height:2px;

    background:#d9b15b;

    border-radius:20px;

}

.leader-divider i{

    color:#c79a2d;

    font-size:11px;

}


/*==============================================================
    FOOTER STRIP
==============================================================*/

.leader-footer{

    background:linear-gradient(
        90deg,
        var(--primary),
        #5b1313
    );

    color:#fff;

    text-align:center;

    padding:14px;

    font-size:15px;

    font-weight:500;

    letter-spacing:.3px;

}

.leader-footer i{

    margin-right:8px;

    color:#f2d180;

}


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

.leader-card:hover .leader-designation{

    color:var(--primary);

}

.leader-card:hover .leader-icon{

    transform:translateX(-50%) rotate(360deg);

    transition:.6s;

}

.leader-card:hover .leader-divider span{

    width:60px;

    transition:.35s;

}
/*==============================================================
    CARD ANIMATION
==============================================================*/

.leader-card{

    will-change:transform;

}

.leader-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--secondary),
        transparent
    );

    transform:scaleX(0);

    transition:.35s;

}

.leader-card:hover::after{

    transform:scaleX(1);

}



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

.leader-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.08)

    );

    z-index:1;

}

.leader-image img{

    position:relative;

    z-index:0;

}



/*==============================================================
    SECTION BACKGROUND
==============================================================*/

.leadership-page{

    background:

    radial-gradient(circle at top right,#fff7ea 0%,#ffffff 35%),

    radial-gradient(circle at bottom left,#faf4e5 0%,#ffffff 45%);

}



/*==============================================================
    CARD BORDER EFFECT
==============================================================*/

.leader-card{

    border:1px solid rgba(199,154,45,.18);

}

.leader-card:hover{

    border-color:#c79a2d;

}



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

@media(min-width:1400px){

.leader-content h3{

font-size:30px;

}

}



/*==============================================================
    LAPTOP
==============================================================*/

@media(max-width:1200px){

.hero-content h1{

font-size:54px;

}

.hero-watermark{

width:260px;

}

.leader-image{

height:300px;

}

.leader-content{

padding:50px 20px 30px;

}

.leader-content h3{

font-size:24px;

min-height:65px;

}

}



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

@media(max-width:992px){

.leadership-hero{

padding:90px 0;

}

.hero-content h1{

font-size:44px;

}

.hero-content p{

font-size:18px;

}

.hero-watermark{

width:200px;

opacity:.06;

right:20px;

}

.leader-image{

height:320px;

}

}



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

@media(max-width:768px){

.leadership-page{

padding:60px 0;

}

.leadership-hero{

padding:70px 0;

}

.hero-content h1{

font-size:34px;

line-height:44px;

}

.hero-content p{

font-size:16px;

}

.hero-watermark{

display:none;

}

.leader-image{

height:360px;

}

.leader-content{

padding:50px 18px 28px;

}

.leader-content h3{

font-size:24px;

min-height:auto;

}

.leader-designation{

font-size:14px;

}

}



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

@media(max-width:576px){

.breadcrumb-area{

font-size:14px;

}

.hero-subtitle{

font-size:14px;

letter-spacing:2px;

}

.hero-content h1{

font-size:30px;

}

.hero-divider{

width:90px;

}

.leader-card{

border-radius:16px;

}

.leader-image{

height:340px;

}

.leader-icon{

width:58px;

height:58px;

top:-29px;

}

.leader-icon i{

font-size:20px;

}

.leader-footer{

font-size:14px;

padding:12px;

}

}



/*==============================================================
    ACCESSIBILITY
==============================================================*/

.leader-card:focus-within{

outline:2px solid var(--secondary);

outline-offset:4px;

}



/*==============================================================
    PRINT
==============================================================*/

@media print{

.leadership-hero{

padding:40px 0;

}

.hero-watermark{

display:none;

}

.leader-card{

box-shadow:none;

border:1px solid #ccc;

break-inside:avoid;

}

}



/*==============================================================
    END
==============================================================*/