/* <!-- Mobile responsiveness styles start --> */
    
    /* Default to mobile view */
        #desktop {
            display: none;
        }
        
        #mobile {
            display: block;
        }
        
        /* Show desktop view on larger screens */
        @media screen and (min-width: 769px) {
            #desktop {
                display: block;
            }
            #mobile {
                display: none;
            }
        }
    
/* <!-- Mobile responsiveness styles end --> */

/*<!-- Custom classes from sana start -->*/
    
        .text4italic {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 4vw;
            color: black;
            font-style: italic;
            margin: 2vw 0 2vw 0;
        }
        
        .textform4u {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 4vw;
            color: #0000ff;
            margin: 2vw 0 2vw 0;
            text-decoration: underline;
            font-weight: bold;
        }
        
        .textform2mid {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 2.5vw;
            color: #ff0000;
            margin: 2vw 0 2vw 0;
            font-weight: bold;
        }
        
        .textform1 {
            font-family: Arial, sans-serif;
            text-align: right;
            font-size: 1.5vw;
            color: #ff0000;
            margin: 2vw 0 2vw 0;
            font-weight: bold;
        }
        
        .textform2black {
            font-family: Arial, sans-serif;
            text-align: left;
            font-size: 2.5vw;
            margin: 2vw 0 0 0;
            font-weight: bold;
        }
        
        .inputfield1 {
            font-family: Arial, sans-serif;
            margin: 0 0 2vw 0;
            text-align: right;
            width: 100%;
            height: auto;
        }
        
        .textlightbluecenter {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 2.5vw;
            font-weight: bold;
            color: #0099ff;
        }
        
        .borderDarkBlue {
            border: 1vw solid #00008b;
        }
        
        .text6orange {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 6vw;
            font-weight: bold;
            color: #ff0000;
        }
        
        .text2orange {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 2.5vw;
            font-weight: bold;
            color: #ff0000;
        }
        
        .text6darkorange {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 6vw;
            font-weight: bold;
            color: #cc0000;
        }
        
        .text2darkorange {
            font-family: Arial, sans-serif;
            text-align: left;
            font-size: 2vw;
            color: #cc0000;
        }
        
        .text6orangeunderline {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 6vw;
            font-weight: bold;
            color: #ff0000;
            text-decoration: underline;
        }
        
        .text3orangeunderline {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 3vw;
            font-weight: bold;
            color: #ff0000;
            text-decoration: underline;
        }
    
        .divContainer {
            background-color: #ffffcc;
            border: 2vw solid blue;
            width: 80%;
            height: auto;
        }
        
        .posterContainer {
            border: 1.2vw solid #000000;
            width: 95%;
            height: auto;
            background-color: #ffccff;
        }
        
        .postersContainer {
            border-style: solid;
            border-top-color: #808080;
            border-left-color: #808080;
            border-right-color: #000000;
            border-bottom-color: #000000;
            border-width: 3vw;
            width: 80%;
            height: auto;
            background-color: #ffccff;
        }
        
        .blueContainer {
            border-style: solid;
            border-top-color: #87CEEB;
            border-left-color: #87CEEB;
            border-right-color: #0000FF;
            border-bottom-color: #0000FF;
            border-width: 3vw;
            width: 80%;
            height: auto;
            background-color: #f98cb9;
        }
        
        .divnoContainer {
            border: none;
            width: 80%;
            height: auto;
        }
    
        .text2center {
            font-family: Arial, sans-serif;
            text-align: justify;
            font-size: 2.5vw;
            font-weight: bold;
            color: black;
        }
        
        .text2just {
            font-family: Arial, sans-serif;
            text-align: justify;
            font-size: 2.5vw;
            color: black;

        }
        
        .margin1topb {
            margin: 1vw 0 1vw 0;
        }
        
        .margin2topb {
            margin: 2vw 0 2vw 0;
        }
        
        .margin3topb {
            margin: 3vw 0 3vw 0;
        }
        
        .textmid2 {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 2.5vw;
            font-weight: bold;
            color: black;
        }
        
        .text2centernb {
            font-family: Arial, sans-serif;
            text-align: justify;
            font-size: 2.5vw;
            color: black;
        }
        
        .text3center {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 3vw;
            color: black;
        }
        
        .text4center {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 4vw;
            color: black;
        }
        
        .text6white {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 6vw;
            color: white;
        }

        
        .text3centerbold {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 3vw;
            color: black;
            font-weight: bold;
        }
        
        .text2underline {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 3vw;
            font-weight: bold;
            color: blue;
            text-decoration: underline;
        }
        
        .text6ublue {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 6vw;
            font-weight: bold;
            color: blue;
            text-decoration: underline;
            margin: 3vw 0 3vw 0;
        }
        
        .text6black {
            font-family: Arial;
            text-align: center;
            font-size: 6vw;
            color: black;
            font-weight: bold;
            margin: 3vw 0 3vw 0;
        }
        
        .text6blackunb {
            font-family: Arial;
            text-align: center;
            font-size: 6vw;
            color: black;
            margin: 3vw 0 3vw 0;
        }
        
        .textheading {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 4vw;
            font-weight: bold;
            color:#ff0099;
        }
        
        .textunderline {
            font-family: Arial, sans-serif;
            text-align: center;
            font-size: 4vw;
            font-weight: bold;
            color:#0000ff;
            text-decoration: underline;
        }
        
        .imageborder {
            width: 100%;
            height: auto;
            border-width: 1vw;
            border-style: solid;
        }
        
        .imagenoborder {
            width: 100%;
            height: auto;
            text-align: center;
        }
        
    
