/* =========================================================
   ADMINISTRATIVE / TRUST STAFF PAGE
   VALLAL P.T. LEE CHENGALVARAYA NAICKER TRUST
   ========================================================= */


/* =========================================================
   UNIVERSAL RESET
   ========================================================= */

.administrative-page,
.administrative-page * {
    box-sizing: border-box;
}


.administrative-page {
    width: 100%;
    overflow: hidden;

    font-family: "Poppins", sans-serif;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f9ff 50%,
            #ffffff 100%
        );
}


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

.administrative-hero {

    min-height: 380px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

    padding:
        100px
        25px
        90px;

    background:

        linear-gradient(
            135deg,
            #081b5e 0%,
            #123f9c 22%,
            #0066cc 42%,
            #5327a8 65%,
            #8a176b 82%,
            #d4145a 100%
        );

    background-size: 300% 300%;

    animation:
        administrativeHeroGradient
        15s ease
        infinite;

}


/* =========================================================
   HERO ANIMATED GRADIENT
   ========================================================= */

@keyframes administrativeHeroGradient {

    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }

}


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

.administrative-orb-one,
.administrative-orb-two,
.administrative-orb-three {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);

}


.administrative-orb-one {

    width: 320px;

    height: 320px;

    top: -100px;

    left: -80px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.25),
            rgba(255,255,255,0)
        );

    animation:
        orbOneAnimation
        9s
        ease-in-out
        infinite;

}


.administrative-orb-two {

    width: 400px;

    height: 400px;

    right: -120px;

    bottom: -180px;

    background:
        radial-gradient(
            circle,
            rgba(255,80,180,0.28),
            rgba(255,80,180,0)
        );

    animation:
        orbTwoAnimation
        11s
        ease-in-out
        infinite;

}


.administrative-orb-three {

    width: 220px;

    height: 220px;

    right: 15%;

    top: 8%;

    background:
        radial-gradient(
            circle,
            rgba(0,220,255,0.24),
            rgba(0,220,255,0)
        );

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

}


@keyframes orbOneAnimation {

    0%,
    100% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(80px, 50px)
            scale(1.15);
    }

}


@keyframes orbTwoAnimation {

    0%,
    100% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(-70px, -60px)
            scale(1.15);
    }

}


@keyframes orbThreeAnimation {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(50px)
            scale(1.2);
    }

}


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

.administrative-glow-one {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    left: 20%;

    top: 20%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.09),
            transparent 70%
        );

    animation:
        glowPulse
        7s
        ease-in-out
        infinite;

}


.administrative-glow-two {

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    right: 15%;

    bottom: 10%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.08),
            transparent 70%
        );

    animation:
        glowPulse
        9s
        ease-in-out
        infinite
        reverse;

}


@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.45;

        transform: scale(1);
    }

    50% {
        opacity: 1;

        transform: scale(1.25);
    }

}


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

.administrative-hero-content {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 1050px;

    margin: auto;

    color: #ffffff;

}


/* =========================================================
   TRUST STAFF LOGO
   ========================================================= */

.administrative-hero-logo {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 25px;

}


.administrative-logo-ring {

    width: 105px;

    height: 105px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    background:

        linear-gradient(
            135deg,
            #ff1744,
            #ff6d00,
            #ffd600,
            #00c853,
            #00b0ff,
            #2979ff,
            #651fff,
            #d500f9,
            #ff1744
        );

    background-size: 500% 500%;

    animation:
        logoGradient
        6s
        linear
        infinite,

        logoFloat
        4s
        ease-in-out
        infinite;

    box-shadow:

        0 0 0 7px
        rgba(255,255,255,0.12),

        0 18px 55px
        rgba(0,0,0,0.30);

}


.administrative-logo-ring::before {

    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.97);

}


.administrative-logo-ring i {

    position: relative;

    z-index: 2;

    font-size: 44px;

    background:

        linear-gradient(
            135deg,
            #ff1744,
            #ff6d00,
            #ffd600,
            #00c853,
            #00b0ff,
            #2979ff,
            #651fff,
            #d500f9
        );

    background-size: 500% 500%;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        logoIconGradient
        5s
        linear
        infinite;

}


@keyframes logoGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


@keyframes logoIconGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


/* =========================================================
   EYEBROW
   ========================================================= */

.administrative-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        9px
        20px;

    margin-bottom: 12px;

    border:

        1px solid
        rgba(255,255,255,0.28);

    border-radius: 50px;

    background:
        rgba(255,255,255,0.10);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}


