/* --- Local Font Definitions --- */



/* Regular */
@font-face {
    font-family: 'Roboto Condensed Local';
    src: url('../fonts/roboto-condensed.regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Yeh zaroori hai */
}

/* Bold */
@font-face {
    font-family: 'Roboto Condensed Local';
    src: url('../fonts/RobotoCondensed-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
   font-display: swap; /* Yeh zaroori hai */
}

/* Light */
@font-face {
    font-family: 'Roboto Condensed Local';
    src: url('../fonts/RobotoCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
   font-display: swap; /* Yeh zaroori hai */
}

/* Ab pure page par apply karein */
body {
    font-family: 'Roboto Condensed Local', Segoe UI, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .mylogo, .mylogo1 {
    font-family: 'RobotoCondensedLocal', sans-serif !important;
}



        :root { --bg-color: linear-gradient(to right, white, antiquewhite); --text-main: #333; --header-bg: #fdfae5; --scale: 1; }
       
/* Force White Text on Dark Theme */
[data-theme="dark"], 
[data-theme="dark"] body, 
[data-theme="dark"] main {
    background: #121212 !important;
    color: #ffffff !important;
}




/* --- 1. Login Section & Sidebar Fix --- */
[data-theme="dark"] .login-sidebar .btn-login {
    background-color: #1e1e1e !important; /* Button background dark */
    color: #ffffff !important;           /* Text white */
    border: 1px solid #444 !important;
}

[data-theme="dark"] .login-sidebar .btn-login:hover {
    background-color: #333333 !important;
    color: #ffc107 !important;           /* Hover par yellow text */
}

/* --- 2. Footer Hyperlinks Background & Font Fix --- */
[data-theme="dark"] .footer-row {
    background-color: #000000 !important; /* Row background dark */
    border-bottom: 1px solid #333 !important;
}

[data-theme="dark"] .footer-row .nav-link {
    color: #ffffff !important;           /* Font white */
    background: transparent !important;   /* Background dark/transparent */
}

[data-theme="dark"] .footer-row .nav-link:hover {
    color: #ffc107 !important;           /* Hover par font yellow */
    background-color: #222 !important;   /* Hover par halka grey effect */
}

/* --- 3. Overall Font Color Force (For all sections) --- */
[data-theme="dark"] .project-box, 
[data-theme="dark"] .tab-box, 
[data-theme="dark"] .bg-light, 
[data-theme="dark"] .bg-white,
[data-theme="dark"] .icon-caption,
[data-theme="dark"] p,
[data-theme="dark"] h6 {
    background-color: #1a1a1a !important;
    color: #ffffff !important; /* Force font white */
}

/* Specific fix for yellow boxes in Dark Mode */
[data-theme="dark"] .alert-warning {
    background-color: #2c2100 !important;
    color: #ffc107 !important;
    border: 1px solid #444 !important;
}
/* --- 1. Logo/Header Section Dark Mode --- */
[data-theme="dark"] .header-main {
    background: #1a1a1a !important; /* Header background dark */
    border-bottom: 4px solid #333 !important; /* Brown border ko dark grey kiya */
}

[data-theme="dark"] .mylogo, 
[data-theme="dark"] .mylogo1 {
    color: #ffffff !important; /* Education Department text white */
}

/* --- 2. Navbar (Menu Bar) Dark Mode --- */
[data-theme="dark"] .navbar.menucontant1 {
    background-color: #000000 !important; /* Brown menu ko black kiya */
    box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

[data-theme="dark"] .navbar.menucontant1 .nav-link {
    color: #ffffff !important; /* Menu links white */
}

[data-theme="dark"] .navbar.menucontant1 .nav-link:hover {
    color: #ffc107 !important; /* Hover effect */
}




/* Footer safety */
[data-theme="dark"] .footercontant {
    background: #000000 !important;
}

        body { font-family: 'Roboto Condensed', sans-serif; background: var(--bg-color); color: var(--text-main); transition: 0.3s; font-size: calc(16px * var(--scale)); overflow-x: hidden; }

        .top-nav { background: #000; color: #fff; padding: 8px 0; z-index: 1050; position: sticky; top: 0; }
        .top-nav a, .top-nav button { color: #fff; text-decoration: none; background: none; border: 1px solid #444; padding: 2px 10px; font-size: 13px; margin: 2px; border-radius: 4px; display: inline-block; }
        .search-wrap { display: flex; background: white; border-radius: 4px; overflow: hidden; height: 28px; margin-left: 10px; }
        .search-wrap input { border: none; padding: 0 10px; font-size: 12px; outline: none; width: 130px; color: #333; }
        .search-wrap button { background: #f1b407; border: none; color: #000; padding: 0 10px; height: 100%; }

        .header-main { background: var(--header-bg); padding: 10px 0; border-bottom: 4px solid #AA5E20; }
        .logo-img { height: 50px; max-width: 100%; width: auto; }
        .mylogo { font-size: calc(28px * var(--scale)); font-weight: 700; color: #AA5E20; text-align: right; line-height: 1.1; margin: 0; }
        .mylogo1 { font-size: calc(16px * var(--scale)); font-weight: 700; color: #AA5E20; text-align: right; }

        .menucontant1 { background: #AA5E20 !important; }
        .nav-link { color: white !important; font-size: calc(13px * var(--scale)) !important; text-transform: uppercase; font-weight: 500; }

        .login-sidebar .btn-login {
            display: flex; align-items: center; background: white; border: 1px solid #ddd;
            border-radius: 50px; padding: 8px 15px; margin-bottom: 10px;
            text-decoration: none; color: #AA5E20; font-weight: bold;
            font-size: calc(14px * var(--scale)); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: 0.3s; height: 56px; 
        }
        .login-sidebar img { width: 35px; height: 35px; border-radius: 50%; margin-right: 12px; }

        /* Carousel Styling with Controls Visibility */
        .carousel-item img { height: 320px; object-fit: cover; border-radius: 8px; width: 100%; cursor: pointer; }
        .carousel-control-prev-icon, .carousel-control-next-icon { background-color: rgba(0,0,0,0.5); border-radius: 50%; padding: 20px; }

        @media (max-width: 768px) { 
            .carousel-item img { height: auto; min-height: 200px; } 
            .mylogo, .mylogo1 { text-align: center; }
            .header-main { text-align: center; }
        }

        .icon-card { text-align: center; text-decoration: none; display: block; margin-bottom: 25px; }
        .icon-card img { border-radius: 15px; width: 100%; max-width: 220px; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .icon-caption { display: block; margin-top: 10px; font-weight: bold; color: #AA5E20; font-size: calc(14px * var(--scale)); line-height: 1.2; }

        /* Unified Height Section */
        .project-box, .tab-box { height: 350px; background: white; border: 1px solid #ddd; border-top: none; overflow: hidden; position: relative; }
        .tab-box { background: #FFFFCC; }
        
        .marquee-controls { position: absolute; top: 5px; right: 5px; z-index: 10; display: flex; gap: 5px; }
        .marquee-controls button { font-size: 11px; padding: 2px 10px; background: #AA5E20; color: white; border: none; border-radius: 3px; cursor: pointer; font-weight: bold; }

        .footer-row { background: #AA5E20; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 12px 0; }
        .link-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; text-align: center; }
        @media (max-width: 992px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
        .footer-row .nav-link { color: white !important; font-size: calc(12px * var(--scale)) !important; }

        .footercontant { background: #612A0D !important; color: white; padding: 40px 0; }
        #backToTop { position: fixed; bottom: 30px; right: 30px; display: none; z-index: 1000; border-radius: 50%; }

/* Copyright section ka font size kam karne ke liye */
.footercontant p.small {
    font-size: 10px !important;
    line-height: 1.4;
    color: #cccccc; /* Thoda light color taaki aankhon ko na chube */
}
/* Footer ki overall height aur padding kam karne ke liye */
footer.footercontant {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Paragraph ki default margin hatane aur font chhota karne ke liye */
footer.footercontant p.small {
    margin-bottom: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

/* Social media icons ke upar ki gap kam karne ke liye */
footer.footercontant .mb-4 {
    margin-bottom: 5px !important;
}


@media (max-width: 768px) {
    .carousel-item img {
        height: 200px !important; /* Mobile ke liye fixed height */
        object-fit: fill !important; /* Image ko stretch karke poora bharega */
    }
}

.icon-card:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.footer-row .nav-link:hover {
    color: #ffc107 !important;
    font-weight: 600; /* Normal se thoda zyada bold */
}    

/* Mobile devices ke liye specific adjustments */
@media (max-width: 768px) {
    /* Information Links box ki height auto karna taaki content na kate */
    .project-box {
        height: auto !important;
        min-height: 300px;
        padding-bottom: 20px !important;
        overflow: visible !important;
    }

    /* Grid gaps ko mobile par thoda kam karna */
    .project-box .row.g-3 {
        --bs-gutter-y: 1.5rem; 
    }

    /* Icons ka size mobile par thoda adjust karna */
    .project-box img {
        height: 45px !important; 
    }

    /* Text size ko mobile friendly banana */
    .project-box .small {
        font-size: 11px !important;
        display: block;
        line-height: 1.2;
    }
}

/* What's New section ka background white karne ke liye */
.tab-box {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6; /* Halka border taaki white background alag dikhe */
}

/* Marquee aur Iframe ko bhi transparency ya white background dena */
#announcementMarquee {
    background-color: #ffffff !important;
}

#announcementMarquee iframe {
    background-color: #ffffff !important;
}

/* Marquee controls (Stop/Start buttons) ka background adjust karna agar zaroorat ho */
.marquee-controls {
    background: #f8f9fa; /* Buttons ke peeche halka grey background */
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

/* Universal Card Format */
.info-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 25px; /* Teeno ka padding same rahega */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: 0.3s;
}

/* Dark Mode ke liye same format */
[data-theme="dark"] .info-card {
    background: #1e1e1e !important;
    border-color: #444 !important;
    color: #ffffff !important;
}

/* Visitor Counter ke liye chhota wrapper */
.counter-wrapper {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    display: inline-block;
}

[data-theme="dark"] .counter-wrapper {
    background: #000 !important;
}

.alert-warning {
    background-color: #fff3cd !important;
    border: 1px solid #ffeeba !important;
    color: #856404 !important;
    min-height: 120px; /* Height thodi badhayi taaki justified text sahi dikhe */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify; /* Text ko dono taraf se barabar karega */
    text-justify: inter-word; /* Words ke beech space barabar karega */
    padding: 15px !important;
    font-weight: 600 !important; /* Light se Regular/Medium weight par switch kiya */
}

.login-text {
    margin-right: 5px; /* Aap ise apne hisaab se badha sakte hain */
}

.carousel-item img {
    width: 100%;
    height: auto;          /* auto height */
    max-height: 320px;     /* desktop control */
    object-fit: contain;  /* safe */
    display: block;
}

@media (max-width: 768px) {
    .carousel-item img {
        max-height: 200px; /* mobile control */
    }
}

/* Visitor Counter – clean & full width */
.visitor-container-new {
    background: transparent !important; /* background hata diya */
    border: none !important;             /* baar / line hata di */
    padding: 0 !important;
    width: 100% !important;
}

.visitor-container-new iframe {
    width: 100% !important;
    display: block;
}

/* --- 3-Column Footer with >> Icons --- */
.footer-links-container {
    background: #AA5E20 !important; /* Brown Background */
    padding: 30px 0;
    border-top: 4px solid #ffc107;
}

.footer-grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 40px;
}

.footer-grid-3-col .nav-link {
    color: #ffffff !important;
    font-size: calc(13px * var(--scale)) !important; /* A+/A- scaling works */
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: flex-start;
    transition: 0.3s ease;
    line-height: 1.4;
}

/* Icon (>>) Style */
.footer-grid-3-col .nav-link i {
    color: #ffc107; /* Yellow color for >> */
    margin-right: 12px;
    margin-top: 5px; /* Text ke center mein lane ke liye */
    font-size: 11px;
}

.footer-grid-3-col .nav-link:hover {
    color: #ffc107 !important;
    padding-left: 8px; /* Hover effect */
}

/* Dark Mode support */
[data-theme="dark"] .footer-links-container {
    background: #000000 !important;
}

/* Responsive adjustment */
@media (max-width: 992px) {
    .footer-grid-3-col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .footer-grid-3-col { grid-template-columns: 1fr; }
}

/* 1. Root level par scale ko define karein */
:root {
    --scale: 1; /* Default value */
}

/* 2. Global font-size ko scale variable se connect karein */
html {
    /* calc use karne se font increase/decrease poore page par kaam karega */
    font-size: calc(16px * var(--scale)) !important;
}

/* 3. Information Links ke liye specific fix */
/* Kyunki aapne 'small' class use ki hai, hume use override karna hoga */
.project-box a.small {
    /* Bootstrap ki .small class ko variable ke saath multiply karein */
    font-size: calc(0.875rem * var(--scale)) !important;
    display: inline-block; /* Behtar scaling ke liye */
}

/* 4. Agar mobile par abhi bhi bada/chota dikhe, toh ise use karein */
@media (max-width: 768px) {
    .project-box a.small {
        /* Mobile ke liye base size thoda adjust kar sakte hain */
        font-size: calc(0.8rem * var(--scale)) !important;
    }
}