/* 
body{
    position: absolute !important;
    padding: 0 !important;
    width: var(--ad-width) !important;
    height: var(--ad-height) !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    z-index: 9999 !important;
    overflow: hidden !important;
  
    background-color: rgb(32, 28, 28)
}

.wrapper{
    position: absolute;
    width: var(--ad-width);
    height: var(--ad-height);
    top: 0;
    left: 0;
    overflow: hidden;
    cursor: pointer;

}

.bg, .container{
    position: absolute;
    width: var(--ad-width);
    height: var(--ad-height);
    top: 0;
    left: 0;
  
}

.dragEl {
    transform: scale(0);
}

.bg {
    opacity: 0;
}


.doors {
    margin:50px;
    margin-left: 45%;
}
.engine {
    top: 50px;
    margin-left: 55%;
}

.interior {
    margin:100px;
    margin-left: 48%;
}

.exterior {
    margin:100px;
    margin-left: 55%;    
}

.prev {
    top: 150px;
    margin-left: 42%;
    
}

.next {
    top: 150px;
    margin-left: 64%;  
}




button {
    position: absolute;
   background-color: rgb(177, 5, 151);
    color: rgb(255, 255, 255);
    padding: 10px;
    width: auto;
 
    border: 0.5px solid  rgb(177, 5, 151);;
    cursor: pointer;
    z-index: 9999999;
}
.button {
 
    aspect-ratio: 10/2;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
.carousel {
    top: 150px;
    margin-left: 48%;
    position: absolute;
    background-color: rgba(177, 5, 151, 0.414);
    color: rgb(255, 255, 255);
    padding: 10px;
    width: 15%;
    border-radius: 2px; 
    border: 1px solid rgba(229, 166, 235, 0.3); 
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 9999999;
}



.btn5 {
    background: rgb(116, 0, 116);
    transition: 0.5s ease;
}

.btn5:hover {
    background: none;
    border: 1px solid rgb(255, 56, 255);
    transform: translateY(-10%);
    box-shadow: 0px 0px 20px rgb(255, 0, 255),
        inset 0px 0px 20px rgb(255, 0, 255);
    color: rgb(255, 56, 255);
    text-shadow: 0px 0px 5px rgb(255, 0, 255);
}

.btn5::before {
    content: '';
    height: 20px;
    width: 100%;
    position: absolute;
    background-color: rgb(255, 0, 255);
    bottom: -50px;
    transform: perspective(5rem) rotateX(50deg);
    filter: blur(20px);
    display: none;
    transition: 0.5s ease;
}

.btn5:hover::before {
    display: block;
}

@keyframes bef {
    0% {
        left: -10%;
    }
    50% {
        left: 42%;
        height: 20px;
        width: 20px
    }
    100% {
        left: 42%;
        width: 300px;
        height: 300px;
    }
}


@keyframes aft {
    0% {
        right: -10%;
    }
    50% {
        right: 42%;
        height: 20px;
        width: 20px
    }
    100% {
        right: 42%;
        width: 300px;
        height: 300px;
    }
}
     */


body{
    position: absolute !important;
    padding: 0 !important;
    width: var(--ad-width) !important;
    height: var(--ad-height) !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    /* background-color: rgb(211, 211, 211); */
    /* background-color: lightgrey; */
    /* background-color: rgb(32, 28, 28); */
    display: flex;
    align-items: center;
    justify-content: center;
}


.wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    

}


.bg, .container{
    position: absolute;
    width: var(--ad-widt);
    height: var(--ad-height);
    top: 0;
    background-color: rgb(32, 28, 28);
  
}


.cltobtn {
    position: absolute;
    width: 93px;
    height: 93px;
    background-image: url('../assets/cltobtn.png');
    transform: scale(0.33);
    cursor: pointer;
    right: 5px;
    top: -25px;
}

/* =============================================================== */


@media (pointer: coarse){
	

}


@media (pointer: fine), (pointer: none) {


}

@media (pointer: fine) and (any-pointer: coarse) {


}


.controls {
    position: absolute;
    width: 100%;
    height: 20%;
    /* background-color: green !important;  */
    display: flex;
    justify-content: center;
    align-items: center;
}


.doors {
    top:10px;
    margin-right: 105px;
}
.engine {
    top: 10px;
    margin-left: 105px;
}

.interior {
    top:64px;
    margin-right: 75px;
}

.exterior {
    top:64px;
    margin-left: 75px;
}

.prev {
    top: 70px;
    margin-right: 270px;
    
}

.next {
    top: 70px;
    margin-left: 270px;  
}




button {
    position: absolute;
   background-color: rgb(177, 5, 151);
    color: rgb(255, 255, 255);
    padding: 10px;
    width: auto;
 
    border: 0.5px solid  rgb(177, 5, 151);;
    cursor: pointer;
    z-index: 9999999;
}
.button {
 
    aspect-ratio: 10/2;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
.carousel {
    top: 120px;
    position: absolute;
    background-color: rgba(177, 5, 151, 0.414);
    color: rgb(255, 255, 255);
    padding: 10px;
    width: 10%;
    border-radius: 2px; 
    border: 1px solid rgba(229, 166, 235, 0.3); 
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 9999999;
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    /* Smooth the transition for clip-path */
    transition: clip-path 0.3s ease;
}





.btn5 {
    background: rgb(116, 0, 116);
    transition: 0.5s ease;
}

.btn5:hover {
    background: none;
    border: 1px solid rgb(255, 56, 255);
    transform: translateY(-10%);
    box-shadow: 0px 0px 20px rgb(255, 0, 255),
        inset 0px 0px 20px rgb(255, 0, 255);
    color: rgb(255, 56, 255);
    text-shadow: 0px 0px 5px rgb(255, 0, 255);
}

.btn5::before {
    content: '';
    height: 20px;
    width: 100%;
    position: absolute;
    background-color: rgb(255, 0, 255);
    bottom: -50px;
    transform: perspective(5rem) rotateX(50deg);
    filter: blur(20px);
    display: none;
    transition: 0.5s ease;
}

.btn5:hover::before {
    display: block;
}

@keyframes bef {
    0% {
        left: -10%;
    }
    50% {
        left: 42%;
        height: 20px;
        width: 20px
    }
    100% {
        left: 42%;
        width: 300px;
        height: 300px;
    }
}


@keyframes aft {
    0% {
        right: -10%;
    }
    50% {
        right: 42%;
        height: 20px;
        width: 20px
    }
    100% {
        right: 42%;
        width: 300px;
        height: 300px;
    }
}