@media screen and (max-width: 375px) {
  #cardSwiper{
    position: absolute;
    bottom: 20%;
    right: unset;
  }
  .content{
    padding-top: 7vh;
  }
  .content h1{
    font-size: 36px;
  }
  .content p{
    font-size: 17px;
  }
  .arrow-section{
    position: absolute;
    bottom: 70px;
  }
  .card-event-button ,.card-store-button{
      padding: 7px 0px !important;
  }
  .event-hero .container{
      gap: 15px;
      padding-top: 20px;
      padding-bottom: 20px;
      height: 88vh;
      min-height: 450px;
  }
  .speakers-row > div{
    margin-bottom: 15px;
  }

  .navbar-collapse{
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  .navbar-nav .dropdown-menu{
    text-align: center;
  }
  li.nav-item.dropdown .dropdown-menu.show {
      background: #202224;
  }
  li.nav-item.dropdown .dropdown-menu .dropdown-item{
    color: #FFF;
    display: block;
    padding: 10px;
  }
  .arrow-section{
    display: none;
  }
  .ytVid{
    min-height: 220px;
  }
  .event-about-rm{
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #event-about-wrap{
      height: 290px;
      overflow: hidden;
  }
}

@media screen and (max-width: 425px) {
  .navbar-collapse{
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  .navbar-nav .dropdown-menu{
    text-align: center;
  }
  li.nav-item.dropdown .dropdown-menu.show {
      background: #202224;
  }
  li.nav-item.dropdown .dropdown-menu .dropdown-item{
    color: #FFF;
    display: block;
    padding: 10px;
  }
  .card-section{
      margin:30px 0;
  }
  .down-arrow{
      margin-top: 20px;
  }
  .event-hero .container{
      gap: 15px;
      padding-top: 20px;
      padding-bottom: 20px;
      height: 80vh;
  }
  .event-features.event-section .column{
      border-left: none;
      border-top: 1px solid #ccc;
  }
  .event-features.event-section .features-row > div:first-child .column{
      border: none;
  }
  .event-features.event-section .features-row > div:last-child .column{
      border-bottom: 1px solid #ccc;
  }
  .event-container-sm{
    padding: 0 15px;
  }
  .speakers-row > div{
    margin-bottom: 15px;
  }
  .event-hero .event-logo{
      margin-top: 0px;
  }
  .event-hero .event-logo img{
      width: 120px;
      height: auto;
  }
  .event-hero h1{
      font-size: 28px;
      max-width: 90%;
      margin-top: 20px;
      margin-bottom: 0px;
  }
  .event-hero h3{
      font-size: 15px;
      margin-top: 20px;
      margin-bottom: 20px;
  }
  .event-about-rm{
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #event-about-wrap{
      height: 290px;
      overflow: hidden;
  }
}

/* below 768px  */
@media screen and (min-width: 376px) and (max-width: 768px) {
  .navbar-collapse{
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  .navbar-nav .dropdown-menu{
    text-align: center;
  }
  li.nav-item.dropdown .dropdown-menu.show {
      background: #202224;
  }
  li.nav-item.dropdown .dropdown-menu .dropdown-item{
    color: #FFF;
    display: block;
    padding: 10px;
  }
  .content p{
    font-size: 20px;
  }
  .event-hero .container{
      gap: 20px;
      padding-top: 25px;
      padding-bottom: 25px;
      height: 80vh;
  }
  .go_home{
    display: none;
  }
  .ytVid{
    min-height: 250px;
  }
  .event-about-rm{
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #event-about-wrap{
      height: 280px;
      overflow: hidden;
  }

  #cardSwiper{
    position: absolute;
    bottom: 28%;
    right: unset;
  }

  .arrow-section{
    position: absolute;
    bottom: 80px;
  }
  /*.swiper-button-next, .swiper-button-prev {
    display: none;
  }*/

  /* legacy section   */

  .Legacy-banner{
    position: relative;
    padding: 35px 23px 29px 34px;
    height: fit-content;
    width: fit-content;
    margin: auto;
  }
  .legacy-section{
    padding: 0px;
  }
  .legacy-banner-heading{
    font-size: 47px;
    font-weight: 400;
    line-height: 41.36px;
    text-align: left;
    width: 100%;
    height: 100%;      
  }
  .legacy-details{
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    align-items: start;
  }
  .legacy-right img{
    width: 205px !important;
    height: 155px;
  }
  .event-container-sm{
    padding: 0 15px;
  }
  .speakers-row > div{
    margin-bottom: 15px;
  }

  .event-hero .event-logo{
      margin-top: -50px;
  }
  .event-hero .event-logo img{
      width: 200px;
  }
  .event-hero h1{
      font-size: 32px;
      max-width: 80%;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  .event-hero h3{
      font-size: 16px;
      margin-top: 0px;
      margin-bottom: 10px;
  }
  .eh-tagline{
    font-size: 22px;
    max-width: 80%;
  }
  .event-features.event-section .column{
      border-left: none;
      border-top: 1px solid #ccc;
  }
  .event-features.event-section .features-row > div:first-child .column{
      border: none;
  }
  .event-features.event-section .features-row > div:last-child .column{
      border-bottom: 1px solid #ccc;
  }
}


/* above 768px width  */
@media (min-width: 769px) {
  .swiper-button-next, .swiper-button-prev {
    display: block;
  }

  .video-img{
    width: 982.5px;
    height: 555px;
  }

  .footer-group{
      margin-top: 82px !important;
      margin-bottom: 87px !important;
  }
 
  .footer-hr {
      width: auto; /* Let it scale according to the logo */
      max-width: 100%; /* Prevent HR from going beyond the container */
    }
    
  .logo-wrapes .footer-hr {
      width: 50%; /* Start with a 50% value, adjust based on the logo's size */
  }
  
  
  .logo-container {
      position: relative; /* Ensure it's centered with respect to the logo */
  }
  
  .footer-hr {
      margin-left: auto;
      margin-right: auto;
  }
  #events .swiper-button-next.swiper-button-disabled, 
  #events .swiper-button-prev.swiper-button-disabled{
      display: none;
  }    
}
@media only screen and (max-width: 990px) and (min-width: 768px)  {
  .card-section{
    position: absolute;
    right: -80px;
    bottom: 0;
  }
}


@media only screen and (max-width: 1240px) and (min-width: 991px)  {
  .card-section{
    position: absolute;
    right: -180px !important;
    bottom: 0;
  }
}
@media only screen and (min-width: 1241px) {
  /* All Desktop  */
  .card-section{
    position: absolute;
    right: -180px !important;
    bottom: 0;
  }
  .upcoming-events .row .swiper-wrapper{
    justify-content: center;
  }
}
@media only screen and (min-width: 1241px) and (max-width: 1400px){
  #wrapper{
    padding-top: 30px;
  }
  .ht100_logo{
    width: 250px;
    height: auto;
  }
  .content h1{
    font-size: 38px;
  }
  .content p{
    font-size: 14px;
  }
}