html{
          scroll-padding-top: 140px;
      }
      
       /* Loader Styles */
        .loader {
            border-radius: 100%;
            border-top: 7px solid #3498db;
            border-bottom: 7px solid #3498db;
            width: 50px;
            height: 50px;
            animation: spin 3s linear infinite;
            margin: 0 auto;
        }
        .bg-pic {
            background: url('https://images.pexels.com/photos/356074/pexels-photo-356074.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&dpr=2') no-repeat center center/cover;
             filter: blur(5px);
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loader-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
       
         .alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    margin-top: 20px;
    left: 5%;
    right: 5%;
    width: 90%;
    border: 1px solid transparent;
    border-radius: .25rem;
    display: flex;
    gap: 10px; }
              

        .hidden {
            display: none;
        }
        
        .home_descript{
                background: black;
    z-index: 99;
    backface-visibility: hidden;
    margin-top: -80px;
    margin-bottom: -14px;
    opacity: 59%;
    height: 82px;
        }

.sidebar {
    width: 25%; /* Set the desired width */
    position: fixed;
    top: 0; /* Set top to 0 */
    bottom: 0;
    right: 0;
    z-index: 1;
    padding: 48px 0 0; /* Account for fixed navbar */
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
    background-color: #f8f9fa; /* Light background color for better visibility */
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content */
    transition: all 0.3s;
}
.body {
    font-faimily:arial;
}
.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0; /* Set top to 0 */
    height: calc(100vh - 56px);
    padding-top: 1rem;
    overflow-y: auto;
    text-align:left;
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
    padding: 10px 15px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.topi
{
 padding-left:0;
}
h2 {
    margin-top:50px;
}
.sidebar .nav-link .feather {
    margin-right: 4px;
    color: #727272;
}

.sidebar .nav-link.active {
    color: #007bff;
    background-color: #e9ecef; /* Highlight active link with a light background */
}

.sidebar .nav-link:hover {
    color: #0056b3;
    background-color: #e2e6ea;
}

.sidebar .sidebar-heading {
    position: fixed;
    font-size: 1.2rem;
    background: #0e3045;
    text-transform: uppercase;
    padding: 10px 15px;
    color: #ffffff;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
    top: 0;
    text-align:center;
    width: -webkit-fill-available;
}

    #content{
           width:75%;
    }
    .container mt-5{
        max-width: 500px;
        margin-bottom: 80px;
    }
    .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5px;
    text-align: -webkit-center;
    margin-bottom: 80px;
    }
    
    .logo_image {
        height: 100px;
        width: auto;
    }
    table{
    border-collapse: collapse;
    border-spacing: 71px 19px;
    width: 50%;
    max-width: 450px;
    margin:5px;
    }
    table, th, td {
  border: 1px solid;
}

/* Media query for smaller screens */
@media (max-width: 767.98px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
        right: 0;
        padding: 0;
        box-shadow: none;
    }

    .sidebar-sticky {
        position: relative;
        height: auto;
        overflow-y:auto;
        top: 0;
    }

    .sidebar .nav-link {
        padding: 10px 20px;
    }

    .sidebar .sidebar-heading {
        padding: 15px 20px;
        margin-bottom: 0;
    }
    #content{
           width:100%;
    }
}


 /* General Styles */
 
 
   /* Style the scroll-up button */
#scrollUpBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.3s;
}