.administrative-eyebrow i {

    font-size: 15px;

}


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

.administrative-hero h1 {

    margin:
        15px
        0
        25px;

    font-size:
        clamp(
            46px,
            7vw,
            82px
        );

    line-height: 1.08;

    font-weight: 700;

    color: #ffffff;

    letter-spacing: -2px;

    text-shadow:
        0 5px 25px
        rgba(0,0,0,0.22);

}


/* =========================================================
   TRUST STAFFS - SLOW PROFESSIONAL GRADIENT
   ========================================================= */

.animated-administrative-word {
    display: inline-block;
    position: relative;

    font-weight: 800;
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ff1744 0%,
            #ff6d00 12%,
            #ffd600 24%,
            #00c853 38%,
            #00b0ff 52%,
            #2979ff 65%,
            #651fff 78%,
            #d500f9 90%,
            #ff1744 100%
        );

    background-size: 600% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        trustStaffGradient
        18s
        linear
        infinite;
}


/* =========================================================
   SLOW GRADIENT ANIMATION
   ========================================================= */

@keyframes trustStaffGradient {

    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 150% 50%;
    }

    50% {
        background-position: 300% 50%;
    }

    75% {
        background-position: 450% 50%;
    }

    100% {
        background-position: 600% 50%;
    }

}


/* =========================================================
   SLOW UNDERLINE ANIMATION
   ========================================================= */

.animated-administrative-word::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -8px;

    height: 5px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #ff1744,
            #ff6d00,
            #ffd600,
            #00c853,
            #00b0ff,
            #2979ff,
            #651fff,
            #d500f9,
            #ff1744
        );

    background-size: 600% 100%;

    animation:
        underlineGradient
        15s
        linear
        infinite;
}


@keyframes underlineGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 300% 50%;
    }

    100% {
        background-position: 600% 50%;
    }

}
/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

.administrative-hero p {

    max-width: 800px;

    margin:
        0
        auto;

    color:
        rgba(255,255,255,0.88);

    font-size: 16px;

    line-height: 1.9;

    font-weight: 400;

}

/* =========================================================
   STAFF SECTION
   CLEAN BLUE + PINK TRUST DESIGN
========================================================= */

.staff-section {
    position: relative;

    padding:
        90px
        20px
        100px;

    background:
        linear-gradient(
            180deg,
            #f7f9fd 0%,
            #ffffff 45%,
            #f7f9fd 100%
        );
}


