@media (max-width: 1399.98px) {

    
}


@media (max-width: 1199.98px) { 


}



@media (max-width: 991.98px) { 


}



@media (max-width: 767.98px) {

    .event_timer_boxes {
        display: flex;
        gap: 7.13px;
        align-items: center;
        width: 70%;
        justify-content: center;
    }
    .contest_button-container {
        border-left: 0px solid #ffffff;
    }
    section.events .event_update .update .video_box video.slider_vedio {
        width: 100%;
        display: block;
        /* height: 525px; */
        object-fit: cover;
    } 
    .about_box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        height: 490px;
        width: 100%;
        gap: 32px;
        overflow: hidden;
    }
    .event_slide_content, .inner_div {
        height: 410px;
        margin-bottom: 0px;
    }
    .block.absolute.upper_div.event_wrapper{
      position: relative !important;
      width: 100% !important;

    }
    .about_first_box {
        width: 44%;
    }
    .about_content img.about_pic {
        width: 100%;
    }
    section.upcomming_event .carousel-control-prev {
        left: 0px;
        display: none;
    }

    section.upcomming_event .carousel-control-next {
        right: 0px;
        display: none;
    }

    section.all_event .check_all_event_img {
        margin-top: 20px;
        transform: rotate(0deg);
    }

    section.upcomming_event .event_location .video_location {
        gap: 20px;
    }
    section.upcomming_event .event_location .video_location .img {
        width: 260px;
    }
    section.upcomming_event .event_location .video_location .img .video_icon {
        width: 50px;
        height: 50px;
    }
    section.upcomming_event .event_location .video_location .img .video_icon a {
        background: #0002D7;
        width: 35px;
        height: 35px;
        display: inline-block;
        line-height: 35px;
    }


    section.about_track_day.circuit_bg .cor_kg_heading h3 {
        font-size: 35.689px;
    }

    section.about_track_day.circuit_bg .cor_kg_heading .length_box {
        display: block;
    }

    section.about_track_day.circuit_bg .cor_kg_heading .length_box .line_box {
        width: 1px;
        height: 110px;
        background: #000;
        display: none;
    }

    section.about_track_day.circuit_bg .custon_row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    section.about_track_day.circuit_bg .cor_kg_heading .length_box .left h4 {
        color: #000;
        font-family: "Krona One";
        font-size: 20.568px;

    }

    section.about_track_day.circuit_bg .cor_kg_heading .length_box .left {
        text-align: center;
        margin-bottom: 20px;
    }
    section.upcomming_event .event_location .video_location .loca_heading h2 {
        color: #FFF;
        font-size: 18px;
    }
    section.upcomming_event .event_location .video_location .loca_heading h3 {
        font-size: 16px;
    }
    section.upcomming_event .event_location .video_location .loca_heading p {
        color: #FFF;
        font-size: 12px;
    }
    section.upcomming_event .event_location .video_location .loca_heading p i {
        font-size: 20px;
        margin-right: 8px;
    }
    section.upcomming_event .event_location .event_count p {
        color: #FFF;
        font-size: 12px;
    }
    section.upcomming_event .event_location .event_count {
        border-left: 1px solid #fff;
        padding-left: 10px;
    }
    section.upcomming_event .event_location .event_count .date_time .date {
        background: #F8F8F8;
        width: 40px;
        height: 40px;
    }

    section.upcomming_event .event_location {
        background: linear-gradient(175deg, #0002D7 22%, #000171 84.9%);
        padding: 10px;

    }

    section.events .event_update .update .event_heading {
        position: absolute;
        left: 87px;
    }
    section.events .event_update .update .event_heading h3 {
        font-size: 20px;
    }

    section.all_event .lined_heading {
        width: 100%;
        margin: 0px auto;
    }
    section.all_event .check_all_event_img .card a.card__figure1.ridefree-hover img {
        height: auto;
    }


    section.all_event   .card {
        margin-bottom: 15px;
    }

    section.championship .champ_tab .tab-content .camp_content {
        display: block;
    }

    section.championship .champ_tab .tab-content .camp_content .fmsci {
        width: 100%;
    }

    section.championship .champ_tab .tab-content .camp_content .camp_img {
        width: 100%;
        margin-bottom: 30px;
    }
    section.championship .champ_head h2 {
        color: #FFF;
        text-align: center;
        font-size: 32px;
    }
    section.championship .champ_tab .tab-content .camp_content .fmsci p {
        color: #FFF;
        text-align: center;
        font-size: 16px;
        font-weight: 300;
        width: 100%;
        margin: 0px auto 30px;
    }

    section.championship .champ_tab .tab-content .camp_content .fmsci img {
      height: auto;
      margin-bottom: 12px;
      width: 41% !important;
  }

    section.championship .champ_tab .tab-content .camp_content .right_arrow {
        width: 100%;
    }
    section.events.track_day_event .update .event_heading .box .trade_logo img {
        /* width: 170px;
        height: 170px; */
        object-fit: contain;
        left: 1vw;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    section.events .event_update .update .event_heading h1 {
        font-size: 45px;
    }

    section.events.track_day_event .update .event_heading {
        left: 0px;
        bottom: 10px;
    }
    section.events.track_day_event .event .line {
        width: 48px;
        height: 1px;
        background: white;
        display: flex;
        align-items: center;
        position: absolute;
        left: -40px;
        right: 0px;
        bottom: 36px;
        margin: 0px auto;
    }

    section.about_track_day.what_blue .about_track_heading {
        padding: 50px 0px;
        width: 100%;
    }
    section.become_member_section .heading h1 {
        color: #FFF;
        font-family: "Krona One";
        font-size: 20px;
    }
    .step_box {
        width: 100%;
    }
    .step_box .owner h4 {
        font-size: 10px;
    }
    .register_btn button.register {
        background: #0002D7;
        box-shadow: -7px 4px 17px 0px rgba(0, 0, 0, 0.17);
        padding: 12.114px;
        color: #FFF;
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        border: 0px;
        width: 400px;
    }
    section.recent_event .recent_box .recent_heading h2 {
        color: #FFF;
        font-size: 20px;
    }
    section.recent_event .recent_box .recent_heading h2 {
        color: #FFF;
        font-size: 18px;
    }
    section.track_day_video .track_day_video_box .left {
        padding-inline-start: 75px;
    }
    section.recent_event .recent_box .recent_heading .left_arrow a {
        color: #fff;
        font-size: 35px;
    }
    section.about_track_day.stre_deals .location_box h4 {
        color: #FFF;
        font-family: Montserrat;
        font-size: 18px;
    }
    section.about_track_day.stre_deals .location_box .yamaha_address .location_address h3 {
        color: #FFF;
        font-family: Montserrat;
        font-size: 18px;
    }
    section.about_track_day.stre_deals .location_box .search input.search_field {
      
        font-size: 18px;
    }
    .google_location {
        margin-top: 20px;
    }
    section.about_track_day.faq_sec .faq_box {
        width: 100%;
    }
    section.about_track_day.faq_sec .faq_box .accordion-item h2.accordion-header button {
    
        font-size: 20px;
    }
    section.about_track_day.faq_sec .faq_box {
        width: 100%;
        margin: 0px auto;
        height: 222px;
    }
    section.rider_gallery_section .about_track_heading h1 {
        font-size: 20px;
    }
    section.about_track_day .about_track_heading {
        padding: 60px 0px;
        width: 100%;
        margin: 0px auto;
        text-align: center;
    }
    section.track_day_video .track_day_video_box .left .track_heading h3 {
        color: #FFF;
        font-family: "Krona One";
        font-size: 22px;
        font-weight: 400;
    }
    section.track_day_video .track_day_video_box .left .track_heading p {
        color: #FFF;
        font-family: Montserrat;
        font-size: 15px;
        font-weight: 500;
        line-height: normal;
        margin: 40px 0px 10px 0px;
    }
    section.recent_event .recent_box .recent_heading .cotb h3 {
        color: #FFF;
        font-size: 20px;
    }
    section.track_day_video .track_day_video_box {
        padding: 40px 0px;
    }
    section.track_day_video .track_day_video_box .right {
        width: 50%;
    }
    section.track_day_video .track_day_video_box .left {
        width: 50%;
    }
    section.recent_event .recent_box .recent_heading .location_dropdown select {
        width: 80%;
    }
    section.track_day_video .track_day_video_box .right .card .track_content video.slider_vedio {
        width: 100%;
        display: block;
        height: 250px;
        object-fit: cover;
    }
    section.track_day_video .track_day_video_box .right .card .track_content .aru_grid {
        position: absolute;
        top: 36%;
        display: flex;
        align-items: center;
        gap: 15px;
        z-index: 1;
        left: 7px;
    }
    section.events .event_update .update .video_box video.slider_vedio {
        width: 100%;
        display: block;
        /* height: 525px; */
        object-fit: cover;
    }
    section.track_day_video .track_day_video_box .right .card .track_content .aru_grid a {
        color: #fff;
        font-size: 18px;
    }
    .inner_div {
        flex-direction: column;
    }
    .right-event-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .contest_bike {
        width: 85%;
        align-self: center;
        margin-top: 20px;
    }
    .right-event-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .content_absolute_text {
        padding-bottom: 10px;
    }
    .contest_button-container, .date, .content_absolute_text {
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}


@media (max-width: 575.98px) { 

    section.upcomming_event .event_location {
    display: block;
    }
    section.recent_event .recent_box .recent_product_slider #recent_event .item img {
        width: 100%;
        height: 300px;
        
        border-radius: 0px;
        
    }

    section.upcomming_event .event_location .video_location .img {
        width: 302px;
    }
    section.upcomming_event .event_location .event_count {
        border-left: 0px solid #fff;
        padding-left: 10px;
    }

    section.upcomming_event .event_location .event_count .date_time .date {
        background: #F8F8F8;
        width: 76px;
        height: 53px;
    }

    section.events .event_update .update .event_heading {
        position: absolute;
        left: 6px;
        bottom: 75px;
    }
    section.events .event_update .update .event_heading h3 {
        font-size: 17px;
        line-height: 3px;
    }
    section.upcomming_event {
        margin-top: -72px;
        z-index: 9;
        position: relative;
    }
    section.upcomming_event .event_location .video_location {
        gap: 50px;
    }
    section.recent_event .recent_box .recent_heading {
        padding-inline-start: 15px;
        width: 35%;
    }
    section.recent_event .recent_box .recent_heading .cotb .view_more button.more {
        padding: 8px 20px;
    }
    section.recent_event .recent_box .recent_product_slider #rider_gallery .item img {
        width: 100%;
        height: 300px;
        border-radius: 0px;
    }
    section.events .event_update .update .event_heading h1 {
        font-size: 25px;
    }
    /* section.events.track_day_event .update .event_heading .box .trade_logo img {
        width: 96px;
        height: 260px;
        object-fit: contain;
    } */
    section.events.track_day_event .event .line {
        width: 26px;
        height: 1px;
        background: white;
        display: flex;
        align-items: center;
        position: absolute;
        left: -18px;
        right: 0px;
        bottom: 25px;
        margin: 0px auto;
    }
    section.about_track_day .about_track_heading h1 {
        font-size: 25px;
    }
    section.about_track_day .about_track_heading p {
        color: #FFF;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        margin: 0px;
        margin-bottom: 1rem;
    }
    section.track_day_video .track_day_video_box .left {
        padding-inline-start: 10px !important;
    }
    section.recent_event .recent_box .recent_heading p {
        color: #FFF;
        font-size: 16px;
    }
    section.recent_event .recent_box .recent_product_slider #event_gallery .item img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 0px;
    }
    section.recent_event .recent_box {
        gap: 7px;
    }
    .register_btn button.register {
      
        width: 100%;
    }
    section.track_day_video .track_day_video_box .left .nav.flex-column.nav-pills {
        flex-direction: row !important;
        margin: 28px 0px 0px 0px;
    }
 }







