/* Change navbar item text color */
        .navbar-nav .nav-link {
            color: white !important; /* Change this to your preferred color */
        }

        /* Change color when hovered */
        .navbar-nav .nav-link:hover {
            color: yellow !important; /* Change to highlight color */
            /*color: #5a4bd6 !important;*/
             backdrop-filter: blur(30px) ;
            -webkit-backdrop-filter: blur(30px);
            border-radius: 5px;
            box-shadow: 0 5px 30px 0 rgba(22,23,220,0.37);
        }

        /* Change active link color */
        .navbar-nav .nav-link.active {
            color: cyan !important; /* Change active link color */
        }

        /* Rotate arrow when dropdown is open */
        .navbar-nav .dropdown-toggle::after {
            transition: transform 0.3s ease-in-out;
        }

        .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
            transform: rotate(180deg);
        }

        /* Change dropdown item hover background */
        .dropdown-menu .dropdown-item:hover {
            background-color:rgb(145, 145, 146)!important;
            color: white !important;
        }

        .navbar-toggler {
            border: none; /* Optional: Remove border */
        }
        
        .navbar-toggler:focus, .navbar-toggler:active {
            outline: none; /* Remove focus outline */
            box-shadow: none; /* Remove box-shadow */
        }
        
        @media (max-width: 991px) { /* For mobile screens */
            .navbar-collapse {
               /* background-color: rgba(0, 0, 0, 0.8); /* Optional: Background color for small screen */
                padding: 10px;
            }
        }
        
        /* Hero Styling */
        .hero {
          position: relative;
          width: 100%;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 2rem;
          overflow: hidden;
          /*background: url('/../Uploads/your-background.jpg') center center/cover no-repeat;*/
        }
        
        .hero-overlay {
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.7);
          z-index: 1;
        }
        
        .hero-content {
          position: relative;
          z-index: 2;
          max-width: 90%;
          margin: auto;
        }
        
        .hero-content::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 400px;
          height: 400px;
          transform: translate(-50%, -50%);
          background: url('/../Uploads/anrvhslogo.jpg') no-repeat center center;
          background-size: contain;
          opacity: 0.15;
          border-radius: 50%;
          z-index: -1;
        }
      
        /* Responsive Adjustments */
        @media (max-width: 768px) {
          .hero-content h1 {
            font-size: 1.3rem;
          }
          .hero-content::before {
            width: 150px;
            height: 150px;
          }
        }

        .about-section {           
            padding: 80px 20px;
            text-align: center;
        }
    
        .bg-custom {
            color: white;
            background: rgba(0,0,0,0.4);
            border-radius: 10px; /* Rounded corners */
        }
    
        .about-text {
            text-align: center; /* Centers the text */
            margin: 0 auto; /* Centers the div if needed */
        }
    
        .about-text p {
            text-align: justify; /* Ensures paragraphs are justified */
        }

        .gradient-btn {
            background: linear-gradient(to right, rgb(1, 184, 170), rgb(1, 106, 184));
             /*background: linear-gradient(to bottom, rgb(255, 145, 40), rgb(255, 118, 1), rgb(200, 80, 0));*/
            /*background: linear-gradient(to bottom, rgb(32, 128, 64), rgb(16, 93, 44), rgb(8, 64, 32));*/
            border: none;
            color: white; /* Ensures text remains visible */
            padding: 8px 15px;
            border-radius: 5px;
            transition: 0.3s;
        }

        /* Hover effect */
        .gradient-btn:hover {
            /*filter: darkness(1.5);*/
             color: yellow !important;
        }


        /* Logo Styling */
        .navbar-brand img {
            height: 40px; /* Adjust size as needed */
            margin-right: 10px;
        }

        /* Circular Logo */
        .school-logo {
            width: 40px;  
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }

        /* System Name Responsive Adjustments */
        .system-name {
            font-size: 30px;
            color: white;
            white-space: nowrap; /* Prevents wrapping */
            overflow: hidden;
            text-overflow: ellipsis; /* Shows "..." if text is too long */
        }

        /* Reduce System Name Size on Smaller Screens */
        @media (max-width: 768px) {
            .system-name {
                font-size: 28px;  /* Make it smaller on mobile */
                max-width: 190px; /* Restrict width */
                white-space: normal; /* Allow wrapping */
            }
        }

        /* Justify text inside about section */
        .about-text {
            text-align: justify; /* Ensures justified text */
        }

        /* Ensure content stays aligned on all screens */
        @media (max-width: 768px) {
            .about-text {
                text-align: justify; /* Ensures justified text on small screens for better readability */
            }
        }

        .text-justify {
            text-align: justify;  /* Justify text */
        }
        .text-indent {
            text-indent: 50px;  /* Indent first line */
        }
        
        /*=========For the loader==============*/
        /* Simple Spinning Circle Loader */
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid #ddd; /* Light grey border */
            border-top-color: #007bff; /* Blue top border */
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        /* Center the loader inside the modal */
        .loader-container {
            display: flex;
            flex-direction: column;
            align-items: center;  /* Centers the loader horizontally */
            justify-content: center; /* Centers the loader vertically */
            position: fixed; /* Ensures it stays centered even when scrolling */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Moves it exactly to the center */
            width: 100vw; /* Full width of viewport */
            height: 100vh; /* Full height of viewport */
            background: rgba(255, 255, 255, 0.7); /* Optional: semi-transparent background */
            z-index: 1050; /* Ensure it's above other elements */
        }
        
        /* Loader Animation */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Loading Text */
        .text-primary {
            font-size: 16px;
            font-weight: bold;
            color: #007bff; /* Blue color */
            margin-top: 10px;
        }
        
       /* This targets the modal content and makes all text (including labels, buttons, etc.) inside it white */
        /*.modal-dialog .glass-effect {*/
        /*    color: white !important;*/
        /*}*/
        
        /* This applies to the modal close button and makes its icon white */
        /*.btn-close {*/
          /*  filter: invert(1) grayscale(100%) brightness(200%) !important; /* Inverts the icon to white and brightens it 
        }*/
        
        /* This changes the hover effect of the close button, dimming the icon a bit when hovered */
        /*.btn-close:hover {*/
            /*filter: invert(1) grayscale(100%) brightness(150%) !important; /* Slightly dims the icon when hovered 
        }

        /*white modal box look semi-transparent with a glass effect*/
        /*.glass-effect {
         /*   background-color: rgba(255, 255, 255, 0.2) !important; /* Very light white with transparency */
         /*   backdrop-filter: blur(10px) !important;               /* Frosted glass blur */
          /*  -webkit-backdrop-filter: blur(10px) !important;       /* Safari support */
          /*  border: 1px solid rgba(255, 255, 255, 0.3); /* Optional: subtle border */
          /*  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Optional: soft shadow */
           /* border-radius: 15px;                        /* Optional: rounded corners */
        /*}



      /*===== HERO SECTION STYLING =====*/
        .hero {
          position: relative;
          width: 100%;
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
        }
        
        .hero-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
        }
        
        .hero-content {
          position: relative;
          z-index: 2;
          max-width: 80%;
          color: white;
        }
        
        .hero-content::before {
          content: "";
          position: absolute;
          top: 50%;
          bottom: 10%;
          transform: translate(-50%, -45%);
          width: 500px;
          height: 500px;
          background: url('/../Uploads/anrvhslogo.jpg') no-repeat center center;
          background-size: cover;
          opacity: 0.3;
          z-index: -1;
          border-radius: 50%;
          overflow: hidden;
        }
        
        @media (max-width: 991px) {
          .hero-content::before {
            width: 190px;
            height: 180px;
            top: auto;
            bottom: 10px;
            z-index: -10;
          }
        }
        
        /*for the biometric fingerprint for login only*/
        @media (min-width: 768px) {
            #fingerprint-login {
                display: none !important;
            }
        }
        
        /*@keyframes subtleBounce {*/
        /*    0%, 100% {*/
        /*        transform: translateY(0);*/
        /*    }*/
        /*    50% {*/
        /*        transform: translateY(-5px);*/
        /*    }*/
        /*}*/
        
        /*.animate-bounce {*/
        /*    animation: subtleBounce 2s infinite;*/
        /*}*/

        /*======================================*/

        
        /*===== CLOCK STYLING =====*/
        .hero-clock {
          position: absolute;
          bottom: 30px;
          right: 30px;
          z-index: 2;
          background-color: rgba(255, 255, 255, 0.15);
          padding: 0.75rem 1rem;
          border-radius: 15px;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 5px;
        }
        
        .clock-box {
          display: inline-block;
          font-weight: bold;
          font-size: 1.2rem;
          padding: 0.15rem 0.4rem;
          border-radius: 0.5rem;
          background-color: rgba(0, 0, 0, 0.7);
          color: #fff;
          min-width: 45px;
          text-align: center;
        }
        
        .clock-box.ampm {
          background-color: rgba(255, 255, 255, 0.15); /* match hero-clock */
          color: white;
        }
        
        @media (max-width: 768px) {
          .hero-clock {
            right: 50%;
            transform: translateX(50%);
            bottom: 10px;
            width: 90%;
            flex-direction: column;
            padding: 0.5rem;
          }
        
          .clock-box {
            font-size: 1rem;
            padding: 0.25rem 0.5rem;
            min-width: 40px;
            display: block;
            margin: 2px auto;
          }
        }
        
        /*===== CALENDAR CONTAINER =====*/
        #calendar {
          max-width: 900px;
          padding: 20px;
          background: white;
          border-radius: 10px;
          box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        }
        /* Footer */
        footer {
          position: relative;
          bottom: 0;
          left: 0;
          text-align: center;
         /* white-space: nowrap; /* Prevents wrapping */
          /*overflow: hidden;*/
          /*text-overflow: ellipsis; /* Shows "..." if text is too long */
        }
        
        /* Footer */
        /*.footer {*/
        /*    width: 100%;*/
        /*    background-color: #f8f9fa;*/
        /*    padding: 10px 0;*/
        /*    text-align: center;*/
        /*    border-top: 1px solid #ddd;*/
        /*}*/