/* BANNER */
.banner {background-color: var(--c-heading); position: relative; z-index: 10;}
.banner img {opacity: 0.30;}
.banner .content {width: 100%; max-width: 900px; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); z-index: 2;}
.banner .content > :first-child {display: flex; flex-direction: column; align-items: start; justify-content: center; font-size: calc(var(--fs-lg, 55px) - 5px); line-height: 55px; color: #fff; margin-bottom: 20px;}
.banner .content > :first-child > :first-child {font-size: var(--fs-2xl, 110px); line-height: 110px; color: var(--c-primary);}
.banner form {display: flex; align-items: center; justify-content: center; gap: 10px;}
.banner form .input-field {width: 100%; max-width: 900px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: #fff; padding-inline: 20px; border-radius: 5px;}
.banner form input {border: 0; border-radius: 0; line-height: unset; padding: unset; padding-left: 15px;}
.banner form button {height: 50px; display: inline-flex; align-items: center; gap: 10px; background: #0065F8; font-weight: 500; line-height: var(--lh-md, 34px); text-transform: capitalize;  transition: var(--trans-5); padding-inline: 25px; border-radius: 5px;}
.banner form button:hover {background-color: #004dc0;}
.banner .slider {display: flex; overflow: hidden;}
.banner .slider .slider-card img {width: 100%; height: 660px; object-fit: cover;}
.banner .btns > button { width: 60px; height: 60px; display: flex; position: absolute; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; transition: var(--trans-5); opacity: 0.30;}
.banner .btns > button:hover {opacity: 1;}
.banner .btns > button[aria-label="previous-btn"] {margin-left: 50px;} 
.banner .btns > button[aria-label="next-btn"] {margin-right: 50px; right: 0;} 
.banner .btns > button img {opacity: 1; filter: invert(1);}
.banner .carousel-dots {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}
.banner .dot-btn {width: 20px; height: 20px; border-radius: 50%; background-color: #ffb51d4d; position: relative; transition: var(--trans-3);}
.banner .dot-btn::after {position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; background-color: var(--c-primary); border-radius: 50%; content: "";}
.banner .dot-btn.active {background-color: #ffffff4d;}
.banner .dot-btn.active::after {background-color: #fff;}
.banner .carousel-dots > :not(:last-child) {margin-right: 60px;}
.banner .carousel-dots > :not(:last-child)::before {width: 50px; height: 1px; position: absolute; top: 10px; left: 26px; background-color: #ffffff4d; content: "";}


@media only screen and (max-width: 1200px) {
    .banner .content {max-width: 750px;}
}
@media only screen and (max-width: 991px) {
    .banner .btns {display: none;}
}
@media only screen and (max-width: 768px) {
    .banner .content {padding-inline: 10px;}
    .banner .slider .slider-card img {height: 550px;}
    .banner .content > :first-child {font-size: var(--fs-sm, 30px);}
    .banner .content > :first-child > :first-child {font-size: var(--fs-md, 45px); line-height: 30px;}
}
@media only screen and (max-width: 576px) {
    .banner .slider .slider-card img {height: 450px;}
}
@media only screen and (max-width: 475px) {
    .banner .carousel-dots > :not(:last-child) {margin-right: 45px;}
    .banner .carousel-dots > :not(:last-child)::before {width: 35px;}

}

/* MARQUEE */
.marquee {background-color: var(--c-primary); white-space: nowrap; position: relative; overflow: hidden;}
.marquee .wrapper {display: flex; gap: 35px; animation: marqueeScroll 32.9528s linear infinite;}
.marquee ul {display: flex; align-items: center; justify-content: space-between; flex: none; padding-block: 10px; gap: 35px; }
.marquee li {flex: none;}
.marquee .text {display: flex; align-items: center; justify-content: center; gap: 25px; }
.marquee .text > :first-child {font-size: calc(var(--fs-lg, 55px) - 5px); font-family: var(--ff-primary); font-weight: 700; line-height: 1; color: #000; text-transform: uppercase; position: relative; transition: var(--trans-3);}
.marquee .text > :first-child::before {overflow: hidden; position: absolute; top: 0; left: 0; width: 0; color: #fff; white-space: nowrap; content: attr(data-hover); transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87);}
.marquee .text:hover > :first-child::before {width: 100%; color: #fff;}
.marquee li > :first-child img {flex: none;}

/* SERVICE SECTION */
.service {padding-top: 120px; position: relative;}
.service::before {width: 481px; height: 448px; background-color: var(--_c-bg); position: absolute; right: 0; bottom: -100px; filter: blur(150px); border-radius: 50%; z-index: -1; content: "";}
.service::after {width: 481px; height: 448px; background-color: var(--_c-bg); position: absolute; left: -221px; top: 50px; filter: blur(150px); border-radius: 50%; z-index: -1; content: "";}
.service .top-text {display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;}
.service .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.service .container > :nth-child(2) {max-width: 800px; font-size: var(--fs-md, 45px); line-height: 55px; text-align: center; margin-inline: auto; margin-block: 7px 49px;}
.service .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;} 
.service .box { background-color: var(--c-heading); padding: 30px 25px 37px; border-radius: 20px; margin-bottom: 30px; position: relative; z-index: 1; overflow: hidden; }
.service .box::before {background-color: var(--c-primary); content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: scaleX(0.7) rotateX(20deg); opacity: 0; transition: var(--trans-4); z-index: -1;}
.service .box:hover::before {transform: scaleX(1.0) rotateX(0deg); opacity: 1;} 
.service .box::after {width: 100%; height: 10px; background-color: var(--c-primary); position: absolute; bottom: 0px; left: 0; right: 0; transition: var(--trans-5);  content: ""; z-index: -1;}
.service .box:hover::after {background-color: var(--c-heading);}
.service .box .shape {border-left: 105px solid transparent; border-bottom: 178px solid #ffffff0d; border-right: 105px solid transparent; position: absolute; transition: var(--trans-5);}
.service .box:hover .shape {border-bottom: 178px solid #13122205;}
.service .box .shape-one {bottom: 0; left: 50%; transform: translateX(-50%);}
.service .box .shape-two {top: -97px; right: -60px;}
.service .box .shape-three {bottom: -57px; right: -123px;}
.service .box > img {filter: var(--c-filter-secondary); transition: var(--trans-5);}
.service .box:hover > img {filter: var(--c-filter-primary);}
.service .box a {font-size: calc(var(--fs-xs, 24px) - 2px); font-family: var(--ff-primary); font-weight: 700; line-height: calc(var(--lh-md, 34px) - 2px); color: var(--c-primary); padding-right: 27px; margin-block: 49px 6px; transition: var(--trans-5);}
.service .box:hover a {color: var(--c-heading);}
.service .box p {font-weight: 400; color: #ffffffb3; transition: var(--trans-5);}
.service .box:hover p {color: var(--c-heading);}
.service .count {width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; font-size: calc(var(--fs-xs, 24px) - 4px); font-weight: 700; line-height: 20px; color: var(--c-heading); background-color: #fff; position: absolute; top: 45%; right: 0; border-bottom-left-radius: 15px; border-top-left-radius: 15px; transform: translateY(-50%); transition: all 0.7s ease; z-index: 1;}
.service .box:hover .count {color: var(--c-primary);}
.service .count::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-bottom-left-radius: 15px;   border-top-left-radius: 15px; background-color: var(--c-heading); opacity: 0; transform: translateX(55px); transition: all 0.7s ease; z-index: -1;}
.service .box:hover .count::after {opacity: 1; transform: translateX(0px);}

/* ABOUT */
.about {padding-top: 90px;}
.about .wrapper {display: grid; grid-template-columns: repeat(2, 1fr);}
.about .about-box {margin-left: 210px; margin-right: -30px; position: relative;}
.about .about-one {overflow: hidden; background-color: var(--c-heading); border-radius: 20px; position: relative; z-index: 1;}
.about .about-one img {width: 100%; max-height: 350px; border-radius: 20px; transition: var(--trans-5);} 
.about .about-one:hover img {opacity: 0.6; transform: scaleX(1.05);}
.about .about-two {position: absolute; top: 133px; left: -190px; z-index: -1; animation-name: float-bob-y; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear;}
@keyframes float-bob-y {
    0% {
        transform: translateY(-20px);
    } 50% {
        transform: translateY(-10px);
    } 100% {
        transform: translateY(-20px);
    }
} 
.about .about-two img {width: auto;}
.about .about-three {position: absolute; top: 0; left: -180px; z-index: -1;}
.about .about-three img {width: auto;}
.about .about-four {position: absolute; top: 463px; right: -11px; z-index: -1; transform: translateY(-50%); }
.about .about-img {animation-name: float-bob-x; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear;}

.about .about-img img {width: auto;}
.about .about-five {position: absolute; left: -210px; top: 392px; overflow: hidden; transform: translateY(-50%); background-color: var(--c-heading); border-radius: 20px;}
.about .about-five img {width: 100%; max-height: 350px; border-radius: 20px; transition: var(--trans-5);}
.about .about-five:hover img {opacity: 0.6; transform: scaleX(1.05);}
.about .experience {position: absolute; top: 35px; left: -75px; max-width: 150px; width: 100%; background-color: var(--c-primary);    border-radius: 10px; text-align: center; padding: 36px 30px 34px; border-bottom-left-radius: 0; z-index: 2;}
.about .experience::before {content: ""; position: absolute; bottom: -35px; left: 0; border-top: 35px solid var(--c-primary);  border-left: 75px solid transparent;}
.about .experience > :first-child {font-size: calc(var(--fs-sm, 30px) + 5px); font-weight: 600; line-height: var(--lh-md, 34px); color: var(--c-heading);}
.about .experience > :nth-child(2) {font-size: calc(var(--fs-base, 16px) + 2px); line-height: var(--lh-sm, 28px); font-weight: 500; color: #fff; margin-top: 5px;}
.about .content {margin-left: 80px;}
.about .content > :nth-child(2) {font-size: var(--fs-md, 45px); line-height: 55px; margin-inline: auto; margin-block: 7px 23px;}
.about .top-text {display: flex; align-items: center; justify-content: start; gap: 10px; flex-wrap: wrap;}
.about .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.about .commit {font-size: calc(var(--fs-xs, 24px) - 4px); font-weight: 500; line-height: calc(var(--lh-sm, 28px) + 2px); color: var(--c-primary);}
.about .content > p {margin-block: 21px 20px;}
.about .content ul > :first-child {margin-bottom: 18px;}
.about .content li > :first-child {font-size: calc(var(--fs-xs, 24px) - 4px); font-weight: 600; line-height: calc(var(--lh-sm, 28px) + 2px); text-transform: unset; margin-bottom: 7px;}
.about .content .bar {width: 100%; height: 10px; background-color: var(--_c-bar); position: relative;}
.about .content .bar-inner {height: 10px; background-color: var(--c-primary); position: absolute; top: 0; left: 0;}
.about .content .bar-inner[data-percent="90%"] {width: 90%;}
.about .content .bar-inner[data-percent="70%"] {width: 70%;}
.about .content .bar-inner > :first-child {font-size: calc(var(--fs-xs, 24px) - 4px); font-weight: 600; line-height: calc(var(--lh-sm, 28px) + 2px); position: absolute; right: 0; top: -37px;} 
.about .contact-info {display: flex; align-items: center; justify-content: start; gap: 30px; margin-top: 50px;}
.about .call {display: flex; align-items: center; justify-content: center; gap: 10px;}
.about .call > :first-child {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--c-primary); border-radius: 50%; transition: var(--trans-5);}
.about .call > :first-child > img { transition: var(--trans-5);}
.about .call > :first-child:hover {background-color: var(--c-heading);}
.about .call > :first-child:hover > img {filter: invert(1);}
.about .call > :nth-child(2) > :first-child {font-size: var(--fs-2xs, 14px); line-height: 14px; color: var(--c-text); margin-bottom: 7px;} 
.about .call > :nth-child(2) > :nth-child(2) {font-size: calc(var(--fs-base, 16px) + 2px); line-height: 18px; font-weight: 600; color: var(--c-heading); transition: var(--trans-5);}
.about .call > :nth-child(2) > :nth-child(2):hover {color: var(--c-primary);}

/* EASY SECTION */
.easy {padding-top: 100px;}
.easy .top-text {display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;}
.easy .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.easy .container > :nth-child(2) {max-width: 800px; font-size: var(--fs-md, 45px); line-height: 55px; text-align: center; margin-inline: auto; margin-block: 7px 49px;}
.easy .box > :not(:last-child) {padding-bottom: 30px; border-bottom: 1px solid var(--_c-br); margin-bottom: 30px;}
.easy .wrapper {display: flex; align-items: center; justify-content: space-between;}
.easy .wrapper .first-img {width: 280px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--_c-br); border-radius: 20px;}
.easy .basic {display: flex; align-items: center; gap: 50px;}
.easy .car-service {display: flex; align-items: center; gap: 150px;}
.easy .basic-text > :first-child {display: block; font-size: calc(var(--fs-md, 45px) - 5px); color: var(--c-primary); font-weight: 600;  text-transform: capitalize; line-height: 40px; margin-bottom: 15px;}
.easy .basic-text > :nth-child(2) {font-size: calc(var(--fs-md, 45px) + 5px); font-family: var(--ff-primary); font-weight: 700; line-height: 50px; color: var(--c-heading);}
.easy .basic-text > :nth-child(2) > :first-child {font-weight: 400; font-size: calc(var(--fs-base, 16px) + 4px); line-height: 20px; color: var(--c-primary);}
.easy ul > :not(:first-child) {margin-top: 10px;}
.easy li {font-weight: 500; color: var(--c-heading); padding-left: 26px; position: relative;}
.easy li::before {width: 14px; height: 14px; background: no-repeat center / contain url("../images/icons/check.svg"); position: absolute; inset: 0; margin-block: auto; margin-right: auto; filter: var(--c-filter-secondary); content: "";}

@media only screen and (max-width: 1440px) {
    .easy .car-service {gap: 20px;}
    .easy .basic {gap: 20px;}
}
@media only screen and (max-width: 991px) {
    .easy .wrapper {flex-direction: column; gap: 50px;}
}
@media only screen and (max-width: 768px) {
    .easy {padding-top: 90px;}
    .easy .wrapper {gap: 20px;}
}
@media only screen and (max-width: 576px) {
    .easy {padding-top: 60px;}
    .easy .basic-text > :first-child {text-align: center; line-height: 1; margin-bottom: 0;}
    .easy .container > :nth-child(2) {margin-block: 20px; line-height: 40px;}
    .easy .car-service {gap: 12px;}
    .easy .basic {gap: 10px;}
}
@media only screen and (max-width: 475px) {
    .easy {padding-top: 45px;}
    .easy .basic  {flex-direction: column;}
    .easy .car-service {flex-direction: column;}
}
 


/* PROCESS SECTION */
.process {padding-top: 120px;}
.process .top-text {display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;}
.process .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.process .container > :nth-child(2) {max-width: 800px; line-height: 55px; font-size: var(--fs-md, 45px); text-align: center; margin-inline: auto; margin-block: 7px 49px;}
.process .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;}
.process .box {background-color: var(--c-heading); padding: 45px 25px 33px; border-radius: 20px; overflow: hidden; margin-bottom: 30px; position: relative; z-index: 1;}
.process .box > img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; border-radius: 20px; opacity: 0.05; z-index: -1;}
.process .content {display: flex; align-items: center; justify-content: space-between; position: relative;}
.process .process-img {width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--c-primary); position: relative;}
.process .process-img img {transition: var(--trans-5);}
.process .box:hover .process-img img {animation-name: wobble-horizontal-hover; animation-duration: 1s; animation-timing-function: ease-in-out;animation-iteration-count: 1;}
.process .process-img::before {border: 5px solid var(--_c-icon-br); border-radius: 50%; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; content: "";} 
.process .content > :nth-child(3) { font-size: calc(var(--fs-lg, 55px) - 5px); font-weight: 500; line-height: var(--lh-lg, 50px); -webkit-text-stroke: 1px #ffffffb3; transition: var(--trans-5);}
.process .box:hover .content > :nth-child(3) {-webkit-text-stroke: 1px var(--c-primary);}
.process .box .shape {height: 5px; position: absolute; top: 50%; left: 25px; right: 80px; background-color: #fff; transform: translateY(-50%); opacity: .20; z-index: -1; transition: var(--trans-5);}
.process .box .shape::after {width: 20px; height: 20px; background-color: #fff; position: absolute; top: -8px; right: -10px; clip-path: polygon(0 0, 0 100%, 100% 50%); transition: var(--trans-5); content: "";}
.process .box:hover .shape {background-color: var(--c-primary);  opacity: 1;}
.process .box:hover .shape::after {background-color: var(--c-primary);}
.process .box > :nth-child(3) {font-size: calc(var(--fs-xs, 24px) - 2px); line-height: 32px; text-transform: unset; color: var(--c-primary); margin-block: 33px 17px;}
.process .box p {color: #ffffffb3;}


/* BOOK */
/* .book {margin-top: 90px;} */
.book .container {max-width: 1680px; background-color: var(--c-heading); padding-inline: unset;   position: relative; z-index: 1;}
.book .container::before {width: 100%; height: 100%; background: no-repeat center / cover url("../images/book-bg.webp"); border-radius: 30px; position: absolute; top: 0; left: 0; opacity: 0.08; content: ""; z-index: -1;}
.book .wrapper {width: fit-content; display: grid; grid-template-columns: minmax(230px, 660px) minmax(510px, 660px); margin-inline: auto;}
.book .person-img { position: relative;}
.book .person-img img {width: 100%; animation: leftRight 4s ease-in-out infinite;}
.book .box {height: fit-content; background-color: #fff; border-bottom: 5px solid var(--c-primary); border-radius: 20px; margin-left: 60px;}
.book .box > :first-child {font-size: var(--fs-md, 45px); line-height: 55px; text-align: center; background-color: var(--c-primary); padding-block: 17.5px; position: relative; z-index: 1;}
.book .box > :first-child::after {width: 100%; height: 100%; background: no-repeat center / cover url("../images/book-shape-two.webp"); position: absolute; top: 0; left: 0; opacity: 0.05; z-index: -1; content: "";}
.book .box form {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 55px 30px 60px;}
.book .box form > :nth-child(5) {
    grid-column: 1 / -1; 
}
.d-none{display:none;}
.book form .btn__primary {width: fit-content;}


@keyframes leftRight {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0px);
    }  
} 
.book .wrapper > :first-child {position: relative;}
.book .arrow-img {position: absolute; top: 30px; right: -126px; transform: translate(-50%, 50%); }
.book .arrow-img img {animation-name: float-bob-x; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear;}

@media only screen and (max-width: 1400px) {
    .book .person-img {display: none;}
}
@media only screen and (max-width: 1200px) {
    .book .container {padding-inline: 15px;}
}
@media only screen and (max-width: 991px) {
    .book .wrapper > :first-child {display: none;}
    .book .wrapper {grid-template-columns: 1fr; padding-block: 80px;}
    .book .box {margin-left: unset; overflow: hidden;}
    .book .box form {padding: 35px 30px 35px;}
}
@media only screen and (max-width: 768px) {
    .book {margin-top: 60px;}
    .book .wrapper {padding-block: 60px;}
}
@media only screen and (max-width: 576px) {
    .book {margin-top: 45px;}
    .book .box > :first-child {line-height: 40px;}
    .book .wrapper {padding-block: 45px; width: 100%;}
    .book .box form {grid-template-columns: 1fr;}
}



/* CHOOSE */
.choose {padding-top: 120px; position: relative;}
.choose::before {width: 481px; height: 448px; background-color: var(--_c-bg); position: absolute; right: 0; bottom: -100px; filter: blur(150px); border-radius: 50%; z-index: -1; content: "";}
.choose::after {width: 481px; height: 448px; background-color: var(--_c-bg); position: absolute; left: -221px; top: 50px; filter: blur(150px); border-radius: 50%; z-index: -1; content: "";}
.choose .top-text {display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;}
.choose .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.choose .container > :nth-child(2) {max-width: 1000px; line-height: 55px; font-size: var(--fs-md, 45px); text-align: center; margin-inline: auto; margin-block: 7px 49px;}
.choose .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.choose .wrapper .box {position: relative; margin-bottom: 30px;}
.choose .choose-img {width: 70px; height: 70px; display: flex; align-items: center;justify-content: center; border-radius: 50%; background-color: var(--c-primary); position: absolute; top: 15px; right: 15px; z-index: 1;}
.choose .choose-img::before {border: 5px solid var(--_c-icon-br); border-radius: 50%; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; content: "";}
.choose .choose-img img {transition: var(--trans-5);}
.choose .box:hover .choose-img img {animation-name: wobble-horizontal-hover; animation-duration: 1s; animation-timing-function: ease-in-out;animation-iteration-count: 1;}
@keyframes wobble-horizontal-hover {
    16.65% {
        transform: translateX(5px);
    }
    33.3% {
        transform: translateX(-3px);
    }
    49.95% {
        transform: translateX(4px);
    }
    66.6% {
        transform: translateX(-2px);
    }
    83.25% {
        transform: translateX(1px);
    }
    100% {
        transform: translateX(0);
    }
}
.choose .content {background-color: var(--c-heading); padding: 92px 30px 113px; mask: url("../images/choose-bg.webp"); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; border-radius: 20px; }
.choose .content > :first-child {font-size: calc(var(--fs-xs, 24px) - 2px); line-height: var(--lh-md, 34px); color: #fff; text-align: center; margin-bottom: 17px;}
.choose .content > :nth-child(2) {color: #ffffffb3; text-align: center;}
.choose .box .btn__primary {position: absolute; bottom: 10px; left: 25px; z-index: 2;}

@media only screen and (max-width: 1200px) {
    .choose .wrapper {max-width: 960px; margin-inline: auto; grid-template-columns: repeat(2, 1fr); gap: 15px;}
}
@media only screen and (max-width: 991px) {
    .choose .wrapper .box {margin-bottom: unset;}
    .choose {padding-top: 90px;}
}
@media only screen and (max-width: 768px) {
    .choose {padding-top: 60px; margin-bottom: 30px;}
    .choose .wrapper .box {background-color: var(--c-heading); padding: 20px 15px; border-radius: 20px;}
    .choose .content {mask: unset; padding: unset; background-color: unset;}
    .choose .choose-img {position: relative; top: unset; right: unset;} 
    .choose .box .btn__primary {position: relative; left: unset; bottom: unset; margin-top: 18px; margin-inline: auto; display: block;} 
    .choose .box .btn__primary:hover {color: var(--c-heading);}
    .choose .box .btn__primary:hover img {filter: var(--c-filter-primary);}
    .choose .box .btn__primary::before {background-color: #fff; }
    .choose .choose-img {margin-bottom: 10px;}
}
@media only screen and (max-width: 576px) {
    .choose {padding-top: 45px;}
    .choose .wrapper {grid-template-columns: 1fr;}
    .choose .container > :nth-child(2) {line-height: 40px; margin-block: 7px 30px;}
    .choose .wrapper .box {max-width: 395px; margin-inline: auto;}
}


/* POPULAR CAR */
.popular { padding-block: 120px; background-color: var(--c-heading); position: relative; z-index: 2; overflow: hidden;}
.popular .slider {display: flex; gap: 20px;}
.popular .slider-card {position: relative;}
.popular::before {width: 100%; height: 100%; background-image: url("../images/popular-bg.webp"); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-attachment: fixed; position: absolute; top: 0; left: 0; content: ""; z-index: -1; opacity: 0.01;} 
.popular .top-text {display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;}
.popular .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.popular .content > :nth-child(2) {line-height: 55px; font-size: var(--fs-md, 45px); margin-block: 7px 49px; color: #fff; text-align: center; margin-inline: auto;}
.popular .slider-card .mask { display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.05); mask: url("../images/popular-markup.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; border-radius: 20px; width: 100%; height: 100%; position: relative; z-index: 1; padding-block: 80px;}
.popular .slider-card .mask > :first-child {font-size: calc(var(--fs-base, 16px) + 4px); line-height: 20px; color: #fff; font-weight: 700;}
.popular .slider-card .cars {position: absolute; top: 12px; right: 10px;} 
.popular .slider-card .cars img {filter: var(--c-filter-secondary);}
.popular .slider-card .cars-num {font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 400; position: absolute; bottom: 20px; left: 5px; color: #fff;}


@media only screen and (max-width: 991px) {
    .popular {padding-block: 90px;}
}
@media only screen and (max-width: 768px){
    .popular {padding-block: 60px;}
    .popular .slider-card .mask {mask: unset; padding-block: 60px;}
    .popular .slider-card .cars {right: 20px;}
    .popular .slider-card .cars-num {left: 20px;}
}
@media only screen and (max-width: 576px) {
    .popular {padding-block: 45px;}
    .popular .content > :nth-child(2) {line-height: 40px; margin-block: 7px 30px;}
}
@media only screen and (max-width: 475px) {
    .popular .slider-card {width: 100%; min-width: 100% !important;}
}


/* CHECKOUT */
.checkout {padding-top: 100px; overflow: hidden;}
.checkout .top-text {display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;}
.checkout .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.checkout .content > :nth-child(2) {line-height: 55px; text-align: center; font-size: var(--fs-md, 45px); margin-inline: auto; margin-block: 7px 49px;}
.checkout .carousel {width: 120%; margin-inline: -10%; overflow: hidden; position: relative;} 
.checkout .slider {display: flex; gap: 30px; padding-block: 40px 120px;}
.checkout .slider-card {border-radius: 20px 20px 0 0;}
.checkout .top {position: relative; overflow: hidden; border-radius: 20px 20px 0 0;}
.checkout .top::before { width: 100%; height: 100%;  background: var(--_c-blog-after); position: absolute; top: 0; left: 0; transition-delay: .1s; transition: all 0.7s ease-in; border-radius:20px 20px 0 0; opacity: 0; z-index: 1; content: "";}
.checkout .slider-card:hover .top::before {opacity: 1;}
.checkout .top > img {width: 100%; object-fit: cover; transform: scale(1.05); transition: var(--trans-5);}
.checkout .slider-card:hover .top > img {transform: scale(1);}
.checkout .top .name {background-color: var(--c-primary); border-radius: 0 15px 0 0; padding: 8px 25px; position: absolute; bottom: 0; left: 0; z-index: 2;}
.checkout .bottom {padding: 23px 25px 30px; background-color: #fff; box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 7%); border-radius: 0 0 20px 20px;}
.checkout .bottom > :first-child {font-size: var(--fs-xs, 24px); font-weight: 700; line-height: 34px; font-family: var(--ff-primary);}
.checkout .bottom ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 0; margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--_c-a-br);}
.checkout .bottom ul li {display: flex; align-items: center; justify-content: start; gap: 10px; color: var(--c-text);}
.checkout .bottom ul li img {filter: var(--_c-filter-img);}
.checkout .starting {display: flex; align-items: center; justify-content: center; background-color: #e3e3e366; gap: 5px; padding-block: 10px; margin-block: 23px 30px; border-radius: 20px 0 20px 0; font-size: calc(var(--fs-base, 16px) + 4px); font-weight: 500; line-height: 30px;}
.checkout .starting > :first-child {color: var(--c-primary);}
.checkout .slider-card .btn__primary {display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; padding: 8px 30px 8px;}
.checkout .tabs {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; }
.checkout .tabs button { height: 40px; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: var(--c-heading); padding: 8px 16px 8px;   border-radius: 5px; overflow: hidden; z-index: 1;}
.checkout .tabs button::after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--c-primary);    background-position: center top; transition-delay: .1s; transition: var(--trans-5); transform-origin: top; transform-style: preserve-3d;    transform: scaleY(0); z-index: -1;}
.checkout .tabs button:hover::after {transform: scaleY(1.0);}
.checkout .tabs button.btn-active::after {transform: scaleY(1.0);}
.checkout .carousel {display: none;}
.checkout .carousel.tab-active {display: block;}
.checkout .carousel-dots {display: flex; justify-content: center; margin-top: 1rem; gap: 8px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 70px; z-index: 2;}
.checkout .dot-btn {width: 50px; height: 10px; border-radius: 5px; background-color: var(--c-heading); cursor: pointer; transition: all 0.1s linear;}
.checkout .dot-btn.active {width: 145px; background-color:var(--c-primary);}

@media only screen and (max-width: 1400px) {
    .checkout .slider {gap: 20px;}
    .checkout .bottom {padding: 23px 12px 30px;}
    .checkout .bottom ul {grid-template-columns: repeat(2, 1fr);}
    .checkout .bottom ul li {gap: 8px;}
}
@media only screen and (max-width: 1200px) {
    .checkout .slider-card {min-width: calc(25% - 16px) !important;}
}
@media only screen and (max-width: 991px) {
    .checkout {padding-top: 90px;}
    .checkout .carousel {width: 100%; padding-inline: 15px; margin-inline: unset;}
    .checkout .slider-card {min-width: calc(33.3333% - 13.3333px) !important;}
    .checkout .starting {font-size: calc(var(--fs-base, 16px) + 1px); margin-block: 23px 17px;}
}
@media only screen and (max-width: 768px) {
    .checkout {padding-top: 60px;}
    .checkout .slider-card {min-width: calc(50% - 10px) !important; border: 1px solid var(--_c-a-br); border-radius: 20px;}
    .checkout .bottom {box-shadow: unset;}
    .checkout .slider {padding-block: 40px 70px;}
    .checkout .carousel-dots {bottom: 30px;}
}
@media only screen and (max-width: 576px) {
    .checkout {padding-top: 45px;}
    .checkout .tabs {gap: 10px;}
    .checkout .content > :nth-child(2) {line-height: 40px; margin-block: 7px 30px;}
    .checkout .slider-card {min-width: 100% !important;}
    .checkout .carousel {max-width: 450px; margin-inline: auto;}
    .checkout .dot-btn.active {width: 100px;}
}

/* EMERGENCY */
.emergency .content {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background-color: var(--c-primary); padding: 57px 60px 57px; border-radius: 0 20px 0 0; position: relative; z-index: 1;}
.emergency .bg {background: no-repeat center / cover url("../images/emergency.webp"); position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.05;}
.emergency .content::before {position: absolute; top: 0; left: -180px; border-bottom: 180px solid var(--c-primary); border-left: 180px solid transparent; border-right: 0px solid transparent; content: "";}
.emergency .content::after {width: 55%; position: absolute; right: 0; top: 0; bottom: 0; background-color: var(--c-heading); clip-path: polygon(0 0, 100% 0%, 100% 100%, 18% 100%); z-index: -1; content: ""; border-radius: 0 20px 0 0;}
.emergency .text > :first-child {display: block; font-size: var(--fs-base, 16px); font-weight: 500; color: var(--c-heading); margin-bottom: 8px;}
.emergency .text > :nth-child(2) {font-size: var(--fs-sm, 30px); font-weight: 600; font-family: var(--ff-primary); line-height: 1em;}
.emergency .call-emergency {display: flex; align-items: center; justify-content: center; gap: 10px;}
.emergency .call-emergency > :first-child {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #ffffffe6; position: relative; border-radius: 50%;}
.emergency .call-emergency > :first-child::before { position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border: 3px solid #ffffff4d; border-radius: 50%; content: "";}
.emergency .content ul > * {color: var(--c-primary);}
.emergency .content ul > :first-child {font-weight: 500;}
.emergency .content ul > :nth-child(2) {display: block; font-size: calc(var(--fs-base, 16px) + 4px); line-height: 1em; font-weight: 700; font-family: var(--ff-primary); margin-top: 3px;}
.emergency .content .btn__primary::before {background-color: #fff;}
.emergency .content .btn__primary:hover {color: var(--c-heading);}
.emergency .content .btn__primary:hover img {filter: unset;}

@media only screen and (max-width: 991px) {
    .emergency .content::before {content: unset;}
    .emergency .content {overflow: hidden; gap: 15px; border-radius: 20px 20px 0 0; padding: 40px 60px 40px;} 
    .emergency .content::after {content: unset;}
    .emergency .content ul > * {color: var(--c-heading);}
    .emergency .btn__primary {background-color: var(--c-heading); color: #fff;}
    .emergency .btn__primary img {filter: invert(1);}
}
@media only screen and (max-width: 576px) {
    .emergency .text > * {display: block; text-align: center;}
    .emergency .content {flex-direction: column; justify-content: center; padding: 20px;} 
}


/* REVIEW */
.reviews {padding-block: 120px; overflow: hidden;}
.reviews .carousel .container {position: relative;}
.reviews .slider {width: 120%; margin-inline: -10%;}
.reviews .top-text {display: flex; align-items: center; justify-content: start; gap: 10px; flex-wrap: wrap;}
.reviews .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.reviews .content > :nth-child(2) {max-width: 500px; line-height: 55px; font-size: var(--fs-md, 45px); margin-block: 7px 49px;}
.reviews .slider {display: flex; overflow: hidden; gap: 30px;}
.reviews .slider-card {border: 1px solid var(--_c-br); border-radius: 20px 0 20px 20px; padding: 26px 30px 25px; position: relative; z-index: 1;} 
.reviews .slider-card ul {display: flex; align-items: center; gap: 5px; margin-top: 10px;}
.reviews .quote-icon {width: 60px; height: 60px; background-color: var(--c-primary); display: flex; align-items: center; justify-content: center; border-radius: 50% 0 50% 50%; position: absolute; top: 0; right: 0; transition: var(--trans-5);}
.reviews .quote-icon img {width: 32px; height: 22px; object-fit: cover; transition: var(--trans-5);}
.reviews .slider-card:hover .quote-icon {background-color: var(--c-heading);}
.reviews .slider-card:hover .quote-icon img {filter: invert(1);}
.reviews .customer {display: flex; align-items: center; justify-content: start; gap: 20px; margin-bottom: 20px;}
.reviews .text-content > :first-child {display: block; line-height: 20px; font-size: calc(var(--fs-base, 16px) + 4px); font-weight: 700;}
.reviews .text-content > :nth-child(2) {color: var(--c-text);}
.reviews .customer img {border-radius: 50%;}
.reviews .slider-card ul img {filter: var(--c-filter-secondary);}
.reviews .btns {display: flex; align-items: center; justify-content: center; position: absolute; top: -155px; right: 15px; z-index: 100; gap: 10px;}
.reviews .btns button {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--c-primary); transition: var(--trans-5); border-radius: 50%;}
.reviews .btns button img {filter: invert(1);}
.reviews .btns button:hover {background-color: var(--c-heading);}
.reviews .carousel-dots {display: none;}

@media only screen and (max-width: 1440px) {
    .reviews .slider {gap: 15px;}
    .reviews .slider-card {min-width: calc(25% - 10px) !important;}
}
@media only screen and (max-width: 1200px) {
    .reviews .carousel {padding-inline: 15px;}
    .reviews .slider-card {min-width: calc(33% - 10px) !important; padding: 26px 10px 25px;}
    .reviews .slider {width: 100%; margin-inline: unset;}
    .reviews .text-content > :first-child {display: block; max-width: 97px;}
}
@media only screen and (max-width: 991px) {
    .reviews {padding-block: 90px;}
    .reviews .customer {gap: 10px;}
    .reviews .slider-card {min-width: calc(50% - 10px) !important;}
}
@media only screen and (max-width: 768px) {
    .reviews {padding-block: 60px 100px;}
    .reviews .carousel {position: relative;}
    .reviews .carousel .container {position: unset;}
    .reviews .btns {top: unset; right: unset; left: 50%; bottom: -70px; transform: translateX(-50%);}
}
@media only screen and (max-width: 576px) {
    .reviews {padding-block: 45px 100px;}
    .reviews .btns button {width: 40px; height: 40px;}
    .reviews .content > :nth-child(2) {line-height: 40px; margin-block: 7px 30px;}
    .reviews .slider-card {min-width: calc(100% + 0px) !important;}
}


/* ACCORDION SECTION */
.faq {padding-block: 120px; overflow: hidden; position: relative; z-index: 1;}
.faq::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(227, 227, 227, 0.1); z-index: -1;}
.faq .faq-one {width: 730px; height: 765px; background-color: var(--_c-bg); position: absolute; top: -100px; left: -70px; filter: blur(150px); border-radius: 50%; z-index: -1; content: ""; opacity: 0.4;}
.faq .faq-two {width: 730px; height: 765px; background-color: var(--_c-bg); position: absolute; right: 100px; bottom: -255px; filter: blur(150px); border-radius: 50%; z-index: -1; content: ""; opacity: 0.4;}
.faq .top-text {display: flex; align-items: center; justify-content: start; gap: 10px; flex-wrap: wrap;}
.faq .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.faq .content > :nth-child(2) {max-width: 1000px; line-height: 55px; font-size: var(--fs-md, 45px); margin-inline: auto; margin-block: 7px 49px;}
.faq .faq-img {width: fit-content; margin-right: auto; position: relative;}
.faq .faq-img img {border-radius: var(--br-base);}
.faq .experience {position: absolute; bottom: 30px; right: -70px; background: linear-gradient(270deg, #FFB51D 45%, #ffffff 100%); max-width: 180px; width: 100%; text-align: center; padding: 30px 0 30px; border-radius: var(--br-base); z-index: 1;}
.faq .experience > :first-child {font-size: calc(var(--fs-md, 45px) + 5px); line-height: 55px; display: block;}
.faq .experience > :nth-child(2) {max-width: 70px; font-weight: 500; display: block; margin-inline: auto;}
.faq .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.faq .faq-box > :not(:first-child) {margin-top: 20px;}
.faq .accordion {background-color: #fff; border: 1px solid #13122226; border-radius: 20px;}
.faq .accordion button {width: 100%; font-size: calc(var(--fs-xs, 24px) - 4px); font-family: var(--ff-primary); font-weight: 600; text-align: left; color: var(--c-heading); padding: 23px 68px 23px 25px; position: relative;}
.faq .accordion button::after {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: url("../images/icons/chevron-right-white.svg") no-repeat center / 9px, var(--c-primary); position: absolute; inset: 0; margin-block: auto; margin-inline: auto 25px; content: ""; border-radius: 50%; transition: var(--trans-3);}
.faq .accordion button.active::after {background: url("../images/icons/chevron-right-white.svg") no-repeat center / 9px, var(--c-heading); transform: rotate(90deg);}
.faq .panel { padding: 0 25px 28px;}
.faq .panel[aria-hidden="true"] {display: none;}
.faq .panel[aria-hidden="false"] {display: block;}


/* INTERSET SECTION */
.interset {background-color: var(--c-primary); padding-block: 78px 81px; overflow: hidden; position: relative; z-index: 1;}
.interset::after {width: 100%; height: 100%; background: no-repeat center / cover url("../images/interset-bg.webp"); position: absolute; top: 0; left: 0; opacity: 0.05; content: ""; z-index: -1;}
.interset .wrapper {display: flex; align-items: center;  justify-content: space-between;}
.interset .content > :first-child {font-size: calc(var(--fs-xs, 24px) - 4px); font-weight: 500;}
.interset .content > :nth-child(2) {font-size: var(--fs-md, 45px); line-height: 55px; margin-top: 17px;}
.interset .btns {display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;}
.interset .btns > :first-child {background-color: #fff;}
.interset .btns > :nth-child(2) {background-color: var(--c-heading); color: #fff;}
.interset .btns > :nth-child(2) img {filter: invert(1);}
.interset .btns > :nth-child(2):hover {color: var(--c-heading);}
.interset .btns > :nth-child(2)::before {background-color: #fff;}
.interset .btns > :nth-child(2):hover img {filter: var(--c-filter-primary);}

@media only screen and (max-width: 991px) {
    .interset .content > * {display: block; text-align: center;}
    .interset .wrapper {flex-direction: column; gap: 30px;}
}
@media only screen and (max-width: 768px) {
    .interset {padding-block: 60px;}
}

@media only screen and (max-width: 576px) {
    .interset {padding-block: 45px;}
    .interset .wrapper {gap: 15px;} 
    .interset .btns {gap: 15px;}   
    .interset .content > :first-child {font-size: 16px;}
    .interset .content > :nth-child(2) {line-height: 40px; margin-top: 10px;}
    .interset .btns {gap: 10px;}
}

/* PREMIUM DRIVER */
.premium {background: linear-gradient(180deg, #FFFFFF 0%, #EFF4FB 46.5%, #FFFFFF 100%); overflow: hidden; padding-block: 120px; position: relative; z-index: 1;}
.premium::before {width: 481px; height: 448px; background-color: var(--_c-bg); position: absolute; right: 0; bottom: -100px; filter: blur(150px); border-radius: 50%; z-index: -1; content: "";}
.premium::after {width: 481px; height: 448px; background-color: var(--_c-bg); position: absolute; left: -221px; top: 50px; filter: blur(150px); border-radius: 50%; z-index: -1; content: "";}
.premium .top-text {display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;}
.premium .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.premium .container > :nth-child(2) {max-width: 800px; line-height: 55px; font-size: var(--fs-md, 45px); text-align: center; margin-inline: auto; margin-block: 7px 49px;}
.premium .box {display: grid; grid-template-columns: minmax(403px, 478px) minmax(420px, 681px); gap: 30px; background-color: rgba(255, 181, 29, 0.10); padding: 50px 50px 40px; border-radius: 20px;}
.premium ul button { width: 100%; display: flex; align-items: center; justify-content: start; gap: 20px; padding: 22px 25px 21px; background-color: #fff; border: 1px solid var(--_c-br); border-radius: 20px; position: relative; z-index: 1;}
.premium ul button.active {border-color: var(--c-primary);}
.premium ul button::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; background-color: var(--c-primary); transform: scaleX(0.7) rotateX(20deg); opacity: 0; transition: var(--trans-4); z-index: -1;}
.premium ul button.active::before {transform: scaleX(1.0) rotateX(0deg); transition: var(--trans-4); opacity: 1;}
.premium ul > :not(:first-child) button {margin-top: 10px;}
.premium ul button > :first-child {width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; flex: none; border: 1px solid var(--c-primary); border-radius: 50%; transition: var(--trans-5);}
.premium ul button.active > :first-child {border-color: #fff;}
.premium ul button > :first-child img {width: 58px; height: 58px; object-fit: cover; border-radius: 50%;}
.premium .driver > :first-child {display: block; font-size: calc(var(--fs-xs, 24px) - 4px); color: var(--c-heading); transition: var(--trans-5);}
.premium button.active .driver > :first-child {color: #fff;}
.premium .driver > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); color: var(--c-text); transition: var(--trans-5);}
.premium button.active .driver > :nth-child(2) {color: #fff;}
.premium .driver > * {display: block; text-align: start;}
.premium .experience {display: flex; align-items: center; justify-content: start; gap: 8px; background: linear-gradient(270deg, rgba(19, 18, 34, 0.12) 0%, rgba(19, 18, 34, 0) 100%); padding: 4px 22px 4px 14px; position: absolute; top: 20px; right: 0;}
.premium .experience > :first-child {font-size: calc(var(--fs-sm, 30px) + 2px); font-weight: 700; font-family: var(--ff-primary); line-height: var(--lh-md, 34px); letter-spacing: -1.28px; color: var(--c-primary); transition: var(--trans-5);}
.premium button.active .experience > :first-child {color: #fff;}
.premium .experience > :nth-child(2) > * {display: block; text-align: start; font-size: var(--fs-2xs, 14px); font-weight: 500; line-height: 18px; color: var(--c-heading); transition: var(--trans-5);}
.premium button.active .experience > :nth-child(2) > * {color: #fff;}
.premium .driver-img {position: relative; border-radius: 12px;}
.premium .driver-img::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 37.4%, rgba(19, 18, 34, 0.69) 85.4%); border-radius: 12px;}
.premium .driver-img > img {width: 100%; height: 100%; object-fit: cover; border-radius: 12px;}
.premium .driver-img ul {display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; position: absolute; bottom: 30px; left: 0; right: 0; z-index: 2; }
.premium .driver-img ul a {width: 40px; height: 40px;; display: flex; align-items: center; justify-content: center; border: 1px solid #626F82; border-radius: 50%; transition: var(--trans-5);}
.premium .driver-img ul a:hover {background-color: var(--c-primary); border-color: var(--c-primary);}
.premium .driver-img ul a img {filter: invert(1); border-radius: 0;}


/* ANIMATION FOR CUSTOM MARQUEE */
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
.marquee:hover .wrapper {
    animation-play-state: paused;
}

@media only screen and (max-width: 1200px) {
    .premium .box {gap: 15px; padding: 35px 25px 35px;}
}
@media only screen and (max-width: 991px) {
    .premium {padding-block: 90px;}
    .premium .container {max-width: 720px;}
    .premium .box {grid-template-columns: 1fr;}
}
@media only screen and (max-width: 768px) {
    .premium {padding-block: 60px;}
}
@media only screen and (max-width: 576px) {
    .premium .container > :nth-child(2) {line-height: 40px; margin-block: 7px 30px;}
    .premium ul button > :first-child {width: 65px; height: 65px;}
    .premium ul button > :first-child img {width: 55px; height: 55px;}
    .premium {padding-block: 45px;}
    .premium ul button {gap: 10px; padding: 15px;}
    .premium .box {padding: 15px;}
}
@media only screen and (max-width: 475px) {
    .premium ul button {flex-direction: column; align-items: start;}
}



/* DOWNLOAD */

.download {background-color: var(--c-heading); padding-block: 120px; position: relative; z-index: 1;}
.download::before {width: 100%; height: 100%; background: no-repeat center / cover url("../images/download-bg.webp"); position: absolute; top: 0; left: 0; content: ""; z-index: -1; opacity: 0.10;} 
.download .wrapper {display: grid; grid-template-columns: minmax(549px, 740px) minmax(380px, 520px); gap: 30px;}
.download .downloading-app > :first-child {font-size: calc(var(--fs-base, 16px) + 4px); line-height: 20px; font-weight: 500; color: var(--c-primary); }
.download .downloading-app > :nth-child(2) {font-size: calc(var(--fs-lg, 55px) - 5px); line-height: 55px; color: var(--c-primary); margin-block: 15px 8px;}
.download .downloading-app > p {font-size: calc(var(--fs-base, 16px) + 2px); color: #fff; line-height: var(--lh-sm, 28px);}
.download .btns {display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 42px;}
.download .btns > * img {filter: unset;}
.download .btns > *::before {content: unset;}
.download .download-img {max-width: 470px; margin-left: auto; position: relative;}
.download .download-car {position: absolute; bottom: -85px; right: 35px; z-index: -1; animation-name: float-bob-x; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear;}

@keyframes float-bob-x {
    0% {
        transform: translateX(-30px);
    } 50% {
        transform: translateX(-10px);
    } 100% {
        transform: translateX(-30px);
    }
} 

@media only screen and (max-width: 991px) {
    .download .container {max-width: 720px;}
    .download .wrapper {grid-template-columns: 1fr; gap: 20px;}
    .download .download-img {margin-left: unset;} 
}

@media only screen and (max-width: 768px) {
    .download .download-img {margin-inline: auto;}
    .download .download-img > img {width: 330px; height: 330px; object-fit: contain;}
    .download {padding-block: 90px;}
    .download .downloading-app > :nth-child(2) {font-size: var(--fs-md, 45px);}
    .download .download-car {bottom: -56px; right: 55px;}
    .download .download-car > img {width: 255px; object-fit: contain;}
}

@media only screen and (max-width: 576px) {
    .download {padding-block: 60px 90px;}
    .download .btns {margin-top: 15px; gap: 10px;}
    .download .btns > * img {width: 100px; object-fit: contain;}
    .download .download-car {bottom: -44px;}
    .download .download-img > img {width: 280px; height: 280px;}
    .download .downloading-app > :nth-child(2) {line-height: 40px;}
}

@media only screen and (max-width: 475px) {
    .download {padding-block: 45px 90px;}
}

/* BRAND */
.brand {border-bottom: 1px solid var(--_c-br); padding-block: 80px;}
.brand .container {padding-inline: 0;}
.brand .slider {display: flex; overflow: hidden; gap: 15px;}
.brand .slider .slider-card {display: flex; align-items: center; justify-content: center;}
.brand .slider-card img {opacity: .5; transform: translate(1.05); transition: var(--trans-5);}
.brand .slider-card:hover img {opacity: 1;}
.brand .carousel-dots {display: none;}

@media only screen and (max-width: 768px) {
    .brand {padding-block: 60px;}
}
@media only screen and (max-width: 576px) {
    .brand {padding-block: 45px;}
}


/* BLOG */
.blog {padding-top: 120px; position: relative; z-index: 1; overflow: hidden;}
.blog .container {padding-inline: unset;}
.blog::before {width: 481px; height: 448px; background-color: var(--_c-bg); position: absolute; right: 0; bottom: -100px; filter: blur(150px); border-radius: 50%; z-index: -1; content: "";}
.blog::after {width: 481px; height: 448px; background-color: var(--_c-bg); position: absolute; left: -221px; top: 50px; filter: blur(150px); border-radius: 50%; z-index: -1; content: "";}
.blog .top-text {display: flex; align-items: center; justify-content: start; gap: 10px; flex-wrap: wrap;}
.blog .top-text > :nth-child(2) {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--c-primary);}
.blog .content > :nth-child(2) {font-size: var(--fs-md, 45px); line-height: 55px; margin-top: 7px;}
.blog .slider {display: flex; overflow-x: hidden; padding-block: 49px 120px; padding-inline: 15px;}
.blog .slider-card {background-color: #fff; margin-inline: 15px; padding: 20px 19px 22px; border: 1px solid var(--_c-br); border-radius: 20px; box-shadow: var(--_c-shadow); transition: var(--trans-5);}

.blog .slider-card:hover {transform: translateY(-10px);}
.blog .slider-card .top {position: relative; z-index: 1;}
.blog .slider-card .top-img {position: relative; z-index: 1; overflow: hidden; border-radius: 20px 20px 0 20px;}
.blog .slider-card .top-img::before {width: 100%; height: 100%; border-radius: 20px; position: absolute; top: 0; left: 0; transition: 0.7s all ease-out; transition-delay: .1s; background: var(--_c-blog-after); opacity: 0; z-index: 1; content: "";}
.blog .slider-card:hover .top-img::before {opacity: 1;}
.blog .slider-card .top img {width: 100%; width: 100%; border-radius: 20px 20px 0 20px; transition: var(--trans-5); transform: scale(1.05);}
.blog .slider-card:hover .top img {transform: scale(1);}
.blog .slider-card .top ul {border-radius: 10px 0 0 10px; position: absolute; bottom: -40px; right: 0; z-index: 2; overflow: hidden;}
.blog .slider-card .top ul > :first-child {width: 60px; height: 50px; font-size: calc(var(--fs-xs, 24px) + 1px); font-weight: 600; display: flex; align-items: center; justify-content: center; background-color: var(--c-primary); color: #fff; position: relative;}
.blog .slider-card .top ul > :last-child {width: 60px; height: 40px; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 600; display: flex; align-items: center; justify-content: center; background-color: var(--_c-bar); color: #000; position: relative;}
.blog .showcase {display: flex; align-items: center; justify-content: center; font-family: var(--ff-primary); font-size: var(--fs-base, 16px); font-weight: 500; line-height: 16px; text-transform: capitalize; color: #fff; background-color: var(--c-primary); border-radius: 18px; padding: 9px 17px 9px; position: absolute; bottom: 10px; left: 10px; z-index: 5; transition: 0.7s all ease-out; transform: translateY(50px); opacity: 0;}
.blog .slider-card:hover .showcase {opacity: 1; transform: translateY(0px);}
.blog .slider-card .bottom {margin-top: 24px;}
.blog .slider-card .bottom ul {display: flex; align-items: center; justify-content: start; gap: 20px;}
.blog .slider-card .bottom ul a {display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-base, 16px); font-weight: 400; color: var(--c-text);}
.blog .slider-card .bottom ul a img {filter: var(--c-filter-secondary);}
.blog .slider-card .heading-link {font-size: var(--fs-xs, 24px); font-weight: 700; line-height: var(--lh-md, 34px); margin-block: 15px 14px; transition: var(--trans-5);}
.blog .slider-card .heading-link:hover {color: var(--c-primary);}
.blog .slider-card .bottom > p {margin-bottom: 13px;}
.blog .slider-card .read-link {display: flex; align-items: center; justify-content: start; font-size: var(--fs-base, 16px); font-weight: 500; gap: 5px; transition: var(--trans-5);}
.blog .slider-card .read-link img {transition: var(--trans-5);}
.blog .slider-card .read-link:hover {color: var(--c-primary);}
.blog .slider-card .read-link:hover img {filter: var(--c-filter-secondary);}
.blog .carousel {position: relative;}
.blog .btns {display: flex; align-items: center; justify-content: center; position: absolute; top: -51px; right: 15px; z-index: 100; gap: 10px;}
.blog .btns button {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--c-primary); transition: var(--trans-5); border-radius: 50%;}
.blog .btns button img {filter: invert(1);}
.blog .btns button:hover {background-color: var(--c-heading);}
.blog .carousel-dots {display: none;}

@media only screen and (max-width: 991px) {
    .blog {padding-top: 90px;}
    .blog .content {padding-inline: 15px;}
    .blog .slider {justify-content: center; gap: 20px; padding-block: 49px 90px;}
    .blog .slider-card {margin-inline: unset;}
}
@media only screen and (max-width: 768px) {
    .blog {padding-top: 60px;}
    .blog .slider {padding-block: 40px 60px; gap: 12px;}
    .blog .slider-card {padding: 15px;}
    .blog .slider-card .bottom ul {gap: 30px 12px;}
}
@media only screen and (max-width: 576px) {
    .blog {padding-top: 45px;}
    .blog .slider {justify-content: unset; gap: 0; padding-inline: 0; margin-inline: 15px;}
    .blog .slider-card .top ul > :first-child {width: 50px; height: 40px; font-size: var(--fs-base, 16px);}
    .blog .slider-card .top ul > :last-child {width: 50px; font-size: var(--fs-base, 16px);}
    .blog .wrapper {gap: 30px 10px;}
    .blog .content > :nth-child(2) {line-height: 40px;}
    .blog .btns {gap: 8px;}
    .blog .btns button {width: 40px; height: 40px;} 
}
@media only screen and (max-width: 475px) {
    .blog .wrapper {grid-template-columns: 1fr;}
    .blog .slider {padding-block: 40px 85px;}
    .blog .slider-card .top ul > :first-child {width: 40px; height: 35px; font-size: var(--fs-base, 16px);}
    .blog .slider-card .top ul > :last-child {width: 40px; height: 35px; font-size: var(--fs-base, 16px);} 
    .blog .slider-card .heading-link {line-height: 1.2;}
    .blog .btns {height: fit-content; bottom: 20px; top: unset; left: 50%; right: unset; transform: translateX(-50%);}
}   


@media only screen and (max-width: 1200px) {
    /* SERVICE */
    .service .wrapper {gap: 15px;}
    /* ABOUT */
    .about .content {margin-left: 50px;}
    /* PROCESS */
    .process .box > :nth-child(3) {margin-block: 20px 12px;}
    /* FAQ */
    .faq .wrapper {gap: 15px;}
}
@media only screen and (max-width: 991px) {
    /* SERVICE */
    .service .wrapper {grid-template-columns: repeat(2, 1fr);}
    .service .box {margin-bottom: unset;}
    /* ABOUT */
    .about .wrapper {grid-template-columns: 1fr; gap: 60px;}
    .about .about-box {max-width: 600px; margin-right: unset; margin-left: unset; margin-inline: auto;}
    .about :where(.about-five, .about-four, .about-three ) {display: none;}
    .about .content {max-width: 600px; margin-left: unset; margin-inline: auto;}
    .about .contact-info {margin-top: 40px;}
    /* PROCESS */
    .process .wrapper {grid-template-columns: repeat(2, 1fr);}
    .process .box {margin-bottom: unset;}
    /* FAQ */
    .faq .wrapper {max-width: 690px; margin-inline: auto; grid-template-columns: 1fr;}
}
@media only screen and (max-width: 768px) {
    /* SERVICE */
    .service {padding-top: 90px;}
    .service .count {width: 45px; height: 45px;}
    .service .box a {margin-block: 18px 6px;}
    /* ABOUT */
    .about .about-two {display: none;}
    /* PROCESS */
    .process {padding-top: 90px;}
    .process .box {padding: 30px 25px 27px;}
    /* FAQ */
    .faq {padding-block: 90px;}
    .faq .accordion button {font-size: calc(var(--fs-base, 16px) + 2px);}
    .faq .accordion button {padding: 19px 68px 19px 19px;}
    .faq .panel {padding: 0 19px 19px;}
    .faq .accordion button::after {width: 30px; height: 30px; margin-right: 19px;}

}
@media only screen and (max-width: 576px) {
    /* SERVICE */
    .service {padding-top: 60px;}
    .service .box {padding: 25px 20px 30px;}
    .service .container > :nth-child(2) {line-height: 40px; margin-block: 7px 30px;}
    /* ABOUT */
    .about {padding-top: 60px;}
    .about .wrapper {gap: 30px;}
    .about .experience {display: none;}
    .about .content > :nth-child(2) {line-height: 40px; margin-block: 7px 12px;}
    .about .content > p {margin-block: 12px 14px;}
    /* PROCESS */
    .process {padding-top: 60px;}
    .process .container > :nth-child(2) {line-height: 40px; margin-block: 7px 30px;}
    /* FAQ */
    .faq {padding-block: 60px;}
    .faq .content > :nth-child(2) {line-height: 40px; margin-block: 7px 30px;}
    .about .contact-info {gap: 15px;}
}
@media only screen and (max-width: 475px) {
    /* SERVICE */
    .service {padding-top: 45px;}
    /* ABOUT */
    .about {padding-top: 45px;}
    /* PROCESS */
    .process {padding-top: 45px;}
    .process .box {padding: 30px 10px 25px;}
    .process .box .shape {right: 69px;}
    /* FAQ */
    .faq {padding-block: 45px;}
    .faq .experience {right: 0;}
    .faq .faq-img {width: 100%; margin-right: unset;}
    .faq .faq-img img {width: 100%;} 
}
@media only screen and (max-width: 425px) {
    /* SERVICE */
    .service .wrapper {grid-template-columns: 1fr;}
    /* PROCESS */
    .process .wrapper{grid-template-columns: 1fr;}
    /* ABOUT */
    .about .contact-info {flex-direction: column; align-items: start; gap: 10px;}
}