* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    word-wrap: break-word;
    --white: white;
    --bgHeight: calc(1vw*35);
    --bgColor: linear-gradient(149deg, rgb(0, 0, 0) 0%, rgba(0,10,44,0.79) 99%, rgba(0,10,44,0.79) 99%);
}
::-webkit-scrollbar{
    display: none;
}
body{
    color: white;
}
a{
    text-decoration: none;
    color: inherit;
}
.bg1-cont{
    height: max-content;
    min-height: var(--bgHeight);
    /* background: rgb(7,14,37); */
    background: var(--bgColor);
    display: flex;
    justify-content: center;
}
.bg2-cont{
    min-height: var(--bgHeight);
    background: var(--bgColor);
    display: flex;
    justify-content: center;
}
.bg3-cont{
    min-height: var(--bgHeight);
    background:  url("../img/background3.svg"), linear-gradient(149deg, rgb(0, 0, 0) 0%, rgba(0,10,44,0.79) 99%, rgba(0,10,44,0.79) 99%);
    display: flex;
    justify-content: center;
    background-position: center;
    background-repeat: repeat-x;
    background-size: contain;
}
.bg4-cont{
    min-height: var(--bgHeight);
    background: var(--bgColor);
    display: flex;
    justify-content: center;
}
.bg5-cont{
    min-height: var(--bgHeight);
    height: max-content;
    background:  url("../img/background5.svg"), linear-gradient(149deg, rgb(0, 0, 0) 0%, rgba(0,10,44,0.79) 99%, rgba(0,10,44,0.79) 99%);
    display: flex;
    justify-content: center;
    padding-top: 2vw;
    padding-bottom: 2vw;
    user-select: none;
}
.bg6-cont{
    min-height: var(--bgHeight);
    background: var(--bgColor);
    display: flex;
    justify-content: center;
}

.car-cont{
    width: 90%;
    display: flex;
    flex-direction: column;
    padding-top: 1.5vw;
}
.nav-cont{
    display: flex;
    gap: 2vw;
    font-size: 1rem;
}
.nav-cont .home-cont{
    display: flex;
    gap: 0.2vw;
    cursor: pointer;
}
.burger-icon{
    display: none;
    width: 5vw;
    height: 5vw;
}
.burger-cont{
    display: flex;
    gap: 1vw;
}
.burger-cont div{
    display: flex;
    gap: 0.2vw;
    cursor: pointer;
}
.hero-cont{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 1vw;
    margin-bottom: 1vw;
}
.hero-text{
    font-size: 2rem;
    max-width: 15vw;
}
.hero-img{
    height: 25vw;
}
.nav-cont2{
    width: 100%;
    display: flex;
    font-size: 1rem;
}
.nav-cont2-left{
    width: 50%;
    display: flex;
    align-items: center;
    gap: 2vw;
}
.nav-cont2-right{
    width: 50%;
    display: flex;
    gap: 1vw;
    align-items: center;
    justify-content: flex-end;
}
.phone-img{
    width: 4vw;
    height: 4vw;
}
.modal2{
    min-height: var(--bgHeight);
    height: max-content;
    background:  black;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}
/* The Close Button */
.close2 {
    position: absolute;
    /* top: 15px; */
    right: 35px;
    color: #f1f1f1;
    font-size: 1.5rem;
    font-weight: bold;
    transition: 0.3s;
}

.close2:hover,
.close2:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.bg7-cont{
    width: 100%;
    min-height: 100vh;
    height: max-content;
    background:  linear-gradient(149deg, rgb(0, 0, 0) 0%, rgba(0,10,44,0.79) 99%, rgba(0,10,44,0.79) 99%);
    padding: 1vw;

}
.modal-header{
    color: #979191;
    font-size: 2rem;
    margin-bottom: 2vw;
}
.modal-body{
    width: 100%;
    display: flex;
}
.modal-left{
    width: 50%;
}
.modal-right{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
}
.modal-right .top{
    width: 70%;
    height: 25vw;
    object-fit: contain;
}
.modal-right .bottom{
    width: 80%;
    max-height: 40vw;
    object-fit: contain;
}

.car-cont2{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2vw;
}
.car-cont2 .header{
    font-size: 4rem;
    font-weight: bold;
}
.car-cont2 .img{
    width: 50vw;
}
.data-car2-cont{
    width: 80%;
    display: flex;
    justify-content: space-between;
}
.data-car2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.engine-cont{
    display: flex;
    width: 90%;
}
.engine-cont-left{
    width: 50%;
    max-width: 50%;
    padding-right: calc(1vw*2);
    padding-top: 2vw;
}
.engine-cont-left .header{
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 2vw;
}
.engine-cont-left .text{
    font-size: 1.5rem;
    color: #979191;
}
.engine-cont-right{
    width: 50%;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.engine-cont-right img{
    width: 30vw;
    height: auto;
    /* height: calc(1vw*25); */
}

.carousel-cont{
    width: 100%;
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
}
.carousel-box{
    width: 80%;
}
.carousel{
    width: 100%;
    display: flex;
    margin-bottom: 1vw;
}
.swiper-btn{
    content: url(../img/arrow.svg);
    top: auto!important;
    left: auto!important;
    right: auto!important;
    position: relative!important;
    color: white!important;
}
.swiper-button-prev{
    transform: rotate(180deg)!important;
    -webkit-transform: rotate(180deg)!important;
}

/* .carousel-wrapper{
    background-color: white!important;
    border-radius: 1vw;
} */
.carousel-img-cont{
    background-color: white;
    border-radius: 1vw;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
}
.carousel-img-cont img{
    width: 40vw;
    height: 25vw;
    object-fit: contain;
}
.thumbImg-cont{
    background-color: white!important;
    border-radius: 1vw;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
}
.thumbImg-cont img{
    width: 15vw;
    height: 8vw;
    object-fit: contain;
}


.footer{
    width: 100%;
    min-height: calc(1vw*20);
    background: linear-gradient(114deg, rgba(18,20,25,1) 0%, rgba(11,20,53,1) 50%, rgba(11,20,53,1) 100%);
    /* margin-top: calc(1vw*3); */
    padding: calc(1vw*2);
}
.footer-header-text{
    text-align: center;
    font-size: 2rem;
    text-decoration: underline;
    margin-bottom: 1vw;
}
.cont2{
    display: flex;
    justify-content: space-around;
    gap: 2vw;
}
.cont2-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.icon-img{
    width: calc(1vw*9);
    height: calc(1vw*9);
}
.cont2-left-nama{
    text-decoration-color: black;
}
.cont2-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.qr-img{
    width: calc(1vw*9);
    height: calc(1vw*9);
    margin-bottom: 0.5vw;
    cursor: pointer;
}