/* Fonts */
.circum--zoom-in {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16.279 17.039a7.93 7.93 0 0 1-5.206 1.941a7.964 7.964 0 0 1-7.96-7.96a7.964 7.964 0 0 1 7.96-7.96a7.964 7.964 0 0 1 7.96 7.96a7.93 7.93 0 0 1-2.04 5.319l.165.165l3.583 3.582c.455.456-.252 1.163-.707.708zm1.754-6.019a6.964 6.964 0 0 0-6.96-6.96a6.963 6.963 0 0 0-6.96 6.96a6.963 6.963 0 0 0 6.96 6.96a6.964 6.964 0 0 0 6.96-6.96m-7.46.5h-1.5c-.645 0-.643-1 0-1h1.5v-1.5c0-.645 1-.643 1 0v1.5h1.5c.645 0 .643 1 0 1h-1.5v1.5c0 .645-1 .643-1 0z' stroke-width='0.5' stroke='%23fff'/%3E%3C/svg%3E");
}

.uiw--left {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7.222 9.897q3.45-3.461 6.744-6.754a.65.65 0 0 0 0-.896c-.311-.346-.803-.316-1.027-.08Q9.525 5.59 5.796 9.322q-.296.243-.296.574t.296.592l7.483 7.306a.75.75 0 0 0 1.044-.029c.358-.359.22-.713.058-.881a3408 3408 0 0 1-7.16-6.988' stroke-width='0.5' stroke='%23fff'/%3E%3C/svg%3E");
}
.uiw--right {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m7.053 2.158l7.243 7.256a.66.66 0 0 1 .204.483a.7.7 0 0 1-.204.497q-3.93 3.834-7.575 7.401c-.125.117-.625.408-1.011-.024c-.386-.433-.152-.81 0-.966l7.068-6.908l-6.747-6.759q-.369-.509.06-.939q.43-.43.962-.04' stroke-width='0.5' stroke='%23fff'/%3E%3C/svg%3E");
}
.material-symbols-light--close-rounded {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m12 12.708l-5.246 5.246q-.14.14-.344.15t-.364-.15t-.16-.354t.16-.354L11.292 12L6.046 6.754q-.14-.14-.15-.344t.15-.364t.354-.16t.354.16L12 11.292l5.246-5.246q.14-.14.345-.15q.203-.01.363.15t.16.354t-.16.354L12.708 12l5.246 5.246q.14.14.15.345q.01.203-.15.363t-.354.16t-.354-.16z' stroke-width='0.5' stroke='%23fff'/%3E%3C/svg%3E");
}
.eva--flip-2-fill {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.09 19h12l-1.3 1.29a1 1 0 0 0 1.42 1.42l3-3a1 1 0 0 0 0-1.42l-3-3a1 1 0 0 0-1.42 0a1 1 0 0 0 0 1.42l1.3 1.29h-12a1.56 1.56 0 0 1-1.59-1.53V13a1 1 0 0 0-2 0v2.47A3.56 3.56 0 0 0 6.09 19m-.3-9.29a1 1 0 1 0 1.42-1.42L5.91 7h12a1.56 1.56 0 0 1 1.59 1.53V11a1 1 0 0 0 2 0V8.53A3.56 3.56 0 0 0 17.91 5h-12l1.3-1.29a1 1 0 0 0 0-1.42a1 1 0 0 0-1.42 0l-3 3a1 1 0 0 0 0 1.42Z' stroke-width='0.5' stroke='%23000'/%3E%3C/svg%3E");
}
.material-symbols-light--close-rounded {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m12 12.708l-5.246 5.246q-.14.14-.344.15t-.364-.15t-.16-.354t.16-.354L11.292 12L6.046 6.754q-.14-.14-.15-.344t.15-.364t.354-.16t.354.16L12 11.292l5.246-5.246q.14-.14.345-.15q.203-.01.363.15t.16.354t-.16.354L12.708 12l5.246 5.246q.14.14.15.345q.01.203-.15.363t-.354.16t-.354-.16z' stroke-width='0.5' stroke='%23fff'/%3E%3C/svg%3E");
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
/*  background: #444;*/
  display: flex;
  justify-content: center;
  align-items: center;

}
.thumb-image{
  width: 90px;
  height: 90px;
  border-radius: 10px;
  border: 2px solid #fff;
}
.thumb-image img{
  border-radius: 7px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.mySwiper2 {
  height: 80%;
  width: 100%;
}

.mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.mySwiper .swiper-slide-thumb-active .thumb-image{
  border: 2px solid #BA1EFF;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail_slider .mySwiper2 .swiper-slide {
    height: 300px;
    /*padding: 20px;
    background: #1D212D;
    border-radius: 10px;
    border: 1px solid #424651;*/
}
.thumbnail_slider .mySwiper2 .swiper-slide img {
    object-fit: scale-down;
    width: auto;
    height: 100%;
}

.model_list_box{
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 1 row me 5 box */
  gap: 10px; /* box ke beech gap */    
}

/* Without Filter Gallery */
.modelBox {
    position: relative;
}
.modelBox .model_image_box{
  position: relative;
}
.modelBox img{
    width: 100%;
    border-radius: 10px;
    border: 2px solid #1D212D;
}
.modelBox .model_image_box:hover img {
    border: 2px solid #BA1EFF;
}
.modelBox.active img{
    border: 2px solid #BA1EFF;
} 
.modelBox span {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
}

.modelBox strong {
    display: block;
    text-align: center;
    margin-top: 5px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
}


.mySwiper2{
     padding: 10px;
    background: #1D212D;
    border-radius: 10px;
    border: 1px solid #424651;
}
.mySwiper2 strong{
    display: block;
    color: #fff;
    text-align: center;
    font-weight: normal;
    font-size: 16px;
    margin-top: 10px;
}




.btn-close {
    position: absolute;
    right: -10px;
    top: -10px;
    opacity: 1;
    background: #ff0000;
    color: #fff;
    z-index: 9;
    border-radius: 50%;
    width: 25px;
    height: 25px;
}
.btn-close:hover{
    opacity: 1;
}
.btn-close span {
    width: 25px;
    height: 25px;
}

.pagetabs {
    margin: 30px 0;
    border-top: 1px solid #675E75;
    padding: 20px 0;
}

.previousButton {
    border-radius: 10px;
    border: 1px solid #481364;
    background: linear-gradient(180deg, rgba(195, 23, 255, 0.29) 0%, rgba(0, 16, 68, 0.01) 100%);
}
.previousButton a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 8px 20px;
}
.previousButton:hover{
    background: linear-gradient(-90deg, rgba(195, 23, 255, 0.29) 0%, rgba(0, 16, 68, 0.01) 100%);
}