/*	<!-- Custom classes from sana end -->

	<!-- Navigation drawer styles start -->
*/ 
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* Prevent horizontal scroll due to drawer */
        }
        
        .menu-btn {
            font-weight: bold;
            position: fixed;
            top: 15px;
            left: 15px;
            background: transparent;
            border: none;
            color: black;
            font-size: 6vw;
            cursor: pointer;
            z-index: 1000; /* Keep button on top */
        }
        
        .drawer {
            width: 50%;
            height: 100%;
            background-color: #444;
            position: fixed;
            top: 0;
            left: -50%; /* Hide the drawer initially */
            transition: 0.3s;
            z-index: 999; /* Keep drawer above content */
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); /* Add shadow to drawer */
            border-radius: 0 15px 15px 0; /* Round the top and bottom inner edges */
            overflow-y: auto; /* Enable vertical scrolling */
            overflow-x: hidden; /* Prevent horizontal scrolling */
        }
        
        /* Optional: Customize scrollbar appearance 
        .drawer::-webkit-scrollbar {
            width: 8px;
        }
        
        .drawer::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
        }
        
        .drawer::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.7);
        } */

        
        .drawer ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .drawer ul li {
            padding: 15px;
        }
        
        .drawer ul li a {
            color: white;
            text-decoration: none;
        }
        
        .drawer ul li a:hover {
            background-color: #555;
        }
        
        .overlay {
            display: none; /* Initially hidden */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 998; /* Just below the drawer */
        }
        
        .drawerText {
            text-decoration: none;
            color: yellow;
            font-size: 5vw;
            text-shadow: -0.4vw 0.4vw 0.15vw #FF0000,
                0.4vw 0.4vw 0.15vw #FF0000,
                0.4vw -0.4vw 0.15vw #FF0000,
                -0.4vw -0.4vw 0.15vw #FF0000;
            font-weight: bold;
        }
        
        main {
            padding: 20px;
        }
        
    
    /* <!-- Navigation drawer styles end --> */
    
    /* <!-- Mute Button styles start --> */
    
        /* Mute Button Styling */
        #muteButton {
            position: fixed;
            top: 15px;
            right: 10px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
        }

        /* Mute/Unmute Icon Styling */
        #muteButton img {
            width: 6vw; /* Adjust size as needed */
            height: auto;
            opacity: 0.8; /* Slight transparency */
        }

        #muteButton img:hover {
            opacity: 1; /* Full visibility on hover */
        }
        
    /* <!-- Mute Button styles end --> */
    
      /* Snackbar CSS start */
      #snackbar {
        visibility: hidden;
        min-width: 250px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        padding: 12px;
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        z-index: 1000;
      }
    
      #snackbar.show {
        visibility: visible;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
      }
    
      @keyframes fadein {
        from { bottom: 0; opacity: 0; }
        to { bottom: 30px; opacity: 1; }
      }
    
      @keyframes fadeout {
        from { bottom: 30px; opacity: 1; }
        to { bottom: 0; opacity: 0; }
      }
      /* Snackbar CSS end */
      
      /* Responsive card CSS start */
        .responsive-card {
          color: #ffffff;
          width: 80vw;
          max-width: 40%;
          padding: 1vw;
          margin: 1vw auto;
          background-color: #4caf50;
          border-radius: 2vw;
          box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.1);
          font-family: sans-serif;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .responsive-card:hover {
          transform: scale(1.02);
          box-shadow: 0 2vw 4vw rgba(0, 0, 0, 0.2);
          background-color: #449e48;
        }
        
        .responsive-card h2 {
          font-size: 3vw;
          margin: 0.5vw;
        }
        
        .responsive-card p {
          font-size: 2vw;
          line-height: 1;
          margin: 0;
        }
      /* Responsive card CSS end */