#scrollUpBtn:hover {
  background-color: #333;
}

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 5px;
    }

    /* Hero Banner */
    .hero-banner {
      position: relative;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      overflow: hidden;
    }

    .hero-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('/images/students_banner.png') no-repeat center center/cover;
      
      z-index: -1;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: -1;
    }

    .hero-banner h1 {
      font-size: 3.5rem;
      margin-bottom: 20px;
      animation: fadeInUp 1s ease-in-out;
    }

    .hero-banner p {
      font-size: 1.5rem;
      margin-bottom: 40px;
      animation: fadeInUp 1.5s ease-in-out;
    }

    .cta-button {
      display: inline-block;
      padding: 15px 30px;
      font-size: 1.2rem;
      color: #fff;
      background-color: #007bff;
      border: none;
      border-radius: 5px;
      text-decoration: none;
      transition: transform 0.3s ease, background-color 0.3s ease;
      animation: fadeInUp 2s ease-in-out;
    }

    .cta-button:hover {
      background-color: #0056b3;
      transform: scale(1.05);
    }

    /* Keyframes for Animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Sections */
    .section {
    padding: 0 0;
    position: relative;
    text-align: -webkit-center;
    }
    
    .link-list-container {
    max-width: 845px;
    text-align: left;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #f8f9fa;
    padding: 20px;
    font-size: 13pt;
    }
    
    }
    .section h2 {
      font-size: 2.5rem;
      margin-bottom: 30px;
      animation: fadeInUp 1s ease-in-out;
    }
    
    p{
        text-align: -webkit-center;
    }
    
    .card-title {
      text-align: center;
    }
    
    .mt-4, .my-4, .mt-4, .my-4{
    margin-top: 7.5rem !important;
    text-align: center;
    }
    
    .about-us p {
      font-size: 1.2rem;
      color: #555;
      line-height: 1.8;
      max-width: 800px;
      margin: 0 auto 40px;
      animation: fadeInUp 1.5s ease-in-out;
    }

    /* About Us Section Styling */
    .about-us {
      background: linear-gradient(135deg, #f7f7f7, #ffffff);
      padding: 100px 0;
    }

    .about-us::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.1;
      z-index: -1;
    }

    /* Featured Services/Topics Section */
    .featured-services {
      background: #f9f9f9;
      padding: 100px 0;
    }

    .featured-services p {
      font-size: 1.2rem;
      color: #333;
      line-height: 1.8;
      max-width: 800px;
      margin: 0 auto;
      animation: fadeInUp 2s ease-in-out;
    }

    /* Customer Testimonials Section */
    .customer-testimonials {
      background: linear-gradient(135deg, #eef7ff, #ffffff);
      padding: 100px 0;
    }

    .testimonial-slider {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 800px;
      margin: 0 auto;
    }

    .testimonial-slider blockquote {
      font-size: 1.2rem;
      color: #555;
      padding: 20px;
      background: #f7f7f7;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      animation: fadeInUp 1s ease-in-out;
    }

    .testimonial-slider cite {
      display: block;
      font-style: normal;
      color: #888;
      animation: fadeInUp 1.5s ease-in-out;
    }

    /* Contact Section (Newsletter Form) */
    .contact-us {
      background: #ffffff;
      padding: 100px 0;
    }

    .newsletter-form {
      max-width: 600px;
      margin: 40px auto 0;
      padding: 30px;
      background: #f7f7f7;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      animation: fadeInUp 2s ease-in-out;
    }

    .newsletter-form h3 {
      font-size: 1.8rem;
      margin-bottom: 20px;
    }

    .newsletter-form input,
    .newsletter-form button {
      display: block;
      width: 100%;
      padding: 15px;
      margin-bottom: 15px;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
    }

    .newsletter-form input {
      background: #fff;
      color: #333;
    }

    .newsletter-form button {
      background: #007bff;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .newsletter-form button:hover {
      background: #0056b3;
    }

    .slog_text{
    color: #007bff;
    position: absolute;
    font-size: 74pt;
    margin-right: auto;
    font-family: fantasy;
    margin-top: -75px;
    font-style: italic;
    text-shadow: -1px -2px black;
    width: 100%;
    text-align: center;
    left: 0;
    }
 .big_imgs{
    max-width: 900px;
    width: 100%;
    height: 440px;
    box-shadow: 0px -19px 56px 0px #007bff;
    margin-bottom: 56px;
 }
 .hund{
    width: 100%;
    text-align: center;
    color: #183ac6;
    font-family: math;
    font-size: 94px;
    margin-top: 42px;
 }
 .center_it{
    display: block;
    text-align: center;
    margin-top: 94px;
    max-width:100%;
    width:100%;
 }
 .myp{
    font-size: 1.2rem;
    color: #555;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 40px;
    animation: fadeInUp 1.5s ease-in-out;
 }
 .embed-responsive{
position: relative;
    display: block;
    width: 100%;
    max-width:700px;
    padding: 0;
    overflow: hidden;
 }
    
   .pagination-panel {
    position: sticky;
    top: 60px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #215a87;
    width: -webkit-fill-available;
    z-index: 100;
    height: fit-content;
    transition: top 0.3s ease-in-out;
    }
    
    .pagination-panel h1{
            font-size: 18pt;
    }
    
    .arrow-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4b9d9a;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 17px;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    }
    .arrow-button:hover {
      background: #3c7e7c;
    color: #def1f0;
    }
    .arrow-left::before {
      content: "◄ Prev";
      margin-right: 5px;
    }
    .arrow-right::after {
      content: "Next ►";
      margin-left: 5px;
    }
    .pagination-header {
      color: white;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      flex-grow: 1;
      margin: 0 20px;
    }
    /* Responsive Design */
    @media (max-width: 768px) {
      .hero-banner h1 {
        font-size: 2.5rem;
      }
    }
    
    
     .dropdown {
     position: absolute;
    display: block;
    top: 40px;
    left: 0;
    }
    .dropdown-content {
    display: none;
    padding-left: 5px;
    padding-right: 15px;
    padding-top: 10px;
    background-color: rgb(241 242 243);
    border-radius: 0 0 10px 0px;
    min-width: max-content;
    box-shadow: 0px 4px 10px 0px rgb(0 0 0);
    z-index: 1000;
    border-radius: 0px 20px 20px 0px;
    }
    .dropdown-content a {
      color: #121c66;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    font-size: 12pt;
    font-family: math;
    padding-top: 6px;
    }
    .dropdown-content a:hover {
      background-color: #d1d2dffc;
    color: #1939b3;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
    .dropdown:hover .dropbtn {
      background-color: #ccc;
    }
    
    .dropdown-content ul {
        list-style: none;
        padding: 0px;
    }
    
    .dropbtn {
   background-color: #1b8aa3;
    transition: background 0.4s ease-in-out;
    color: #fdf9f9;
    padding: 5px 15px;
    border-radius: 0 0 10px 0px;
    cursor: auto;
    border-top: none;
    border-left: 0;
    }
    
    /* Subscribe Newsletter */
.newsletter{
    padding: 50px 10px 60px 10px !important;
    border-bottom: 1px solid #fff;
    margin-bottom: 50px;
    color: #0c5f5e;
    background: #ffffff;
}
.newsletter h1{
    font-weight: 600;
    font-size: 40px;
}
.newsletter p{
    font-size: 22px;
}
.newsletter form{
    margin-top: 20px;
}
.newsletter form input{
    width: 100%;
    padding: 18px;
    border: none;
}
.newsletter form input[type="email"]{
    border-radius: 10px;
    border: red inset 1px;
    background: #e2efed4a;
}
.newsletter form input[type="email"]:focus{
    border: red inset 2px;
    outline: none;
}
.newsletter form input[type="submit"]{
    border-radius: 10px;
    background-color: #d90e06;
    color: #fff;
}
.newsletter form input[type="submit"]:hover{
    background-color: #c00000;
    color: #fff;
}
@media(max-width: 767px){
    .newsletter form input[type="email"]{
        border-radius: 10px;
    }
    .newsletter form input[type="submit"]{
        border-radius: 10px;
        margin-top: 5px;
    }
    .newsletter h1{
        font-size: 35px;
    }
    .newsletter p{
        font-size: 18px;
        font-weight:lighter !important;
    }
}
i{
    display: contents;
}
/* Footer */
footer{
    padding: 10px 10px 20px 10px;
    margin-top: 50px;
    background-color: rgb(100 100 100);
}
footer .main-box .logo-link{
    background-color: #00000000;
  color: #fff;
  font-size: 30px;
  font-weight: bolder;
}
footer .main-box .logo-link:hover{
    background-color: #00000000;
}
footer .main-box img{
    width: 300px;
    padding-bottom: 10px;
}
footer .main-box p{
    font-size: 16px;
    color: #fff;
    padding-bottom: 10px;
    font-weight: lighter;
}
footer .main-box a{
    padding: 8px 13px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 10px;
    margin-right: 3px;
}
footer .main-box a:hover{
    background-color: #E20001;
    color: #fff;
}
footer .ft-box h4{
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    padding-bottom: 10px;
}
footer .ft-box p{
    font-size: 16px;
    line-height: 25px;
}
footer .ft-box p a{
    text-decoration: none;
    color: #fff;
}
footer .ft-box p a:hover{
    color: #E20001;
    padding-bottom: 3px;
    border-bottom: 1px solid #E20001;
}
footer .copy-right{
    padding-top: 20px;
    color: #fff;
    font-size: 16px;
    border-top: 1px solid #fff;
    margin-top: 50px;
}
@media(max-width: 991px){
    footer .ft-box{
        margin-top: 20px;
    }
    footer .main-box{
        margin-bottom: 20px;
    }
    
    .language-form {
    position: absolute;
    right: 80px;
    top:15px;
    }
    .navbar-toggler {
    position: absolute;
    right: 5px;
    top: 10px;
    }
}
@media(max-width: 355px){
    footer .main-box img{
        width: 250px;
    }
}
.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    display: contents;
}
 .language-form {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin: 0;
            padding: 0;
        }
        .language-select {
            padding: 5px 10px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
            cursor: pointer;
            appearance: none; /* Remove default arrow */
            -webkit-appearance: none; /* Remove default arrow in Chrome/Safari */
            -moz-appearance: none; /* Remove default arrow in Firefox */

            background-repeat: no-repeat;
            background-position: 5px center;
            background-size: 16px;
            
        }
        .language-select:hover {
            background-color: #e9e9e9;
        }   
    
.textef li{
    font-family: Roboto, sans-serif;
    line-height: 1.6;
    margin-top: 16px;
    text-align: left;
    padding-left: 26px;
    padding-right: 26px;
}