:root {
    --primary-color: #0066cc;
    --secondary-color: #001f3f;
    --accent-color: #ffcc00;
    --bg-color: #99e6ff;
    --card-bg: #ffffcc;
    --text-main: #000099;
    --text-muted: #8b9bb4;
    --bg-light: #ffffe6;
    --text-dark: #1D2731;
    --text-muted: #576574;
    --white: #FFFFFF;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    padding: 0px 0px;
}


/* HEADER */

.vb {
    background:#ff601c;
    height:25px;
}

.vb h5{
    font-size:16px;
    color:white;
    font-weight:bold;
    text-align:center;
}


header{
    background:#f0d4fc;
}

#img-shadow {
    filter: drop-shadow(3px 3px 5px grey);  
}

.header-container{
    background:#f0d4fc;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    text-align:center;
}

.top-bar{
    background:#001f54;
    color:white;
    display:flex;
    justify-content:center;
    gap:20px;
    padding:4px;
}

.top-bar a{
    color:white;
    text-decoration:none;
}

.logo-section{
    width:10%;
}

.logo-section-right{
    width:10%;
}

.logo-section img{
    width:90px;
    height:90px;
}

.logo-section-right img{
    width:70px;
    height:100px;
}

.whatsapp-btn{
    position:fixed;
    bottom:30px;
    right:20px;
    width:55px;
    height:55px;
    background:#25d366;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:30px;
    z-index:9999;
}

.title-section {
    width:80%;
}
    
.title-section h1{
    color:#ff0000;
    font-size:46px;
    font-weight:bolder;
    text-shadow: 3px 3px 3px #ffffff;
}

.title-section h2{
    color:blue;
    font-size:25px;
    font-weight:bolder;
    margin-bottom:5px;
}

.title-section h3{
    background-color:yellow;
    color:blue;
    font-size:16px;
    font-weight:bolder;
}

.title-section p{
    font-size:18px;
    color:blue;
}


.affl {
    align-items:center;
    justify-content:center;
    width:100%;
    /*height:60px;*/
    background-color:#fbfc97;
    padding:0px;
}

.affl h4{
    font-size:16px;
    background:green;
    color:white;
    text-align:center;
}

.affl h5{
    font-size:16px;
    color:blue;
    text-align:center;
}

 /*MOBILE BUTTON */
.menu-toggle{
    display:none;
    color:white;
    font-size:20px;
    padding:5px;
    cursor:pointer;
}

/* 70% Width Allocation for Slider */
.slider-wrapper {
    width: 70%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    aspect-ratio: 16 / 9;
    background: #fff;
}

.slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 500;
}

/* Slider Dots */

.slider-dots{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:20;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,0.6);
    cursor:pointer;
    transition:0.3s;
}

.dot:hover{
    background:white;
    transform:scale(1.2);
}

.dot.active{
    background:#ffcc00;
    transform:scale(1.3);
}
   

/* NAVIGATION */
nav{
    background:#003f88;
    /*position:relative;*/
    
    position:sticky;
    top:0;
    z-index:9999;
}

nav ul{
    list-style:none;
    display:flex;
    justify-content:center;
    align-items:center;
}

nav ul li{
    position:relative;
}

nav ul li a{
    color:white;
    text-decoration:none;
    padding:10px 20px;
    display:block;
    transition:0.3s;
}

nav ul li a:hover{
    background:#0056b3;
}

nav ul.active{
    display:flex;
}

 /*SUBMENU */
.submenu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#003f88;
    min-width:200px;
    z-index:999;
}

.submenu li{
    width:100%;
}


.dropdown:hover .submenu{
    display:block;
}

/* Dashboard Container Layout */
.dashboard-container {
    background:var(--bg-color);
    display: flex;
    gap: 30px;
    max-width: 1400px;
    margin: 10px auto;
    width: 100%;
}


.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    color: #333;
    z-index: 10;
}

.nav-btn:hover {
    background: #ffffff;
    color: #000;
}

.prev { left: 15px; }
.next { right: 15px; }



 /*30% Width Allocation for Notice Board */
.notice-board {
    width: 30%;
    max-height:550px;
    background: #f3fab4;
    /*background:#f0d4fc;*/
    /*background:white;*/
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    border-top: 5px solid #3b82f6;
    border-bottom: 2px solid #3b82f6;
}

