@font-face {
    font-family: "CalibreSemibold";
    src: url("/fonts/CalibreSemibold.otf") format("opentype");
  }


  @font-face {
    font-family: "SourceSerif4";  
    src: url("/fonts/SourceSerif4.ttf") format("opentype");

  }

  @font-face {
    font-family: "BagelFatOne";  
    src: url("./fonts/BagelFatOne-Regular.ttf") format("opentype");

  }
  
  
body{
  overflow-x: hidden;
  background-color: #aa6dff; /* Light gray background */
}



  .shell {
    padding: 0px; /* Remove default padding */
   
  }
  
  /* Desktop Styles (applied to screens wider than 768px, adjust as needed) */
  @media (min-width: 768px) {
    .shell {
      padding-left: 10vw;
      padding-right: 10vw;
    }
  }
  
  /* Mobile Styles (applied to screens narrower than 768px, adjust as needed) */
  @media (max-width: 767px) {
    .shell {
      padding-left: 0px;
      padding-right: 0px;
    }
  }


.navbar {
    display: flex;
    justify-content: space-between;
    position: fixed;
    height: auto;
    top: 0px;
    width: calc(100vw - 20px);
    padding-top: 20px;
    backdrop-filter: blur(8px); /* Apply the blur effect */
    z-index: 3;
}


  .navbar-left, .navbar-right {
    display: flex;
    flex-direction: column;
  }


h1 {
    font-family: "CalibreSemibold";
    font-size: clamp(3rem, 20vw, 4rem); /* Responsive font sizing */
    padding: 0; /* Shorthand for padding: 0px; */
    margin: 0; /* Shorthand for margin: 0px; */
    margin-top: 110px;
    line-height: 40px;
    color:#fff
  }

  h2 {
    font-family: "CalibreSemibold";
    font-size: clamp(1rem, 20vw, 2rem); /* Responsive font sizing */
    padding: 0; /* Shorthand for padding: 0px; */
    margin: 0; /* Shorthand for margin: 0px; */
    color: #ffffff;
    margin-top: 50px;
  }

  h3 {
    font-family: "CalibreSemibold";
    padding: 0; /* Shorthand for padding: 0px; */
    margin: 0; /* Shorthand for margin: 0px; */
    color: #ffffff;
    font-size:25px;
  }


  h4 {
    font-family: "CalibreSemibold";
    padding:20px; /* Shorthand for padding: 0px; */
    margin: 0; /* Shorthand for margin: 0px; */
    color: #ffffff;
    font-size:20px;
  }

  p{
    font-family: "SourceSerif4";
    font-size:large;
    padding: 0; /* Shorthand for padding: 0px; */
    margin: 0; /* Shorthand for margin: 0px; */
    margin-top:20px;
    margin-bottom: 20px;
    color:#fff;
  }
  
  .underline {
    text-decoration: underline; /* Underline the text */
    text-decoration-color: rgb(255, 0, 195); /* Set underline color to yellow */
  }
  .video-container {
    position: relative;
    width: 100%; /* Set width to 100% of body */
    background-color: #242424;
  }

  @media only screen and (max-width: 768px) {
    .video-container {
      width: 100%;
    }
  }
  
  /* Media query for desktop devices */
  @media only screen and (min-width: 769px) {
    .video-container {
   width: 70vh;
    }
  
  }



  
  /*horizontal scrollable*/
.container {
  width: 99%; 
  height: auto;/* Width of the viewport */
  overflow-x: scroll; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Prevent content from wrapping */
  white-space: nowrap; /* Prevent content from wrapping */
  background-color:#aa6dff;
}
  
  .item {
    margin:10px;
    display: inline-block; /* Make items behave like inline elements */
    width:auto; /* Set width of each item to the screen width */
    height:auto; /* Adjust height as needed */
    color:rgb(0, 0, 0);
    background-color: #0000006c;
    text-align: center; /* Center text within each item */
   
}

  .item-img{
    width: 100vw;
  }
  

  .basebar{
    display: flex;
  }


  .daddy{
padding: 0px;
  }

  @media only screen and (max-width: 768px) {
    .daddy {
      padding: 0px;
    }
  }
  
  /* Media query for desktop devices */
  @media only screen and (min-width: 769px) {
    .daddy {
  padding: 0px;
  padding-left: 20vw;
  padding-right: 20vw;
    }
  
  }