body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.scroll-container {
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
  top: 0;
}

.scroll-content {
  display: flex;
  flex-wrap: nowrap;
  width: 200%; /* To fit two sets of items */
  transition: transform 0.5s ease;
}

.scroll-items {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.media-item {
  max-width: 100%;
  height: 80vh;
  margin-right: 2px;
}

.navbar {
  display: flex;
  font-weight: bolder;
  font-family: calibri;
  justify-content: space-between;
  color: black;
  background-color: white;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.container-fluid {
  transition: background-color 0.9s ease;
  position: fixed;
  top: 0;
  margin-bottom: 0;
  width: 100%;
  padding: 8px 20px;
  z-index: 1000;
  color: black;
  background-color: white;
  border-bottom: 1px solid black;
}

/* styles.css */
video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-enclosure {
  display: none !important;
}
video::-webkit-media-controls-panel {
  display: none !important;
}
video::-webkit-media-controls-play-button {
  display: none !important;
}
video::-webkit-media-controls-volume-slider {
  display: none !important;
}
video::-webkit-media-controls-mute-button {
  display: none !important;
}
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
video::-webkit-media-controls-timeline {
  display: none !important;
}

/* Additional rules for Firefox and other browsers */
video::-moz-media-controls {
  display: none !important;
}


/* Optional: Adding some styling for the media items */
img, video {
  /* border: 2px solid #ccc; */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.trend {
background-color:  black;
color: red;
width: 9%; 
z-index: 1000;
margin: 10px 668px 0px 0px;
border-radius: 0px 20px 20px 0px;
box-shadow: 0 3px 3px 0 black;
font-size: 25px;
font-family: forte;
font-weight: bolder;
}

stan{
  color: white;
}

.container {
display: flex;
gap: 2px;
margin: 0;
padding: 0;
}

.sticky-item {
  width: 70%;
  padding: 0;
  top: 0;
  margin-left: 30px;

}

#sticky-element {
  float: right;
  position: sticky;
top: 0;
margin-left: 0;
margin-right: 0;
width: 30%;
height: auto;
}



.log {
  max-width: 5%;
  height: auto;
margin-left: 100px;
border: none;
}

.omo {
margin: 0px 10px 0px 0px;
font-weight: bold;
display: flex;
list-style: none;
}

.home {
font-size: 16px;
margin: 30px;
border-radius: 20px;
text-decoration: none;
color: white;
background-color: black;
border-radius: 18px;
box-shadow: 0 2px 3px 0 black;
padding: 9px 15px;

}.dive {
margin: 10px 0px 0px 0px;
}

.faq {
  font-size: 17px;
  text-decoration: none;
color: black;
}

/* General Dropdown Styles */
.dropdown {
  position: relative;
  /* display: inline-block; */
}

.daitre {
  display: none;
}

.about {
font-size: 16px;
text-decoration: none;
padding-left: 10px;
}

.dropdown-content .abt {
display: none;
}

.container-fluid.scrolled {
  background-color: rgb(85, 85, 224);
  color: white;
}

.home.scrolled {
background-color: white;
color: black;
}

.faq.scrolled {
  color: white;
}

.dropb {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}

.dropdown-content {
display: none;
position: absolute;
background-color: white;
color: black;
font-family: calibri;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
display: block;
}


.image-container {
  position: relative;
}

.animated-image {
margin-left: 160px;
  width: 130px; /* Adjust this size as needed */
  height: 20vh;
  animation: spiral-shootout-shake 15s ease-in-out infinite;
}

@keyframes spiral-shootout-shake {
  0% {
      transform: scale(0) rotate(0deg) translate(0, 0);
  }
  10% {
      transform: scale(1.1) rotate(720deg) translate(100px, -100px); /* Spiral outwards */
  }
  20% {
      transform: scale(1) rotate(0deg) translate(0, 0); /* Return to original size and position */
  }
  60% {
      transform: scale(1) rotate(0deg) translate(0, 0); /* Hold the position */
  }
  70% {
      transform: translateX(-10px); /* Start shaking */
  }
  80% {
      transform: translateX(10px);
  }
  90% {
      transform: translateX(-10px);
  }
  100% {
      transform: translateX(0);
  }
}

  @media screen and (max-width: 1200px) {
  body {
    box-sizing: border-box;
    margin: 0;
  
  }

  .img-preview {
    width: 100%; 
    height: 250px;
  }
  
  .navbar {
    padding: 0px 0px;
  
  }
  
  .log {
    max-width: 40px;
    top: 0;
    margin: 0px 0px 12px 0px;
  }
  
  .omo{
    font-size: 6px;
    margin: 5px 0px 0px 0px;
    top: 0;
  }
  
  .home {
    font-size: 17px;
    margin: 0;
    padding: 5px 12px;
  }

  .daitre {
    display: none;
  }
  
  .about{
    font-size: 8px;
  }

  .daitre {
    display: block;
  }
  
  .dropb {
    font-size: 18px;
    font-weight: bolder;
    padding: 10px 20px 0px 0px;
  }
  
  .dropdown-content a{
    padding: 5px;
    font-size: 17px;
  }
  
  
  .dropdown-content .abt {
    display: block;
  }
  
  .media-item {
    height: 35vh;
    margin-right: 5px;
  }
  
  /* .trend {
    margin: 7px 0px 15px 0px;
    width: 91px;
    font-size: 30px;
  } */
  .container {
    padding: 0;
    margin: 0;
    gap: 3px;
  }

  .sticky-item {
    width: 65%;
  }
  
  #sticky-element {
    width: 32%;
    height: auto;
  }
  }
  
  /* Hide menu on mobile */
  .menu-icon {
    font-size: 24px;
    cursor: pointer;
    display: none;
  }
  
  /* Navbar items */
  .omo {
    display: flex;
    gap: 15px;
    list-style: none;
  }

  .animated-image {
    margin-left: 130px;
    width: 100px;
    height: 10vh;
  }

  @media screen and (max-width: 990px) {
    body {
      box-sizing: border-box;
      margin: 0;
    
    }
  
    .img-preview {
      width: 100%; 
      height: 250px;
    }
    
    .navbar {
      padding: 0px 0px;
    
    }
    
    .log {
      max-width: 40px;
      top: 0;
      margin: 0px 0px 12px 0px;
    }
    
    .omo{
      font-size: 6px;
      margin: 5px 0px 0px 0px;
      top: 0;
    }
    
    .home {
      font-size: 17px;
      margin: 0;
      padding: 5px 12px;
    }
    
    .about{
      font-size: 8px;
    }
    
    .dropb {
      font-size: 18px;
      font-weight: bolder;
      padding: 10px 20px 0px 0px;
    }
    
    .dropdown-content a{
      font-size: 17px;
      padding: 5px;
    }
    
    .dropdown-content .abt {
      display: block;
    }
    
    .media-item {
      height: 25vh;
      margin-right: 5px;
    }
    
    /* .trend {
      margin: 7px 0px 15px 0px;
      width: 10px;
      font-size: 10px;
    } */
    
    .container {
      padding: 0;
      margin: 0;
    }
  
    .sticky-item {
       width: 100%;
       padding: 0;
       margin: 0;
    }
    
    #sticky-element {
      display: none;
      height: 150px;
    }
    
    .scroll-container {
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    
    .scroll-items {
      display: flex;
      transition: transform 0.5s ease-in-out;
      width: 300%; /* Adjust based on the number of items */
    }
    
    .scroll-item {
      min-width: 100%;
      box-sizing: border-box;
    }
    
    .scroll-buttons {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
    }
    
    .scroll-buttons button {
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
    }
    
    
    }
  

  
  /* Mobile Responsive */
  @media screen and (max-width: 768px) {
    /* .omo {
        flex-direction: column;
        display: none;
    } */

    .log {
        max-width: 50px;
        top: 0;
        margin: 0px 0px 12px 0px;

    }
  
    .omo {
      display: none;
      flex-direction: column;
      background-color: white;
      position: absolute;
      left: 0;
      width: 100%;
      height: 55vh;
      padding: 15px 20px;
      z-index: 1000;
      overflow: hidden;
      transition: max-height 0.3s ease-in-out;
    }

    .omo.scrolled {
      background-color:  rgb(85, 85, 224);
    }
  
    .omo.show-menu {
      display: flex;
      max-height: 500px;
    }
  
    .menu-icon {
      display: block;
      position: absolute;
      top: 18px;
      right: 30px;
      font-size: 20px;
      z-index: 1001;
    }
  


    /* .menu-icon {
        display: block;
        font-size: 40px;
    } */

    .dropdown-content {
      font-size: 15px;
    }
  }

  @media screen and (min-width: 769px) {
    .omo {
      display: flex !important;
      flex-direction: row;
      position: static;
      background: none;
      width: auto;
      padding: 0;
      border-top: none;
      max-height: none;
      overflow: visible;
    }
  
    .menu-icon {
      display: none;
    }
  }
  

  @media  screen and (max-width: 480px) {
    body {
      box-sizing: border-box;
      margin: 0;
    
    }
    
    .navbar {
      padding: 0px 0px;
      /* height: 20px; */
    
    }
    
    .log {
      max-width: 60px;
      top: 0;
      margin: 0px 0px 12px 0px;
    }
    
    .omo{
      font-size: 6px;
      margin: 5px 0px 0px 0px;
      top: 0;
    }
    
    .home {
      font-size: 17px;
      margin: 0;
      padding: 5px 9px;
    }
    
    .about{
      display: none;
    }
    
    .dropb {
      font-size: 18px;
      font-weight: bold;
      padding: 10px 20px 0px 0px;
    }
    
    .dropdown-content a{
      padding: 5px;
    }
    
    .dropdown-content .abt{
      display: block;
    }
    
    .media-item {
      height: 35vh;
      margin-right: 5px;
    }
    
    
    .trend {
      margin: 7px 0px 15px 0px;
      width: 80px;
      font-size: 10px;
    }
    
    .sticky-item {
      width: 100%;
    }
    
    #sticky-element {
      display: none;
      /* width: 30%; */
      height: 150px;
    }
    }
  
    @media screen and (max-width: 380px) {
      body {
        box-sizing: border-box;
        margin: 0;
      
      }

      .navbar {
        padding: 0px 0px;
        /* height: 20px; */
      
      }
      
      .log {
        max-width: 60px;
        top: 0;
        margin: 0px 0px 12px 0px;
      }
      
      .omo{
        font-size: 6px;
        margin: 5px 0px 0px 0px;
        top: 0;
      }
      
      .home {
        font-size: 17px;
        margin: 0;
        padding: 5px 9px;
      }
      
      .about{
        display: none;
      }
      
      .dropb {
        font-size: 18px;
        font-weight: bold;
        padding: 10px 20px 0px 0px;
      }
      
      .dropdown-content a{
        margin-right: 80px;
        padding: 5px;
      }
      
      .dropdown-content .abt {
        display: block;
      }
      
      .media-item {
        height: 35vh;
        margin-right: 5px;
      }
      
      .trend {
        margin: 7px 0px 15px 0px;
        width: 80px;
        font-size: 10px;
      }
      
      .sticky-item {
        width: 100%;
      }
      
      #sticky-element {
        display: none;
        height: 150px;
      }

      }