@import url('https://db.onlinewebfonts.com/c/b69185d3cd92c527678c7efacbdc7509?family=Pro+Racing+Slant+Outline');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0 !important;
    padding: 0 !important;
}
:root {
    --ff-primary: "poppins";
    --ff-secondary: "Pro Racing Slant";

    --color-dark: #000;
    --light-color: #fff;
    --accent-color: #1f609c;
    --accent-color-2: #f0f0f0;
}
@font-face {
    font-family: Pro Racing Slant;
    src: url(../fonts/Pro\ Racing\ Slant.otf);
}

body{
    font-family: var(--ff-primary) !important;
}

h1,h2,h3,h4,h5,h6,
div,p{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}

#navsection{
    background-color: var(--light-color);
    position: fixed;
    width: 100%;
    z-index: 100;
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#navsection.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0px 5px rgba(0,0,0,0.2);

  backdrop-filter: blur(15px);
}
.navbar{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.navbar-body{
    padding: 0.5rem !important;
    width: 90% !important;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ee-logo{
    width: 15rem;
    height: auto;
    filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.5));
    border-radius: 0.2rem;
}

.banner-image{
    width: 100%;
    height: 100vh;
    object-fit: cover;
}


#vehicle-card-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-section{
    position: relative;
}
.card-section > h1{
    margin-inline: 1rem !important;
    padding-block: 4rem 1rem !important;

    font-size: 3rem;
    font-weight: 700;
}
.card-section > h1 > span{
    font-style: italic;
    font-weight: 400;
}
.swiper {
  position: relative;
}
.swiper-home{
    height: 100vh !important;
}
.swiper2{
   height: 80%; 
}
.home-carousel{
    position: relative !important;
}
.field{
    display: flex;
    justify-content: center;
}
.mouse{
    position: absolute !important;
    z-index: 98;
    margin-block: 0 auto !important;

    bottom: 5%;

	width: 40px;
	height: 70px;
	border: 0.13rem solid #e2e2e2;
	border-radius: 60px;
	position: relative;
	&::before {
		content: '';
		width: 10px;
		height: 10px;
		position: absolute;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #e2e2e2;
		border-radius: 50%;
		opacity: 1;
		animation: wheel 2s infinite;
		-webkit-animation: wheel 2s infinite;
	}
}

@keyframes wheel {
	to {
		opacity: 0;
		top: 45px;
	}
}

@-webkit-keyframes wheel {
	to {
		opacity: 0;
		top: 45px;
	}
}

.vehicle-card{
    height: 90% !important;
    padding: 1rem !important;
}
.card-item{
    background-color: var(--light-color);
    border-radius: 0.5rem;
    border: 0.1rem solid #f7f7f7f9;
    box-shadow: 0.1rem 0.1rem 0.2rem #d3d3d3f9;
    position: relative;
}
.card-item > h1{
    font-family: var(--ff-secondary) !important;
    font-size: 1.4rem;
    padding-block: 1rem 0rem !important;
    margin-inline: 1.5rem !important;
}
.card-image{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.e-scooters{
    width: 65%;
    position: absolute;
    bottom: 0%;
    left: 15%;
}
.card-background{
    width: 100%;
    border-radius: 0.4rem;
}
.card-buttons{
    margin-inline: 1.5rem !important;
    margin-block: 1rem !important;

    display: flex;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;

    bottom: 0;
}
.order-btn{
    padding-block: 0.2rem !important;
    padding-inline: 0.5rem !important;

    background-color: var(--accent-color);
    color: var(--light-color);
    text-decoration: none;

    border-radius: 0.4rem 0rem 0.4rem 0rem;
    border: 0.1rem solid var(--accent-color);
    transition: 300ms ease-in-out;
    width: fit-content;
}
.order-btn:hover{
    color: var(--accent-color);
    background-color: var(--light-color);
    border: 0.1rem solid var(--light-color);
    filter: drop-shadow(0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4));

    transition: 300ms ease-in-out;
}
.view-btn{
    color: var(--color-dark);
    text-decoration: none;
}
.view-btn:hover{
    text-decoration: underline;
}
.view-btn > img{
    margin-inline: 0.3rem 0rem !important;
}

.button-prev,
.button-next{
    background-color: #f5f5f5f9 !important;
    box-shadow: 0.1rem 0.1rem 0.2rem #d3d3d3f9;
    border: 0.05rem solid #f7f7f7f9;

    border-radius: 50%;
    z-index: 99 !important;
}
.button-next{
    position: absolute;
    bottom: -7%;
    right: 1.5%;
}
.button-prev{
    position: absolute;
    bottom: -7%;
    right: 6%;
}


