.hero-wrapper { height: 720px; } .hero-wrapper .banner-slider { display: inline-block; max-width: 100%; } .hero-wrapper .banner-slider .slide-item { height: 720px; position: relative; } .hero-wrapper .banner-slider .slide-item .full-img { height: 720px; width: 100%; margin: 0 auto; -o-object-fit: cover; object-fit: cover; } @media (max-width: 767.98px) { .hero-wrapper .banner-slider .slide-item .full-img { padding-top: 0; } .main-technical { padding: 10px; } .car-single-widget { margin-top: 10px; } } /*@media (max-width: 767.98px) { .hero-wrapper { height: 638px; } .hero-wrapper .banner-slider .slide-item { height: 638px; } .hero-wrapper .banner-slider .slide-item .full-img { height: 638px; padding-top: 40px; } }*/ @media (max-width: 767.98px) { .hero-wrapper { margin-top: -10px; } } @media (max-width: 430px) { .hero-wrapper { margin-top: 0; height: 765px; } .hero-wrapper .banner-slider .slide-item { height: 767px; } .hero-wrapper .banner-slider .slide-item .full-img { height: 767px; } .hero-wrapper .test-ride-btn { bottom: 7%; } } @media (max-width: 414px) { .hero-wrapper { height: 740px; margin-top: -20px; } .hero-wrapper .test-ride-btn { bottom: 9%; } } @media (max-width: 412px) { .hero-wrapper { margin-top: -18px; } .hero-wrapper .test-ride-btn { bottom: 9%; } } @media (max-width: 390px) { .hero-wrapper { height: 720px; margin-top: -40px; } .hero-wrapper .test-ride-btn { bottom: 11%; } } @media (max-width: 375px) { .hero-wrapper { height: 720px; margin-top: -40px; } .hero-wrapper .test-ride-btn { bottom: 11%; } } @media (max-width: 360px) { .hero-wrapper { margin-top: -22px; max-height: 100%; } .hero-wrapper .banner-slider .slide-item { height: 100%; } .hero-wrapper .banner-slider .slide-item .full-img { height: 675px; height: 100%; } .hero-wrapper .test-ride-btn { bottom: 8%; } } @media (min-width: 1366px) { .hero-wrapper { height: 767.98px; } .hero-wrapper .banner-slider .slide-item { height: 767.98px; } .hero-wrapper .banner-slider .slide-item .full-img { height: 790px; margin-top: -14px; } } @media (min-width: 1600px) { .hero-wrapper { height: 900px; } .hero-wrapper .banner-slider .slide-item { height: 900px; } .hero-wrapper .banner-slider .slide-item .full-img { height: 900px; } } @media (min-width: 1920px) { .hero-wrapper { height: 1080px; margin-top: -40px; } .hero-wrapper .banner-slider .slide-item { height: 1080px; } .hero-wrapper .banner-slider .slide-item .full-img { height: 1080px; } } @media (max-width: 767.98px) { .right-menu .icon-bar { width: 28px; margin: 8px auto; } .right-menu .icon-bar::before { width: 28px; } .right-menu .icon-bar::after { width: 28px; } } @media (max-width: 767.98px) { .list-view-container .list-block .media h5 { line-height: 25px; font-size: 22px; } } @media (min-width: 767.98px) { .section-title.ev-title h2 { font-size: 32px !important; font-weight: 400 !important; line-height: 32px; } h3 { font-size: 42px !important; font-weight: 700 !important; line-height: 42px !important; } } @media (max-width: 767.98px) { .section-title.ev-title h2 { font-size: 22px; } } .electric-brand-logo img { width: 135% !important; height: 22px !important; } @media (max-width: 767.98px) { .electric-brand-logo img { width: 100% !important; height: 18px !important; } } .live-event-join-now { position: absolute; z-index: 1; display: flex; background: #fff; width: 35%; top: 6%; left: 32.5%; height: 99px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border: 2px solid #d5cdcd; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2509803922); } @media (max-width: 767.98px) { .live-event-join-now { width: 100%; top: 0; left: 0; height: 144px; } } .live-event-join-now img { position: relative; margin: 40px 0 0 30px; width: 39px; height: 39px; } @media (max-width: 767.98px) { .live-event-join-now img { margin: 75px 0 0 30px; } } .live-event-join-now p { position: relative; top: 50px; left: 12px; font-size: 14px; font-weight: 700; display: inline; } @media (max-width: 767.98px) { .live-event-join-now p { display: block; top: 80px; line-height: 15px; } .live-event-join-now p .first-line, .live-event-join-now p .second-line { display: block; } } .live-event-join-now button { position: relative; top: 45px; right: -40px; width: 108px; height: 36px; padding: 0; font-size: 14px; font-weight: 700; border-radius: 8px; } @media (max-width: 767.98px) { .live-event-join-now button { top: 78px; } } .exciting-new-colors { position: relative; overflow: hidden; z-index: 0; } @media (max-width: 767.98px) { .exciting-new-colors { background: #000; } } .exciting-new-colors .color-one { margin: 0; top: -2rem; } @media (max-width: 767.98px) { .exciting-new-colors .color-one { top: -4rem; } } .exciting-new-colors .product-slider-common { padding-top: 220px; } .exciting-new-colors .product-slider-common .tvs-product-slider img { max-height: 50rem !important; } @media (min-width: 1199.98px) { .exciting-new-colors .product-slider-common { padding-top: 188px; } } @media (min-width: 1366px) { .exciting-new-colors .product-slider-common { padding-top: 220px; max-width: 75rem; } .exciting-new-colors .product-slider-common .tvs-product-slider { max-width: 75rem; } } @media (min-width: 1440px) { .exciting-new-colors .product-slider-common { padding-top: 250px; } } @media (min-width: 1520px) { .exciting-new-colors .product-slider-common { padding-top: 288px; } } @media (min-width: 1600px) { .exciting-new-colors .product-slider-common { padding-top: 322px; } } @media (min-width: 1700px) { .exciting-new-colors .product-slider-common { padding-top: 367px; } } @media (min-width: 1800px) { .exciting-new-colors .product-slider-common { padding-top: 412px; } } @media (min-width: 1900px) { .exciting-new-colors .product-slider-common { padding-top: 460px; } } @media (min-width: 768px) and (max-width: 1180px) { .exciting-new-colors .product-slider-common { padding-top: 130px; } } @media (max-width: 767.98px) { .exciting-new-colors .product-slider-common { padding-top: 280px; } .exciting-new-colors .product-slider-common .tvs-product-slider img { max-height: 25rem !important; } } @media (min-width: 375px) and (max-width: 414px) { .exciting-new-colors .product-slider-common { padding-top: 290px; } } @media (min-width: 414px) and (max-width: 767.98px) { .exciting-new-colors .product-slider-common { padding-top: 320px; } } .exciting-new-colors .product-slider-common button { display: none !important; } .exciting-new-colors .product-slider-common .tvs-product-slider img { height: 430px; max-height: 40rem; } @media (min-width: 768px) and (max-width: 1180px) { .exciting-new-colors .product-slider-common .tvs-product-slider img { height: 250px; } } @media (max-width: 767.98px) { .exciting-new-colors .podium-image { flex-direction: column; } } .exciting-new-colors .podium-image img { width: 100%; } @media (max-width: 767.98px) { .exciting-new-colors .podium-image img { margin-top: 30px; } } @media (min-width: 390px) { .exciting-new-colors .podium-image img { margin-top: 0; } } .exciting-new-colors .pointer-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.8) 39.32%, rgba(0, 0, 0, 0.436) 90.26%, rgba(0, 0, 0, 0) 100% ); pointer-events: none; display: none; } @media (max-width: 767.98px) { .exciting-new-colors .pointer-overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.8) 19.88%, rgba(0, 0, 0, 0.436) 90.49%, rgba(0, 0, 0, 0.2) 100% ); } } .exciting-new-colors .pointer-overlay.show-overlay { display: block; } .exciting-new-colors .pointer-overlay.hide-overlay { animation: removeOverlay 1s forwards; } @keyframes removeOverlay { 100% { opacity: 0; visibility: hidden; display: none; } } .exciting-new-colors .pointer-img { position: absolute; bottom: 33%; left: 49%; visibility: hidden; } @media (min-width: 1680px) { .exciting-new-colors .pointer-img { bottom: 35%; } } @media (min-width: 1920px) { .exciting-new-colors .pointer-img { bottom: 30%; } } .exciting-new-colors .pointer-img img { width: 35px; height: 72px; } .exciting-new-colors .pointer-img img:nth-of-type(2) { width: 36px; height: 64px; position: absolute; bottom: 137px; left: -16px; } @media (max-width: 430px) { .exciting-new-colors .pointer-img img:nth-of-type(2) { bottom: 172px; } } @media (max-width: 414px) { .exciting-new-colors .pointer-img img:nth-of-type(2) { bottom: 150px; } } @media (max-width: 412px) { .exciting-new-colors .pointer-img img:nth-of-type(2) { bottom: 178px; } } @media (max-width: 375px) { .exciting-new-colors .pointer-img img:nth-of-type(2) { bottom: 148px; } } @media (max-width: 390px) { .exciting-new-colors .pointer-img img:nth-of-type(2) { bottom: 149px; } } @media (max-width: 360px) { .exciting-new-colors .pointer-img img:nth-of-type(2) { bottom: 137px; } } .exciting-new-colors .pointer-img.animate-pointer { visibility: visible; animation: shakePointer 3s ease-in-out, hidePointer 2s forwards; } @keyframes shakePointer { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } @keyframes hidePointer { 100% { visibility: hidden; display: none; } } .exciting-new-colors .ellipse-subtract { position: absolute; width: 79%; left: 10%; bottom: 14%; } @media (max-width: 767.98px) { .exciting-new-colors .ellipse-subtract { position: absolute; width: 100%; left: 0; bottom: 38%; overflow: hidden; } } .exciting-new-colors .ellipse-subtract img { width: 100%; height: auto; } .exciting-new-colors .electric-image { position: absolute; width: 24%; top: 14%; right: 7%; z-index: 0; } @media (max-width: 767.98px) { .exciting-new-colors .electric-image { position: absolute; left: 50%; width: 72%; top: 22%; left: 15%; } } .exciting-new-colors .electric-image img { width: 100%; } .exciting-new-colors .exciting-new-colors-content-top { position: absolute; top: 12%; left: 8%; color: #fff; z-index: 0; } @media (max-width: 767.98px) { .exciting-new-colors .exciting-new-colors-content-top { top: 10%; left: 10%; } } .exciting-new-colors .exciting-new-colors-content-top::before { content: ""; height: 75px; position: absolute; width: 6px; top: -6%; left: -4%; background: #fff; } @media (max-width: 767.98px) { .exciting-new-colors .exciting-new-colors-content-top::before { height: 55px; top: -18%; left: -5%; } } .exciting-new-colors .exciting-new-colors-content-top p:nth-child(1) { font-weight: 400; font-size: 32px; font-family: "Open Sans", sans-serif; line-height: 20px; color: #aaa; } .exciting-new-colors .exciting-new-colors-content-top p:nth-child(2) { font-weight: 700; font-size: 42px; font-family: "Open Sans", sans-serif; line-height: 40px; color: #fff; } .exciting-new-colors .exciting-new-colors-content-top.all-power-heading p { font-weight: 700; } @media (max-width: 767.98px) { .exciting-new-colors .exciting-new-colors-content-top p:nth-child(1) { font-size: 24px; line-height: 0; } .exciting-new-colors .exciting-new-colors-content-top p:nth-child(2) { font-size: 30px; line-height: 40px; } } .exciting-new-colors .horizontal-line { display: none; } @media (max-width: 767.98px) { .exciting-new-colors .horizontal-line { display: block; background: #333; position: absolute; height: 1px; bottom: 17%; width: 80%; left: 10%; } } .exciting-new-colors .exciting-new-colors-content-bottom { position: absolute; bottom: 6%; left: 8%; color: #fff; } @media (max-width: 767.98px) { .exciting-new-colors .exciting-new-colors-content-bottom { text-align: center; position: absolute; bottom: -1%; left: 50%; transform: translate(-50%, -50%); } } .exciting-new-colors .exciting-new-colors-content-bottom p:nth-child(1) { font-weight: 400; font-size: 32px; font-family: "open sans"; line-height: 20px; color: #aaa; } .exciting-new-colors .exciting-new-colors-content-bottom p:nth-child(2) { font-weight: 700; font-size: 42px; font-family: "open sans"; line-height: 40px; color: #fff; } .exciting-new-colors .exciting-new-colors-content-bottom.all-power-heading p:nth-child(2) { font-weight: 700; } @media (max-width: 767.98px) { .exciting-new-colors .exciting-new-colors-content-bottom p:nth-child(1) { font-weight: 400; font-size: 24px; font-family: "open sans"; line-height: 0; color: #aaa; } .exciting-new-colors .exciting-new-colors-content-bottom p:nth-child(2) { font-weight: 700; font-size: 34px; font-family: "open sans"; line-height: 40px; color: #fff; } } .exciting-new-colors .colors-tab { position: absolute; bottom: 12%; right: 6%; z-index: 0; } @media (max-width: 767.98px) { .exciting-new-colors .colors-tab { width: 100%; bottom: 25%; right: -9%; justify-content: center; padding-left: 28px; } .exciting-new-colors .colors-tab ul { margin-right: 0; margin-top: 0; } } .exciting-new-colors .colors-tab ul { justify-content: end; align-items: center; position: relative; margin-top: -36px; } .exciting-new-colors .colors-tab ul li.nav-item { padding-right: 30px; } .exciting-new-colors .colors-tab ul li.nav-item a.nav-link.active ~ .variantcolor-title span.color-name { color: #fff !important; transform: translateY(100px) !important; font-weight: 700; } @media (max-width: 767.98px) { .exciting-new-colors .colors-tab ul li.nav-item a.nav-link.active ~ .variantcolor-title span.color-name { transform: translateY(10px) !important; transform: translate(0); } } .exciting-new-colors .colors-tab ul li.nav-item a.nav-link.blue-white-auto { background: linear-gradient( 90deg, #3899dc 0, #3899dc 47.3%, #f4f0e3 48.3%, #f4f0e3 100% ); } .exciting-new-colors .colors-tab ul li.nav-item a.nav-link.darkblue-auto { background: #2067bc; } .exciting-new-colors .colors-tab ul li.nav-item a.nav-link.red-auto { background: #ec2b05; } .exciting-new-colors .colors-tab ul li.nav-item a.nav-link.blue-auto { background: #0e99dc; } .exciting-new-colors .colors-tab ul li.nav-item a.nav-link.grey-auto { background: #414141; } .exciting-new-colors .colors-tab ul li.nav-item a.nav-link.green-auto { background: #338151; } .exciting-new-colors .colors-tab ul li.nav-item a.nav-link.white-auto { background: #f4f0e3; } .exciting-new-colors .colors-tab ul .white-auto.active { border: 0.5rem solid #3a3a3a !important; } .exciting-new-colors .colors-tab ul .white-auto.active i.icon-check { color: #3a3a3a; } .exciting-new-colors .experience-3D { position: absolute; width: 20%; height: 60px; bottom: 9%; right: 7%; z-index: 0; } @media (max-width: 767.98px) { .exciting-new-colors .experience-3D { width: 71%; right: 14.5%; bottom: 6%; } } .exciting-new-colors .experience-3D .experience-3D-btn { width: 100%; height: 60px; font-size: 20px; font-weight: 700; background: #fff; color: #305ba2; border-radius: 8px; border: 2.5px solid #305ba2; display: flex; align-items: center; justify-content: center; gap: 10px; } @media (max-width: 767.98px) { .exciting-new-colors .experience-3D .experience-3D-btn { height: 56px; } } .exciting-new-colors .arrow-container { display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; background: #000; color: #fff; position: absolute; width: 20%; height: 5.5%; bottom: 11.5%; left: 40%; } @media (max-width: 767.98px) { .exciting-new-colors .arrow-container { width: 49%; top: 59%; left: 26%; background: 0 0; } } .exciting-new-colors .arrow-container img { width: 100%; } .exciting-new-colors > * { z-index: 2; } .urban-mobility-future .campaign-page-image img { width: 100%; } /*.auto-features-new { background: url(../images/figma-images/ev-pages/third-fold/auto-features-background-left.png) left top no-repeat, url(../images/figma-images/ev-pages/third-fold/auto-features-background-right.png) right top no-repeat, linear-gradient(to bottom, #eee, #fff); background-size: 75%, 75%, 100%; } @media (max-width: 767.98px) { .auto-features-new { background: url(../images/figma-images/ev-pages/third-fold/auto-features-background-left-mob.png) left top no-repeat, url(../images/figma-images/ev-pages/third-fold/auto-features-background-right-mob.png) right top no-repeat, linear-gradient(to bottom, #eee, #fff); background-size: 100%, 100%, 100%; padding-bottom: 125px; } }*/ .auto-features-new .scroll-wrapper { margin-bottom: 50px; } @media (max-width: 767.98px) { .auto-features-new .scroll-wrapper { overflow-x: auto; scrollbar-width: none; padding-left: 20px; padding-top: 20px; margin-bottom: 20px; } } .auto-features-new .scroll-wrapper .label-convenience { margin-left: -25px; margin-right: 25px; } .auto-features-new .scroll-wrapper .label { color: #222; text-align: left; flex: 1; } .auto-features-new .scroll-wrapper .label.active { font-weight: 700; color: #000; } .auto-features-new .scroll-wrapper .circle-container { display: flex; justify-content: center; align-items: center; justify-content: space-between; position: relative; width: 100%; margin: 20px auto; margin-top: 0; } @media (max-width: 992px){ .auto-features-new .scroll-wrapper .circle-container { width: 720px; } } .auto-features-new .scroll-wrapper .circle-container::before { content: ""; position: absolute; top: 21%; left: 0; right: 0; height: 2px; background-color: #ddd; z-index: 1; transform: translateY(-50%); margin: 0 30px 0 50px; } .auto-features-new .scroll-wrapper .circle-container .circle { display: flex; justify-content: center; align-items: center; background-color: #ddd; color: #fff; font-size: 12px; text-align: center; z-index: 2; cursor: pointer; } @media (max-width: 991px) { .circle { margin-bottom: 0 !important; } } .auto-features-new .scroll-wrapper .circle-container .circle.big { width: 30px; height: 30px; border-radius: 50%; background-color: #ccc; } .auto-features-new .scroll-wrapper .circle-container .circle.small { width: 14px; height: 14px; border-radius: 50%; background-color: #ccc; } .auto-features-new .scroll-wrapper .circle-container .active-circle { background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7); } .auto-features-new .scroll-wrapper .circle-container .circle-wrapper { position: relative; display: inline-block; } .auto-features-new .scroll-wrapper .circle-container .circle-wrapper .circle { position: relative; z-index: 2; } .auto-features-new .scroll-wrapper .circle-container .circle-wrapper.outer-circle::before { content: ""; position: absolute; top: -5px; left: -5px; width: 40px; height: 40px; background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7); border-radius: 50%; z-index: 1; -webkit-mask: radial-gradient(circle, transparent 63%, #000 65%); background-clip: padding-box; box-sizing: border-box; } .auto-features-new .scroll-wrapper .circle-container .progress-line { position: absolute; top: 22%; left: 0; height: 2px; background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7) !important; z-index: 2; transition: width 0.5s ease; transform: translateY(-50%); width: 0; margin-left: 45px; } .auto-features-new .scroll-wrapper .circle-container .label-wrapper { display: flex; flex-direction: column; align-items: center; } .auto-features-new .scroll-wrapper .circle-container .label-wrapper .label { margin-top: 10px; text-transform: capitalize; font-size: 16px; } @media (min-width: 767.98px) { .auto-features-new .auto-features-slide .auto-features-indicators { width: 15%; height: 20px; position: absolute; top: 45%; left: -5%; } .auto-features-new .auto-features-slide .auto-features-indicators li { width: 14px; height: 14px; border-radius: 50%; background-color: #ccc; margin-right: 18px; } .auto-features-new .auto-features-slide .auto-features-indicators li.active { background-color: #152846; } } .auto-features-new .slick-dots { text-align: center; position: absolute; bottom: 20%; /* left: 1.3%;*/ } @media all and (max-width: 765px){ .auto-features-new .slick-dots { bottom: 5%; left: auto; } } .auto-features-new .slick-dot { display: inline-block; width: 14px; height: 14px; background-color: #ccc; border-radius: 50%; margin-right: 12px; cursor: pointer; } .auto-features-new .slick-dot.active { background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7); } .auto-features-new .auto-features-slider-content { position: relative; max-width: 1170px; margin: 0 auto; } @media (min-width: 1084px) { .auto-features-new .auto-features-slider-content { height: 100%; } } @media (max-width: 767.98px) { .auto-features-new .auto-features-slider-content { height: 575px; } } @media (max-width: 400px) { .auto-features-new .auto-features-slider-content { height: 480px; } } .auto-features-new .auto-features-slider-content .auto-features-content .ev-title h2 { font-size: 34px; font-weight: 700; color: #226375; margin-top: 4px; line-height: 38px; } @media (max-width: 767.98px) { .auto-features-new .auto-features-slider-content .auto-features-content .ev-title h2 { font-size: 30px; } } .auto-features-new .auto-features-slider-content .auto-features-content .outer-content-1 { color: #000; } /*@media (min-width: 1366px) { .auto-features-new .auto-features-slider-content .auto-features-image { width: 630px; } }*/ .auto-features-new .auto-features-slider-content .auto-features-image img { width: 100%; border-radius: 8px; max-width: 630px; max-height: 400px; margin-bottom: 20px; border: 1px solid #bcbcbc; } .auto-features-new .auto-features-slider-content .auto-features-image .green-img-margin { margin-bottom: 0; } .auto-features-new .auto-features-slider-content .auto-features-image .outer-content-2 { font-size: 18px; font-weight: 400; line-height: 30px; } .auto-features-new .auto-features-slider-content .carousel-buttons { gap: 40px; } .auto-features-new .auto-features-slider-content .carousel-buttons .backward-circle { margin-top: 140px; left: 5%; } .auto-features-new .auto-features-slider-content .carousel-buttons .forward-circle { margin-top: 140px; left: 22%; } .auto-features-new .auto-features-slider-content .prev-next-buttons { position: absolute; /* left: 1.3%;*/ bottom: 0%; } @media (max-width: 767.98px) { .auto-features-new .auto-features-slider-content .prev-next-buttons { left: auto; top: 97%; } } .auto-features-new .auto-features-slider-content .prev-next-buttons .previous-button::before { font-size: 5.2rem; line-height: 4.4rem; font-weight: 400; color: var(--grey-1); opacity: 100; cursor: pointer; } .auto-features-new .auto-features-slider-content .prev-next-buttons .next-button { margin-left: 10px; } .auto-features-new .auto-features-slider-content .prev-next-buttons .next-button::before { font-size: 5.2rem; line-height: 4.4rem; font-weight: 400; color: var(--grey-1); opacity: 100; cursor: pointer; } .auto-features-new .auto-features-slider-content .prev-next-buttons .disabled-button:before { opacity: 0.5; } .auto-features-new .auto-features-slider-content .auto-features-slider-content-performance .icon-white-background { background: #fff; width: 100%; border-radius: 8px; border: 1px solid #bcbcbc; display: flex; justify-content: center; align-items: center; } @media (max-width: 767.98px) { .auto-features-new .auto-features-slider-content .auto-features-slider-content-performance .icon-white-background { margin: 0 0 24px 0; /* height: 210px;*/ } } .auto-features-new .auto-features-slider-content .auto-features-slider-content-performance .icon-white-background img { width: 100%; border: none; } .auto-features { background: url(../images/figma-images/ev-pages/third-fold/auto-features-background-left.png) left top no-repeat, url(../images/figma-images/ev-pages/third-fold/auto-features-background-right.png) right top no-repeat, linear-gradient(to bottom, #eee, #fff); background-size: 75%, 75%, 100%; padding-bottom: 50px; } @media (max-width: 767.98px) { .auto-features { background: url(../images/figma-images/ev-pages/third-fold/auto-features-background-left-mob.png) left top no-repeat, url(../images/figma-images/ev-pages/third-fold/auto-features-background-right-mob.png) right top no-repeat, linear-gradient(to bottom, #eee, #fff); background-size: 100%, 100%, 100%; padding-bottom: 100px; } } .auto-features .scroll-wrapper { padding-top: 100px; } @media (max-width: 767.98px) { .auto-features .scroll-wrapper { padding-top: 70px; } } .auto-features .label-container { align-items: center; position: relative; width: 600px; margin: 20px auto; display: flex; margin-top: 10px; font-size: 18px; font-weight: 400; } .auto-features .label-container .label-convenience { margin-left: -25px; margin-right: 25px; } .auto-features .label-container .label { color: #222; text-align: left; flex: 1; } .auto-features .label-container .label.active { font-weight: 700; color: #000; } .auto-features .circle-container { display: flex; justify-content: center; align-items: center; justify-content: space-between; position: relative; width: 600px; margin: 20px auto; } .auto-features .circle-container::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-color: #ddd; z-index: 1; transform: translateY(-50%); } .auto-features .circle-container .circle { display: flex; justify-content: center; align-items: center; background-color: #ddd; color: #fff; font-size: 12px; text-align: center; z-index: 2; cursor: pointer; } .auto-features .circle-container .circle.big { width: 30px; height: 30px; border-radius: 50%; background-color: #ccc; } .auto-features .circle-container .circle.small { width: 14px; height: 14px; border-radius: 50%; background-color: #ccc; } .auto-features .circle-container .active-circle { background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7); } .auto-features .circle-container .progress-line { position: absolute; top: 50%; left: 0; height: 2px; background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7) !important; z-index: 2; transition: width 0.5s ease; transform: translateY(-50%); width: 0; } .auto-features .outer-container { margin: 50px auto; } @media (max-width: 767.98px) { .auto-features .outer-container { margin: 10px auto; } } .auto-features .outer-container .carousel-buttons { gap: 40px; } .auto-features .outer-container .slide-section .auto-features-comfort, .auto-features .outer-container .slide-section .auto-features-convenience, .auto-features .outer-container .slide-section .auto-features-maintenance, .auto-features .outer-container .slide-section .auto-features-ride { position: relative; } .auto-features .outer-container .slide-section .auto-features-comfort-content .ev-title::before, .auto-features .outer-container .slide-section .auto-features-convenience-content .ev-title::before, .auto-features .outer-container .slide-section .auto-features-maintenance-content .ev-title::before, .auto-features .outer-container .slide-section .auto-features-ride-content .ev-title::before { height: 86px; top: 6px; } @media (max-width: 767.98px) { .auto-features .outer-container .slide-section .auto-features-comfort-content .ev-title::before, .auto-features .outer-container .slide-section .auto-features-convenience-content .ev-title::before, .auto-features .outer-container .slide-section .auto-features-maintenance-content .ev-title::before, .auto-features .outer-container .slide-section .auto-features-ride-content .ev-title::before { height: 60px; top: 6px; margin-left: 5px; } } @media (max-width: 767.98px) { .auto-features .outer-container .slide-section .auto-features-comfort-content .outer-title, .auto-features .outer-container .slide-section .auto-features-convenience-content .outer-title, .auto-features .outer-container .slide-section .auto-features-maintenance-content .outer-title, .auto-features .outer-container .slide-section .auto-features-ride-content .outer-title { padding-left: 10px; } } .auto-features .outer-container .slide-section .auto-features-comfort-content .outer-title h2, .auto-features .outer-container .slide-section .auto-features-convenience-content .outer-title h2, .auto-features .outer-container .slide-section .auto-features-maintenance-content .outer-title h2, .auto-features .outer-container .slide-section .auto-features-ride-content .outer-title h2 { font-family: "open sans"; font-weight: 400; font-size: 32px; color: #030000; line-height: 43px; width: 90%; } .auto-features .outer-container .slide-section .auto-features-comfort-content .outer-title h3, .auto-features .outer-container .slide-section .auto-features-convenience-content .outer-title h3, .auto-features .outer-container .slide-section .auto-features-maintenance-content .outer-title h3, .auto-features .outer-container .slide-section .auto-features-ride-content .outer-title h3 { font-family: "open sans"; font-weight: 700; font-size: 42px; color: #226375; line-height: 57px; } .auto-features .outer-container .slide-section .auto-features-comfort-content .outer-content, .auto-features .outer-container .slide-section .auto-features-convenience-content .outer-content, .auto-features .outer-container .slide-section .auto-features-maintenance-content .outer-content, .auto-features .outer-container .slide-section .auto-features-ride-content .outer-content { font-family: "open sans"; font-weight: 400; font-size: 22px; color: #030000; line-height: 30px; margin: 20px 12px; width: 80%; } @media (max-width: 767.98px) { .auto-features .outer-container .slide-section .auto-features-comfort-content .outer-content, .auto-features .outer-container .slide-section .auto-features-convenience-content .outer-content, .auto-features .outer-container .slide-section .auto-features-maintenance-content .outer-content, .auto-features .outer-container .slide-section .auto-features-ride-content .outer-content { width: 90%; } } .auto-features .outer-container .slide-section .auto-features-comfort-content .info-container1, .auto-features .outer-container .slide-section .auto-features-convenience-content .info-container1, .auto-features .outer-container .slide-section .auto-features-maintenance-content .info-container1, .auto-features .outer-container .slide-section .auto-features-ride-content .info-container1 { display: block; width: 80%; margin: 0 0 0 12px; } .auto-features .outer-container .slide-section .auto-features-comfort-content .info-container1 .outer-info, .auto-features .outer-container .slide-section .auto-features-convenience-content .info-container1 .outer-info, .auto-features .outer-container .slide-section .auto-features-maintenance-content .info-container1 .outer-info, .auto-features .outer-container .slide-section .auto-features-ride-content .info-container1 .outer-info { width: 100%; font-weight: 700; font-size: 16px; font-family: "open sans"; margin: 0 0 15px 0; padding: 15px; border-radius: 10px; background: #fff; } .auto-features .outer-container .slide-section .auto-features-comfort-image, .auto-features .outer-container .slide-section .auto-features-convenience-image, .auto-features .outer-container .slide-section .auto-features-maintenance-image, .auto-features .outer-container .slide-section .auto-features-ride-image { width: 95%; margin-left: 55px; } .auto-features .outer-container .slide-section .auto-features-comfort-image img, .auto-features .outer-container .slide-section .auto-features-convenience-image img, .auto-features .outer-container .slide-section .auto-features-maintenance-image img, .auto-features .outer-container .slide-section .auto-features-ride-image img { border-radius: 10px; } .auto-features .outer-container .slide-section .auto-features-comfort-image .info-container2, .auto-features .outer-container .slide-section .auto-features-convenience-image .info-container2, .auto-features .outer-container .slide-section .auto-features-maintenance-image .info-container2, .auto-features .outer-container .slide-section .auto-features-ride-image .info-container2 { display: none; } .auto-features .outer-container .slide-section .auto-features-comfort-image .carousel-buttons, .auto-features .outer-container .slide-section .auto-features-convenience-image .carousel-buttons, .auto-features .outer-container .slide-section .auto-features-maintenance-image .carousel-buttons, .auto-features .outer-container .slide-section .auto-features-ride-image .carousel-buttons { margin-top: 15px; gap: 40px; justify-content: center; } .auto-features .outer-container .slide-section .auto-features-comfort-image .carousel-buttons .forward-circle, .auto-features .outer-container .slide-section .auto-features-convenience-image .carousel-buttons .forward-circle, .auto-features .outer-container .slide-section .auto-features-maintenance-image .carousel-buttons .forward-circle, .auto-features .outer-container .slide-section .auto-features-ride-image .carousel-buttons .forward-circle { position: absolute; top: 107%; right: 30%; } @media (max-width: 767.98px) { .auto-features .outer-container .slide-section .auto-features-comfort-image .carousel-buttons .forward-circle, .auto-features .outer-container .slide-section .auto-features-convenience-image .carousel-buttons .forward-circle, .auto-features .outer-container .slide-section .auto-features-maintenance-image .carousel-buttons .forward-circle, .auto-features .outer-container .slide-section .auto-features-ride-image .carousel-buttons .forward-circle { top: 110%; right: 30%; } } .auto-features .outer-container .slide-section .auto-features-comfort-image .carousel-buttons .forward-circle::before, .auto-features .outer-container .slide-section .auto-features-convenience-image .carousel-buttons .forward-circle::before, .auto-features .outer-container .slide-section .auto-features-maintenance-image .carousel-buttons .forward-circle::before, .auto-features .outer-container .slide-section .auto-features-ride-image .carousel-buttons .forward-circle::before { font-size: 5rem; } .auto-features .outer-container .slide-section .auto-features-comfort-image .carousel-buttons .backward-circle, .auto-features .outer-container .slide-section .auto-features-convenience-image .carousel-buttons .backward-circle, .auto-features .outer-container .slide-section .auto-features-maintenance-image .carousel-buttons .backward-circle, .auto-features .outer-container .slide-section .auto-features-ride-image .carousel-buttons .backward-circle { position: absolute; top: 107%; left: 50%; } @media (max-width: 767.98px) { .auto-features .outer-container .slide-section .auto-features-comfort-image .carousel-buttons .backward-circle, .auto-features .outer-container .slide-section .auto-features-convenience-image .carousel-buttons .backward-circle, .auto-features .outer-container .slide-section .auto-features-maintenance-image .carousel-buttons .backward-circle, .auto-features .outer-container .slide-section .auto-features-ride-image .carousel-buttons .backward-circle { top: 110%; left: 30%; } } .auto-features .outer-container .slide-section .auto-features-comfort-image .carousel-buttons .backward-circle::before, .auto-features .outer-container .slide-section .auto-features-convenience-image .carousel-buttons .backward-circle::before, .auto-features .outer-container .slide-section .auto-features-maintenance-image .carousel-buttons .backward-circle::before, .auto-features .outer-container .slide-section .auto-features-ride-image .carousel-buttons .backward-circle::before { font-size: 5rem; } .auto-features .outer-container .carousel-control-next, .auto-features .outer-container .carousel-control-prev { display: none; } .auto-features #nextButton, .auto-features #prevButton { display: none; } .highlight { background-color: #fff; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05); font-weight: 700; font-size: 16px; font-family: "open sans"; } @media screen and (max-width: 991.98px) { .auto-features .outer-container .slide-section .auto-features-comfort-content .outer-title h3, .auto-features .outer-container .slide-section .auto-features-convenience-content .outer-title h3, .auto-features .outer-container .slide-section .auto-features-maintenance-content .outer-title h3, .auto-features .outer-container .slide-section .auto-features-ride-content .outer-title h3 { font-size: 36px !important; } } @media screen and (max-width: 767.98px) { .auto-features .scroll-wrapper { overflow-x: auto; width: 95%; -webkit-overflow-scrolling: touch; scrollbar-width: none; left: 5%; position: relative; padding-right: 10px; } .auto-features .scroll-wrapper::-webkit-scrollbar { display: none; } .auto-features .outer-container { width: 95%; } .auto-features .outer-container .slide-section .auto-features-comfort-content, .auto-features .outer-container .slide-section .auto-features-convenience-content, .auto-features .outer-container .slide-section .auto-features-maintenance-content, .auto-features .outer-container .slide-section .auto-features-ride-content { width: 100% !important; } .auto-features .outer-container .slide-section .auto-features-comfort-content .outer-title h2, .auto-features .outer-container .slide-section .auto-features-convenience-content .outer-title h2, .auto-features .outer-container .slide-section .auto-features-maintenance-content .outer-title h2, .auto-features .outer-container .slide-section .auto-features-ride-content .outer-title h2 { font-size: 22px !important; line-height: 30px !important; } .auto-features .outer-container .slide-section .auto-features-comfort-content .outer-title h3, .auto-features .outer-container .slide-section .auto-features-convenience-content .outer-title h3, .auto-features .outer-container .slide-section .auto-features-maintenance-content .outer-title h3, .auto-features .outer-container .slide-section .auto-features-ride-content .outer-title h3 { font-size: 30px !important; line-height: 41px !important; } .auto-features .outer-container .slide-section .auto-features-comfort-content .outer-content, .auto-features .outer-container .slide-section .auto-features-convenience-content .outer-content, .auto-features .outer-container .slide-section .auto-features-maintenance-content .outer-content, .auto-features .outer-container .slide-section .auto-features-ride-content .outer-content { margin: 15px 15px 15px 20px; font-size: 18px; line-height: 25px; } .auto-features .outer-container .slide-section .auto-features-comfort-content .info-container1, .auto-features .outer-container .slide-section .auto-features-convenience-content .info-container1, .auto-features .outer-container .slide-section .auto-features-maintenance-content .info-container1, .auto-features .outer-container .slide-section .auto-features-ride-content .info-container1 { display: none; } .auto-features .outer-container .slide-section .auto-features-comfort-image, .auto-features .outer-container .slide-section .auto-features-convenience-image, .auto-features .outer-container .slide-section .auto-features-maintenance-image, .auto-features .outer-container .slide-section .auto-features-ride-image { border-radius: 30px; width: 95% !important; margin: 0 auto; top: 25%; left: 5%; } .auto-features .outer-container .slide-section .auto-features-comfort-image .info-container2, .auto-features .outer-container .slide-section .auto-features-convenience-image .info-container2, .auto-features .outer-container .slide-section .auto-features-maintenance-image .info-container2, .auto-features .outer-container .slide-section .auto-features-ride-image .info-container2 { display: block; position: relative; height: 60px; overflow: hidden; margin-top: 10px; padding: 30px; } .auto-features .outer-container .slide-section .auto-features-comfort-image .info-container2 .outer-info, .auto-features .outer-container .slide-section .auto-features-convenience-image .info-container2 .outer-info, .auto-features .outer-container .slide-section .auto-features-maintenance-image .info-container2 .outer-info, .auto-features .outer-container .slide-section .auto-features-ride-image .info-container2 .outer-info { padding: 10px 40px 10px 20px; font-size: 16px; line-height: 22px; position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(100%); transition: transform 0.5s ease, opacity 0.5s ease; border-radius: 10px; } .auto-features .outer-container .slide-section .auto-features-comfort-image .info-container2 .outer-info.active, .auto-features .outer-container .slide-section .auto-features-convenience-image .info-container2 .outer-info.active, .auto-features .outer-container .slide-section .auto-features-maintenance-image .info-container2 .outer-info.active, .auto-features .outer-container .slide-section .auto-features-ride-image .info-container2 .outer-info.active { opacity: 1; transform: translateY(0); } .auto-features .outer-container .slide-section .auto-features-comfort-image .info-container2 .outer-info.hidden, .auto-features .outer-container .slide-section .auto-features-convenience-image .info-container2 .outer-info.hidden, .auto-features .outer-container .slide-section .auto-features-maintenance-image .info-container2 .outer-info.hidden, .auto-features .outer-container .slide-section .auto-features-ride-image .info-container2 .outer-info.hidden { transform: translateY(-100%); opacity: 0; } .auto-features .outer-container .slide-section .auto-features-comfort-image .carousel-buttons, .auto-features .outer-container .slide-section .auto-features-convenience-image .carousel-buttons, .auto-features .outer-container .slide-section .auto-features-maintenance-image .carousel-buttons, .auto-features .outer-container .slide-section .auto-features-ride-image .carousel-buttons { left: 25%; } } .locate-nearest-dealer { justify-content: space-between; } .locate-nearest-dealer .section-title h2 { font-size: 32px !important; color: #000 !important; line-height: 43px; } .locate-nearest-dealer .section-title h3 { font-size: 40px !important; color: #226375 !important; line-height: 50px; } @media (max-width: 767.98px) { .locate-nearest-dealer .section-title h2 { font-size: 22px !important; font-weight: 400 !important; color: #000 !important; line-height: 30px; } .locate-nearest-dealer .section-title h3 { font-size: 30px !important; font-weight: 700 !important; color: #226375 !important; line-height: 40px; } } @media (min-width: 767.98px) { .locate-nearest-dealer .dealership-search { margin: -8rem 0 0 35rem; } } .locate-nearest-dealer .dealership-search .mobile-dealer { margin-top: 20px; } @media (max-width: 767.98px) { .locate-nearest-dealer .dealership-search .mobile-dealer { margin-top: 0; } } .ev-product-page .locate-nearest-dealer .dealership-search .input-box-color::placeholder { color: #222; } .ev-product-page .locate-nearest-dealer .dealership-search .input-box-color:focus::placeholder { color: #747474; } @media (max-width: 767.98px) { .locate-nearest-dealer .dealership-search .form-group { width: 100%; padding: 0 5px; } .locate-nearest-dealer .dealership-search .form-group input { max-width: none; width: 32rem; } .locate-nearest-dealer .dealership-search .nearby-dealer { width: 100%; padding: 0 5px; } .ev-product-page .locate-nearest-dealer .dealership-search .nearby-dealer .btn { width: 100%; } } @media (min-width: 767.98px) { .detecting-nearby-dealers { margin-top: -9rem !important; height: 590px; } } .ev-page-toggle-buttons { display: block; width: 300px; height: 60px; border: 1px solid #ccc; border-radius: 15px; overflow: hidden; background-color: #fff; padding: 4px 6px; position: relative; left: -150px; z-index: 1; margin-top: 17px; } @media (max-width: 767.98px) { .ev-page-toggle-buttons { margin: 10% auto 0; left: 0; } } .ev-page-toggle-buttons .toggle-button { cursor: pointer; font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 700; background-color: #fff; border: none; outline: 0; transition: background-color 0.3s, color 0.3s; border-radius: 10px; width: 144px; margin-top: 0; } .ev-page-toggle-buttons .toggle-button.active { background: linear-gradient(to right, #192841, #305ba2); color: #fff; width: 144px; height: 50px; } .ev-page-toggle-buttons .toggle-button:not(.active) { background-color: #fff; color: #000; } .ev-page-toggle-buttons .btn-group, .ev-page-toggle-buttons .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } .introduction-apnaa-tvs-app { height: 600px; background-color: #e9edf5; background-image: url(../images/figma-images/ev-pages/introduction-to-apnaa-tvs-fold/introduction-apnaa-tvs-app-background.png); background-size: 75%; background-repeat: no-repeat; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app { height: 970px; background-color: #e9edf5; background-image: url(../images/figma-images/ev-pages/introduction-to-apnaa-tvs-fold/intro-apnaa-tvs-app-bg-mob.png); background-size: 100%; background-repeat: no-repeat; padding-top: 16px; } } .introduction-apnaa-tvs-app .apnaa-tvs-app-carousel-indicators { bottom: -50px; transform: translateX(-74px); } @media (max-width: 430px) { .introduction-apnaa-tvs-app .apnaa-tvs-app-carousel-indicators { bottom: -60px; transform: translateX(-75px); } } @media (max-width: 414px) { .introduction-apnaa-tvs-app .apnaa-tvs-app-carousel-indicators { bottom: -60px; transform: translateX(-72px); } } @media (max-width: 390px) { .introduction-apnaa-tvs-app .apnaa-tvs-app-carousel-indicators { bottom: -65px; transform: translateX(-65px); } } @media (max-width: 375px) { .introduction-apnaa-tvs-app .apnaa-tvs-app-carousel-indicators { bottom: -55px; transform: translateX(-58px); } } @media (max-width: 360px) { .introduction-apnaa-tvs-app .apnaa-tvs-app-carousel-indicators { bottom: -65px; transform: translateX(-58px); } } @media (min-width: 767.98px) { .introduction-apnaa-tvs-app .apnaa-tvs-app-carousel-indicators { transform: translateX(-65px); } } .introduction-apnaa-tvs-app .apnaa-tvs-app-carousel-indicators li { width: 14px; height: 14px; background: #ccc; border-radius: 50%; margin-right: 21px; border-top: 0; border-bottom: 0; } .introduction-apnaa-tvs-app .apnaa-tvs-app-carousel-indicators li.active { background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7); } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .apnaa-tvs-app-content { bottom: -40px !important; margin-right: 54px; } } .introduction-apnaa-tvs-app .slide-1-image-content { max-width: 1366px; margin: 0 auto; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content { flex-direction: column; justify-content: center; margin-top: 50px; } } @media (min-width: 1336px) { .introduction-apnaa-tvs-app .slide-1-image-content .appna-mobile-aligment { max-width: 48%; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image { width: 50%; display: flex; align-items: center; margin-top: 80px; position: relative; right: -45%; padding-bottom: 50px; } @media (min-width: 1024px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image { margin-top: 105px; margin-left: -50px; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image img { width: 54.5%; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image { position: absolute; justify-content: center; top: 15%; width: 78%; right: 0; margin: 100px -20px 0; } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image .ev-mob-img { width: 55%; } } @media (max-width: 767.98px) and (min-width: 390px) and (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image .ev-mob-img { width: 50%; } } @media (max-width: 430px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image { margin: 100px -34px 0; } } @media (max-width: 412px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image { margin: 100px -32px 0; } } @media (max-width: 375px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image { margin: 100px -23px 0; } } @media (max-width: 360px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-image { margin: 100px -22px 0; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content { flex-direction: column; margin-top: 100px; margin-left: -50px; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content { width: 90%; margin: 0 auto; padding: 0; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content p { margin-right: 28%; text-align: justify; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content p { margin-right: 0; } } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .slide-1-content-title { position: absolute; left: 10%; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .slide-1-content-title::before { content: ""; height: 78px; position: absolute; width: 6px; background: #226375; top: 20%; left: -9%; bottom: 0; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .slide-1-content-title::before { content: ""; height: 65px; position: absolute; width: 6px; background: #226375; top: 5%; left: -16px; bottom: 0; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .slide-1-content-title .apnaa-tvs-title { font-family: "open sans"; font-weight: 400; font-size: 32px; color: #030000; line-height: 40px; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .slide-1-content-title .apnaa-tvs-title { font-size: 22px; line-height: 30px; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .slide-1-content-title .apnaa-tvs-subtitle { font-family: "open sans"; font-weight: 700; font-size: 40px; color: #226375; line-height: 50px; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .slide-1-content-title .apnaa-tvs-subtitle { font-size: 30px; line-height: 41px; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .apnaa-tvs-content { font-family: "open sans"; font-weight: 400; font-size: 16px; color: #030000; margin-top: 20px; margin-bottom: 20px; line-height: 22px; white-space: normal; } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .apnaa-tvs-content .avoiding-line-break { display: inline !important; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .apnaa-tvs-content .avoiding-line-break { display: none !important; } } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .apnaa-tvs-content { margin-top: 500px; margin-bottom: 0; } } @media (min-width: 390px) and (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .apnaa-tvs-content { margin-top: 460px; } } @media (max-width: 430px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .apnaa-tvs-content { margin-top: 543px; } } @media (max-width: 390px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .apnaa-tvs-content { margin-top: 520px; } } @media (max-width: 375px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .apnaa-tvs-content { margin-top: 520px; } } @media (max-width: 360px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .apnaa-tvs-content { margin-top: 520px; } } @media (max-width: 375px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .play-app-store-img { margin-top: -5px; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .play-app-store-img .app-store-img { margin-left: -20px; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .play-app-store-img .app-store-img { margin-left: 0; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .play-app-store-img .play-store-img { margin-left: 10px; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .play-app-store-img .play-store-img { margin-left: 5px; } } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .play-app-store-img img { width: 29%; } @media (max-width: 767.98px) { .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .play-app-store-img { text-align: center; } .introduction-apnaa-tvs-app .slide-1-image-content .slide-1-content .play-app-store-img img { width: 47%; padding-top: 40px; margin-left: 0; } } .introduction-apnaa-tvs-app .carousel-control-next, .introduction-apnaa-tvs-app .carousel-control-prev { display: none; } .select-box::before { width: 8rem !important; height: 5.5rem !important; right: 0.4rem; font-size: 2.4rem; } .select-box select { height: 62px; } @media (min-width: 1180px) { .sticky-header .left-arrow { padding: 0.5rem 3.5rem 0.5rem 1.5rem; } } .sticky-header .left-arrow a img { width: 17px; } @media (max-width: 767.98px) { .sticky-header .left-arrow a img { width: 14px; } } .slick-next::before, .slick-prev::before { position: relative; top: 40%; } .ev-product-page .varient-faq .card .card-header a.card-link i.icon-arrowup:before { background: #fff; border-radius: 20px; } .t-s { padding-bottom: 10rem; padding-top: 13rem; } @media (max-width: 767.98px) { .t-s { padding-bottom: 0rem; padding-top: 4rem; } } @media (max-width: 767.98px) { .t-s .select-box .form-control { height: 55px; } } @media (max-width: 767.98px) { .t-s .select-box::before { width: 66px !important; height: 51px !important; right: 0.2rem; } } .view-menu { position: absolute; top: -7rem !important; right: -10rem !important; z-index: 1; } @media (min-width: 767.98px) { .list-view-container { max-height: 50rem; } } .download-brochure .brochure .select-box { min-width: 43rem; } @media (max-width: 767.98px) { .download-brochure .brochure .select-box { min-width: 21rem; } } .download-brochure .brochure .select-box:before { width: 8rem; height: 5.5rem; right: 0.4rem; } @media (max-width: 767.98px) { .download-brochure .brochure .select-box:before { width: 5.2rem !important; height: 3.6rem !important; right: 0.2rem; top: 2.5rem; } } @media (max-width: 767.98px) { .download-brochure .brochure .select-box select { height: 40px; } } .brochure .btn.lg-btn { width: 33rem; height: 62px; display: flex; align-items: center; justify-content: center; } @media (max-width: 767.98px) { .brochure .btn.lg-btn { width: 21rem; height: 50px; } } @media (max-width: 767.98px) { .medium-title { font-weight: 700; } .list-view-container .list-block .media h5 { font-weight: 700; } .contentWrapper .tabs { padding: 0 15px; } .feature-p.tabs-sm .nav-pills { padding: 0 5px; } .review-landing .nav-item:first-child .nav-link { padding-left: 1.5rem; margin-left: 2rem; } .btn.lg-btn { width: 176px; height: 49px; font-weight: 700; } } .test-ride-btn { border: 2.5px solid #305ba2; position: absolute; bottom: 8%; left: 20%; color: #305ba2; background: #fff; border-radius: 8px; width: 174px; height: 50px; font-size: 20px; font-weight: 700; } @media (max-width: 767.98px) { .test-ride-btn { width: 154px; height: 50px; border-radius: 10px; border: 2px solid #305ba2; bottom: 5%; left: 28%; } } .neptune-blue { left: -70px !important; } @media (max-width: 767.98px) { .neptune-blue { width: 110% !important; left: -40px !important; } } .pristine-white { left: -9px !important; width: 145% !important; } @media (max-width: 767.98px) { .pristine-white { width: 110% !important; left: 20px !important; } } .brochure .brochure-btn .btn { font-size: 2rem !important; font-weight: 700 !important; margin-top: 5px; } @media (max-width: 767.98px) { .brochure .brochure-btn .btn { font-size: 1.6rem !important; } } .varient-faq .accordion-faq .card .main-title a { font-size: 20px !important; font-weight: 700 !important; padding-left: 20px; } @media (max-width: 767.98px) { .varient-faq .accordion-faq .card .main-title a { padding-left: 0; } } .ev-product-page .varient-faq .accordion-faq .card .main-title a i.icon-arrowup { margin-right: 20px !important; } @media (max-width: 767.98px) { .ev-product-page .varient-faq .accordion-faq .card .main-title a i.icon-arrowup { margin-right: 0 !important; } } .varient-faq .accordion-faq .card .card-body { padding: 0 !important; } .varient-faq .accordion-faq .card .card-body { max-height: 100px; overflow-y: auto; scrollbar-width: none; } .varient-faq .accordion-faq .card .card-body .card-inner { overflow-y: auto; max-height: 100px; padding-right: 10px; padding-left: 10px; text-align: justify; } @media (min-width: 1336px) { .varient-faq .accordion-faq .card .card-body .card-inner { padding-right: 24px; } } .ev-product-page .varient-faq .accordion-faq .card .card-body .card-inner::-webkit-scrollbar { width: 2px; border-radius: 10px; } .ev-product-page .varient-faq .accordion-faq .card .card-body .card-inner::-webkit-scrollbar-track { display: none; } .ev-product-page .varient-faq .accordion-faq .card .card-body .card-inner::-webkit-scrollbar-thumb { width: 3px; height: 50px; background: #ececec; border-radius: 10px; } .varient-faq .accordion-faq .card .card-body .collapse-hide { overflow-y: hidden; } @media (min-width: 767.98px) { .hero-wrapper .banner-slider img { margin-top: -32px; } } .ride-change-wrapper .dealership-search .form-control { z-index: 1; } @media (min-width: 767.98px) { .ride-change-wrapper .dealership-search .form-control { margin-left: 38px; } } /*@media (min-width: 767.98px) { .container { padding-left: 0 !important; padding-right: 0 !important; } }*/ @media (max-width: 767.98px) { .ride-change-wrapper .dealership-search .form-control { max-width: 320px !important; max-height: 55px; margin-top: 30px; margin-left: 0; } } @media (max-width: 430px) { .mobile-dealer { margin-left: 35px; } } @media (max-width: 414px) { .mobile-dealer { margin-left: 28px; } } @media (max-width: 412px) { .mobile-dealer { margin-left: 26px; } } @media (max-width: 390px) { .mobile-dealer { margin-left: 16px; } } @media (max-width: 375px) { .mobile-dealer { margin-left: 8px; } } @media (max-width: 360px) { .mobile-dealer { margin-left: 0; } } @media (min-width: 767.98px) { .maintenance .maintenance-rounded { padding-left: 5px; padding-right: 70px; } .maintenance .divider { margin-left: 158px; } } .medium-title { font-weight: 700; } .large-text { font-weight: 700 !important; } @media (min-width: 767.98px) { .list-block a { align-items: center; display: flex; width: 199px; justify-content: center; text-align: center; } } .tech-form { font-family: Inter; font-size: 18px; font-weight: 400; } .t-s .previous { left: 18rem; } @media (max-width: 1280px) { .t-s .previous { left: 15rem; } } .t-s .next { right: 18rem; } @media (max-width: 1280px) { .t-s .next { right: 15rem; } } .t-s .next:before, .t-s .previous:before { font-size: 5.2rem; } .ride-change-wrapper .or-this { font-size: 22px; font-weight: 700; } @media (min-width: 767.98px) { .download-brochure .brochure { padding: 22px 0; } } .ev-product-page .dealer-list .detecting-nearby-dealers .list-view-container .list-block .mobile-icon-list a { width: 55px; height: 44px; } .ev-product-page .dealer-list .detecting-nearby-dealers .list-view-container .list-block .mobile-icon-list a .icon-navigate::before { content: ""; position: absolute; top: 33px; left: 26px; font-size: 18px; height: 18px; } .ev-product-page .dealer-list .detecting-nearby-dealers .list-view-container .list-block .mobile-icon-list a .icon-call:before { content: ""; position: absolute; font-size: 20px; top: 32px; left: 103px; } footer h3 { font-size: 18px !important; } .list-view-container { overflow: auto !important; position: relative; } @media (min-width: 767.98px) { .list-view-container { padding-right: 18px; margin-right: 17px; } } .list-view-container::-webkit-scrollbar { width: 2px; height: 475px; background: #a8a8a8; } .list-view-container::-webkit-scrollbar-track { background: #a8a8a8 !important; } .list-view-container::-webkit-scrollbar-thumb:hover { background: #192841; } .list-view-container::-webkit-scrollbar-thumb { background: #192841; height: 1px !important; min-height: 2px; max-height: 10px; border-radius: 10px; outline: 3px solid #192841; outline-offset: -2px; } .you-may .card-img-logo { max-width: none !important; margin: 0 auto -3rem; min-height: 10rem; padding-bottom: 45px; } .you-may .card-img-logo .duramax-plus-img { width: 245px !important; } .you-may .card-img-logo .duramax-img { width: 185px !important; } .you-may .card-img-logo .deluxe-img { width: 161px; } .you-may .passenger-card .card { width: 32rem; } .you-may .passenger-card .card-img img { width: 300px !important; height: 247px !important; } @media (min-width: 767.98px) { .you-may .varient-faq .accordion-faq { position: relative; background-color: #f2f4f9 !important; } .you-may .varient-faq .accordion-faq .card { border: none; position: relative; padding-bottom: 1px; background-color: #f2f4f9 !important; } .you-may .varient-faq .accordion-faq .card::after, .you-may .varient-faq .accordion-faq .card::before { content: ""; position: absolute; width: calc(100% - 80px); height: 1px; background: rgba(0, 0, 0, 0.125); } .you-may .varient-faq .accordion-faq .card::before { top: 0; left: 40px; } .you-may .varient-faq .accordion-faq .card::after { bottom: 0; left: 40px; } .you-may .varient-faq .accordion-faq .collapse { display: block !important; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; } .you-may .varient-faq .accordion-faq .collapse.show { height: auto; overflow: visible; background: #fff; } .you-may .varient-faq .collapsing { position: relative; overflow: hidden; transition: height 0.35s ease, background-color 0.2s ease-in-out; background: #fff; } .ev-product-page .you-may .varient-faq .accordion-faq .card:last-child::after { display: none; } } @media (max-width: 767.98px) { .you-may .varient-faq .accordion-faq { position: relative; background-color: #f2f4f9 !important; } .you-may .varient-faq .accordion-faq .card { border: none; position: relative; padding-bottom: 1px; background-color: #f2f4f9 !important; } .you-may .varient-faq .accordion-faq .card::after, .you-may .varient-faq .accordion-faq .card::before { content: ""; position: absolute; width: calc(100% - 20px); height: 1px; background: rgba(0, 0, 0, 0.125); } .you-may .varient-faq .accordion-faq .card::before { top: 0; left: 10px; } .you-may .varient-faq .accordion-faq .card::after { bottom: 0; left: 10px; } .you-may .varient-faq .accordion-faq .collapse { display: block !important; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; } .you-may .varient-faq .accordion-faq .collapse.show { height: auto; overflow: visible; background: #fff; } .you-may .varient-faq .collapsing { position: relative; overflow: hidden; transition: height 0.35s ease, background-color 0.2s ease-in-out; background: #fff; } .ev-product-page .you-may .varient-faq .accordion-faq .card:last-child::after { display: none; } } @media screen and (max-width: 1199.98px) { .maintenance .schedule-warranty span { margin: 15px auto; } } .circle{ top: 0 !important; } span.previous-button i { border: 1px solid #000; border-radius: 100%; padding: 10px; color: #000; cursor: pointer; } span.next-button i { border: 1px solid #000; border-radius: 100%; padding: 10px; color: #000; cursor: pointer; } .heading-detail p { font-size: 22px; } .heading-detail { border-left: 5px solid #67abbb !important; border-left: 8px solid; padding-left: 10px; } /*start-tabs-section*/ .tab-wrapper { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; } .nav-pills .nav-link { border-radius: 10px; padding: 10px 20px; font-weight: 500; color: #000; background-color: #f1f1f1; } .nav-pills .nav-link.active { background-color: #007bff; color: white; border: 2px solid #007bff; } .arrow-btn { font-size: 24px; cursor: pointer; border: 1px solid #ccc; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; user-select: none; } .tab-content { padding-top: 20px; } .tab-content img { max-width: 100%; border-radius: 8px 8px 0px 0px; } ul.nav.nav-pills a.nav-link { border: 1px solid #ececec; margin: 8px; } .box-tabs-slider .nav-link { border: 1px solid #ececec; border-radius: 8px; text-align: center; padding: 4px; } /*end-tabs-section*/ .contentWrapper { position: relative } .contentWrapper .position-relative { width: 93%; margin: 0 auto; } .contentWrapper .tabsWrapper { width: 100%; overflow: hidden; position: relative; height: 10.2rem } .contentWrapper .tabs { margin: 0; padding: 0; position: absolute; top: 0; bottom: -25px; left: 0; right: 0; white-space: nowrap; overflow: auto; text-align: center } .contentWrapper .tabs li { color: #000; opacity: 1; display: inline-block; padding: 10px; border-radius: 8px; margin: 10px; min-width: 12.1rem; border: 2px solid #e0e1e3; text-align: center; } @media screen and (max-width: 1199.98px){ .contentWrapper .tabs li{ min-width: 11rem; } } .contentWrapper .tabs li:hover { border: 2px solid #67adc4; /* padding: 1rem 2rem; */ text-align: center; } .contentWrapper .tabs li span { border-top: 0 solid var(--grey-33); padding-top: 0rem; } .contentWrapper .tabs li span i { font-size: 3.6rem; line-height: 4rem; font-weight: 500; color: var(--grey-1) } .contentWrapper .tabs li.active { color: var(--grey-1); opacity: 100; background: var(--white); border: 2px solid #67adc4; padding: 10px; border-radius: 8px; margin: 10px; cursor: pointer; } .contentWrapper .tabs li.active span { border-top: 0 solid var(--blue) } .contentWrapper .tabs li.active span i { font-size: 3.6rem; line-height: 4rem; font-weight: 500; color: var(--grey-1) } .contentWrapper .next,.contentWrapper .previous { position: absolute; padding: 2px 4px; height: auto; width: auto; top: 35%; display: flex; align-items: center; justify-content: center; cursor: pointer } .contentWrapper .next:before,.contentWrapper .previous:before { font-family: "3w-icons"; font-size: 4rem; line-height: 4.4rem; font-weight: 400; color: var(--grey-1); opacity: 100 } .contentWrapper .next { right: -5rem } .contentWrapper .next:before { content: "" } .contentWrapper .previous { left: -5rem } .contentWrapper .previous:before { content: "" } /*@media screen and (min-width: 1601px) { .contentWrapper .position-relative { width:116rem } }*/ @media screen and (max-width: 991.98px) { .contentWrapper { width:100%; max-width: 100% } .contentWrapper .position-relative { width: 100% } .contentWrapper .tabsWrapper { height: 8rem } .contentWrapper .tabs li { min-width: 9rem; padding: 10px; margin: .25rem; border-radius: 8px; -webkit-border-radius: 8px; -ms-border-radius: 8px; -moz-border-radius: 8px; } } @media screen and (max-width: 991.98px)and (max-width:767.98px) { .contentWrapper .tabs li { margin-left:1rem } } @media screen and (max-width: 991.98px) { .contentWrapper .tabs li:hover { border:2px solid #226375; padding: .5rem 1rem; margin: .25rem; text-align: center } .contentWrapper .tabs li span { margin-bottom: 0rem } .contentWrapper .tabs li span i { font-size: 2.8rem; line-height: 3.2rem; font-weight: 500; color: var(--grey-1) } .contentWrapper .tabs li.active { min-width: 9rem; color: var(--grey-1); padding: 10px; margin: .25rem; border-radius: .5rem; -webkit-border-radius: .5rem; -ms-border-radius: .5rem; -moz-border-radius: .5rem } .contentWrapper .tabs li.active span { margin-bottom: 0rem } .contentWrapper .tabs li.active span i { font-size: 2.8rem; line-height: 3.2rem; font-weight: 500; color: var(--grey-1) } .contentWrapper .next,.contentWrapper .previous { display: none!important } } .arrow-counter { position: relative } .arrow-counter .next,.arrow-counter .previous { position: absolute; height: auto; width: auto; top: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #000; border-radius: 100%; padding: 10px; color: #000; z-index: 99; } .arrow-counter .next:before,.arrow-counter .previous:before { font-family: "3w-icons"; font-size: 4rem; line-height: 4.4rem; font-weight: 400; color: var(--grey-1); opacity: 100 } .arrow-counter .next { right: -10px } . .arrow-counter .previous { left: 21rem } @media screen and (min-width: 1601px) { .arrow-counter .next { right:-1% } .arrow-counter .previous { left: 15% } } @media screen and (max-width: 1201px) { .arrow-counter .next { left::21rem } .arrow-counter .previous { left: 21rem } } @media screen and (max-width: 1199.98px) { .arrow-counter .next { right: -19px; } .arrow-counter .previous { left: 5rem } } @media screen and (max-width: 991.98px) { /* .arrow-counter .next,.arrow-counter .previous { display:none!important }*/ .arrow-counter .next { right: -52px; top: 34px; } span#techspecprev { right: -5% !important; top: 34px; } span#techspecprev { left: auto !important; } } @media only screen and (max-width: 1280px)and (min-width:1200px) { .arrow-counter .next { right:-12px } /* .arrow-counter .previous { left: -3px !important; }*/ } @media all and (max-width: 991.98px){ .arrow-tabs { position: absolute; right: 14%; top: 0%; } .arrow-counter .next { margin-right: 10px; } .arrow-counter { position: static; } .technical-speci{ position: relative; } } span#techspecprev { left: -12px; } li.tech-parts img { width: 50px; } .main-technical { background: #f6f6f6; padding: 20px; border-radius: 8px; border: 1px solid #000; } table.comments th { border-left: none !important; border: 2px solid #eee; text-align: right; } table.comments td{ border-right: none !important; border: 2px solid #eee; } .variant-img img { border-radius: 8px; background: #fff; margin-top: 12px; } .bg-blue-green { background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7); padding: 50px; border-radius: 8px; align-items: center; } .bg-blue-green .nice-select.select { height: 60px; line-height: 60px; margin: 0; border: none; border-radius: 8px; } a.theme-btn.download-btn i { line-height: 43px; } a.theme-btn.download-btn { background: #fff; color: #000; height: 60px; line-height: 42px; text-align: center; width: 100%; display: block; } .bg-blue-green .nice-select::before { content: ''; position: absolute; right: 15px; top: 8px; border-radius: 8px; background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7); width: 45px; height: 45px; } .bg-blue-green .nice-select::after { width: 15px; height: 15px; right: 32px; margin-top: -7px; border-color: #ffffff; top: 44%; } ul.nav.nav-tabs.tab-bg-border { border: 1px solid #226375; padding: 14px 20px; border-radius: 8px; display: inline-block; } ul.nav.nav-tabs.tab-bg-border li { float: left; margin-right: 20px; /* padding: 20px; */ } section.product-related li.nav-item button { margin: 0 !important; padding: 8px 24px; } section.product-related .nav.nav-tabs button.nav-link { background: none; border: none; } section.product-related .nav.nav-tabs button.nav-link.active { background: linear-gradient(92deg, #68c88b, #609d8b, #68aec7); } .box-product { text-align: center; border: 1px solid #eee; border-radius: 10px; } .box-product h5 { background: #f6f6f6; padding: 15px 2px; margin-bottom: 12px; } .box-product a { margin-bottom: 5px; padding: 8px 35px; } /*.box-product img { border-radius: 0px; } */ .heading-detail h2 { color: #5fab47; } section.bg-gradiant { /* padding: 0; */ padding-top: 0; padding-bottom: 20px; } .bg-img { background-image: url(../images/bg-2.png); background-size: 100%; background-repeat: no-repeat; } .section-title.ev-title h4 { border-left: 5px solid #67abbb !important; border-left: 8px solid; padding-left: 10px; color: #5fab47; } .car-item-single { padding: 50px 0;