@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');
body {
    font-family: Helvetica, sans-serif;
    /* margin: auto; */
    margin: 0px;
    padding: 0px;
    /* background-color: black; */
   
}


#top-nav {
   background-color: rgb(244, 245, 249);
 }
 
 #top-nav .container {
   display: flex;
   justify-content: flex-end;
   gap: 20px;
   padding: 5px;
 }
 
 small a {
   text-decoration: none;
   color: black;
   font-weight: 530;
   padding: 0px 15px;
 }
 
 small a:hover {
   text-decoration: underline;
 }
 
 #nav {
   margin: 1em 2em 0.1em 5em;
 }
 
 #nav .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 #nav h1 {
   font-family: "Teko", sans-serif;
   font-weight: 700;
   font-size: 35px;
   letter-spacing: 0.0001px;
   color: #003087;
   margin: 0;
   padding: 0;
 }
 
 .search-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 .search-input {
   padding: 10px 10px 10px 20px;
   width: 200px;
   height: 20px;
   border: none;
   border-bottom: 1px solid black;
   transition: width 0.3s ease-in-out;
 }
 
 .search-icon {
   font-size: 16px;
   color: #999;
 }
 
 #hamburger {
   display: none;
   cursor: pointer;
 }
 
 @media (max-width: 700px) {
   #nav {
       margin: 10px;
   }
 
   #nav h1 {
       margin: 0;
   }
 
   #hamburger {
       display: block;
   }
 
   #links {
       display: none;
   }
 
   .search-icon {
       display: none;
   }
   .search-input{
     display: none;
 }
 
 
   .show {
       display: flex !important;
       flex-direction: column;
       width: 100%;
       gap: 10px;
       position: absolute;
       background-color: #003087;
       top: 50px;
       left: 0;
       padding: 10px;
       z-index: 1;
   }
 
   .show a {
       display: block;
       margin-block: 10px;
       text-align: center;
       color: white;
       border-bottom: 1px solid white;
       padding: 10px;
   }
 
   .remove {
       display: none !important;
   }
 }

/* /Nav Bar End */
/* Main Start  */

 .embed {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive video */
   overflow: hidden;
   background-color: black;
 }
 
 .embed iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none; 
 }
 
 
/* Main Start End */


/* Main */

.slider {
   position: relative;
   width: 100%;
   margin: auto;
   overflow: hidden;
}

.slider img {
   width: 100%;
   height: auto;
   display: none;
}

img.displaySlide {
   display: block;
   animation-name: fade;
   animation-duration: 1.5s;
}

.slider button {
   position: absolute;
   top: 46%;
   transform: translate(-1%);
   font-size: 1.8rem;
   background-color: transparent;
   color: hsl(0, 0%, 100%);
   cursor: pointer;
   /* border-radius: 50%; */
   padding: 4px 8px;
   border: none;
}

.Previous {
   left: 0px;
}

.Next {
   right: 0;
}

@keyframes fade {
   from {
       opacity: .5
   }
   to {
       opacity: 1;
   }
}

/* palak jain */



.slider1 {
   position: relative;
   width: 100%;
   margin: auto;
   overflow: hidden;
   margin-bottom: -4px;
   padding: 0px;
}

.slider1 img {
   width: 100%;
   height: auto;
   /* display: none; */
}

/* --------------------------------- */

.slider2 {
   position: relative;
   max-width: 100%;
   height: auto;
   margin: auto;
   overflow: hidden;
   background-color: black;
}

.slider2 .slides2 {
   display: flex; /* Use flexbox to align images in a row */
   width: 100%;
   height: 650px;
   transition: transform 1s ease-in-out; /* Smooth sliding effect */
}

.pressEvent{
   color: white;
   text-align: center;
   padding: 20px 0px;
}

.slider2 img {
   width: 100%;
   height: auto;
   flex-shrink: 0; /* Prevent images from shrinking */
}

.slider2 button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.8rem;
   background-color: transparent;
   color: hsl(0, 0%, 0%);
   cursor: pointer;
   padding: 4px 8px;
   border: none;
}

.Previous2 {
   left: 0;
}

.Next2 {
   right: 0;
}



/* --------------------------------- */


.slider3 {
   position: relative;
   max-width: 100%;
   height: auto;
   margin: auto;
   overflow: hidden;
   background-color: black;
}

.slider3 .slides3 {
   display: flex; /* Use flexbox to align images in a row */
   width: 100%;
   height: 650px;
   transition: transform 1s ease-in-out; /* Smooth sliding effect */
}

.pressEvent{
   color: white;
   text-align: center;
   padding: 20px 0px;
}

.slider3 img {
   width: 100%;
   height: auto;
   flex-shrink: 0; /* Prevent images from shrinking */
}

.slider3 button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.8rem;
   background-color: transparent;
   color: hsl(0, 0%, 0%);
   cursor: pointer;
   padding: 4px 8px;
   border: none;
}

.Previous3 {
   left: 0;
}

.Next3 {
   right: 0;
}





/* FOOTER START */

/* Footer Styles */
footer {
   background-color: rgb(244, 245, 249);
   padding: 2em 0em;
 }
 footer a {
   color: black; /* Set the text color to black */
   text-decoration: none; /* Remove underline if desired */
 }
 
 footer a:hover {
   text-decoration: underline; /* Add underline on hover for better UX */
 }
 footer .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
 }
 
 #footer-one {
   display: flex;
   justify-content: center;
   gap: 4em;
   margin: 2em;
 }
 
 #footer-one a {
   color: rgb(138, 138, 138);
 }
 
 #footer-two {
   display: flex;
   gap: 2em;
   cursor: pointer;
 }
 
 #footer-three,
 #footer-four,
 #footer-five {
   text-align: center;
   margin: 1em 0;
 }
 
 #footer-five small {
   display: block;
   font-weight: 600;
 }
 
 @media (max-width: 700px) {
   footer .container {
       flex-direction: column;
       gap: 20px;
   }
 
   #footer-one,
   #footer-three {
       display: none;
   }
 
   #footer-two {
       margin-left: 5px;
   }
 }

/* FOOTER END */