style.css

/* MOBILE CSS ONLY */

body {
    margin: 0;
    padding: 0;
}

.topbar {
    display: flex;
    margin: 0;
    padding: 0;
    height: 6.15vh;
    width: 100%;
    background-color: #0F2453;
    box-shadow: 5px 10px 10px #00000029;
    border-radius: 0px 0px 2.46vh 2.46vh;
    z-index: 2;
    position: fixed;

}

.logo_holder {
    margin-left: 5.33vw;
    margin-top: 20px;
}

.logo {
    height: 3.7vh;
}

.menu_holder {
    width: 100vw;
    text-align: end;
    margin-right: 5.33vw;
    margin-top: 2.3vh;
}

.menu {
    height: 1.5vh;
}

.menutab {
    position: absolute;
    width: 100vw;
    height: 6.4vh;
    background-color: #16377e;
    z-index: 1;
    margin-top: 4vh;
    border-radius: 0px 0px 2.46vh 2.46vh;
    display: flex;
    position: fixed;
}

.menutab h3 {
    margin-top: 73px;
    font-family: Roboto;
    font-weight: 300;
    font-size: 25px;
    letter-spacing: 0.5px;
    color: #fff;
    opacity: 0.6;
    padding-left: 78px;
}

.menutab > :first-child {
    padding-left: 15px;
    padding-right: 15px;
    opacity: 1;
    margin-left: 85px;
    border-bottom: 2.5px solid #fff;
}

.car {
    width: 100%;
    margin-top: 3vh;
}

.gallery {
    text-align: center;
    width: 100%;
    margin-top: -14vh;
}

.gallery img {
    height: 2.5vh;
    border-radius: 0.5vh;
    border: solid 0.5px #919191;
    margin-left: 2.5%;
}

.small_specs {
    height: 2vh;
    margin-top: 3.5vh;
    margin-left: 5.33vw;
}

.title_holder {
    margin-left: 5.33vw;
    display: flex;
}

.title {
    width: 69%;
    font-family: Roboto;
    font-size: 50px;
    font-weight: bold;
    line-height: 1.05;
    color: #212121;
}

.share {
    margin-top: 2vh;
    margin-left: 15vw;
    height: 1.5vh;
}

.rating {
    position: absolute;
    margin-top: -0.7vh;
    margin-left: 5.33vw;
    height: 1vh;
}

.price {
    margin-left: 5.33vw;
    height: 30px;
    -webkit-text-stroke: 1px #434343;
    font-family: Roboto;
    font-size: 60px;
    font-weight: 100;
    line-height: 1.2;
    letter-spacing: -0.25px;
    color: #212121;
}

.ex_showroom {
    margin-left: 5.33vw;
    font-family: Roboto;
    font-size: 25px;
    font-weight: normal;
    color: #7a7c7f;
}

.emi_holder {
    margin-top: 2%;
    margin-left: 5.33vw;
    display: flex;
    margin-bottom: 5%
}

.emi_holder img {
    height: 2vh;
    margin-right: 2%;
}

.emi_holder h4 {
    font-family: Roboto;
    font-size: 25px;
    margin: 1%;
    color: #7a7c7f;
    margin-right: 2%;
}

.emi_holder h3 {
    font-family: Roboto;
    font-size: 35px;
    margin: 0;
    color: #7a7c7f;
    font-weight: 400;
}

hr {
    width: 80%;
    border-top: 1px solid #7a7c7f;
}

.spec {
    margin-top: 2vh;
    margin-left: 20%;
    text-align: center;
}

.spec > h3 {
    margin-left: -25%;
    margin-top: 3vh;
    margin-bottom: 2vh;
    font-family: Roboto;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.4px;
    color: #0F2453;
}

.spec1,
.spec2 {
    width: 75%;
}

.spec1 th img,
.spec2 th img {
    height: 8.5vh;
}

.spec1 td h3,
.spec2 td h3 {
    font-family: Roboto;
    font-size: 25px;
    font-weight: normal;
    letter-spacing: 0.09px;
    text-align: center;
    color: #212121;
    margin: 0.3vh
}

.cta {
    bottom: 0;
    position: fixed;
    height: 6.15vh;
    width: 100%;
    background-color: #0F2453;
    box-shadow: 10px 10px 20px 0 #00000029;
    border-radius: 2.46vh 2.46vh 0px 0px;
    z-index: 2;
}

.cta h2 {
    margin-top: 2.2vh;
    text-align: center;
    font-family: Roboto;
    font-size: 37px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #ffffff;
}

.more_specs {
    margin-top: 3vh;
    margin-left: 20%;
    width: 60%;
    height: 4vh;
    border-radius: 1.23vh;
    border: solid 5px #0F2453;
}

.more_specs h4 {
    margin: 4.6%;
    font-family: Roboto;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.12px;
    text-align: center;
    color: #0F2453;
}

.chat {
    position: fixed;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color: #0F2453;
    text-align: center;
    bottom: 7.5%;
    right: 4%;
    z-index: 2;
}

.chat img {
    margin-top: 1vh;
    height: 100px;
}

