:root{

    --primary:#0f172a;
    --secondary:#1e293b;

    --accent:#2563eb;

    --text:#64748b;

    --white:#ffffff;

    --glass:rgba(255,255,255,0.65);

    --border:rgba(255,255,255,0.4);

    --shadow:
        0 10px 40px rgba(0,0,0,0.08);

    --transition:0.4s ease;
}

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

body{

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #eef2ff
        );

    color:var(--primary);

    overflow-x:hidden;

    position:relative;
}

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

.bg-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:0.5;

    z-index:0;

    animation:float 10s infinite ease-in-out;
}

.bg-shape.one{

    width:350px;
    height:350px;

    background:#dbeafe;

    top:-120px;
    left:-120px;
}

.bg-shape.two{

    width:280px;
    height:280px;

    background:#ede9fe;

    right:-100px;
    bottom:-100px;

    animation-duration:13s;
}

.bg-shape.three{

    width:200px;
    height:200px;

    background:#e0f2fe;

    top:40%;
    right:10%;

    animation-duration:8s;
}

/* ======================================
   FLOAT
====================================== */

@keyframes float{

    0%{
        transform:
            translateY(0px)
            rotate(0deg);
    }

    50%{
        transform:
            translateY(-25px)
            rotate(180deg);
    }

    100%{
        transform:
            translateY(0px)
            rotate(360deg);
    }
}

/* ======================================
   PARTICLES
====================================== */

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;
}

.particles span{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#cbd5e1;

    animation:particles 12s linear infinite;

    opacity:0.6;
}

.particles span:nth-child(1){
    left:10%;
    animation-delay:0s;
}

.particles span:nth-child(2){
    left:30%;
    animation-delay:2s;
}

.particles span:nth-child(3){
    left:50%;
    animation-delay:4s;
}

.particles span:nth-child(4){
    left:70%;
    animation-delay:6s;
}

.particles span:nth-child(5){
    left:90%;
    animation-delay:8s;
}

/* ======================================
   PARTICLE ANIMATION
====================================== */

@keyframes particles{

    0%{
        transform:translateY(0);
        bottom:-20px;
    }

    100%{
        transform:
            translateY(-105vh)
            translateX(30px);

        bottom:100%;
    }
}

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

.committee-section{

    width:100%;

    min-height:100vh;

    padding:100px 20px;

    position:relative;

    z-index:2;
}

/* ======================================
   CONTAINER
====================================== */

.committee-container{

    width:100%;

    max-width:1300px;

    margin:auto;
}

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

.committee-header{

    text-align:center;

    margin-bottom:60px;
}

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:#ffffff;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.05);

    margin-bottom:25px;

    font-weight:600;

    color:#1e293b;
}

.committee-header h1{

    font-size:56px;

    line-height:1.2;

    margin-bottom:20px;

    font-weight:800;

    background:
        linear-gradient(
            to right,
            #0f172a,
            #2563eb
        );

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

.committee-header p{

    font-size:18px;

    color:var(--text);
}

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

.table-wrapper{

    background:var(--glass);

    backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:35px;

    overflow:hidden;

    box-shadow:var(--shadow);

    margin-bottom:70px;
}

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

table{

    width:100%;

    border-collapse:collapse;
}

thead{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color:#fff;
}

thead th{

    padding:22px;

    text-align:left;

    font-size:16px;
}

tbody tr{

    transition:var(--transition);

    border-bottom:1px solid rgba(0,0,0,0.06);
}

tbody tr:hover{

    background:
        rgba(37,99,235,0.05);

    transform:scale(1.01);
}

tbody td{

    padding:22px;

    color:var(--secondary);

    font-size:15px;
}

/* ======================================
   FACILITIES
====================================== */

.facilities-section{

    text-align:center;
}

.facilities-section h2{

    font-size:42px;

    margin-bottom:40px;

    font-weight:800;

    background:
        linear-gradient(
            to right,
            #0f172a,
            #2563eb
        );

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

/* ======================================
   FACILITY GRID
====================================== */

.facility-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:25px;
}

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

.facility-card{

    background:var(--glass);

    backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:28px;

    padding:40px 25px;

    transition:var(--transition);

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

.facility-card:hover{

    transform:
        translateY(-10px);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color:#fff;
}

.facility-card i{

    font-size:42px;

    margin-bottom:20px;
}

.facility-card h3{

    font-size:24px;

    font-weight:700;
}

/* ======================================
   REVEAL ANIMATION
====================================== */

.reveal-top,
.reveal-bottom{

    opacity:0;

    transition:1s ease;
}

.reveal-top{

    transform:translateY(-60px);
}

.reveal-bottom{

    transform:translateY(60px);
}

.reveal-active{

    opacity:1;

    transform:translateY(0);
}

/* ======================================
   RESPONSIVE
====================================== */

@media(max-width:992px){

    .committee-header h1{

        font-size:42px;
    }

    table{

        min-width:900px;
    }

    .table-wrapper{

        overflow-x:auto;
    }
}

@media(max-width:768px){

    .committee-section{

        padding:70px 15px;
    }

    .committee-header h1{

        font-size:34px;
    }

    .committee-header p{

        font-size:15px;
    }

    .facilities-section h2{

        font-size:32px;
    }
}

@media(max-width:500px){

    .facility-card{

        padding:30px 20px;
    }

    .facility-card h3{

        font-size:20px;
    }
}