#about-section{
    display: flex;
    justify-content: center;
    align-content: center;

    /* background-image: url(./assets/images/e-100-1-web.png); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    margin-block: 8rem 1rem !important;
}

.about-content-div > h1{
    font-weight: 700;
    font-size: 4.5rem;
    line-height: 0.9;
    margin-block: 0rem 2.5rem !important;
}
.about-content-div > h1> span{
    font-weight: 400;
    font-style: italic;
}
.about-content-div > h3{
    font-weight: 700;
    margin-block: 2rem 0rem !important;
}
.about-content-div > p{
    font-weight: 300;
    margin-block: 0.3rem 0rem !important;
}

#map-section{
    display: flex;
    justify-content: center;
    align-content: center;
    
    margin-top: 4rem !important;

    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.dealTitle{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dealTitle > h1{
    font-size: 5rem;
    font-weight: 700;

    line-height: 4rem;
    padding-top: 6rem !important;
}
.dealTitle > p{
    padding-block: 1rem 0rem !important;
    text-align: justify;
}
.kerala-map{
    display: flex;
    justify-content: center;
    position: relative;
}
.kerala-img{
    width: 50% !important;
    height: auto;
}
.location-span{
    border-radius: 50%;
    position: absolute;

    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
}

/*--- PALAKKAD ---*/
.span-9{
    left: 55%;
    bottom: 53%;
}
.span-8{
    left: 53.4%;
    bottom: 49.9%;
}


/*--- THRISSUR ----*/
.span-2{
    left: 51%;
    bottom: 48.2%;
}
.span-6{
    left: 48.3%;
    bottom: 48%;
}
.span-7{
    left: 46.5%;
    bottom: 45.5%;
}

/*--- ERANAKULAM ---*/
.span-3{
    left: 47.2%;
    bottom: 39%;
}

/*---  KOllAM  ---*/
.span-4{
    left: 50.5%;
    bottom: 17%;
}
.span-5{
    left: 51.3%;
    bottom: 16%;
}





#gallery-section{
    display: flex;
    justify-content: center;
    align-items: center;

    margin-block: 7rem 0rem !important;
}
.main-gallery-item{
    padding: 0.5rem !important;
}
.main-gallery-image{
    width: 100%;
    background-color: #eeeeee;
    border-radius: 0.3rem;
    overflow: hidden;

    box-shadow: 0.1rem 0.1rem 0.2rem #d3d3d3f9;
}
.main-gallery-image > img{
    height: 20rem;
    width: 100%;
    object-fit: cover;
    border-radius: 0.3rem;

    transition: scale ease-in-out 500ms;
}
.main-gallery-image:hover > img{
    scale: 1.03;
    transition: scale ease-in-out 500ms;
    background-clip: border-box;
}

.main-gallery-item:nth-of-type(2) .main-gallery-image > img {
  transform: scale(1);
}



#footer-section{
    background-color: var(--accent-color);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-block: 4rem 0rem !important;
}
.footer-contents{
    padding-inline: 1.5rem !important;
    padding-block: 3rem !important;

    color: var(--light-color);
    font-weight: 200;
}
.footer-contents > img{
    width: 10rem;
    height: auto;
}
.footer-contents > ul > li{
    margin-top: 1rem !important;
}
.footer-contents > ul > li > span{
    font-weight: 700;
    padding-inline: 0rem 1rem !important;
}

.copyright{
    width: 100%;
    background-color: #0c3c68;
    padding-block: 1rem !important;
    color: var(--light-color);

    display: flex;
    justify-content: center;
    align-items: center;
}

/* -------------  INDEX MEDIA QURIES START   ----------------- */