.administrative-container {
    width: 100%;

    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.staff-intro {
    text-align: center;

    max-width: 800px;

    margin:
        0
        auto
        55px;
}


/* =========================================================
   SECTION KICKER
========================================================= */

.section-kicker {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    color: #356CE2;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.section-kicker::before,
.section-kicker::after {
    content: "";

    width: 25px;

    height: 2px;

    border-radius: 10px;

    background: #E2134F;
}


/* =========================================================
   INTRO TITLE
========================================================= */

.staff-intro h2 {
    margin:
        0
        0
        15px;

    color: #172033;

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.6px;
}


.staff-intro p {
    max-width: 750px;

    margin: 0 auto;

    color: #5D6878;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   STAFF GROUP CARD
========================================================= */

.staff-group {
    position: relative;

    margin-bottom: 30px;

    overflow: hidden;

    background: #FFFFFF;

    border:
        1px solid
        #E5E9F0;

    border-radius: 18px;

    box-shadow:
        0 10px 35px
        rgba(23,32,51,0.07);

    opacity: 0;

    transform:
        translateY(60px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


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

.staff-group.table-visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

.staff-group.table-visible:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(53,108,226,0.20);

    box-shadow:
        0 20px 45px
        rgba(23,32,51,0.13);
}


/* =========================================================
   STAFF HEADER
========================================================= */

.staff-group-header {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    padding:
        22px
        28px;

    background:
        linear-gradient(
            135deg,
            #F5F8FF 0%,
            #FFFFFF 100%
        );

    border-bottom:
        1px solid
        #E5E9F0;
}


/* =========================================================
   LEFT ACCENT
========================================================= */

.staff-group-header::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background:
        #E2134F;
}


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

.staff-group-icon {
    flex: 0 0 60px;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #E2134F 0%,
            #356CE2 100%
        );

    color: #FFFFFF;

    font-size: 23px;

    box-shadow:
        0 8px 22px
        rgba(53,108,226,0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.staff-group:hover .staff-group-icon {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(53,108,226,0.28);
}


/* =========================================================
   HEADER TITLE
========================================================= */

.staff-group-header h3 {
    margin:
        0
        0
        4px;

    color: #172033;

    font-size: 19px;

    line-height: 1.35;

    font-weight: 700;
}


/* =========================================================
   HEADER SUBTITLE
========================================================= */

.staff-group-header span {
    display: block;

    color: #5D6878;

    font-size: 12px;

    font-weight: 500;
}


/* =========================================================
   HEADER SMALL TEXT
========================================================= */

.staff-group-header small {
    display: block;

    margin-top: 4px;

    color: #8791A2;

    font-size: 10px;

    font-weight: 500;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.staff-table-wrapper {
    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

    scrollbar-color:
        #B8C7E5
        #F5F7FA;
}


.staff-table-wrapper::-webkit-scrollbar {
    height: 7px;
}


.staff-table-wrapper::-webkit-scrollbar-track {
    background:
        #F5F7FA;
}


.staff-table-wrapper::-webkit-scrollbar-thumb {
    background:
        #B8C7E5;

    border-radius: 20px;
}


.staff-table-wrapper::-webkit-scrollbar-thumb:hover {
    background:
        #356CE2;
}


/* =========================================================
   TABLE
========================================================= */

.staff-table {
    width: 100%;

    min-width: 760px;

    table-layout: fixed;

    border-collapse: collapse;

    background: #FFFFFF;
}


/* =========================================================
   COLUMN WIDTHS
========================================================= */

/* SL. NO. */

.staff-table th:first-child,
.staff-table td:first-child {
    width: 65px;

    min-width: 65px;

    max-width: 65px;

    text-align: center;

    white-space: nowrap;
}


/* NAME */

.staff-table th:nth-child(2),
.staff-table td:nth-child(2) {
    width: 270px;
}


/* DESIGNATION */

.staff-table th:nth-child(3),
.staff-table td:nth-child(3) {
    width: 285px;

    min-width: 285px;

    max-width: 285px;
}


/* OTHER / CONTACT */

.staff-table th:nth-child(4),
.staff-table td:nth-child(4) {
    width: 160px;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.staff-table thead th {
    padding:
        15px
        18px;

    background:
        #EAF0FC;

    color:
        #294A88;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.7px;

    line-height: 1.4;

    text-transform: uppercase;

    text-align: left;

    white-space: nowrap;

    border-bottom:
        2px solid
        #D7E1F3;
}


/* =========================================================
   SL. NO. HEADER
========================================================= */

.staff-table thead th:first-child {
    text-align: center;
}


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

.staff-table tbody td {
    padding:
        16px
        18px;

    color:
        #5D6878;

    font-size: 13px;

    line-height: 1.55;

    vertical-align: middle;

    background:
        #FFFFFF;

    border-bottom:
        1px solid
        #E9EDF3;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


/* =========================================================
   LAST ROW
========================================================= */

.staff-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   SL. NO.
========================================================= */

.staff-table tbody td:first-child {
    position: relative;

    color:
        #356CE2;

    font-size: 12px;

    font-weight: 700;

    text-align: center;
}


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

.staff-table tbody td:nth-child(2) {
    color:
        #172033;

    font-weight: 600;
}


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

.staff-table tbody td:nth-child(3) {
    text-align: left;

    vertical-align: middle;
}


.staff-table .designation-cell {
    text-align: left;

    vertical-align: middle;
}


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

.staff-table .designation-main {
    display: block;

    margin: 0;

    color:
        #24334F;

    font-size: 13px;

    line-height: 1.45;

    font-weight: 600;
}


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

.staff-table .designation-sub {
    display: block;

    margin:
        4px
        0
        0;

    color:
        #7C8798;

    font-size: 10.5px;

    line-height: 1.45;

    font-weight: 400;
}


/* =========================================================
   TABLE ROW HOVER
========================================================= */

.staff-table tbody tr:hover td {
    background:
        #F7F9FE;
}


/* =========================================================
   SL. NO. HOVER
========================================================= */

.staff-table tbody tr:hover td:first-child {
    color:
        #E2134F;
}


/* =========================================================
   PINK HOVER INDICATOR
========================================================= */

.staff-table tbody td:first-child::before {
    content: "";

    position: absolute;

    left: 0;

    top: 20%;

    bottom: 20%;

    width: 3px;

    border-radius:
        0
        5px
        5px
        0;

    background:
        #E2134F;

    opacity: 0;

    transform:
        scaleY(0.5);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.staff-table tbody tr:hover td:first-child::before {
    opacity: 1;

    transform:
        scaleY(1);
}


/* =========================================================
   STAGGERED SCROLL REVEAL
========================================================= */

.staff-group:nth-child(1) {
    transition-delay: 0.05s;
}

.staff-group:nth-child(2) {
    transition-delay: 0.12s;
}

.staff-group:nth-child(3) {
    transition-delay: 0.19s;
}

.staff-group:nth-child(4) {
    transition-delay: 0.26s;
}

.staff-group:nth-child(5) {
    transition-delay: 0.33s;
}

.staff-group:nth-child(6) {
    transition-delay: 0.40s;
}

.staff-group:nth-child(7) {
    transition-delay: 0.47s;
}

.staff-group:nth-child(8) {
    transition-delay: 0.54s;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {
    position: fixed;

    right: 24px;

    bottom: 24px;

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #E2134F,
            #356CE2
        );

    color:
        #FFFFFF;

    text-decoration: none;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

    z-index: 9999;

    box-shadow:
        0 10px 28px
        rgba(23,32,51,0.22);
}


.back-to-top.show {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


.back-to-top:hover {
    color:
        #FFFFFF;

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(23,32,51,0.30);
}


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

@media (max-width: 991px) {

    .staff-section {
        padding:
            70px
            18px
            80px;
    }


    .staff-table {
        min-width: 760px;
    }

}


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

@media (max-width: 576px) {

    .staff-section {
        padding:
            60px
            14px
            70px;
    }


    .staff-intro {
        margin-bottom: 40px;
    }


    .section-kicker {
        font-size: 10px;

        letter-spacing: 1.6px;
    }


    .section-kicker::before,
    .section-kicker::after {
        width: 18px;
    }


    .staff-intro h2 {
        font-size: 29px;
    }


    .staff-intro p {
        font-size: 12.5px;
    }


    /* -----------------------------------------
       STAFF CARD
    ----------------------------------------- */

    .staff-group {
        margin-bottom: 22px;

        border-radius: 15px;
    }


    .staff-group-header {
        gap: 12px;

        padding:
            17px
            18px;
    }


    .staff-group-icon {
        flex: 0 0 49px;

        width: 49px;

        height: 49px;

        border-radius: 12px;

        font-size: 19px;
    }


    .staff-group-header h3 {
        font-size: 15px;
    }


    .staff-group-header span {
        font-size: 10px;
    }


    .staff-group-header small {
        font-size: 9px;
    }


    /* -----------------------------------------
       MOBILE TABLE
    ----------------------------------------- */

    .staff-table {
        min-width: 755px;

        table-layout: fixed;
    }


    .staff-table th:first-child,
    .staff-table td:first-child {
        width: 60px;

        min-width: 60px;

        max-width: 60px;
    }


    .staff-table th:nth-child(2),
    .staff-table td:nth-child(2) {
        width: 250px;
    }


    .staff-table th:nth-child(3),
    .staff-table td:nth-child(3) {
        width: 275px;

        min-width: 275px;

        max-width: 275px;
    }


    .staff-table th:nth-child(4),
    .staff-table td:nth-child(4) {
        width: 150px;
    }


    .staff-table thead th {
        padding:
            12px
            14px;

        font-size: 9px;
    }


    .staff-table tbody td {
        padding:
            13px
            14px;

        font-size: 11.5px;
    }


    .staff-table .designation-main {
        font-size: 11.5px;
    }


    .staff-table .designation-sub {
        font-size: 9.5px;
    }


    /* -----------------------------------------
       BACK TO TOP
    ----------------------------------------- */

    .back-to-top {
        width: 43px;

        height: 43px;

        right: 14px;

        bottom: 14px;
    }

}


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

@media print {

    .staff-section {
        background:
            #FFFFFF !important;
    }


    .staff-group {
        opacity: 1 !important;

        transform: none !important;

        box-shadow: none;

        border:
            1px solid
            #CCCCCC;

        break-inside: avoid;

        page-break-inside: avoid;
    }


    .staff-table {
        min-width: 0;

        width: 100%;
    }


    .back-to-top {
        display: none !important;
    }

}


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

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

    .staff-group {
        opacity: 1;

        transform: none;

        transition: none;
    }


    .staff-group.table-visible:hover {
        transform: none;
    }


    .staff-group-icon,
    .back-to-top {
        transition: none;
    }

}