/* ===== Container Main with Animated Background ===== */
.container-main{
    max-width:1200px;
    margin:60px auto;
    padding:45px;
    border-radius:25px;
    background:linear-gradient(135deg,#e8f5e9,#ffffff);
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
    position:relative;
    overflow:hidden;
}

/* Decorative floating circles */
.container-main::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:radial-gradient(circle,#372053,#28165d);
    opacity:0.15;
    border-radius:50%;
    top:-120px;
    left:-120px;
    animation: floatCircle1 10s ease-in-out infinite alternate;
}
.container-main::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:radial-gradient(circle,#251f4e,#0c1552);
    opacity:0.15;
    border-radius:50%;
    bottom:-120px;
    right:-120px;
    animation: floatCircle2 12s ease-in-out infinite alternate;
}
@keyframes floatCircle1{
    0%{ transform: translate(0,0) rotate(0deg);}
    50%{ transform: translate(20px,20px) rotate(15deg);}
    100%{ transform: translate(0,0) rotate(0deg);}
}
@keyframes floatCircle2{
    0%{ transform: translate(0,0) rotate(0deg);}
    50%{ transform: translate(-15px,-15px) rotate(-10deg);}
    100%{ transform: translate(0,0) rotate(0deg);}
}

/* Section Title */
.container-main h2{
    font-size:30px;
    font-weight:700;
    text-align:center;
    color:#2c2953;
    margin-bottom:35px;
    position:relative;
}
.container-main h2::after{
    content:"";
    width:90px;
    height:4px;
    background:linear-gradient(90deg,#292354,#3b1b5d);
    display:block;
    margin:10px auto;
    border-radius:10px;
}

/* ===== Grid Layout for Cards ===== */
.cards-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    justify-items:center;
}

/* ===== Card Member Styles ===== */
.card-member{
    background:#ffffff;
    border-radius:20px;
    padding:25px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    position:relative;
    overflow:hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    animation: fadeUp 0.8s ease forwards;
}
.card-member:hover{
    transform: translateY(-15px) scale(1.05);
    box-shadow:0 35px 70px rgba(0,0,0,0.25);
}
.card-member::before{
    content:"";
    position:absolute;
    width:150%;
    height:150%;
    top:-30%;
    left:-30%;
    background:radial-gradient(circle,rgba(102,187,106,0.2),transparent 70%);
    pointer-events:none;
    z-index:0;
    animation: glowMove 6s ease-in-out infinite alternate;
}
@keyframes glowMove{
    0%{ transform:translate(-30%,-30%) rotate(0deg); opacity:0.15;}
    50%{ transform:translate(-28%,-28%) rotate(10deg); opacity:0.2;}
    100%{ transform:translate(-30%,-30%) rotate(0deg); opacity:0.15;}
}
.card-member img{
    width:130px;
    height:130px;
    border-radius:50%;
    border:5px solid #3c1e4b;
    object-fit:cover;
    margin-bottom:12px;
    transition: transform 0.6s ease, border-color 0.6s ease;
    position:relative;
    z-index:1;
}
.card-member img:hover{
    transform: scale(1.15) rotate(-5deg);
    border-color:#2d1750;
    animation: imgBounce 0.6s ease;
}
@keyframes imgBounce{
    0%,100%{ transform: scale(1.15) rotate(-5deg);}
    50%{ transform: scale(1.2) rotate(0deg);}
}
.card-member h5{
    font-size:20px;
    font-weight:700;
    color:#2e2c4d;
    margin-bottom:5px;
}
.text-muted{
    display:inline-block;
    background: linear-gradient(90deg,#e8f5e9,#c8e6c9);
    color:#1b5e20 !important;
    font-weight:600;
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:8px;
    animation: badgePulse 2s infinite;
    transition: all 0.3s ease;
}
.card-member:hover .text-muted{
    background: linear-gradient(90deg,#33274f,#2d1c5a);
    color:#fff !important;
    transform: scale(1.05);
}
@keyframes badgePulse{
    0%,100%{ transform: scale(1); opacity:1;}
    50%{ transform: scale(1.05); opacity:0.85;}
}
.card-member p{
    font-size:14px;
    color:#444;
    margin:4px 0;
}
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(40px);}
    to{ opacity:1; transform:translateY(0);}
}

/* ===== BUTTON STYLES DARK BLUE ===== */
.card-member button,
button{
    background-color:#0a1d3f;  /* dark blue */
    color:#ffffff;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition: background 0.3s, transform 0.3s;
}
.card-member button:hover,
button:hover{
    background-color:#04203a;  /* darker blue on hover */
    transform: translateY(-2px);
}

/* Responsive */
@media(max-width:768px){
    .container-main{
        padding:25px;
        margin:20px;
    }
    .card-member img{
        width:100px;
        height:100px;
    }
}
.card-member img {
    width: 130px;             /* fixed width */
    height: 130px;            /* fixed height */
    object-fit: cover;        /* crops image to fit without distortion */
    object-position: center;  /* center the image */
    border-radius: 50%;       /* makes it circular */
    display: block;
    margin: 0 auto 15px;      /* center horizontally and spacing below */
    border: 5px solid #0a1d3f; /* dark blue border */
    transition: transform 0.6s ease, border-color 0.6s ease;
    position: relative;
    z-index: 1;
}

.card-member img:hover {
    transform: scale(1.15) rotate(-5deg); /* zoom + slight rotation */
    border-color: #0a1d3f; /* keep hover border dark blue */
}