@media only screen and (max-width: 600px) {


    .navbar-body{
        width: 100% !important;
    }
    .swiper-home{
        height: 40vh !important;
    }
    .swiper2{
        height: 80%;
    }
    .card-item{
        height: 100% !Important;
    }
    .card-buttons{
        padding-bottom: 1.5rem !important;
    }
    .firstImage,
    .secondImage,
    .thirdImage{
        height: 40vh;
        object-fit: cover;
    }
    .thirdImage{
        object-fit: cover;
        object-position: bottom;
    }
    .field{
        display: none !important;
    }
    .mouse{
        display: none !important;
    }

    .card-section > h1{
        padding-block: 1.5rem 0.5rem !important;
        padding-inline: 0.5rem 0rem !important;
        font-size: 1.6rem;
        font-weight: 500;
    }
    .card-section > h1 > span{
        font-weight: 300;
    }
    .vehicle-card{
        padding-block: 0rem 0.5rem !important;
        padding-inline: 1rem !important;
        height: 100% !important;
    }
    
    .button-next{
        right: 4%;
    }
    .button-prev{
        right: 16%;
    }

    #about-section{
        margin-block: 4rem 1rem !important;  
    }
    .about-content-div > h1{
        font-size: 2.5rem;
        padding-inline: 1rem !important;
        margin-block: 0rem 0rem !important;
    }
    .about-content-div > h3{
        padding-inline: 1rem !important;
        margin-block: 1rem 0rem !important;
        width: 75%;
        font-size: 1.4rem;
    }
    .about-content-div > p{
        font-weight: 300;
        margin-block: 0.3rem 0rem !important;
        padding-inline: 1rem !important;
        width: 70%;
    }
    
    
    
    #map-section{
        margin-top: 3rem !important;
    }
    .dealTitle{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .dealTitle > h1{
        font-size: 3rem !important;
        font-weight: 700;
    
        line-height: 2.5rem;
        padding-top: 0rem !important;
        padding-bottom: 1rem !important;
        padding-inline: 0.5rem !important;
    }
    .dealTitle > p{
        padding-inline: 0.5rem !important;
    }
    .kerala-img{
        height: 30rem !important;
        width: 100% !important;
        object-fit: contain;
    }
    
    /*--- PALAKKAD ---*/
    .span-9{
        left: 55.5%;
        bottom: 53.5%;
    }
    .span-8{
        left: 53.5%;
        bottom: 49.9%;
    }
    
    
    /*--- THRISSUR ----*/
    .span-2{
        left: 47.8%;
        bottom: 48%;
    }
    .span-6{
        left: 50.4%;
        bottom: 48%;
    }
    .span-7{
        left: 45.2%;
        bottom: 45.5%;
    }
    
    /*--- ERANAKULAM ---*/
    .span-3{
        left: 46.3%;
        bottom: 39%;
    }
    
    /*---  KOllAM  ---*/
    .span-4{
        left: 50%;
        bottom: 17.5%;
    }
    .span-5{
        left: 51.9%;
        bottom: 16.5%;
    }
    
    
    
    
    #gallery-section{
        margin-block: 2rem 0rem !important;
    }
    .main-gallery-image > img{
        height: 10rem;
        width: 100%;
        object-fit: cover;
    }


    #footer-section{
        margin-block: 2rem 0rem !important;
    }
    .footer-contents{
        padding-inline: 1.5rem !important;
        padding-block: 1.2rem 0rem !important;
    }
    .copyright{
        padding-block: 0.7rem !important;
        margin-block: 1rem 0rem !important;
    }
}


/* -------------  INDEX MEDIA QURIES END   ----------------- */




/*----------------  CONTACT PAGE START -----------------*/


#contactForm-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.form-title{
    margin-block: 3rem 2rem !important;
}
.contact-form{
    /* background-color: red; */
    margin-block: 3rem 0rem !important;
}
.contactForm > input, textarea, button{
    width: 80%;
}
.contactForm > input, textarea{
    padding-block: 0.3rem !important;
    padding-inline: 0.5rem !important;
    margin-block: 0.3rem 0.5rem !important;

    border: 0.1rem solid var(--accent-color);
    border-radius: 0.5rem 0rem 0.5rem 0rem;

    filter: drop-shadow(0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2));
}
.contactForm > input:focus, textarea:focus{
    outline: none !important;
    padding-inline: 0.5rem !important;
}
.contactForm > button{
    padding-block: 0.5rem !important;
    margin-block: 0.5rem 0rem !important;

    color: var(--light-color);
    background-color: var(--accent-color);
    border: 0.1rem solid var(--accent-color);
    border-radius: 0.7rem 0rem 0.7rem 0rem;

    filter: drop-shadow(0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2));
    transition: 300ms ease-in-out;
}
.contactForm > button:hover{
    color: var(--accent-color);
    background-color: var(--light-color);
    border: 0.1rem solid var(--accent-color);

    transition: 300ms ease-in-out;
}
.image-box > img{
    width: 100%;
    height: 100%;
    order: -1;

    object-fit: cover;
}



/* --------------- CONTACT PAGE END -------------------*/




/*--------------- CONTACT PAGE MEDIA QUERIES -------------------*/