@media screen and (max-width:992px) {
    .first_vertical_text {
      font-size: 38px;
    }
  
    .about_section {
      margin-top: 1vh;
      margin-bottom: 1vh;
      gap: 15px;
    }
  
    .logo {
      margin-bottom: 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .carousel-dot {
      margin-bottom: 0;
      margin-right: 10px;
      width: 213.275px !important;
      height: 150.275px !important;
    }
  
    .previous-img>img,
    .whats_new_card .images-container .previous-img {
      display: none;
    }
  
    .main-img>img {
      width: 100%;
    }
  
    .whats_new_card .images-container {
      /* flex-direction: column; */
      align-items: flex-start;
    }
  
    .whats_new_card .images-container .main-img {
      width: 100%;
      position: absolute;
      left: 0;
    }
  
    .whats_new_card .images-container {
      position: relative;
      top: 0;
    }
  
    .gallery-carousel .gallery-slide img {
      height: calc(100vw* 0.580) !important;
    }
  
    .main-img>img {
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  
    .description .icon_container {
      margin: 0px 15px;
    }
  
    .description .icon_container img {
      width: 22px;
    }
  
    .slick-slide img {
      /* height: calc(100vw* 0.280) !important;    coment by ANIRUDDH GALLERY POPUP IMAGE HEIGHT*/
    }
  }
  
  @media screen and (max-width: 640px) {
    .first_vertical_text {
      font-size: 1rem;
    }
  
    .contest_button-container {
      flex-direction: column;
    }
  
    .contest_bike {
      width: 50%;
    }
  
    .tab {
      padding-bottom: 0px;
    }
  
    /* 
    .carousel-dot img {
      margin-top: 0px;
    } */
    .carousel-dot img {
      width: 92%;
    }
  }
  
  .mobile-view-banner {
    display: none;
  }
  
  .whats_new_mobile_view_wrapper {
    display: none;
  }
  
  @media screen and (max-width: 714px) {
  
    /* Mobile view banner images */
    .desktop-mobile-banner {
      display: none;
    }
  
    .mobile-view-banner,
    .slide .slider_vedio {
      display: block;
      height: calc(100vw * 1.25) !important;
    }
  }
  
  @media screen and (max-width: 598px) {
    .inner_div {
      flex-direction: column;
    }
  
    .contest_bike {
      width: 85%;
      align-self: center;
      margin-top: 20px;
    }
  
    .carousel-dot {
      height: 145px !important;
    }
  }
  
  
  /* font size responsive css */
  @media screen and (max-width: 598px) {
  
    .select_your_heading,
    .about_heading,
    .whats_new_heading {
      font-size: 26px;
    }
  
    .tab-button,
    .gallery-button {
      font-size: 16px;
    }
  
    .sub-tab-button {
      font-size: 14px;
    }
  
    .btn-ripple {
      font-size: 12px;
      padding: 8px 10px;
      z-index: 2222;
    }
  
    .whats_new_card_top {
      position: initial;
    }
  
    .details-card .main {
      font-size: 12px;
    }
  
    .details-card .main_small {
      font-size: 12px;
    }
  
    .gallery-tab-box {
      margin-top: 20px;
    }
  
    .announcement_context {
      font-size: 18px;
    }
  
    .announcement_innerdiv {
      margin: 20px 5px 40px 5px;
    }
  
    .announcement_innerdiv {
      padding: 20px 15px;
    }
  
    .carousel-dot {
      flex-direction: column;
    }
  
    .carousel-dot-title {
      position: initial;
      transform: initial;
      margin-top: 5px;
    }
  
    .carousel-nav {
      white-space: normal;
    }
  
    .sub-tab-button {
      padding: 0px 5px;
    }
  
    .carousel-track {
      overflow: initial;
    }
  
    .carousel-slide {
      left: -20px;
    }
  
    .carousel_background_text {
      font-size: 56px;
    }
  
  
    .date {
      display: flex;
      flex-direction: row;
      align-items: unset;
      gap: 2px;
      margin-top: 5px !important;
    }
  
    .tab {
      padding-bottom: 0px;
    }
  
    .carousel-dot img {
      margin-top: -30px;
    }
  
    .carousel {
      height: 78%;
    }
  
    .carousel-container {
      height: 675px;
    }
  
    .description .icon_container img,
    .gallery-carousel .prev img,
    .gallery-carousel .next img {
      width: 16px;
    }
  
    .slick-slide img {
       /* height: calc(100vw* 0.280) !important;    coment by ANIRUDDH GALLERY POPUP IMAGE HEIGHT*/
    }
  
    .location {
      font-size: 12px !important;
    }
  
    .carousel-dot {
      position: relative;
      top: 0;
    }
  
    .carousel-dot-title {
      position: absolute;
      bottom: 10px;
      left: 0%;
      right: 0%;
      word-wrap: break-word;
      white-space: break-spaces;
      width: 90%;
      margin: auto;
    }
  
    .whats_new_card .images-container {
      position: initial;
    }
  
    .description,
    .whats_new_card_body {
      display: initial !important;
    }
  }
  
  .wrapper {
    display: none;
  }
  
  .ro_invert {
    transform: rotate(270deg);
  }
  
  .invert_color {
    filter: invert();
  }
  
  /* Mobile Carousel Background video */
  @media screen and (max-width: 640px) {
    #about_us_desktop {
      display: none;
    }
  
    .wrapper {
      display: block;
    }
  
    .about_bg_container::before {
      /* height: calc(100vw * 4) !important; */
    }
  
    .ro_invert {
      transform: rotate(0deg);
    }
  
    .carousel-background-video {
      height: calc(100vw * 4) !important;
      /* max-width: calc(100vw * 0.52) !important; */
      /* width: calc(100vw * 0.52) !important; */
      margin: auto !important;
      display: flex !important;
      flex-direction: column !important;
    }
  
    .about_background_video {
      height: 116%;
    }
  
  
    .abouts-us-carousel {
      width: 100%;
      margin: 0px auto;
    }
  
    .abouts-us-carousel .slick-slide {
      margin: 10px;
    }
  
    .about_bg_container {
      height: 84%;
    }
  
    .abouts-us-carousel .slick-slide .mobile_carousel_icon {
      height: inherit !important;
    }
  
    .abouts-us-carousel .arrow_img {
      width: 12.5px !important;
      height: 12.5px !important;
    }
  
    .abouts-us-carousel .absolute_bike {
      height: inherit !important;
      /* width: calc(100vw * 0.8) !important; */
    }
  
    /* footer */
    .product_md span {
      font-size: 12px;
    }
  
    .product_md h1 {
      font-size: 14px;
    }
  
    .footer-container_md {
      padding-left: 5px;
    }
  
    .rec_md {
      padding: 0px 10px;
    }
  
    .footer_logo_md {
      padding: 25px 10px 10px 10px;
    }
  
    /* footer */
  
    .abouts-us-carousel .middle_bike_absolute {
      /* margin-top: 300px !important;
      width: calc(100vw* 1.1) !important;
      margin-left: -90px !important; */
    }
  
    .carousel-container-relative {
      position: relative;
      top: 0;
    }
  
    .prev {
      display: block;
      position: absolute;
      z-index: 1000;
      left: 25px;
      top: 40%;
      transform: translateY(-50%) rotate(270deg);
    }
  
    .next {
      display: block;
      position: absolute;
      right: 25px;
      top: 40%;
      transform: translateY(-50%) rotate(270deg);
      z-index: 1000;
    }
  
    .prev {
      display: block;
      position: absolute;
      z-index: 1000;
      left: 0px;
      top: 25%;
      transform: translateY(-50%) rotate(270deg);
    }
  
    .next {
      display: block;
      position: absolute;
      right: 0px;
      top: 25%;
      transform: translateY(-50%) rotate(270deg);
      z-index: 1000;
    }
  
    .relative-height-carousel {
      height: calc(100vw * 1.5);
    }
  
    .abouts-us-carousel .carousel_bike_img {
      position: absolute;
      bottom: 0;
      left: -10px;
      height: inherit !important;
      width: 500px !important;
    }
  
    .abouts-us-carousel .middle_carousel_bike {
      width: 600px !important;
      left: -70px !important;
    }
  
    .abouts-us-carousel .last_carousel_bike {
      width: 520px !important;
      left: -30px;
    }
  
    .contest_main {
      margin-top: 15px !important;
    }
  
    .slick-arrow {
      display: none;
    }
  }
  
  @media screen and (max-width: 598px) {
    .abouts-us-carousel .slick-list {
      overflow: visible !important;
    }
  
    .whats_new_mobile_view_wrapper {
      display: block;
    }
  
    .abouts-us-carousel .carousel_bike_img {
      position: absolute;
      bottom: -30px;
      left: -20px;
      height: inherit !important;
      width: 125% !important;
      max-width: 270px !important;
    }
  
    .rotate_270 {
      transform: rotate(360deg);
    }
  
    .abouts-us-carousel .middle_carousel_bike {
      width: 150% !important;
      max-width: 320px !important;
      left: -50px !important;
    }
  
    .abouts-us-carousel .last_carousel_bike {
      width: 135% !important;
      max-width: 290px !important;
      left: -20px !important;
    }
  
    .event_wrapper {
      margin-top: -25px;
      z-index: 999;
    }
  
    .tab>div:nth-child(1) {
      margin-top: 15px;
      margin-bottom: 5px;
    }
  
    .content_absolute_text {
      text-align: center;
    }
  
    .location {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2px;
      justify-content: center;
    }
  
    .event_timer_contaier {
      align-items: center;
    }
  
    .contest_button-container,
    .date,
    .content_absolute_text {
      justify-content: center;
      align-items: center;
      width: 100%;
    }
  
    .contest_button-container {
      padding-bottom: 10px;
      border-top: 1px solid #eee;
      padding-top: 10px;
    }
  
  
  
  
    .content_absolute_text {
      padding-bottom: 10px;
    }
  
    .event_time_box {
      width: fit-content !important;
    }
  
    /* .event_timer_boxes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    } */
  
    .whats_new_container {
      display: none;
    }
  
    .gallery-container {
      margin: 0px auto 0px auto;
    }
  
    .whats_new_mobile_view_wrapper {
      padding: 20px 20px 0px 20px;
      position: relative;
      top: 0px;
    }
  
    .whats_new_mobile_heading {
      margin-top: 38px;
      margin-bottom: 8px;
      font-size: 18px;
      background-color: white;
      padding: 5px;
    }
  
    .slick-slide .whats_new_mobile_img {
      height: calc(100vw * 0.685) !important;
      margin-top: 20px;
    }
  
    .upper_div {
      margin-left: 10px;
    }
  
    .event_banner_slide,
    .event_banner_slide_noscroll {
      flex: 0 0 102%;
    }
  
    .up-arrow {
      margin: 20px 0px 10px 0px;
    }
  
    .down-arrow {
      margin: 20px 0px 10px 0px;
    }
  
    .floatingButton>span {
      font-size: 14px;
    }
  
    .floatingButton {
      width: 42px;
      height: 110px;
    }
  
    .up-arrow,
    .down-arrow {
      /* filter: invert(); */
      transform: rotate(270deg);
    }
  
    .whats_new_icon {
      filter: invert();
    }
  
    .whats_new_heading {
      /* text-align: center; */
      font-size: 22px;
  
    }
  
    .header_whats_new {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 25px;
      gap: 5px;
      margin-top: 30px;
    }
    #event_prevButton, #event_nextButton {
      /* background-color: #0001a0; */
      border-radius: 50px;
      width: 50px;
      height: 50px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
  .upper_div .next{
    position: absolute;
    top: 52%;
    right: 5%;
  }
  .upper_div .prev {
    position: absolute;
    top: 52%;
    left: 0%;
}
  #event_prevButton img, #event_nextButton img {
    filter: invert(1);
}

    .event_wrapper>button {
      display: block;
    }
  
    .event_slide_content {
      width: 95% !important;
    }
  
    .upper_div {
      /* overflow-x: auto; */
    }
  }
  
  
  @media screen and (max-width: 320px) {
    .first_vertical_text {
      font-size: 0.8rem;
    }
  }
  
  @media screen and (max-width: 1080px) {
    .invert_color {
      filter: initial;
    }
  }
  
  
  .selected_gallery_img {
    width: 100%;
    height: calc(100vw* 0.500);
    display: block;
    object-fit: cover;
  }
  
  .top-section img {
    max-width: 100%;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    /* Add transition for opacity */
  }
  
  .active-thumbnail {
    transition: .5s ease-in-out;
    position: relative;
    top: 0;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background-color: #f8f8f8;
  }
  
  .active-thumbnail>img{
    transform: scale(1.1);
  }
  
  .active-thumbnail>span {
    color: #0002d7;
  }
  
  .active-thumbnail::before {
    position: absolute;
    content: "";
    left: 0;
    width: 5px;
    height: 100%;
    background-color: #0002d7;
    animation: slideLeftBackground .5s ease-in-out, fadeInBackground .5s ease-in-out;
    /* Apply both animations */
  }
  
  .carousel-dot.active .active-thumbnail::before {
    display: block;
  }
  
  /* Animation keyframes */
  @keyframes slideLeftBackground {
    0% {
      left: -3px;
      background-color: transparent;
      /* Start position off the screen */
    }
  
    100% {
      left: 0;
      /* End position on the screen */
    }
  }
  
  @keyframes fadeInBackground {
    0% {
      background-color: transparent;
      /* Start with transparent color or any other desired initial color */
    }
  
    100% {
      background-color: #0002d7;
      /* End with the final background color */
    }
  }