/* Mobile CSS */
.mobileGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
}
.mobileModelzoom {
    position: relative;
}
.mobileModelzoom figure {
    width: 150px;
    position: relative;
    border: 1px solid #cdcccc;
    padding: 15px;
    border-radius: 15px;
}
.mobileModelzoom img {
    width: 100%;
    height: 100%;
}

.mobileHeading {
    color: #fff;
    margin: 20px 0px;
    font-size: 18px;
}
.mobileModel_name {
    color: #fff;
    font-size: 22px;
}
.mySwiper3{
  height: 100%;
}
.mySwiper_thumb {
    height: auto;
}
.mySwiper3 .swiper-slide img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}
.mobileModelname{
  margin: 10px;
  color: #fff;
  font-size: 20px;
}
.mySwiper3 .swiper-slide-active img {
    border: 2px solid #BA1EFF;
}
.mySwiper_thumb .swiper-slide-thumb-active img {
    border: 2px solid #BA1EFF;
}
.mySwiper_thumb .swiper-slide img {
    border-radius: 15px;
}


@media (max-width:1099px){
  .model_list_box {
    grid-template-columns: repeat(4, 1fr);
  }
    .thumbnail_slider .mySwiper2 .swiper-slide{
  height: auto;
}
.thumbnail_slider .mySwiper2 .swiper-slide img{
  width: 100%;
}
} 



/* 🔹 Tablet (768px): 3 box per row */
@media (max-width: 768px) {
  .model_list_box {
    grid-template-columns: repeat(3, 1fr);
  }


}

/* 🔹 Mobile (480px): 2 box per row */
@media (max-width: 480px) {
  .model_list_box {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 🔹 Small mobile (360px): 1 box per row */
@media (max-width: 360px) {
  .model_list_box {
    grid-template-columns: repeat(1, 1fr);
  }
}