@media only screen and (max-width: 1024px) {
   .pc-view{
       display:none!important;
   }
   .mob-view{
       display:block!important;
   }
   .p-40-0{
       padding-top:0!important;
   }
   .show-search{
       right:0!important;
       top:100%!important;
   }
   button.navbar-toggler{
       margin:5px!important;
       border:0!important;
       box-shadow:none!important;
   }
   .dropdown-menu[data-bs-popper]{
       right:0!important;
       width:378px!important;
   }
   .star-cars{
        width:100%;
        margin-top:0!important;
        margin-bottom:30px!important;
    }
    .star-cars-nav{
        bottom:-35px!important;
    }
    #carouselExampleIndicatorsbrandmob h6{
        font-size:10px;
    }
    .font-14{
        font-size:14px!important;
    }
    .font-10{
        font-size:10px!important;
    }
    .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23201E50' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

    #carouselExampleIndicatorsOptionsmob h6{
        font-size:10px!important;
    }
    .p-r-4-px{
        padding-right:4px!important;
    }
       
     .p-l-4-px{
        padding-left:4px!important;
    }
      .star-cars-imgs{
          height:240px!important;
      }
      .text-right-custom{
          text-align:right!important;
      }
      .text-center-custom{
          text-align:center!important;
      }
      .text-left-custom{
          text-align:left!important;
      }
      #carouselExampleIndicatorsbrandmob .carousel-indicators {
          display:none!important;
      }
     #carouselExampleIndicatorsOptionsmob .carousel-indicators{
         display:none!important;
     }
     .search-car-form{
         height:95%!important;
     }
     .cars-links .pagination{
         padding-right:0!important;
     }
     .filter-area{
         height:55vh!important;
     }
   

}

/* تصميم للحاسوب */
@media only screen and (min-width: 1025px) {
    .pc-view{
       display:block!important;
    }
    .mob-view{
       display:none!important;
    }
    .star-cars{
        width:90%;
    }
    .p-40-0{
       padding-top:40px!important;
   }
 .star-cars-imgs{
      height:480px!important;
  }
      .text-md-right-custom{
          text-align:right!important;
      }
      .text-md-center-custom{
          text-align:center!important;
      }
      .text-md-left-custom{
          text-align:left!important;
      }
      .search-car-form{
          height:100%!important;
      }
   
    
}




.container {
    text-align: center;
    /* Center align the content in the container */
    margin-top: 2rem;
}

.title {
    text-align: center;
    margin-top: 2rem;
}

.wrapper {
    position: relative;
    perspective: 40em;
    display: grid;
    transform-style: preserve-3d;
    margin-top: 2rem;
    justify-content: center;
    cursor: pointer;
}
.br-0{
    border-radius: 0;
}

.cardimage {
    grid-area: 1 / 1;
    width: 100%;
    height: 250px;
    background: rgb(32, 30, 80);
    background: linear-gradient(180deg, rgba(32, 30, 80, 1) 0%, rgba(32, 30, 80, 0.6446953781512605) 100%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px;
    color: #000;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
    backface-visibility: hidden;
    box-shadow: 0 10px 30px -3px rgba(0, 0, 0, .5);
    margin: 0 auto;
    /* Center the card */
}

h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.cardimage .enclosed {
    background: #000;
    line-height: 1;
    color: rgba(249, 198, 26, 1);
    padding: 0 5px;
    display: inline-block;
    transform: translate(-100px, 1px) scale(0.75);
    transform-origin: right center;
}

.wrapper:before {
  /*  --bw: 2px;*/
    grid-area: 1 / 1;
    content: '';
    backface-visibility: hidden;
    height: 100%;
    width: 100%;
    margin-top: calc(-1 * var(--bw));
    margin-left: calc(-1 * var(--bw));
    background: transparent;
    transform: translateX(-60px) rotateY(-20deg) rotateX(0deg) scale(1.03);
    pointer-events: none;
    box-sizing: content-box;
}

.enclosed {
    transition: .3s;
}

.wrapper:hover .enclosed {
    box-shadow: 5px 15px 30px #201e50c6!important;
}

.wrapper img {
    transition: .2s;
}

.wrapper:hover img {
    transform: scale(1.04) rotate(-4deg);
}

.wrapper>div,
.wrapper:before {
    will-change: transform;
    transition: .3s transform cubic-bezier(.25, .46, .45, 1);
}


/*
.owl-prev,
.owl-next {
    position: absolute;
    top: 35%;
    height: 34px!important;
    line-height: 34px!important;
    width: 34px!important;
    font-size: 34px!important;
    color: #fff!important;
    background-color: #201E50!important;
    border-radius: 50%!important;
    cursor: pointer;
}

.owl-prev:hover,
.owl-next:hover {
    background-color: #0056b3!important;
    border-color: #0056b3!important;
}

.owl-prev {
    left: -10px;
}

.owl-next {
    right: -10px;
}*/

.car-imgs .preview-img-carousel {
    display: none;
    /*width: 90%;*/
    /* Adjust as needed */
    margin: auto;
}

.car-imgs #previewImage {
    width: 100%;
    height: 425px;
    display: block;
    /*margin: auto;*/
}

.car-imgs #carousel {
    margin-top: 20px;
    /*margin-right: auto;*/
    margin-left: auto;
}

.car-imgs .item img {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    /* Optional: Add rounded corners */
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
    /* Optional: Add a subtle shadow */
    cursor: pointer;
    object-fit: fill;
}

.video-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 99999;
}

.close-video-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}

.samples-images {
    position: relative;
    margin-bottom: 20px;
}

.control-buttons {
    position: absolute;
    top: 10px;
    right: 10px;
}

.preview-img-carousel {
    display: none;
}

.video-url {
    box-shadow: 0 0 15px #cccccc91;
}

.btn-check:focus+.btn,
.btn:focus {
    box-shadow: 0 0 ;
}
.btn-check:focus+.btn,
.btn:focus:hover{
    color:#333;
}
.shadow2 {
    box-shadow: 0 5px 15px #cccccc54
}

hr {
    background-color: #ccc!important;
}

::-webkit-scrollbar {
    width: 3px;
    /* Adjust the width as needed */
}

::-webkit-scrollbar-thumb {
    background-color: #201E50;
    /* Color of the thumb (scroll handle) */
        border-radius: 5px; /* Adjust the border radius as needed */

}
.modal-backdrop {
    z-index: 9999!important;
}

.placeholder-image{
    opacity: .3;
}