@media only screen and (max-width: 600px) {


    .form-title{
        padding-inline: 1rem !important;
        margin-block: 1.5rem 0rem !important;
    }
    .contactForm{
        padding: 1rem !important;
    }
    .contactForm > input, textarea{
        width: 100%;
        padding: 0.6rem !important;
        margin-block: 0.2rem 0.7rem !important;
    }
    .contactForm > button{
        margin-block: 0.3rem 0rem !important;
        width: 70%;
    }
}



/*------------ CONTACT PAGE MEDIA QUERIES END ----------------*/





/*------------- BOOKING PAGE START ---------------------*/


#bookingForm-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.booking-form{
    /* background-color: red; */
    margin-block: 5rem 0rem !important;
}
.bookingform > h2{
    margin-block: 2rem 0.5rem !important;
}
.bookingform > input, textarea, button, select{
    width: 80%;
}
.bookingform > input, textarea, select{
    padding-block: 0.3rem !important;
    padding-inline: 0.5rem !important;
    margin-block: 0.3rem 0.5rem !important;

    border: 0.1rem solid var(--accent-color);
    border-radius: 0.5rem 0rem 0.5rem 0rem;

    filter: drop-shadow(0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2));
}
.bookingform > input:focus, textarea:focus, select:focus{
    outline: none !important;
    padding-inline: 0.5rem !important;
}
.bookingform > button{
    padding-block: 0.5rem !important;
    margin-block: 0.5rem 0rem !important;

    color: var(--light-color);
    background-color: var(--accent-color);
    border: 0.1rem solid var(--accent-color);
    border-radius: 0.7rem 0rem 0.7rem 0rem;

    filter: drop-shadow(0.2rem 0.2rem 0.15rem rgba(0, 0, 0, 0.2));
    transition: 300ms ease-in-out;
}
.bookingform > button:hover{
    color: var(--accent-color);
    background-color: var(--light-color);
    border: 0.1rem solid var(--accent-color);

    transition: 300ms ease-in-out;
}
.image-box > img{
    width: 100%;
    height: 100%;
    order: -1;

    object-fit: contain;

}
.modelBg{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between  ;
    background-color: var(--light-color);
    border: 0.1rem solid var(--accent-color);
    border-radius: 0.7rem 0rem 0.7rem 0rem;
    margin-block: 0.1rem 0.5rem !important;
    padding: 0.7rem 1rem !important;
    width: 80% !important;

    filter: drop-shadow(0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2));
}

#model, [id^="model"]{
    width: 100%;
}
.removeModelBtn{
    padding-block: 0.5rem !important;
    margin-block: 1rem 0rem !important;
    display: flex;
    width: 40%;
    color: #FA5252;
    background-color: var(--accent-color-2);
    border: none;
    border-radius: 0.7rem 0rem 0.7rem 0rem;
    padding: 0.7rem 1rem !important;

    filter: drop-shadow(0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2));
}


/* Container for each color+quantity row */
.colorRow {
    display: flex;
    align-items: center;
    gap: 10px;       /* spacing between elements */
    margin-block: 0.7rem 0rem !important;

    margin-bottom: 10px;
}

/* Style for the color dropdown */
.colorRow select {
    width: 50%;
    padding-block: 0.3rem !important;
    padding-inline: 0.5rem !important;
    margin-block: 0.3rem 0.5rem !important;

    border: 0.1rem solid var(--accent-color);
    border-radius: 0.5rem 0rem 0.5rem 0rem;

    filter: drop-shadow(0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2));
}

/* Style for quantity input */
.colorRow input[type="number"] {
    width: 35%;
    padding-block: 0.3rem !important;
    padding-inline: 0.5rem !important;
    margin-block: 0.3rem 0.5rem !important;

    border: 0.1rem solid var(--accent-color);
    border-radius: 0.5rem 0rem 0.5rem 0rem;

    filter: drop-shadow(0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2));
}

#colorQuantityContainer, [id^="colorQuantityContainer"]{
    width: 100% !important;
}


/* Add color button - targets all buttons with IDs starting with "addColorBtn" */
#addColorBtn, [id^="addColorBtn"] {
    width: 40%;
    padding-block: 0.5rem !important;
    margin-block: 1rem 0rem !important;

    color: var(--light-color);
    background-color: var(--accent-color);
    border: 0.1rem solid var(--accent-color);
    border-radius: 0.7rem 0rem 0.7rem 0rem;

    filter: drop-shadow(0.2rem 0.2rem 0.15rem rgba(0, 0, 0, 0.2));
    transition: 300ms ease-in-out;
}

