@media (max-width: 575px) {
  .site-container { width: 90%;}

  .logo {width: 170px;}
  .navbar{
    width: 100%;
    height: 100px;
    top: 0;
    height: 75px;
  }

  .main-slider,
  .swiper-slide,
  .swiper-slide img,
  .slider-area,
  .swiper-slide video {height: 40vh;}

  .main-slider {margin-top: 75px;}

  /* .category-card{aspect-ratio: 1;} */
  .category-card img{width: 150px; height: 150px;}

  .text-next img, .text-prev img{width: 50px; height: 50px;}
  .textSlide {height: 50px;}

  .media-card{padding: 20px; aspect-ratio: 5/3;}
  .media-card img{
    height: 120px;
    object-fit: contain;
    left: 55%;
    bottom: -15%;
    transform: translateX(-50%);
  }
  .media-img-overlay{aspect-ratio: 5/3;}

  .footer-logo{width: 180px; display: block; margin: auto;}

  .service-card{padding: 20px;}
  .menu-padding{padding-top: 100px;}

  .banner, .banner img{height: 300px;}
  .banner-content{width: 90%;}
  .icon-wrap-right-text{margin-top: 10px;}

  .career-area{height: 100%;}
  .career-logo{width: 100px;}

  #modelsArea .button-one {display: block; width: 100%; margin-bottom: 10px;}


  .banner-area{width: 100%;height: 30vh;}
  .banner-path img{max-width: 100%; position: absolute; bottom: 0;}
  .page-container{margin-top: -40%;}
  .corporate.banner-area{height: 50vh;}
  .corporate.page-container{margin-top: -70%;}

  .corporate-text{color: var(--color-AFAFAF);}
  .corporate-img{height: 300px; margin-bottom: 10px; object-fit: contain;}

  .corporate-logo-1{width: 120px;}
  .corporate-logo-2{width: 70px;}
  .text-slide-area{height: 200px;}

  .production-img{height: 250px;}
}
@media (min-width: 576px) and (max-width: 767px) {
  .site-container { width: 90%;}

  .logo {width: 170px;}
  .navbar{
    width: 100%;
    height: 100px;
    top: 0;
    height: 75px;
  }

  .main-slider,
  .swiper-slide,
  .swiper-slide img,
  .slider-area,
  .swiper-slide video {height: 40vh;}

  .main-slider {margin-top: 75px;}

  /* .category-card{aspect-ratio: 1;} */
  .category-card img{width: 150px; height: 150px;}

  .text-next img, .text-prev img{width: 50px; height: 50px;}
  .textSlide {height: 50px;}

  .media-card{padding: 20px; aspect-ratio: 5/3;}
  .media-card img{
    height: 120px;
    object-fit: contain;
    left: 55%;
    bottom: -15%;
    transform: translateX(-50%);
  }
  .media-img-overlay{aspect-ratio: 5/3;}

  .footer-logo{width: 180px; display: block; margin: auto;}

  .service-card{padding: 20px;}
  .menu-padding{padding-top: 100px;}

  .banner, .banner img{height: 300px;}
  .banner-content{width: 90%;}
  .icon-wrap-right-text{margin-top: 10px;}

  .career-area{height: 100%;}
  .career-logo{width: 100px;}

  #modelsArea .button-one {display: block; width: 100%; margin-bottom: 10px;}

  .banner-area{width: 100%;height: 30vh;}
  .banner-path img{max-width: 100%; position: absolute; bottom: 0;}
  .page-container{margin-top: -20%;}
  .corporate.banner-area{height: 50vh;}
  .corporate.page-container{margin-top: -50%;}

  .corporate-text{color: var(--color-AFAFAF);}
  .corporate-img{height: 300px; margin-bottom: 10px; object-fit: contain;}

  .corporate-logo-1{width: 120px;}
  .corporate-logo-2{width: 70px;}
  .text-slide-area{height: 200px;}

  .production-img{height: 300px;}
}
@media (min-width: 768px) and (max-width: 1024px) {
  .site-container { width: 90%;}

  .logo {width: 130px;}

  .navbar, .navbar .nav-item, .logo-gradient { height: 75px;}

  .main-slider,
  .swiper-slide,
  .swiper-slide img,
  .slider-area,
  .swiper-slide video {height: 60vh;}

  .text-next img, .text-prev img{width: 40px; height: 40px;}
  .textSlide {height: 100px;}

  .media-card{padding: 20px; aspect-ratio: 5/3;}
  .media-card img{
    height: 120px;
    object-fit: contain;
    left: 55%;
    bottom: -15%;
    transform: translateX(-50%);
  }
  .media-img-overlay{aspect-ratio: 5/3;}

  .footer-logo{width: 180px; display: block; margin: auto;}

  .service-card{padding: 40px; aspect-ratio: 4/3;}
 

  .career-area{height: 100%;}
  .career-logo{width: 100px;}
  .quality-card .fs-14{font-size: 14px;}
  .quality-card .fs-20{font-size: 20px;}

  #modelsArea .button-one {width: 40%;margin-bottom: 10px;}


  .banner-area{width: 100%;height: 40vh;}
  .banner-path img{max-width: 100%; position: absolute; bottom: 0;}
  .page-container{margin-top: -20%;}
  .corporate.banner-area{height: 50vh;}
  .corporate.page-container{margin-top: -30%;}

  .corporate-text{color: var(--color-AFAFAF);}
  .corporate-img{height: 300px; margin-bottom: 10px; object-fit: contain;}

  .corporate-logo-1{width: 120px;}
  .corporate-logo-2{width: 70px;}
  .text-slide-area{height: 300px;}

  .production-img{height: 350px;}
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .site-container { width: 90%;}

  .logo {width: 130px;}
  .navbar .nav-item {padding: 0 15px;}

  .banner-area{width: 100%;height: 40vh;}
  .banner-path img{max-width: 100%; position: absolute; bottom: 0;}
  .page-container{margin-top: -13%;}
  .corporate.banner-area{height: 50vh;}
  .corporate.page-container{margin-top: -20%;}
  .corporate-text{color: var(--color-AFAFAF);}

  .production-img{height: 420px;}
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .logo {width: 150px;}
  .navbar .nav-item {padding: 0 5px; font-size: 12px;}
  .navbar .nav-link {font-weight: 300 !important;}

  #navbarSupportedContent::before {left: 25px;}
  #navbarSupportedContent::after {right: 25px;}
}
@media (min-width: 1440px) and (max-width: 1649px) {
  .logo {width: 170px;}
  .navbar .nav-item {padding: 0 7px; font-size: 14px;}
  .navbar .nav-link {font-weight: 300 !important;}

  #navbarSupportedContent::before {left: 25px;}
  #navbarSupportedContent::after {right: 25px;}
}
@media (min-width: 1650px) and (max-width: 1799px) {
}
@media (min-width: 1800px) and (max-width: 1919px) {
  .banner-area{width: 100%;height: 65vh;}
  .banner-path img{max-width: 100%; position: absolute; bottom: 0;}
  .page-container{margin-top: -15%;}
  .corporate.banner-area{height: 70vh;}
  .corporate.page-container{margin-top: -23%;}
  /* .corporate-text{color: var(--color-AFAFAF);} */
}
/* 2K */
@media (min-width: 1920px) and (max-width: 2559px) {
}

/* 4K */
@media (min-width: 2560px) and (max-width: 3839px) {
 
}

/* Ultra-wide */
@media (min-width: 3840px) {

}