/*=========================== Google fonts =============================*/
@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');

/*====================== Web fonts =======================*/
@font-face {
    font-family: 'Gilroy';
    src: url('../webfonts/Gilroy-Heavy.eot');
    src: url('../webfonts/Gilroy-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-Heavy.woff2') format('woff2'),
        url('../webfonts/Gilroy-Heavy.woff') format('woff'),
        url('../webfonts/Gilroy-Heavy.ttf') format('truetype'),
        url('../webfonts/Gilroy-Heavy.svg#Gilroy-Heavy') format('svg');
    font-weight: 850;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../webfonts/Gilroy-Black.eot');
    src: url('../webfonts/Gilroy-Black.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-Black.woff2') format('woff2'),
        url('../webfonts/Gilroy-Black.woff') format('woff'),
        url('../webfonts/Gilroy-Black.ttf') format('truetype'),
        url('../webfonts/Gilroy-Black.svg#Gilroy-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../webfonts/Gilroy-ExtraBold.eot');
    src: url('../webfonts/Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-ExtraBold.woff2') format('woff2'),
        url('../webfonts/Gilroy-ExtraBold.woff') format('woff'),
        url('../webfonts/Gilroy-ExtraBold.ttf') format('truetype'),
        url('../webfonts/Gilroy-ExtraBold.svg#Gilroy-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../webfonts/Gilroy-BoldItalic.eot');
    src: url('../webfonts/Gilroy-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-BoldItalic.woff2') format('woff2'),
        url('../webfonts/Gilroy-BoldItalic.woff') format('woff'),
        url('../webfonts/Gilroy-BoldItalic.ttf') format('truetype'),
        url('../webfonts/Gilroy-BoldItalic.svg#Gilroy-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../webfonts/Gilroy-Bold.eot');
    src: url('../webfonts/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-Bold.woff2') format('woff2'),
        url('../webfonts/Gilroy-Bold.woff') format('woff'),
        url('../webfonts/Gilroy-Bold.ttf') format('truetype'),
        url('../webfonts/Gilroy-Bold.svg#Gilroy-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../webfonts/Gilroy-SemiBold.eot');
    src: url('../webfonts/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-SemiBold.woff2') format('woff2'),
        url('../webfonts/Gilroy-SemiBold.woff') format('woff'),
        url('../webfonts/Gilroy-SemiBold.ttf') format('truetype'),
        url('../webfonts/Gilroy-SemiBold.svg#Gilroy-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../webfonts/Gilroy-Medium.eot');
    src: url('../webfonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-Medium.woff2') format('woff2'),
        url('../webfonts/Gilroy-Medium.woff') format('woff'),
        url('../webfonts/Gilroy-Medium.ttf') format('truetype'),
        url('../webfonts/Gilroy-Medium.svg#Gilroy-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-RegularItalic';
    src: url('../webfonts/Gilroy-RegularItalic.eot');
    src: url('../webfonts/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-RegularItalic.woff2') format('woff2'),
        url('../webfonts/Gilroy-RegularItalic.woff') format('woff'),
        url('../webfonts/Gilroy-RegularItalic.ttf') format('truetype'),
        url('../webfonts/Gilroy-RegularItalic.svg#Gilroy-RegularItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../webfonts/Gilroy-Regular.eot');
    src: url('../webfonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-Regular.woff2') format('woff2'),
        url('../webfonts/Gilroy-Regular.woff') format('woff'),
        url('../webfonts/Gilroy-Regular.ttf') format('truetype'),
        url('../webfonts/Gilroy-Regular.svg#Gilroy-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../webfonts/Gilroy-Light.eot');
    src: url('../webfonts/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/Gilroy-Light.woff2') format('woff2'),
        url('../webfonts/Gilroy-Light.woff') format('woff'),
        url('../webfonts/Gilroy-Light.ttf') format('truetype'),
        url('../webfonts/Gilroy-Light.svg#Gilroy-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/*========================== Basic css ============================*/
html {
    font-size: 62.5%;
}

:root {
    scroll-behavior: unset;

    /* fonts */
    --poppins: "Poppins", sans-serif;
    --gilroy: 'Gilroy';

    /* color */
    --white: #FFF;
    --black: #000;
    --dark: #444444;
    --dark-light: #939393;
    --primary-color: #18184E;
    --yellow: #FFD600;
    --dark-purple: #4C0994;
    --red-500: #FA4659;
    --light-gray: #F2F3F9;
}

html,
body,
header,
footer,
main,
nav,
section,
div,
menu,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
button {
    margin: 0;
    padding: 0;
}

ol,
ul {
    list-style: none;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
}

a:visited,
a:hover,
a:active {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* body */
body {
    font-family: var(--poppins);
    font-size: 1.6rem;
    font-weight: 400;
    background: var(--white);
    color: var(--black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--gilroy);
}

/* backt to top */
.scrolltop_btn {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    right: 3rem;
    bottom: 3rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.scrolltop_btn img {
    width: 100%;
}

.scrolltop_btn.show {
    opacity: 1;
    visibility: visible;
}

/* title */
.title_xxl {
    font-family: var(--gilroy);
    font-size: 9rem;
    font-style: normal;
    font-weight: 800;
    line-height: 84%;
    letter-spacing: 0.1167rem;
    color: var(--white);
    text-shadow: 0 0 3rem rgba(0, 0, 0, 0.30);
}

.title_xl {
    font-family: var(--gilroy);
    font-size: 5.2rem;
    font-style: normal;
    font-weight: 800;
    line-height: 144.231%;
    letter-spacing: 0.1167rem;
    color: var(--primary-color);
}

.title_lg {
    font-family: var(--gilroy);
    font-size: 4rem;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0.0353rem;
    color: var(--primary-color);
}

.title_md {
    font-family: var(--gilroy);
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    color: var(--primary-color);
}

.title_sm {
    font-family: var(--gilroy);
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 800;
    line-height: 177.778%;
    color: var(--dark);
}

/* subtitle */
.subtitle {
    font-family: var(--poppins);
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: 107.143%;
    letter-spacing: 0.0267rem;
    color: var(--black);
}

/* text */
.text_xl {
    font-family: var(--poppins);
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.0267rem;
    color: var(--black);
}

.text_lg {
    font-family: var(--poppins);
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 111.111%;
    color: var(--dark-light);
}

.text_base {
    font-family: var(--gilroy);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    color: var(--primary-color);
}

.text_sm {
    font-family: var(--poppins);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 228.571%;
    color: var(--primary-color);
}

/* button */
.button {
    font-family: var(--gilroy);
    font-size: 2.6rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    color: var(--dark-purple);
    background: var(--yellow);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 3rem;
    height: 7rem;
    border-radius: 0.6rem;
    transition: 0.2s all ease;
}

.button img {
    width: 1.1rem;
    margin-top: 0.2rem;
    transition: 0.3s all ease;
}

.button:hover {
    background: #D5D5D5;
    color: var(--dark-purple);
}

.button:hover img {
    transform: translateX(0.4rem);
}

.row {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 3rem;
}


/*====================== header_section start ========================*/
.header_section {
    width: 100%;
    display: block;
    background: transparent;
    position: fixed;
    top: 0;
    transition: 0.2s all ease;
    z-index: 1024;
}

.header_sticky {
    background: var(--white);
    box-shadow: 0.2rem 0.3rem 0.6rem rgba(0, 0, 0, 0.15);
    z-index: 1024;
}

.header_topbar {
    background: var(--white);
    padding: 1rem 0rem 0.8rem;
    transition: 0.25s all ease;
}

.topbar_language {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.topbar_language ul {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar_language img {
    width: 2.2rem;
}


/*------------- header_navbar -------------*/
.header_navbar {
    padding: 2.2rem 0rem;
    transition: 0.25s all ease;
}

.navbar-brand img {
    width: 18.3rem;
}

.navbar-nav {
    gap: 3rem;
}

.navbar-nav li a {
    font-family: var(--gilroy);
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    color: var(--primary-color);
    position: relative;
    transition: 0.2s all ease;
}

.navbar-nav li a::after {
    content: "";
    width: 0%;
    height: 0.4rem;
    display: block;
    background: var(--yellow);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.6rem;
    opacity: 0;
    transition: 0.2s all ease;
}

.navbar-nav li a:hover::after,
.navbar-nav li a.active::after {
    width: 100%;
    opacity: 1;
}

.navbar-nav li .nav_btn {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    padding: 0.7rem 2.8rem;
    border: 1px solid var(--yellow);
    border-radius: 0.6rem;
}

.navbar-nav li .nav_btn img {
    width: 1rem;
}

.navbar-nav li .nav_btn:hover,
.navbar-nav li .nav_btn.active {
    background: var(--yellow);
}

.navbar-nav li .nav_btn::after {
    display: none;
}

/* navbar-toggler */
.navbar-toggler {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none !important;
    padding: 0rem;
    transition: 0.2s all ease;
}

.navbar-toggler img {
    width: 2.4rem;
}

.navbar-toggler:hover {
    opacity: 0.85;
}


/*------------- offcanvas menu -------------*/
.offcanvas-start {
    width: 100% !important;
    background: var(--white);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.offcanvas-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.2rem 0rem;
}

.offcanvas-header img {
    max-width: 13rem;
}

.offcanvas-body .navbar-nav {
    gap: 0rem;
}

.close_btn {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0rem;
    transition: 0.2s all ease;
}

.close_btn:hover {
    opacity: 0.85;
}

.close_btn img {
    width: 2.4rem;
}

.offcanvas-body .navbar-nav a {
    font-size: 1.6rem;
    color: var(--primary-color)!important;
    width: 100%;
    display: block;
    padding: 1.8rem 0rem;
    border-bottom: 1px solid var(--dark-light);
    transition: 0.2s all ease;
}

.offcanvas-body .navbar-nav a:hover {
    padding-left: 1.5rem;
    border-color: var(--yellow);
}

.offcanvas-body .navbar-nav a::after {
    display: none;
}

.offcanvas_bottom {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    margin-top: auto;
}

.offcanvas_bottom .navbar-nav .nav_btn {
    font-size: 1.6rem;
    color: var(--primary-color)!important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    text-align: center;
    padding: 1.5rem 2rem!important;
    border-radius: 0.8rem;
    transition: 0.2s all ease;
}

.offcanvas_bottom .navbar-nav .nav_btn img {
    width: 0.8rem;
    margin-top: 0.1rem;
    transition: 0.3s all ease;
    filter: initial!important;
}

.offcanvas_bottom .navbar-nav .nav_btn:hover {
    background: #D5D5D5;
    border-color: transparent!important;
}

.offcanvas_bottom .navbar-nav .nav_btn:hover img {
    transform: translateX(0.5rem);
}


/*======================== footer section start ====================*/
.footer_section {
    background: var(--primary-color);
    padding-top: 7.8rem;
    overflow: hidden;
}

.footer_item h4 {
    color: var(--white);
    margin-bottom: 1.8rem;
}

.footer_item p {
    line-height: 214.286%;
    letter-spacing: 0.0267rem;
    color: var(--white);
}

.footer_item ul li a {
    line-height: 207.143%;
    color: var(--white);
    display: inline-block;
    margin-bottom: 1.2rem;
    transition: 0.2s all ease;
}

.footer_item a:hover {
    color: var(--yellow);
}

.footer_item .mail {
    color: var(--yellow);
    display: inline-block;
    margin: 0.3rem 0rem;
}

.social_icon {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social_icon img {
    width: 2rem;
    transition: 0.2s all ease;
}

.social_icon a:hover {
    opacity: 0.85;
}

.opening_text p {
    margin-bottom: 3.2rem;
}

.copyright_text {
    padding-top: 8.2rem;
    padding-bottom: 4.2rem;
    display: flex;
    align-items: center;
    gap: 7rem;
}

.copyright_text p {
    color: rgba(255, 255, 255, 0.50);
    line-height: 185.714%;
}

.copyright_text ul {
    display: flex;
    align-items: center;
    gap: 3.4rem;
}

.copyright_text ul li a {
    color: rgba(255, 255, 255, 0.50);
    line-height: 185.714%;
    transition: 0.2s all ease;
}

.copyright_text ul li a:hover {
    color: var(--yellow);
}


/*================= hero_section start ===================*/
.hero_section {
    background-image: url(../img/hero-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 27rem 0rem 16.8rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero_text h2 {
    margin-bottom: 4rem;
}

.hero_text h2 span.highlight {
    display: inline-block;
    position: relative;
    z-index: 9;
}

.hero_text h2 span.highlight::after {
    content: "";
    width: 105%;
    height: 2rem;
    display: block;
    background: var(--yellow);
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.header_index .navbar-nav li a {
    color: var(--white);
}

.header_index .navbar-nav li .nav_btn {
    border-color: var(--white);
}

.header_index .navbar-nav li .nav_btn img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(121deg) brightness(104%) contrast(105%);
}

.header_index .navbar-nav li .nav_btn:hover {
    border-color: var(--yellow);
    color: var(--primary-color);
}

.header_index .navbar-nav li .nav_btn:hover img {
    filter: initial;
}

.header_index .navbar-brand img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(121deg) brightness(104%) contrast(105%);
}

.header_index .navbar-toggler img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(121deg) brightness(104%) contrast(105%);
}

.header_sticky .navbar-nav li a {
    color: var(--primary-color);
}

.header_sticky .navbar-nav li .nav_btn {
    border-color: var(--yellow);
}

.header_sticky .navbar-nav li .nav_btn img {
    filter: initial;
}

.header_sticky .navbar-nav li .nav_btn:hover img {
    filter: initial;
}

.header_sticky .navbar-brand img,
.header_sticky .navbar-toggler img {
    filter: initial;
}

.header_sticky .header_topbar {
    display: none!important;
}

.header_sticky .header_navbar {
    padding: 1.5rem 0rem;
}


/*=================== help_section start ======================*/
.help_section {
    background: var(--light-gray);
    padding: 10rem 0rem 13rem;
}

.help_wrapper {
    max-width: 106rem;
    width: 100%;
    margin: 0 auto;
    padding: 7.2rem 0rem 10rem;
}

.help_wrapper .row {
    --bs-gutter-x: 6.5rem;
}

.help_card a {
    width: 100%;
    display: block;
    position: relative;
}

.help_card img {
    width: 100%;
    height: 37.5rem;
    object-fit: cover;
    border-radius: 0.53rem;
    box-shadow: 0 0 5rem 0 rgba(0, 0, 0, 0.30);
}

.help_card span {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--white);
    padding: 3rem 3rem;
    position: absolute;
    bottom: 0rem;
    left: 0rem;
}

.help_card span img {
    width: 1.8rem;
    height: initial;
    transition: 0.25s all ease;
}

.help_card:hover span img {
    transform: translateX(1rem);
}

/*====================== repair_section start ===================*/
.repair_section {
    padding: 19rem 0rem 32rem;
}

.repair_item {
    overflow: hidden;
    border-radius: 0.6rem;
}

.repair_item img {
    width: 100%;
    border-radius: 0.6rem;
    transition: 0.2s all ease;
}

.repair_item:hover img {
    transform: scale(1.05);
}

.repair_text h3 {
    margin-bottom: 0.6rem;
}

.repair_text ul {
    padding: 3.5rem 0rem;
}

.repair_text ul li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.repair_text ul li img {
    width: 2.2rem;
    margin-top: 0.4rem;
}


/*=================== car_section start =====================*/
.car_section {
    background: var(--light-gray);
    padding: 9.4rem 0rem 16.5rem;
}

.car_title {
    max-width: 85.4rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.car_title h3 {
    margin-bottom: 1rem;
}

.car_wrapper {
    max-width: 106rem;
    width: 100%;
    margin: 0 auto;
    padding: 6.5rem 0rem 9.9rem;
}

.car_wrapper .row {
    --bs-gutter-x: 6.5rem;
    --bs-gutter-y: 6.5rem;
}

.car_item img {
    width: 100%;
    object-fit: cover;
    border-radius: 0.53rem;
    box-shadow: 0 0 5rem 0 rgba(0, 0, 0, 0.30);
    transition: 0.2s all ease;
}

.car_item:hover img {
    transform: scale(1.05);
}

.car_item .car1 {
    height: 37.5rem;
}

.car_item .car2 {
    height: 45rem;
}

.car_item .car3 {
    height: 37.5rem;
}

.car_item .car4 {
    height: 45rem;
    margin-top: -7.5rem;
}

.car_item .car5 {
    height: 45rem;
}

.car_item .car6 {
    height: 37.5rem;
    margin-top: -7.5rem;
}

.button_textmobile {
    display: none;
}


/*==================== partner_section start ======================*/
.partner_section {
    padding: 10rem 0rem 22rem;
}

.partner_title {
    max-width: 85.4rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.partner_title h3 {
    margin-bottom: 1rem;
}

.partner_wrapper {
    padding-top: 10rem;
}

.partner_wrapper .row {
    --bs-gutter-y: 12rem;
}

.partner_logo img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.partner_logo1 {
    width: 22.5rem;
}

.partner_logo2 {
    width: 25.6rem;
}

.partner_logo3 {
    width: 23.3rem;
}

.partner_logo4 {
    width: 21.9rem;
}

.partner_logo5 {
    width: 19.5rem;
}

.partner_logo6 {
    width: 15.8rem;
}


/*==================== about page start ======================*/
.about_hero {
    padding-top: 25rem;
    padding-bottom: 17.5rem;
}

.about_hero_text .title_xl {
    line-height: 1.03;
    padding-bottom: 3rem;
}

.about_hero_text h2 .highlight {
    display: inline-block;
    position: relative;
}

.about_hero_text h2 .highlight::after {
    content: "";
    width: 104%;
    height: 1.5rem;
    display: block;
    background: var(--yellow);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0rem;
    z-index: -1;
}

.about_hero_text .text_xl:last-child {
    padding-top: 3rem;
}

.about_hero_img {
    overflow: hidden;
}

.about_hero_img img {
    width: 100%;
    transition: 0.25s all ease;
}

.about_hero_img img:hover {
    transform: scale(1.1);
}

/* ---------------unique section start---------- */

.unique_section {
    background: var(--light-gray);
    padding: 10rem 0;
}

.unique_item {
    overflow: hidden;
    border-radius: 0.6rem;
}

.unique_item img {
    width: 100%;
    border-radius: 0.6rem;
    transition: 0.2s all ease;
}

.unique_item:hover img {
    transform: scale(1.05);
}

.unique_text h3 {
    margin-bottom: 3.3rem;
    line-height: 1.03;
}

.unique_text ul li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 2.5rem;
}

.unique_text ul li img {
    width: 2.2rem;
}

.unique_bottom {
    padding-top: 20rem;
}

.unique_bottom h2 {
    padding-bottom: 5rem;
}


/*==================== service page start ======================*/

.service_hero {
    padding-top: 28rem;
    padding-bottom: 10rem;
}

.service_content h2 {
    line-height: 1.44;
    padding-bottom: 2rem;
}

.service_content h2 span.highlight {
    display: inline-block;
    position: relative;
}

.service_content h2 span.highlight::after {
    content: "";
    width: 108%;
    height: 1.4rem;
    display: block;
    background: var(--yellow);
    position: absolute;
    left: 48%;
    transform: translateX(-50%);
    bottom: 1.1rem;
    z-index: -1;
}


/* -------step_section start --------- */

.step_section {
    background: var(--light-gray);
    padding: 5.8rem 0 6.6rem;
}

.step_item img {
    width: 100%;
    border-radius: 0.6rem;
}

.step_text h2 {
    font-size: 5rem;
    line-height: 1.44;
    padding-bottom: 2.5rem;
}

.step_text li {
    display: flex;
    align-items: center;
    padding-bottom: 2.5rem;
}

.step_text li:last-child {
    padding: 0;
}

.step_text .step_number {
    background: var(--yellow);
    width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5rem;
}

.step_text .step_number .number {
    line-height: 1.44;
}

.step_text .text {
    padding-left: 2.3rem;
}

.step_text .text h4 {
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 1.07;
    letter-spacing: 0.0169rem;
}

.step_text .text p {
    color: var(--dark-light);
}


/* ---------Form section start----------- */

.form_section {
    padding: 15rem 0;
}

.form_wrapper {
    max-width: 76.1rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.form_title {
    padding-bottom: 3.2rem;
}

.form_title h2 {
    line-height: 1;
    letter-spacing: 0.03125rem;
    padding-bottom: 2.5rem;
}

.form_title p {
    line-height: 100%;
    letter-spacing: 0.03125rem;
}

.input_box {
    padding-bottom: 2rem;
}

.input_box label,
.textarea label {
    font-family: var(--gilroy);
    line-height: 1.6;
    font-weight: 800;
    color: var(--dark);
    display: block;
    text-align: left;
}

.input_box input {
    font-family: var(--poppins);
    color: var(--black);
    width: 100%;
    display: block;
    background: var(--white);
    height: 6rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(9, 30, 66, 0.30);
    outline: none;
    border-radius: 0.6rem;
}

.input_box input::placeholder {
    font-family: var(--poppins);
    color: var(--dark-light);
}

.input_box select {
    font-family: var(--poppins);
    color: var(--dark-light);
    width: 100%;
    display: block;
    background: var(--white);
    height: 6rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(9, 30, 66, 0.30);
    outline: none;
    border-radius: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../img/down.svg);
    background-repeat: no-repeat;
    background-size: 1.6rem;
    background-position: calc(100% - 1.6rem) center;
    cursor: pointer;
}

.textarea {
    padding-bottom: 2.5rem;
}

.textarea textarea {
    font-family: var(--poppins);
    color: var(--black);
    width: 100%;
    min-height: 30rem;
    display: block;
    background: var(--white);
    border: 1px solid rgba(9, 30, 66, 0.30);
    padding: 2.1rem 1.2rem;
    border-radius: 1rem;
    resize: none;
    outline: none;
}

.textarea textarea::placeholder {
    font-family: var(--poppins);
    color: var(--dark-light);
}

.form_vlog .button {
    border: none;
}

/* radio button */
.radio_button {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.radio_button input {
    width: 2.8rem;
    height: 2.8rem;
    background: var(--white);
    border: 1px solid #B5BBC6;
    border-radius: 50%;
    flex-shrink: 0;
}

.radio_button label {
    font-family: var(--poppins);
    font-style: normal;
    font-weight: 400;
    line-height: 111.111%;
    color: var(--dark);
    cursor: pointer;
}

.upload_wrapper {
    padding-top: 10rem;
    margin-bottom: 6rem;
}

/* drop zone */
.drop-zone {
    width: 100%;
    height: 27rem;
    border: 1px dashed #666;
    border-radius: 0.6rem;
    background: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    -webkit-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s;
    cursor: pointer;
    margin-bottom: 2.8rem;
    -webkit-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;
}

.drop-zone.dragging {
    border-color: var(--yellow);
}

.generic_icon {
    width: 3.6rem;
}

.drop-zone-inner p {
    text-align: center;
    line-height: 177.778%;
    color: var(--dark);
    margin: 0.6rem 0 1rem;
}

.drop_btn {
    font-family: var(--gilroy);
    font-size: 1.78rem;
    font-weight: 800;
    line-height: normal;
    color: var(--black);
    display: inline-block;
    padding: 1rem 1.8rem;
    border-radius: 6.8rem;
    border: 1px solid var(--black);
    -webkit-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;
}

.drop-zone:hover .drop_btn,
.drop-zone.dragging .drop_btn{
    background: var(--yellow);
    border-color: var(--yellow);
}

.drop-zone-inner .line {
    width: 56.5rem;
    height: 1.7rem;
    border-radius: 10rem;
    margin: auto;
    margin-top: 3rem;
    background: #F2F2F2;
}


/* Image grid */
.image-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2.4rem 1fr 2.4rem 1fr 2.4rem 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
}

.image-container {
    width: 100%;
    height: 22.4rem;
    background-color: rgba(217, 217, 217, 0.30);
    background-image: url(../img/picture.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 3.1rem;
    border-radius: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.delete-button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: var(--white);
    border: none;
    border-radius: 50%;
    width: 2.7rem;
    height: 2.7rem;
    display: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.delete-button:hover{
    background: #f1f1f1;
}

.delete-button img{
    width: 1.4rem;
    height: 1.7rem;
}

.image-container img + .delete-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


/* ---------Replacement section start-------- */
.replacement_wrapper {
    background: #F2F3F9;
    padding: 10rem 8rem 11rem;
}

.replacement_item img {
    width: 100%;
    border-radius: 0.6rem;
}

.replacement-text h2 {
    font-size: 5rem;
    padding-bottom: 2.5rem;
    line-height: 1;
}

.replacement-text li {
    letter-spacing: 0.0169rem;
    padding-bottom: 2.5rem;
}

.replacement-text li:last-child {
    padding: 0;
}

/*==================== Damage page start ======================*/

.damage_hero {
    padding-top: 25rem;
    padding-bottom: 17.5rem;
}

.damage_hero_text .title_xl {
    line-height: 1.03;
    padding-bottom: 3rem;
}

.damage_hero_text .text_xl:last-child {
    padding-top: 3rem;
}

.damage_hero_img img {
    width: 100%;
}

.damage_hero_text h2 span.highlight {
    display: inline-block;
    position: relative;
}

.damage_hero_text h2 span.highlight::after {
    content: "";
    width: 100%;
    height: 1.5rem;
    display: block;
    background: var(--yellow);
    position: absolute;
    left: 48%;
    transform: translateX(-50%);
    bottom: 0rem;
    z-index: -1;
}

/* -------------- Our services section start ------------- */

.our_service_section {
    background: var(--light-gray);
    padding: 10rem 0 15rem;
}

.our_service_section h2 {
    padding-bottom: 8rem;
    text-align: center;
}

.service_card {
    height: 100%;
    background: var(--white);
    border-radius: 0.6rem;
}

.service_card img {
    width: 100%;
    border-radius: 0.6rem 0.6rem 0 0;
}

.service_card .card_text {
    padding: 3.3rem 3.1rem 2.2rem 2.9rem;
}

.service_card.box3 h3 {
    padding-bottom: 4rem;
}

.service_card .card_text p {
    padding-top: 1.7rem;
}


/*==================== Restoring page start ======================*/

.restor_section {
    padding-top: 29rem;
    padding-bottom: 17.7rem;
}

.restor_hero_item img {
    width: 100%;
    border-radius: 0.6rem;
}

.restor_hero_text h2 {
    line-height: 1.03;
    letter-spacing: 0.0731rem;
    padding-bottom: 3rem;
}

.restor_hero_text h2 span.highlight {
    display: inline-block;
    position: relative;
}

.restor_hero_text h2 span.highlight::after {
    content: "";
    width: 104%;
    height: 1.5rem;
    display: block;
    background: var(--yellow);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0rem;
    z-index: -1;
}

.restor_hero_text p {
    padding-bottom: 2.5rem;
}

.restor_hero_text p:last-child {
    padding: 0;
}


/* ---------Realizations hero start--------- */

.realizations_section {
    background: var(--light-gray);
    padding: 10rem 0 15rem;
}

.realizations_section h2 {
    padding-bottom: 8rem;
    text-align: center;
}

.realizations_card {
    background: var(--white);
    border-radius: 0.6rem;
    height: 100%;
}

.realizations_card img {
    width: 100%;
    border-radius: 0.6rem 0.6rem 0rem 0rem;
}

.realizations_card .card_text {
    padding: 3.3rem 2.9rem 4.1rem;
}

.realizations_card .card_text h3 {
    padding-bottom: 1.7rem;
}

.realizations_card .card_text p {
    max-width: 53rem;
    width: 100%;
    padding-bottom: 3rem;
}

/*==================== Provid page start ======================*/

.provid_section {
    padding-top: 29rem;
    padding-bottom: 5rem;
    position: relative;
}

.provid_section::after {
    content: "";
    width: 100%;
    height: 60%;
    display: block;
    background: #F2F3F9;
    position: absolute;
    top: 56%;
    transform: translateY(-50%);
    left: 0;
}   

.provid_section .container {
    position: relative;
    z-index: 9;
}

.provid_image img {
    width: 100%;
    border-radius: 0.6rem;
}

.provid_image {
    margin-bottom: 6.8rem;
}

.provid_title {
    max-width: 90rem;
    width: 100%;
}

.provid_title h2 {
    line-height: 1.03;
    letter-spacing: 0.0169rem;
    padding-bottom: 3rem;
}

.provid_title h2 span.highlight {
    display: inline-block;
    position: relative;
}

.provid_title h2 span.highlight::after {
    content: "";
    width: 104%;
    height: 1.5rem;
    display: block;
    background: var(--yellow);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0rem;
    z-index: -1;
}

.provid_title p {
    padding-bottom: 2.5rem;
}

.provid_items {
    padding-bottom: 3rem;
}

.provid_items .provid_item {
    padding-bottom: 3rem;
}

.provid_items .provid_item:last-child {
    padding: 0;
}

.provid_items .provid_item h4 {
    font-weight: 700;
}

.provid_items {
    max-width: 90rem;
    width: 100%;
}

.detils {
    padding-bottom: 4rem;
}

.detils li span {
    font-weight: 700;
}

.provid_buton {
    text-align: center;
    margin-top: 8rem;
}

.bus_demo {
    max-width: 106rem;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rem;
    margin-top: 2.5rem;
}

.demo_item {
    position: relative;
}

.demo_item img {
    width: 100%;
    border-radius: 0.53rem;
    box-shadow: 0 0 5rem 0 rgba(0, 0, 0, 0.30);
}

.demo_item button {
    width: 0rem;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: 0.25s all ease;
}

.demo_item button img {
    width: 100%;
    box-shadow: none;
}

.demo_item:hover button {
    visibility: visible;
    opacity: 1;
    width: 6.8rem;
}


/*==================== contact page start ======================*/

.contact_hero {
    padding-top: 32rem;
    padding-bottom: 8rem;
}

.contact_hero_title h2 {
    line-height: 1.03;
    letter-spacing: 0.0731rem;
    padding-bottom: 2.5rem;
}

.contact_hero_title h2 span.highlight {
    display: inline-block;
    position: relative;
}

.contact_hero_title h2 span.highlight::after {
    content: "";
    width: 102%;
    height: 1.5rem;
    display: block;
    background: var(--yellow);
    position: absolute;
    left: 49%;
    transform: translateX(-50%);
    bottom: 0rem;
    z-index: -1;
}

.contact_hero_title p {
    max-width: 65rem;
    width: 100%;
}

.contact_section {
    padding-bottom: 10rem;
}

.contact_section .row {
    --bs-gutter-x: 6rem;
}

.check_box {
    margin-bottom: 6rem;
    display: flex;
    align-items: center;
    gap: 1.7rem;
    margin-top: 1rem;
}

.form-check-input {
    width: 2.8rem;
    height: 2.8rem;
    display: block;
    border: 1px solid #B5BBC6;
    border-radius: 0.5rem!important; 
    margin: 0;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.form-check-input:focus {
    border-color: #B5BBC6;
    outline: 0;
    box-shadow: none;
}

.check_box label {
    font-family: var(--poppins);
    color: var(--dark);
    font-weight: 400;
    line-height: 1.11;
    cursor: pointer;
}

.form_button button {
    border: none;
    outline: none;
}

.contact_area .contact {
    padding-bottom: 2.6rem;
}

.contact_area h4 {
    padding-bottom: 1.7rem;
}

.contact_area p,
.contact_area li {
    font-weight: 400;
    line-height: 2.28;
}

.contact_area .link{
    color: var(--yellow);
    font-weight: 800;
}

.map-section .map img{
    width: 100%;
}

.service_check {
    margin-top: 3rem;
    margin-bottom: 4rem;
}

/* text animation */
.text-anim {
    display: block;
}

.text-anim span {
    display: inline-block;
    opacity: 0; 
}