/*=========================================
  CHAIRPERSON PAGE
  Golden Jubilee School
==========================================*/

:root{

--primary:#0A2E5D;
--secondary:#153f75;
--gold:#D4AF37;
--light-gold:#f5d889;
--white:#ffffff;
--text:#444;
--bg:#f5f8fd;

--shadow:0 20px 60px rgba(0,0,0,.12);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:var(--bg);
overflow-x:hidden;
color:var(--text);

}

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

.chairperson-section{

position:relative;
padding:100px 0;
overflow:hidden;

background:
linear-gradient(rgba(255,255,255,.96),
rgba(245,248,253,.97));

}

/* Floating circles */

.bg-circle{

position:absolute;
border-radius:50%;
filter:blur(90px);
animation:floatCircle 15s ease-in-out infinite;

}

.circle1{

width:340px;
height:340px;

background:#0A2E5D22;

top:-120px;
left:-80px;

}

.circle2{

width:280px;
height:280px;

background:#d4af3720;

right:-60px;
top:120px;

animation-delay:3s;

}

.circle3{

width:240px;
height:240px;

background:#0a2e5d18;

bottom:-70px;
left:40%;

animation-delay:6s;

}

@keyframes floatCircle{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

}

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

.photo-wrapper{
    position:relative;
    width:100%;
    max-width:560px;
    margin:auto;
}
/* Photo Card */

.photo-card{

position:relative;

border-radius:35px;

overflow:hidden;

background:#fff;

padding:14px;


padding:18px;
border-radius:40px;
}

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

transition:.5s;

z-index:5;

animation:floating 6s ease-in-out infinite;

}

.photo-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 90px rgba(0,0,0,.22);

}

.chairperson-photo{

    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
    border-radius:32px;
    transition:0.8s ease;

}
..photo-card:hover img{

transform:scale(1.08);

filter:brightness(1.05);

}
/*============================
ROTATING GOLD RING
============================*/

.gold-ring{

position:absolute;

width:105%;
height:105%;

left:-2.5%;
top:-2.5%;

border-radius:35px;

border:3px solid rgba(212,175,55,.6);



 animation:photoFloat 8s ease-in-out infinite;

z-index:2;

}

.gold-ring.second{

width:112%;
height:112%;

left:-6%;
top:-6%;

border:2px dashed rgba(212,175,55,.45);

animation-direction:reverse;

animation-duration:18s;

}

@keyframes rotateRing{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

/*============================
SHINE EFFECT
============================*/

.shine{

position:absolute;

top:-40%;

left:-100%;

width:60%;

height:180%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.7),

transparent

);

transform:rotate(25deg);

animation:shine 2s ease-out 1;

z-index:20;

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:160%;

}

}

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

.name-card{

margin-top:20px;

background:#fff;

border-radius:18px;

padding:22px;

display:flex;

align-items:center;

gap:18px;

box-shadow:var(--shadow);

transition:.4s;

}

.name-card:hover{

transform:translateY(-8px);

}


.name-card h2{

font-family:'Cormorant Garamond',serif;

font-size:32px;

font-weight:700;

color:var(--primary);

margin-bottom:4px;

}

.name-card h5{

color:var(--gold);

font-weight:600;

margin-bottom:4px;

}

.name-card p{

margin:0;

font-size:15px;

color:#666;

}  

.message-card{
    position: relative;
    transform: translateY(-40px);
}

@media (max-width:991px){
    .message-card{
        transform: translateY(0);
    }
}




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

.message-card{
    position: relative;
    transform: translateY(-45px);   /* Move upward */
    padding: 20px 10px 20px 35px;
}

/* Heading */

.title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.05;
    color: #0A2E5D;
    margin-bottom: 18px;
}

.title span{
    display: block;
    color: #D4AF37;
}

/* Divider */

.gold-divider{
    width: 90px;
    height: 4px;
    background: linear-gradient(to right,#D4AF37,#F5D889);
    border-radius: 20px;
    margin-bottom: 28px;
}

/* Intro */

.intro{
    font-size: 20px;
    font-weight: 600;
    color: #0A2E5D;
    margin-bottom: 20px;
}

/* Paragraphs */

.message-card p{
    font-size: 17px;
    line-height: 1.95;
    text-align: justify;
    color: #555;
    margin-bottom: 22px;
}

/* Mobile */

@media (max-width:991px){

    .message-card{
        transform: translateY(0);
        padding: 0;
        margin-top: 30px;
    }

    .title{
        font-size: 42px;
        text-align: center;
    }

    .gold-divider{
        margin: 20px auto;
    }

    .intro{
        text-align: center;
    }

    .message-card p{
        text-align: justify;
    }
}




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

.photo-card{
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    transition: .4s ease;
}

.photo-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(0,0,0,.20);
}

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

.chairperson-photo{
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

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

.name-card{
    background: #ffffff;
    padding: 22px 25px;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,.08);
}

.name-card h2{
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 6px;
}

.name-card h5{
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 6px;
}

.name-card p{
    margin: 0;
    color: #666;
    font-size: 15px;
}





.row.align-items-center{
    align-items: stretch !important;
}



.message-full{
    max-width: 1200px;
    margin: 0;
    padding: 0;
    border-top: none;
}

.message-full p{
    font-size: 17px;
    line-height: 1.95;
    text-align: justify;
    color: #555;
    margin-bottom: 10px;
}




.message-card{
    padding-bottom: 0;
}

.message-card p:last-child{
    margin-bottom: 0;
}

.message-full p:first-child{
    margin-top: 0;
}