.hr2 {
    margin-top: 7%;
    width: 80%;
    border-top: 1px solid #7a7c7f;
}

.variants {
    text-align: center;
}

.variants > h3 {
    margin-top: 5vh;
    margin-bottom: 3vh;
    font-family: Roboto;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.4px;
    color: #0F2453;
}

.variants_slider {
    margin-left: 5.33vw;
    display: flex;
    overflow: scroll;
}

.v1,
.v2 {
    width: 32%;
    height: 18vh;
    border-radius: 2vh;
    border: solid 3px #707070;
    margin-right: 5%;
}

.v3 {
    width: 28%;
    height: 18vh;
    border-radius: 2vh;
    border: solid 3px #707070;
    margin-right: -5%;
}

.white {
    width: 15%;
    height: 18vh;
    position: absolute;
    margin-left: 79.7%;
    background: linear-gradient(to right, #ffffff00, #ffffffbb 50%, #ffffff);
}

.variants_slider h1 {
    margin-top: 3vh;
    font-family: Roboto;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.1px;
    text-align: center;
    color: #212121;
}

.variants_slider h3 {
    margin-left: 3vw;
    margin-right: 3vw;
    opacity: 0.6;
    font-family: Roboto;
    font-size: 24px;
    line-height: 1.44;
    letter-spacing: 0.09px;
    text-align: center;
    color: #212121;
}

.variants_slider h4 {
    font-family: Roboto;
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 0.13px;
    text-align: center;
    color: #0f2453;
}

.overview {
    text-align: center;
}

.overview h3 {
    margin-top: 5vh;
    margin-bottom: 3vh;
    font-family: Roboto;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.4px;
    color: #0F2453;
}

.overview h4 {
    opacity: 0.9;
    font-family: Roboto;
    font-size: 12px;
    font-weight: normal;
    color: #212121;
}

.overview h5 {
    margin-left: 10%;
    width: 80%;
    opacity: 0.75;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.12px;
    text-align: center;
    color: #212121;
}

.white2 {
    position: absolute;
    margin-top: -6vh;
    margin-left: 10%;
    width: 80%;
    height: 7vh;
    background: linear-gradient(to bottom, #ffffff00, #ffffff);
    z-index: 1.5;
}

.overview_readmore {
    margin-top: 3.2vh;
    font-family: Roboto;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.1px;
    text-align: center;
    color: #0F2453;
}

.news_review {
    text-align: center;
}

.news_review h3 {
    margin-top: 5vh;
    margin-bottom: 3vh;
    font-family: Roboto;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.4px;
    color: #0F2453;
}

.news1 {
    display: flex;
    width: 82%;
    margin-left: 11%;
    text-align: center;
}

.news1 img {
    width: 200px;
    height: 200px;
    border-radius: 2vh;
    border: solid 4px #959595;
}

.news1 div {
    text-align: left;
    margin-left: 5%;
}

.news1 div h3 {
    opacity: 0.8;
    font-family: Roboto;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.1px;
    text-align: left;
    color: #273964;
    margin: 0;
}

.news1 div h4 {
    margin-top: 1.2vh;
    opacity: 0.8;
    font-family: Roboto;
    font-size: 28px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: 0.11px;
    text-align: left;
    color: #212121;
}

.news1 div h5 {
    margin-top: -1vh;
    opacity: 0.55;
    font-family: Roboto;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.67;
    letter-spacing: 0.09px;
    text-align: left;
    color: #212121;
}

.news2 {
    display: flex;
    width: 82%;
    margin-left: 11%;
    text-align: center;
}

.news2 img {
    width: 200px;
    height: 200px;
    border-radius: 2vh;
    border: solid 4px #959595;
}

.news2 div {
    text-align: left;
    margin-left: 5%;
}

.news2 div h3 {
    opacity: 0.8;
    font-family: Roboto;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.1px;
    text-align: left;
    color: #273964;
    margin: 0;
}

.news2 div h4 {
    margin-top: 1.2vh;
    opacity: 0.8;
    font-family: Roboto;
    font-size: 28px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: 0.11px;
    text-align: left;
    color: #212121;
}

.news2 div h5 {
    margin-top: -1vh;
    opacity: 0.55;
    font-family: Roboto;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.67;
    letter-spacing: 0.09px;
    text-align: left;
    color: #212121;
}

.review {
    display: flex;
    width: 82%;
    margin-left: 11%;
    text-align: center;
}

.review > img {
    width: 200px;
    height: 200px;
    border-radius: 2vh;
    border: solid 4px #959595;
}

.review div {
    text-align: left;
    margin-left: 5%;
}

.review div h3 {
    opacity: 0.8;
    font-family: Roboto;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.1px;
    text-align: left;
    color: #273964;
    margin: 0;
}

.review div h4 {
    margin-top: 1.2vh;
    opacity: 0.8;
    font-family: Roboto;
    font-size: 28px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: 0.11px;
    text-align: left;
    color: #212121;
}

.review div img {
    width: 40%;
    margin-top: -0.7vh;
}

.test_drive {
    margin-top: 5vh;
    margin-left: 15%;
    width: 70%;
    height: 4vh;
    border-radius: 1.23vh;
    border: solid 5px #0F2453;
}

.test_drive h4 {
    margin-top: 3.7%;
    font-family: Roboto;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.12px;
    text-align: center;
    color: #0F2453;
}

.dealers {
    margin-left: 28%;
    margin-top: 3.5vh;
    display: flex;
}

.dealers img {
    height: 5.5vh;
}

.dealers h2 {
    margin-top: 2vh;
    font-family: Roboto;
    font-size: 25px;
    font-weight: normal;
    text-align: left;
    color: #212121;
}

.compare {
    text-align: center;
}

.compare h3 {
    margin-top: 5vh;
    margin-bottom: 3vh;
    font-family: Roboto;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.4px;
    color: #0F2453;
}

.compare_slider {
    margin-left: 5.33vw;
    display: flex;
    overflow: scroll;
}

.c1,
.c2 {
    width: 32%;
    height: 19vh;
    border-radius: 2vh;
    border: solid 3px #707070;
    margin-right: 5%;
}

.c3 {
    width: 28%;
    height: 19vh;
    border-radius: 2vh;
    border: solid 3px #707070;
    margin-right: -5%;
}

.compare_slider img {
    margin-top: 2vh;
    width: 97%;
}

.compare_slider h1 {
    margin: 0;
    font-family: Roboto;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.1px;
    text-align: center;
    color: #212121;
}

.compare_slider h4 {
    margin-top: 0.7vh;
    margin-bottom: 0;
    font-family: Roboto;
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 0.13px;
    text-align: center;
    color: #0f2453;
}

.white3 {
    width: 15%;
    height: 19vh;
    position: absolute;
    margin-left: 79.7%;
    background: linear-gradient(to right, #ffffff00, #ffffffbb 50%, #ffffff);
}

.faq {
    text-align: center;
}

.faq h3 {
    margin-top: 5vh;
    margin-bottom: 3vh;
    font-family: Roboto;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.4px;
    color: #0F2453;
}

.q1 {
    border-radius: 0px 0px 1.2vh 1.2vh;
    margin: 0;
    margin-left: 5.33vw;
    margin-right: 5.33vw;
    border: solid 3px #707070;
    background-color: #ffffff;
}

.q1 h3 {
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-left: 4.5vw;
    margin-right: 4.5vw;
    font-family: Roboto;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: -0.25px;
    color: #212121;
}

.q1_answer {
    border-radius: 0px 0px 1.2vh 1.2vh;
    margin: 0;
    margin-left: 13vw;
    margin-right: 13vw;
    border: solid 3px #707070;
    background-color: #ffffff;
}

.q1_answer h3 {
    opacity: 0.8;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-left: 4vw;
    margin-right: 4vw;
    font-family: Roboto;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: -0.25px;
    color: #212121;
    text-align: left;
}

.q2 {
    margin-top: 1vh;
    border-radius: 0px 0px 1.2vh 1.2vh;
    margin-left: 5.33vw;
    margin-right: 5.33vw;
    border: solid 3px #707070;
    background-color: #ffffff;
}

.q2 h3 {
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-left: 4.5vw;
    margin-right: 4.5vw;
    font-family: Roboto;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: -0.25px;
    color: #212121;
}

.q3 {
    margin-top: 1vh;
    border-radius: 0px 0px 1.2vh 1.2vh;
    margin-left: 5.33vw;
    margin-right: 5.33vw;
    border: solid 3px #707070;
    background-color: #ffffff;
}

.q3 h3 {
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-left: 4.5vw;
    margin-right: 4.5vw;
    font-family: Roboto;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: -0.25px;
    color: #212121;
}

.q4 {
    margin-top: 1vh;
    border-radius: 0px 0px 1.2vh 1.2vh;
    margin-left: 5.33vw;
    margin-right: 5.33vw;
    border: solid 3px #707070;
    background-color: #ffffff;
}

.q4 h3 {
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-left: 4.5vw;
    margin-right: 4.5vw;
    font-family: Roboto;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: -0.25px;
    color: #212121;
}

.haq {
    text-align: center;
    margin-top: 5vh;
    margin-bottom: 17vh;
}

.haq h3 {
    font-family: Roboto;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.19;
    letter-spacing: -0.4px;
    text-align: center;
    color: #0f2453e6;
}

.haq > div {
    display: flex;
    margin-top: 2.5vh;
    margin-left: 12.5vw;
}

input[type=text] {
    font-size: 25px;
    text-align: center;
    width: 55vw;
    height: 4vh;
    padding-left: 2vh;
    padding-right: 2vh;
    margin: 16px 0;
    box-sizing: border-box;
    border: 2px solid #707070;
    border-radius: 1.2vh;
}

.haq > div > div {
    margin-left: 3vw;
    margin-top: 0.7vh;
    height: 4vh;
    width: 16vw;
    border-radius: 1.2vh;
    background-color: #273964;
}

.haq > div > div h5 {
    font-family: Roboto;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.3;
    letter-spacing: 0.25px;
    text-align: center;
    color: #ffffff;
    margin-top: 1.2vh;
}