#addColorBtn:hover, [id^="addColorBtn"]:hover {
    color: var(--accent-color);
    background-color: var(--light-color);
    border: 0.1rem solid var(--accent-color);

    transition: 300ms ease-in-out;
}


.removeBtn {
    cursor: pointer;
    padding-block: 0.4rem !important;
    margin-block: 0.3rem 0.5rem !important;
    border: none;
    border-radius: 0.7rem 0rem 0.7rem 0rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;

    filter: drop-shadow(0.2rem 0.2rem 0.15rem rgba(0, 0, 0, 0.2));
}


/*------------- BOOKING PAGE END ---------------------*/



/*------------- BOOKING PAGE MEDIA QUERIES -----------------*/


@media only screen and (max-width: 600px) {


    .bookingform{
        padding: 1rem !important;
    }
    .bookingform > input, textarea, select{
        width: 100%;
        padding: 0.6rem !important;
        margin-block: 0.2rem 0.7rem !important;
    }
    .bookingform > button{
        margin-block: 0.3rem 0rem !important;
        width: 70%;
    }
    #addColorBtn,[id^="addColorBtn"] {
        width: 45%;
        padding-inline: 0rem 0.5rem !important;
    }
    .colorRow select {
        width: 50%;
        padding: 0.6rem !important;
    }
    .colorRow input[type="number"] {
        width: 30%;
        padding: 0.6rem !important;
    }
    .removeBtn{
        padding: 0.6rem !important;
        width: 15%;
    }
    .bookingform > button{
        width: 100%;
    }
    .modelBg{
        width: 100% !important;
    }
    .removeModelBtn{
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}


/*------------- BOOKING PAGE MEDIA QUERIES END -----------------*/




/*---------------  ESCOOTER PAGE START ---------------*/


#scooterPage-background{
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
}
.booking-btn{
    font-family: var(--ff-secondary) !important;
    text-decoration: none;
    color: #333;
    font-size: 1.3rem;

    position: absolute;
    right: 20%;
    bottom: 5%;
}
.booking-btn::before{
    content: '';
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    width: 0%;
    height: 0.1rem;
    background-color: #3f3f3f;
    transition: all 400ms ease-in-out;
}
.booking-btn:hover::before{
    width: 87%;
}
.booking-btn > img{
    margin-inline: 0.2rem 0rem !important;
    transition: 300ms ease-in-out;
}
.booking-btn:hover > img{
    transform: rotateZ(-45deg);
    transition: 300ms ease-in-out;
}
.bookingBtn{
    text-decoration: none;
    color: var(--light-color);
    background-color: var(--accent-color);
    padding-block: 0.4rem !important;
    padding-inline: 0.7rem !important;

    border-radius: 0.5rem 0rem 0.5rem 0rem;
    transition: 300ms ease-in-out;
}
.bookingBtn:hover{
    background-color: var(--light-color);
    color: var(--accent-color);
    filter: drop-shadow(0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3));
    transition: 300ms ease-in-out;
}
.escooters{
    padding-block: 5rem 0rem !important;
}
.scooter-image{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.scooter-image > h1{
    font-family: var(--ff-secondary) !important;
    font-size: 3rem;
    margin-block: 0rem 0rem !important;
}
.spec-title{
    display: flex;
    gap: 4.5rem;
    margin-block: 0rem 0.5rem !important;
}
.spec-detail{
    display: flex;
    gap: 2rem;

    font-size: 2rem;
    font-weight: 600;
}
.spec-detail > li > span{
    font-variant: small-caps;
    font-weight: 400;
    font-size: 1.5rem;
}
.e200-image > img{
    width: auto;
    height: 26.5rem;
    transition: opacity 0.5s ease-in-out;
}


.color-options{
    position: absolute;
    left: 15%;
    bottom: 5%;
    /* background-color: rgb(255, 255, 255);
    padding: 0.5rem !important;
    border-radius: 0.5rem;
    box-shadow: 0.2rem 0.2rem 0.3rem rgb(0, 0, 0, 0.2); */
}
#color-name{
    font-size: 1.1rem;
    color: #333;
    font-family: var(--ff-secondary) !important;
}
.color-button {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0.1rem 0.15rem 0.2rem #85858594;
}

.fade-out {
    opacity: 0;
}

#scooter-image {
    transition: transform 0.6s ease-in-out;
}

