/* General Styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
 
}

body { 

    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}


header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ada969;
    color: #091463;
    padding: 7px;
}

/* Define animation keyframes for fading out the welcome text */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Define animation keyframes for fading in the school name */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Apply the fade-out animation to the welcome text */
#welcome-text {
    animation: fadeOut 6s forwards; /* Animation duration can be adjusted */
     text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
     font-weight: bold;

}


/* Apply the fade-in animation to the school name text */
#school-name-text {
    display: none; /* Initially hide the school name text */
    opacity: 0;
    animation: fadeIn 1s forwards; /* Animation duration can be adjusted */
}



.header-left, .header-right {
    width: 100px; /* Adjust size as needed */
}

.header-left img, .header-right img {
    width: 100%;
    height: auto;
}

.header-content {
    flex-grow: 1;
    text-align: center;
}

.school-logo {
    width: 125px; /* Adjust size as needed */
    height: auto;
}

header h1 {
    margin: 0;
}

.school-address {
    margin-top: 0;
    font-size: 1.0em; /* Adjust font size as needed */
    color:#0b0101;
}

nav {
    background: rgb(9, 56, 246);
    font-size: 25px;
    color: #fff;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

nav ul li {
    position: relative;
}

nav ul li a { font-size: 25px;
    color: #fff;
    text-decoration: none;
   /*padding: 5px;*/
    display: flex;
    transition: all 0.3s ease;
}

/*
nav ul li.home {  to make mobile view home look proper
    margin-left: auto
}*/

@media (min-width: 769px) {
    nav ul li:hover > ul {
        display: flex;
    }
}

nav ul li ul { 
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #36454f;
    display: none;
    flex-direction: column;
    z-index: 1;
}

nav ul li:hover ul {
    display: flex;
}

nav ul li ul li {
    width: 100%;
}

nav ul li ul li a {
    padding: 8px;
    white-space: nowrap;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 5px;
    background-color: rgb(214, 236, 15);
    transform: scaleX(0);
    transition: transform 0.8s ease-in-out;
}

nav ul li a:hover::after {
    transform: scaleX(1);
}

nav ul li a.home {  justify-content: center;
    color: #ffffff;
    background-color: #ff5733;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 100%;
    width:162px;
}

main {
  flex: 1;
  padding: 0.9em;
   box-sizing: border-box;
 
}


.page-wrapper {                                    /* to adjust footer at the bottom*/
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}



.slider {
    width: 100%;
    height: 100%; /* Make sure the height is 100% of its container */
    overflow: hidden;
    position: relative;
    background: #ccc;
    margin-bottom: 1em;
}

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

.slide {
    transition: transform 0.5s ease-in-out;
    width: 100%; /* Ensure each slide occupies 100% width */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the image covers the slider area */
}


 .header-text h1 {
        font-size:2.0em ; /* Adjust font size for mobile view */
  text-align: center;
    line-height: 1.4;

    }


/* Default: show full name, hide short name */
.desktop-name {
  display: inline;
}
.mobile-name {
  display: none;
}


/* this code for subitems effects in the desktop mode*/
@media (min-width: 769px) {
  nav ul li ul li a {
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  nav ul li ul li a:hover {
    animation: blinkBackground 0.6s ease-in-out;
    color:white;
    font-weight: bold;
  }

/* Desktop view: show 4 images at a time */

    .slides {
        width: auto; /* Adjust width based on the number of images */
    }
    .slide {
        flex: 0 0 25%; /* Adjust width to show 4 images */
    }

    
}

/* Mobile view: show 1 image at a time */
@media (max-width: 768px) {
    .slides {
        width: auto;
        height: 100%;
    }
    .slide {
        flex: 0 0 100%;
    }
    

/* Media query for mobile view */

    #welcome-text {
        font-size:1.5em ; /* Adjust font size for mobile view for welcome  title of the school */
  text-align: center;
    line-height: 1.5;

    }

    .header-text h1 {
        font-size:1.9em ; /* Adjust font size for mobile view for title of the school */
  text-align: center;
    line-height: 1.5;


    }

  .school-address {
   line-height: 1.3;

  }

    nav {
    font-size: 20px; /* Mobile font size,  this is for horizontal menu bar font size */
  }




   /* this code to show some part of the name of the school in mobile view*/
  .desktop-name {
    display: none;
  }
  .mobile-name {
    display: inline;
  }
}



.login-section {            /*login section part*/
    display: flex;
    justify-content: space-around;
}

.login-section a {
    background: #333;
    color: #fff;
    padding: 1em;
    text-decoration: none;
    border-radius: 15px;
}

.login-section a:hover {
    background-color: rgb(224, 17, 17);
}

footer { 
    background: #333;
    color: #fff;
    text-align: center;
    padding: 0.3em 0;
}



@media (max-width: 768px) {       /* login setion part in mobile view */
    nav ul {
        flex-direction: column;
    }

    .slider {
        height: 200px;
    }

    .login-section {
        flex-direction: column;
    }

    .login-section a {
        margin-bottom: 1em;
        text-align: center;
    }
    
    nav ul li ul {
        position: static;
        transform: none;
        display: none;
    }
    
    nav ul li a {
        padding: 10px;
        display: block;
    }

    nav ul li ul li a {
    padding-left: 10px;
    font-size: 18px;              /* Slightly smaller for long bilingual text */
    white-space: normal;          /* llow wrapping */ /* this is the code where we can adjust the overflow of the submenu items */
    word-break: break-word;       /* Break long words */
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;


    }

    nav ul li:hover ul {
        display: none;
    }

    nav ul li a.active + ul {
        display: flex;
        flex-direction: column;
        position: static;
        left: 0;
        width: 100%;
    }



  nav ul li a.home {
    justify-content: flex-start; /* Align text left */
    text-align: left;            /* Text left */
    width: auto;                /* Full width for clarity */
    padding-left: 10px; 
             /* Add some spacing */
  }


}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
    background: rgba(255, 255, 255, 0.8); /* Glass slab effect */
    backdrop-filter: blur(10px);
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 20px; /* Increased rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    position: relative;
}

.modal-content h2 {
    text-align: center;
    color: #070707;
}

.modal-content label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #f30612;
    
}

.modal-content input {
    width: 100%;
    padding: 8px;
    margin: 5px 0 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.modal-content input:focus {
    border-color: #333;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.modal-content button {
    width: 100%;
    padding: 10px;
    background-color: #f5060aea; /* Button background color */
    color: white; /* Button text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-content button:hover {
    background-color: #5212de;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Glowing border effect */
}

