@import url("https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap");
body {
  font-family: Helvetica, sans-serif;
  margin: auto;
}


/* NAVBAR END */
#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;
   padding: 0px 15px;
   font-weight: 530;
 }
 
 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;
   }
 }
/* MAIN START */

.slider1 {
   position: relative;
   width: 100%;
   margin: auto;
   overflow: hidden;
   margin-bottom: -4px;
   padding: 0px;
}

.slider1 img {
   width: 100%;
   height: auto;
   /* display: none; */
}


/* MAIN END */

/* MAIN 2 START */

.slider2 {
   position: relative;
   width: 100%;
   margin: auto;
   overflow: hidden;
   margin-bottom: -4px;
}

.slider2 img {
   width: 100%;
   height: auto;
   /* display: none; */
}

/* MAIN 2 END */

/* <!-- CHARACTER IMAGES --> */

.topics {
   max-width: 1330px;
   padding: 20px;
   text-align: left;
   margin: auto;
}

#topi {
   padding-left: 10px;
}

.card-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px; /* Space between cards */
}

.card {
   position: relative;
   width: calc(25% - 20px); /* 4 cards per row */
   overflow: hidden;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

.card img {
   width: 100%;
   height: 100%; /* Ensures the image takes full card area */
   display: block;
   object-fit: cover; /* Ensures the image remains within the square shape */
   transition: transform 0.3s ease;
}

.card:hover img {
   transform: scale(1.09); /* Scale effect on hover */
}

.shockTeam {
   font-size: 12px;
   padding: 12px 15px 0px 12px;
   font-weight: 600;
}

@media (max-width: 992px) {
   .card {
       width: calc(33.33% - 20px); /* 3 cards per row on medium screens */
   }
}

@media (max-width: 768px) {
   .card {
       width: calc(50% - 20px); /* 2 cards per row on small screens */
   }
}

@media (max-width: 576px) {
   .card {
       width: calc(100% - 20px); /* 1 card per row on extra small screens */
   }
}

/* <!-- CHARACTER IMAGES  END--> */



.image-gallery {
   max-width: 100%;
   padding: 20px;
   text-align: center;
}

#gallery-title {
   padding-left: 10px;
}

.image-card-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px; /* Space between cards */
}

.image-card {
   position: relative;
   width: calc(25% - 20px); /* 4 cards per row */
   overflow: hidden;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

.image-card img {
   width: 100%;
   height: auto; /* Ensures the image takes full card area */
   display: block;
   object-fit: cover; /* Ensures the image remains within the square shape */
   transition: transform 0.3s ease;
}



.card-title {
   font-size: 12px;
   padding: 12px 15px 0px 12px;
   font-weight: 600;
}

@media (max-width: 992px) {
   .image-card {
       width: calc(33.33% - 20px); /* 3 cards per row on medium screens */
   }
}

@media (max-width: 768px) {
   .image-card {
       width: calc(50% - 20px); /* 2 cards per row on small screens */
   }
}

@media (max-width: 576px) {
   .image-card {
       width: calc(100% - 20px); /* 1 card per row on extra small screens */
   }
}



/* 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;
   }
 }