/* Slide out to left */
.slide-out-left {
    opacity: 1;
    animation: slideToLeft 0.6s ease-in-out;
}
/* Reset back to right and slide in */
.slide-in-left {
    transform: translateX(100%);
    opacity: 0;
    scale: 0.5;
    animation: slideToCenter 0.4s ease-in-out;
}

/* Animation to bring it to center */
@keyframes slideToCenter {
    to {
        transform: translateX(0);
        opacity: 1;
        scale: 1;
    }
}
@keyframes slideToLeft {
    to {
        transform: translateX(-100%);
        opacity: 0;
        scale: 0.5;
    }
}



#spec-section{
    display: flex;
    justify-content: center;
    align-items: center;

    margin-block: 3rem !important;
}
/* .spec-gallery{
    
} */
.spec-container{
    padding: 1rem !important;
}
.spec-item{
    background: linear-gradient(45deg, rgb(218, 218, 218), var(--accent-color-2), var(--accent-color-2));
    padding: 1.5rem !important;
    height: 13rem;
    position: relative;

    border-radius: 0.5rem;

    box-shadow: 0.1rem 0.1rem 0.4rem #d3d3d394;
    border: 1px solid #d8d8d834;
}
.spec-item > img{
    padding: 0.5rem !important;
    /* border: 0.05rem solid #d6d6d6f9; */
    border-radius: 0.5rem;

    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow: 0.1rem 0.1rem 0.3rem #e9e9e9f9;
    background-color: var(--light-color);
}
.spec-item > h4{
    margin-block: 1rem 0rem !important;
    text-transform: uppercase;
}



#scooter-gallery-section{
    display: flex;
    justify-content: center;
    align-items: center;

    margin-block: 7rem 0rem !important;
}
.gallery > h1{
    font-weight: 400;
    font-size: 3rem;
    padding-inline: 1rem !important;
    margin-block: 0rem 1.5rem !important;
}
.gallery > h1 > span{
    font-family: var(--ff-secondary) !important;
}
.gallery-item{
    padding: 0.5rem !important;
}
.gallery-image{
    width: 100%;
    background-color: #eeeeee;
    border-radius: 0.3rem;
    overflow: hidden;

    box-shadow: 0.1rem 0.1rem 0.2rem #d3d3d3f9;
}
.gallery-image>img{
    height: 20rem;
    width: 100%;
    object-fit: cover;
    border-radius: 0.3rem;

    transition: scale ease-in-out 500ms;
}
.gallery-image:hover >img{
    scale: 1.03;
    transition: scale ease-in-out 500ms;
    background-clip: border-box;
}

.gallery-item:nth-of-type(2) .gallery-image > img {
  transform: scale(1);
}


/* ------------ ESCOOTER PAGE END --------------*/


/*------------- ESCOOTER MEDIA QUERIES -------------*/


@media only screen and (max-width: 600px) {

    #scooterPage-background{
        height: 95vh;
    }
    .ee-logo{
        width: 9rem;
    }
    .color-options{
        left: 7%;
        bottom: 5%;
    }
    .bookingBtn{
        font-size: 0.75rem !important;
        padding-block: 0.4rem !important;
        padding-inline: 0.5rem !important;
    }
    .booking-btn{
        font-size: 1.1rem;
        right: 7%;
        bottom: 5%;
    }
    .escooters{
        padding-block: 0rem 0rem !important;
    }
    .scooter-image > img{
        margin-block: 3rem 0rem !important;
    }
    #scooter-image{
        height: auto !important;
        width: 25rem !important;
    }
    .scooter-image > h1{
        font-size: 2.5rem;
    }

    #spec-section{
        margin-block: 1.5rem !important;
    }
    .spec-container{
        padding: 0.5rem !important;
    }
    .spec-item{
        padding: 0.5rem !important;
        height: 10rem ;
    }
    .spec-item > h4{
        font-size: 1.2rem !important;
    }
    .spec-item > p{
        font-size: 0.8rem !important;
    }
    .spec-title{
        gap: 1.5rem;
        margin-block: 0rem 0rem !important;
    }
    .spec-detail{
        gap: 1.6rem;
        font-size: 1.5rem;
    }
    .spec-detail > li > span{
        font-size: 1.2rem;
    }



    #scooter-gallery-section{
        margin-block: 2rem 0rem !important;
    }
    .gallery > h1{
        font-size: 2rem;
        padding-inline: 1rem !important;
        margin-block: 0rem 0rem !important;
    }
    .gallery-image>img{
        height: 10rem;
    }


}

/*----------- ESCOOTER MEDIA QUIRES END ----------*/