/* Close button styling */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/* Fix for last submenu (Service Desk) to prevent overflow */
nav ul li:last-child ul {
  left: auto;
  right: 0;
  transform: none;
  max-height: 300px; /* Optional: adds scroll if submenu is tall */
  overflow-y: auto;
}




/* Mobile view: show 1 image at a time */
@media (max-width: 768px) {
 

    /* Responsive welcome text */
    #welcome-text {
        font-size: clamp(22px, 5vw, 40px); /* scales with screen width */
        text-align: center;
        line-height: 1.5;
    }

    /* Responsive school title */
    .header-text h1 {
        font-size: clamp(25px, 5vw, 40px); /* scales with screen width */
        text-align: center;
        line-height: 1.5;
    }

    /* Responsive school address */
    .school-address {
        font-size: clamp(14px, 3vw, 20px); /* scales with screen width */
        line-height: 1.4;
    }

    nav {
        font-size: 20px; /* Mobile font size for horizontal menu bar */
    }

    /* Show short name in mobile view */
    .desktop-name {
        display: none;
    }
    .mobile-name {
        display: inline;
    }
}




@media (max-width: 768px) {

  .page-wrapper {
    display: flex;
    flex-direction: column;
  }

  header {
    order: 1;

  }

  main {
    order: 2;
    padding-bottom:0px;
  }

  nav {
    order: 3;

  }
  section {
     order: 4;
  }


  
  footer{
    order: 5;
     padding: 0.3em 0;


    .kannada {
    display: block;   /* forces each to start on a new line */
    text-align: center; /* optional: center align for neatness */
    margin: 5px 0;
  }

.english {
    display: none;   /* forces each to start on a new line */
  
}

  }


}

.login-section {

    margin-top: 10px;
}



  /* Hide toggle button on desktop */


.toggle-btn {
  display: none;
  align-items: center;
  gap: 25px;
  padding: 10px 15px;
  background: rgb(9, 56, 246);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
  border-radius: 5px;

}

.menu-icon {
  width: 20px;
  height: 2px;
  background-color: #fff;
  position: relative;
  display: inline-block;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #fff;
  left: 0;
}

.menu-icon::before {
  top: -6px;
}

.menu-icon::after {
  top: 6px;
}

/* Mobile view only */
@media (max-width: 768px) {
  .toggle-btn {
    display: flex;
  }
  .login-section {
    display: none;
  }
  .login-section.show {
    display: flex;
    flex-direction: column;
  }
}