.notice-header {
    font-size: 1.4rem;
    font-weight: 700;
    color: red;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 10px;
}

.notice-list {
    list-style: none;
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 5px;
}

 /*Custom Scrollbar for Notices */
.notice-list::-webkit-scrollbar {
    width: 8px;
}
.notice-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.notice-item {
    /*background:#f8fccc;*/
    /*background:#f0d4fc;*/
    background: #f3fab4;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: transform 0.2s;
}

.notice-item:hover {
    transform: translateX(3px);
}

.notice-date {
    font-size: 0.75rem;
    color: red;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.notice-title {
    font-size: 0.95rem;
    /*color: #334155;*/
    color:#080d66;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    display: block;
}

.notice-title:hover {
    color: #2563eb;
}

/*.stats{*/
/*    display:grid;*/
/*    grid-template-columns:repeat(4,1fr);*/
/*    display:flex;*/
/*    flex-grow:1;*/
/*    justify-content:center;*/
/*    gap:10px;*/
/*    margin:10px;*/
/*}*/

/*.stats div{*/
/*    background-color:yellow;*/
/*    padding:15px;*/
/*    text-align:center;*/
/*    border-radius:10px;*/
/*    box-shadow:0 2px 10px rgba(0,0,0,.1);*/
/*    font-size:16px;*/
/*}*/

/* --- Flexbox Stats Section --- */

.container-qualities {
    background-color: #2952a3;
    
    padding: 30px 20px;
    /*max-width: 1200px;*/
    margin: 0 auto;
}

.infra-header {
    background-color: #2952a3;
    text-align: center;
    margin-bottom: 40px;
    padding: 10px 20px;
}

.infra-header h2 {
    text-align:center;
    font-size: 2.5rem;
    /*background-color: #ccffb3;*/
    color: #ffffff;
    margin-bottom: 10px;
}

.infra-header p {
    color: #64748b;
    font-size: 1.1rem;
}

.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* Base Flexbox Item Styling */
.stats > div {
    /* flex-grow: 1, flex-shrink: 1, flex-basis: 220px */
    flex: 1 1 220px; 
    min-height: 110px;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

/* Decorative Pseudo-icon spacing */
.stats > div::before {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

/* Hover Interaction */
.stats > div:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --- Individual Color & Icon Customization --- */

/* Campus & Nature (Emerald Green / Teal Themes) */
.stats > div:nth-child(1) { background-color: #ecfdf5; color: #065f46;}
.stats > div:nth-child(1)::before { content: "📐"; }

.stats > div:nth-child(2) { background-color: #f0fdf4; color: #166534; }
.stats > div:nth-child(2)::before { content: "🌱"; }

/* Sports (Warm Orange / Amber Themes) */
.stats > div:nth-child(3) { background-color: #fffbeb; color: #92400e; }
.stats > div:nth-child(3)::before { content: "🏃‍♂️"; }

.stats > div:nth-child(4) { background-color: #fef3c7; color: #78350f; }
.stats > div:nth-child(4)::before { content: "🏀"; }

.stats > div:nth-child(5) { background-color: #fff7ed; color: #9a3412; }
.stats > div:nth-child(5)::before { content: "🏐"; }

/* Security & Residential (Red / Rose / Indigo Themes) */
.stats > div:nth-child(6) { background-color: #fef2f2; color: #991b1b; }
.stats > div:nth-child(6)::before { content: "🛡️"; }

.stats > div:nth-child(7) { background-color: #e0e7ff; color: #3730a3; }
.stats > div:nth-child(7)::before { content: "🏢"; }

/* Dining & Kitchen (Yellow / Orange Themes) */
.stats > div:nth-child(8) { background-color: #fffbeb; color: #854d0e; }
.stats > div:nth-child(8)::before { content: "🧑‍🍳"; }

.stats > div:nth-child(9) { background-color: #faf5ff; color: #6b21a8; }
.stats > div:nth-child(9)::before { content: "🍽️"; }

/* Labs & Academics (Cyan / Blue / Violet Themes) */
.stats > div:nth-child(10) { background-color: #ecfeff; color: #155e75; }
.stats > div:nth-child(10)::before { content: "⚛️"; }

.stats > div:nth-child(11) { background-color: #e0f2fe; color: #075985; }
.stats > div:nth-child(11)::before { content: "🧪"; }

.stats > div:nth-child(12) { background-color: #f0fdfa; color: #115e59; }
.stats > div:nth-child(12)::before { content: "🧬"; }

.stats > div:nth-child(13) { background-color: #eff6ff; color: #1e40af; }
.stats > div:nth-child(13)::before { content: "💻"; }

.stats > div:nth-child(14) { background-color: #f5f3ff; color: #5b21b6; }
.stats > div:nth-child(14)::before { content: "🛠️"; }

.stats > div:nth-child(15) { background-color: #fdf2f8; color: #9d174d; }
.stats > div:nth-child(15)::before { content: "📚"; }

.scroll-container {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    padding: 15px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 1.05);
}

/* The track holds the images and runs the animation */
.scroll-track {
    display: flex;
    gap: 20px; /* Space between images */
    width: max-content;
    /* 20s dictates the speed. Adjust to make it faster/slower */
    animation: scroll 20s linear infinite;
}

/* Pauses the entire animation when the user hovers over the track */
.scroll-container:hover .scroll-track {
    animation-play-state: paused;
}

/* Styling the anchor tags */
.scroll-track a {
    display: block;
    flex-shrink: 0;
}

/* Image styling */
.scroll-track img {
    width: 300px; /* Fixed width for consistency */
    height: 200px;
    object-fit: cover; /* Ensures images aren't stretched */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Individual image pop effect on hover */
.scroll-track img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translates left by 50% (minus half the gap to align perfectly) */
        transform: translateX(calc(-40% - 10px));
    }
}

@media (max-width: 480px) {
    .stats > div {
        flex: 1 1 calc(50% - 16px); /* 2 Columns grid for cleaner mobile structure */
        padding: 15px 10px;
        font-size: 0.95rem;
    }
    header h2 {
        font-size: 1.8rem;
    }
}

@media(max-width:768px){
    #img-shadow {
      filter: drop-shadow(2px 2px 3px grey);
    }

    .header-container{
        flex-direction:row;
    }
    
    .vb{
        font-size:10px;
    }

    .logo-section img{
        width:40px;
        height:40px;
        margin-top:0px;
        margin-left:5px;
        margin-bottom:0px;
    }

    .logo-section-right img{
        width:30px;
        height:40px;
        margin-top:0px;
        margin-right:5px;
        margin-bottom:0px;
    }

    .title-section h1{
        font:verdana;
        font-size:18px;
        font-weight:bolder;
    }

    .title-section h2{
        font-size:18px;
    }

    .title-section p{
        font-size:12px;
    }

    .affl {
        height:40px;
    }
    
    .affl h4{
        font-size:12px;
    }
    
    .affl h5{
        font-size:12px;
    }

    .menu-toggle{
        display:block;
        color:#fff;
        font-size:24px;
        padding:10px;
        text-align:right;
        cursor:pointer;
    }

    nav ul{
        display:none;
        flex-direction:column;
        width:100%;
        background:#003f88;
    }

    nav ul.active{
        display:flex;
    }

    nav ul li{
        width:100%;
        border-top:1px solid rgba(255,255,255,.15);
    }

    /*nav ul li a{*/
    /*    padding:14px;*/
    /*}*/
    nav ul li a{
        padding:14px;
        min-height:48px;
        display:flex;
        align-items:center;
    }

    .menu{
        transition:all .3s ease;
    }
    .menu.active{ 
        display: flex;
    }
    
    .submenu{
        display:none;
        position:static;
        background:#002d63;
        width:100%;
    }

    .dropdown.active .submenu{
        display:block;
    }

    .submenu li a{
        padding-left:30px;
    }

    .content h2{
        font-size:28px;
    }

    .content p{
        font-size:18px;
    }
    .prev, .next{
        font-size:16px;
        padding:5px 5px;
        top:40%;
    }

    .main-container{
        flex-direction: column;
    }
    
    .slider-wrapper, .notice-section{
        width:100%;
    }

    .stats > div {
        flex: 1 1 calc(33.33% - 16px); /* 3 Columns */
        min-height: 100px;
        font-size: 1rem;
    }

    .scroll-track img {
        width: 220px;
        height: 150px;
    }
}

/* Responsive Breakpoint for Tablets and Mobile */
@media (max-width: 940px) {
    .dashboard-container{
        flex-direction: column;
    }
    .slider-wrapper, .notice-board{
        width: 100%;
    }
    .notice-board {
        height: 400px;
    }
}