@font-face {
    font-family: 'Kanit';
    src: url('./font/Kanit-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Kanit-semibold';
    src: url('./font/Kanit-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --black: #131423;
    --orange: #E64123;
    --red: #FF0000;
    --white: #FAFAF8;
}

*,
body {
    font-family: "Kanit";
   
    
}
section{
    color: var(--black);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

html,
body {
    margin: 0;
}
#home,
#brandSec,
#featureSec,
#transporteSec,
#experienceSec{
    scroll-margin-top:81px;
}

#contactSec {
    scroll-margin-top:81px;
}


a {
    color: var(--black) ;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}




.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--orange);
    color: var(--white) !important;
    padding: 8px 16px 11px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 21px;
    font-weight: 600;
    line-height: 26px;
    transition: .3s ease-in-out;
    width: 129px;
    height: 40px;
}

.btn-primary img,
header li.btn a img {
    width: 20px;
    aspect-ratio: 1/1;
    display: none;
    transition: .3s ease-in-out;
}

/* .menu-sec .btn-primary {
    width: 129px;
    height: 40px;
    
} */

.for_mobile {
    display: none;
}


header .menu-sec ul a:hover {
    color: var(--orange) ;
}

.btn-primary:hover {
    width: 155px;
    background-color: var(--black);
    color: var(--white) !important;
    transition: .3s ease-in-out;
}

.btn-primary:hover img {
    display: block;
}

.relative {
    position: relative;
}

.text-center {
    text-align: center;
}

section {
    margin-block: 80px;
}


h1 {
    font-family: 'Kanit-semibold';
}

h2 {
    font-family: 'Kanit-semibold';
    font-size: 37px;
    font-weight: 600;
    line-height: 42px;
}

h3 {
    font-family: 'Kanit-semibold';
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    margin-bottom: 40px;
}

.padT40{
    padding-top: 40px;
}
.padB40{
    padding-bottom: 40px;
}
.mobile-menu {
    display: none;
}

header {
    padding-block: 24px;
}

header .logo-sec {
    width: 30%;
}

header .logo-sec img {
    width: 295px;
}

header .menu-sec {
    width: 70%;
}

header .menu-sec ul.main-menu {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 30px;
    margin-block: 0px;
}

header .menu-sec ul a {
    font-size: 21px;
    font-weight: 600;
    line-height: 26px;
    text-decoration: none;
    transition: .3s ease-in-out;
}



header li.btn {
    width: 155px;
    text-align: end;
}

header li.btn {
    background-color: var(--orange);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 100px;
    transition: .3s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 26px;
    width: 129px;
    height: 40px;
}

header li.btn:hover a {
    width: 155px;
    color: var(--white) !important;
    background-color: var(--black);
}

header li.btn:hover a img {
    display: block;
}

header .mob-service-info {
    display: none;
    width: 100%;
}

header .mob-service-info .mail-info {
    margin-bottom: 29px;
}

header .mob-service-info .mail-info h6 {
    margin-bottom: 16px;
}

header .mob-service-info .mail-info li {
    display: flex;
    align-items: center;
    gap: 16px;
}

header .mob-service-info li img {
    filter: brightness(0);
}

header .mob-service-info h6.main-head {
    font-size: 21px;
    font-weight: 600;
    line-height: 26px;
    color: var(--orange);
    margin-bottom: 8px;
}

header .mob-service-info .location h6 {
    font-size: 12px;
    font-weight: 600;
    line-height: 17px;
    color: var(--black);
    margin-bottom: 8px;
}

header .mob-service-info .location li {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

header .mob-service-info .mail-info li a {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}

header .mob-service-info .location li a,
header .mob-service-info .location li p {
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
}

header .info-visible {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in-out;
}

header .info-visible.is-visible {
    display: block;
    opacity: 1;
    visibility: visible;
}

header .show-info img {
    transition: .3s ease-in-out;
}

header .mob-service-info:has(.is-visible) .show-info img {
    rotate: -90deg;
}

header .info-visible .location {
    margin-bottom: 16px;
}

.banner-sec {
    padding-top: 15px;
    margin: 0;
}

@media (min-width:991px) {

.banner-sec .sec-content {
    /* width: 42.5%; */
    padding-right: 80px;

}
.banner-sec .sec-img {
    /* width: 57.5%; */
    height: 494px;

}

}
.banner-sec .sec-img img {
    width: 100%;
    height: 100%;
}

.banner-sec h1 {
    font-size: min(6vw, 50px);
    font-weight: 600 !important;
    line-height: min(6vw, 50px);
    max-width: 345px;
}

.banner-sec h1 span {
    color: var(--orange);
    display: block;
    font-weight: 600 !important;
}

.banner-sec h1 span em {
    color: var(--orange);
    font-style: normal;
}

.banner-sec p {
    font-size: 16px;
    line-height: 21px;
    margin-block: 15px 30px;
}


/***LOGOS MARCAS***/

.logos .col-6, .logos .col-4{
    display: flex;
    justify-content: center;
    align-items: center;
}
.logos img{
    width: 70%;
    max-height: 80px;
    object-fit: contain;

}
@media (max-width:900px) {

/* .trust-brand-sec
} */

.logos img{
    width: 100%;
}
.brand-sec .logos img{
    width: 90%;
}
}
/***************/
/*********CARDS************/

#serviceSec .card{
    border: none;
}
#serviceSec .card-body {
    background: #FAFAF8;

}

/*********************/
.brand-sec .sec-head br,
.trust-brand-sec .sec-left p br,
.full-width-sec h2 br {
    display: none;
}

.feature-sec {
    background-color: #FAFAF8;
    padding-block: 80px;
    margin-bottom: 0;
}

.feature-sec .feature-icon {
    width: 176px;
    height: 176px;
    display: grid;
    place-items: center;
    margin-inline: auto;
    margin-bottom: 24px;
}

.feature-sec h6 {
    font-size: 21px;
    font-weight: 600;
    line-height: 26px;
    color: var(--orange);
    margin-bottom: 5px;
}


.feature-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
   
}

.feature-sec p {
    font-size: 21px;
    line-height: 26px;
}

.feature-sec .feature-box img {
    width: 100%;
    aspect-ratio: 1/1;
}

.performance-sec {
    background-color: var(--black);
    padding-block: 80px;
    text-align: center;
    margin-block: 0;
}

.performance-sec h4 {
    font-size: 37px;
    font-weight: 600;
    line-height: 42px;
    color: var(--orange);
    margin-bottom: 15px;
}

.performance-sec p {
    font-size: 21px;
    line-height: 26px;
    color: #fff;
}

.transporte-sec {
    background-color: #FAF9F7;
    margin-top: 0;
    padding-block: 80px;
}

.transporte-sec .sec-content {
    width: 42.5%;
    padding-right: 63px;
}

/* .transporte-sec .sec-img {
    width: 57.5%;
}

.transporte-sec .sec-img img {
    width: 100%;
} */

.transporte-sec .sec-head {
    margin-bottom: 25px;
}

.transporte-sec .box:not(:last-child) {
    margin-bottom: 16px;
}

.transporte-sec h6 {
    font-size: 21px;
    font-weight: 600;
    line-height: 26px;
    color: var(--orange);
    margin-bottom: 6px;
}

.transporte-sec .box p {
    line-height: 21px;
}

.transporte-sec .btn-primary {
    margin-top: 40px;
}

.trust-brand-sec .sec-head {
    max-width: 385px;
}

.trust-brand-sec .sec-left {
    width: 42.5%;
    padding-right: 129px;
}

.trust-brand-sec .sec-left p {
    margin-top: 15px;
    line-height: 21px;
    max-width: 306px;
}

.trust-brand-sec .sec-right {
    width: 57.5%;
    flex-wrap: wrap;
    gap: 30px 30px;
}

.trust-brand-sec .sec-right .box {
    width: 30%;
    text-align: center;
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .trust-brand-sec .box img {
    width: 130px;
} */

.full-width-sec {
    background-color: var(--orange);
    padding-block: 80px;
}

.service-sec h6 {
    font-size: 21px;
    font-weight: 600;
    line-height: 26px;
    color: var(--orange);
}

.service-sec .box-content {
    padding: 30px 20px 30px;
}

.service-sec .box-content h6 {
    padding-left: 10px;
}

.service-sec ul {
    line-height: 21px;
    margin-bottom: 0;
    padding-left: 18px;
}


.service-sec ul li::marker {
    font-size: 12px;
}

/* .service-sec ul li {
    margin-bottom: 6px;
} */

.service-sec .box {
    background-color: #FAFAF8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-sec .service-img {
    background-color: #fff;
}

.service-sec .mob-img {
    display: none;
}

.service-sec .box img {
    width: 100%;
    height: 100%;
}

.easy-service-sec {
    background-color: #FAFAF8;
    padding-block: 80px;
    margin-bottom: 0;
}

.easy-service-sec .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.easy-service-sec span.text-count {
    background-color: var(--black);
    font-size: 28px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-bottom: 30px;
}

.easy-service-sec h6,
.experience-sec h6 {
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
    color: var(--orange);
}

.easy-service-sec p,
.experience-sec p {
    font-size: 21px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 30px;
}

.experience-sec p {
    margin-bottom: 0;
}

.easy-service-sec img {
    max-height: 176px;
}

@media (max-width:991px) {
    .easy-service-sec img {
        max-height: 96px;
    }
}

.experience-sec {
    background-color: var(--black);
    padding-block: 80px;
    margin-top: 0;
}

.experience-sec h3 {
    color: var(--orange);
    margin-bottom: 0;
}

.experience-sec h6 {
    margin-bottom: 10px;
}

.easy-service-sec h6 {
    margin-bottom: 10px;
}

.experience-sec .mob-img {
    display: none;
}

.experience-sec .sec-img img {
    width: 100%;
    margin-block: 30px;
}

.experience-sec .sec-btn {
    margin-top: 40px;
}

.testi-sec .item {
    max-width: 750px;
    margin-inline: auto;
}

.testi-sec .item p {
    font-size: 21px;
    line-height: 26px;
}

.testi-sec p.user-position {
    font-size: 16px;
    line-height: 21px;
    color: #858585;
}

.testi-sec .item h6 {
    font-size: 21px;
    font-weight: 600;
    line-height: 26px;
    color: var(--orange);
    margin-block: 6px 10px;
}

.testi-sec .owl-nav {
    position: absolute;
    top: 0;
    width: 94%;
}

.testi-sec button.owl-prev {
    position: absolute;
    left: 0;
}

.testi-sec button.owl-next {
    position: absolute;
    right: 0;
}

.testi-sec .owl-dots {
    margin-top: 30px;
}

.owl-theme .owl-nav button {
    background: none !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--black) !important;
}



.contact-sec .sec-head p {
    margin-top: 10px;
}





.contact-sec .field label {
    display: block;
}

.contact-sec .field {
    margin-bottom: 20px;
}

.contact-sec .field label {
    display: block;
    font-weight: 600;
    line-height: 21px;
    margin-bottom: 6px;
}

.contact-sec .field input {
    background-color: #FAFAF8;
    border: 1px solid transparent;
    width: 100%;
    height: 40px;
    padding: 8px;
}

.contact-sec .field input::placeholder {
    font-size: 16px;
    color: #858585;
}

.contact-sec .submit-btn input {
    background-color: var(--orange);
    border: none;
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    border-radius: 100px;
    padding: 8px 16px;
    transition: .3s ease-in-out;
    cursor: pointer;
}

.contact-sec .submit-btn input:hover {
    background-color: var(--black);
}

.contact-sec .outer-radio {
    gap: 15px;
}

.contact-sec .radio-field {
    position: relative;
}

.contact-sec input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.contact-sec .radio-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

.contact-sec .radio-field label {
    color: #858585;
    border: 3px solid #f0f0f0;
    border-radius: 100px;
    font-weight: 400;
    padding: 8px 12px;
    width: 180px;
    text-align: center;
}

.contact-sec .radio-field label span {
    color: inherit;
}


.contact-sec .radio-field label span.mobile {
    display: none;
}

.contact-sec input[type="radio"]:checked+label,
.contact-sec input[type="radio"]:checked+label+label {
    background-color: #FAFAF8;
    color: var(--orange);
    border-color: var(--orange);
}

.contact-sec .radio-button+.radio-button {
    margin-left: 10px;
}

.contact-sec .field p.error {
    color: var(--red);
    display: block;
    font-size: small;
}

.contact-sec .field input[type="text"].error,
.contact-sec .field input[type="number"].error,
.contact-sec .field input[type="tel"].error,
.contact-sec .field input[type="email"].error,
.contact-sec .field textarea.error {
    border-color: var(--red);
}

.ty-sec {
    min-height: 400px;
}

.ty-sec h2 {
    font-size: 50px;
    line-height: 55px;
    color: var(--black);
}

.ty-sec p {
    font-size: 21px;
    line-height: 26px;
    color: var(--black);
    margin-top: 10px;
}

footer {
    background-color: var(--black);
    padding-block: 60px 30px;
}

footer .footer-logo p {
    margin-top: 20px;
}

footer a {
    color: #fff !important;
    text-decoration: none;
    font-weight: 300;
    transition: 0.2s ease-in-out;
}

.footer-menu a {
    font-weight: 600;
}

footer a:hover {
    color: var(--orange) !important;
}

footer h6 {
    font-size: 12px;
    font-weight: 600;
    line-height: 21px;
    color: var(--orange);
    margin-bottom: 0px;
}

footer ul,
header .mob-service-info ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

footer .copyright>div:nth-child(2) {
    padding-right: 25px;
}

footer .cont-info li,
footer .location li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

footer p {
    color: #fff;
    line-height: 18px;
    font-weight: 300;
}

footer .location p {
    line-height: 21px;
}

footer .copyright p,
footer .copyright a {
    font-size: 12px;
    line-height: 16px;
}

footer .location img.footer-icon {
    position: relative;
    top: 4px;
}

footer .copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}

/* Banner Slider CSS*/
.cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}

.cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
}

.cd-words-wrapper b.is-visible {
    position: relative;
}

.no-js .cd-words-wrapper b {
    opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible {
    opacity: 1;
}


/* -------------------------------- 

xrotate-2 

-------------------------------- */
.cd-headline.rotate-2 .cd-words-wrapper {
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    perspective: 300px;
}

.cd-headline.rotate-2 i,
.cd-headline.rotate-2 em {
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cd-headline.rotate-2 b {
    opacity: 0;
}

.cd-headline.rotate-2 i {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-20px) rotateX(90deg);
    -moz-transform: translateZ(-20px) rotateX(90deg);
    -ms-transform: translateZ(-20px) rotateX(90deg);
    -o-transform: translateZ(-20px) rotateX(90deg);
    transform: translateZ(-20px) rotateX(90deg);
    opacity: 0;
}

.is-visible .cd-headline.rotate-2 i {
    opacity: 1;
}

.cd-headline.rotate-2 i.in {
    -webkit-animation: cd-rotate-2-in 0.4s forwards;
    -moz-animation: cd-rotate-2-in 0.4s forwards;
    animation: cd-rotate-2-in 0.4s forwards;
}

.cd-headline.rotate-2 i.out {
    -webkit-animation: cd-rotate-2-out 0.4s forwards;
    -moz-animation: cd-rotate-2-out 0.4s forwards;
    animation: cd-rotate-2-out 0.4s forwards;
}

.cd-headline.rotate-2 em {
    -webkit-transform: translateZ(20px);
    -moz-transform: translateZ(20px);
    -ms-transform: translateZ(20px);
    -o-transform: translateZ(20px);
    transform: translateZ(20px);
}

.no-csstransitions .cd-headline.rotate-2 i {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 0;
}

.no-csstransitions .cd-headline.rotate-2 i em {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.no-csstransitions .cd-headline.rotate-2 .is-visible i {
    opacity: 1;
}

@-webkit-keyframes cd-rotate-2-in {
    0% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(90deg);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(-10deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(0deg);
    }
}

@-moz-keyframes cd-rotate-2-in {
    0% {
        opacity: 0;
        -moz-transform: translateZ(-20px) rotateX(90deg);
    }

    60% {
        opacity: 1;
        -moz-transform: translateZ(-20px) rotateX(-10deg);
    }

    100% {
        opacity: 1;
        -moz-transform: translateZ(-20px) rotateX(0deg);
    }
}

@keyframes cd-rotate-2-in {
    0% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(90deg);
        -moz-transform: translateZ(-20px) rotateX(90deg);
        -ms-transform: translateZ(-20px) rotateX(90deg);
        -o-transform: translateZ(-20px) rotateX(90deg);
        transform: translateZ(-20px) rotateX(90deg);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(-10deg);
        -moz-transform: translateZ(-20px) rotateX(-10deg);
        -ms-transform: translateZ(-20px) rotateX(-10deg);
        -o-transform: translateZ(-20px) rotateX(-10deg);
        transform: translateZ(-20px) rotateX(-10deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(0deg);
        -moz-transform: translateZ(-20px) rotateX(0deg);
        -ms-transform: translateZ(-20px) rotateX(0deg);
        -o-transform: translateZ(-20px) rotateX(0deg);
        transform: translateZ(-20px) rotateX(0deg);
    }
}

@-webkit-keyframes cd-rotate-2-out {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(0);
    }

    60% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(-100deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(-90deg);
    }
}

@-moz-keyframes cd-rotate-2-out {
    0% {
        opacity: 1;
        -moz-transform: translateZ(-20px) rotateX(0);
    }

    60% {
        opacity: 0;
        -moz-transform: translateZ(-20px) rotateX(-100deg);
    }

    100% {
        opacity: 0;
        -moz-transform: translateZ(-20px) rotateX(-90deg);
    }
}

@keyframes cd-rotate-2-out {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(0);
        -moz-transform: translateZ(-20px) rotateX(0);
        -ms-transform: translateZ(-20px) rotateX(0);
        -o-transform: translateZ(-20px) rotateX(0);
        transform: translateZ(-20px) rotateX(0);
    }

    60% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(-100deg);
        -moz-transform: translateZ(-20px) rotateX(-100deg);
        -ms-transform: translateZ(-20px) rotateX(-100deg);
        -o-transform: translateZ(-20px) rotateX(-100deg);
        transform: translateZ(-20px) rotateX(-100deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(-90deg);
        -moz-transform: translateZ(-20px) rotateX(-90deg);
        -ms-transform: translateZ(-20px) rotateX(-90deg);
        -o-transform: translateZ(-20px) rotateX(-90deg);
        transform: translateZ(-20px) rotateX(-90deg);
    }
}

.cd-intro {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.active {
    opacity: 1;
}

/* s 6/6/24 start*/
.contact-sec .radio-button+.radio-button.mobile {
    display: none;
}

.box ul li span.white {
    font-weight: 600;
    styleName: S;
    font-weight: 600;
    text-align: right;
}

footer p{
    margin-bottom: 0;
}


footer * {
    font-size: 12px;
    line-height: 17px;
    
}
footer li, footer span{
    color: #ffffff !important;
}

.location .numbr_mobile {
    display: none;
}

/* 6/6/24 end */

    .btn_invert:hover {
        border: 1px solid var(--white);
    }

@media (min-width:1400px) {
    .banner-sec .sec-img {
        height: 549px;
    }
}

@media (min-width:600px) {
    .banner-sec .sec-img img {
        object-fit: contain;
    }
}


/* Banner Slider CSS END */

@media (min-width: 1700px) {
    .banner-sec .sec-img {
        height: 644px;
    }
}

@media (max-width:1366px) and (min-width:768px) {
    .performance-sec h4 {
        font-size: min(2.5vw, 37px);
        line-height: min(3vw, 42px);
    }

    .performance-sec p {
        font-size: min(1.5vw, 21px);
        line-height: min(1.8vw, 26px);
    }

    header .logo-sec img {
        width: 295px;
        width: min(20vw, 295px);
    }
}

@media (max-width: 1024px) {

    header .logo-sec img {
        width: 216px;
    }

    .transporte-sec .sec-content,
    .trust-brand-sec .sec-left,
    .contact-sec .contact-head,
    .banner-sec .sec-content {
        padding-right: 50px;
    }

    .transporte-sec .sec-content,
    .transporte-sec .sec-img {
        width: 100%;
    }

    /* .feature-sec img {
        width: 100px;
    } */

    .performance-sec h4 {
        font-size: 26px;
        line-height: 31px;
    }

    .performance-sec p {
        font-size: 16px;
        font-weight: 400;
        line-height: 21px;
        text-align: center;

    }

    .trust-brand-sec .sec-right .box {
        width: 25%;
    }

    .brand-sec .brand-box img {
        width: 80%;
    }

    .testi-sec button img {
        width: 34px;
    }

    .contact-sec .contact-form {
        padding-right: 0;
    }

    .contact-sec .radio-field label {
        width: fit-content;
    }

    footer .location br {
        display: none;
    }
}



@media (max-width:991px) {
    .banner-sec .sec-img {
        width: 100%;
        height: 64vw;
    }

    .banner-sec .sec-img img {
        object-fit: contain;
    }

    .mobile-menu {
        display: block;
        text-align: end;
    }

    header .menu-sec:has(.active) .mob-service-info {
        display: block;
    }

    header .menu-sec ul.main-menu {
        display: none;
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        margin-bottom: 28px;
    }

    header .menu-sec .nav-menu.active ul.main-menu {
        display: flex;
    }

    header .menu-sec .nav-menu {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: fixed;
        left: 500px;
        right: 0;
        height: 100%;
        background-color: #fff;
        padding: 16px 16px 50px;
        z-index: 999;
        opacity: 0;
        transition: .5s ease-in-out;
        overflow: auto;
        top: 77px;
    }

    header .menu-sec .nav-menu.active {
        opacity: 1;
        left: 0;
    }

    header .menu-sec ul.nav-menu.active li a {
        color: var(--black);
    }

    header .menu-sec ul.nav-menu.active li.btn a {
        color: #fff;
    }

    header .menu-sec .cross-icon {
        display: none;
    }

    header .menu-sec:has(.active) .hamburger-icon {
        display: none;
    }

    header .menu-sec:has(.active) .cross-icon {
        display: block;
    }

    .mob-service-info {
        padding-bottom: 40px;
    }

    header .mob-service-info .mail-info {
        margin-bottom: 24px;
    }

    header .mob-service-info .location li img {
        padding-top: 3px;
    }

    header .mob-service-info .location li {
        align-items: flex-start;
    }

    header .mob-service-info .location h6 {
        margin-bottom: 0px;
    }

    .testi-sec .item {
        max-width: 150px;
    }

}

@media (max-width: 768px) {
    .contact-sec .field input
    {
        width: 95%;
    }
    .feature-sec .feature-icon {
        margin-bottom: 16px;
    }
    .btn-primary:hover img,
    header li.btn:hover a img {
        display: none;
    }

    .btn-primary,
    .btn-primary:hover,
    header li.btn,
    header li.btn:hover a {
        width: unset;
    }



    .trust-brand-sec .box img {
        width: 100px;
    }

    .testi-sec .item {
        max-width: 550px;
    }

    .easy-service-sec .box img {
        width: 96px;
    }

    .contact-sec .outer-radio {
        gap: 0px;
        flex-wrap: wrap;
    }

    .easy-service-sec h6 {
        margin-top: -4px;
    }

    .contact-sec label.radio-button.desk {
        display: none !important;
    }

    .contact-sec .radio-button+.radio-button.mobile {
        display: block;
    }

    /*new*/
    .performance-sec h4 {
        font-size: 28px;
        font-weight: 600;
        line-height: 32px;
        text-align: center;
        margin-bottom: 5px;
    }

    section#brandSec {
        margin-top: 80px;
    }

    .easy-service-sec p {
        margin-bottom: 20px;
    }

    section.testi-sec h3 {
        margin: 0 auto 40px;
    }

    .sec-head.contact-head p {
        font-size: 16px;
        line-height: 21px;
        color: #131423;
    }

    footer .footer-logo p {
        margin-top: 10px;
    }

    img.footer-icon.location {
        width: 9px;
    }

    body {
        overflow: auto !important;
    }

    .contact-sec .radio-field label span.mobile {
        display: inline-block;
    }

    .contact-sec .radio-field label span.desk {
        display: none;
    }

    footer .social-links {
      
        padding-top: 25px;
    }
}


@media (max-width: 600px) {
    section {
        margin-block: 40px 40px;
    }

    header {
        padding-inline: 0;
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 999;
    }

    header .menu-sec li.btn a {
        font-size: 16px;
        line-height: 21px;
        width: 106px;
        height: 35px;
    }

    /* .banner-sec {
        margin-top: 20px;
    } */



    h2 {
        font-size: 28px;
        line-height: 32px;
    }

    h3 {
        margin: 0 auto 20px;
        font-size: 28px !important;
    }

    .btn-primary,
    .contact-sec .submit-btn input {
        /* width: 106px;
        height: 35px; */
        font-size: 16px;
        line-height: 21px;
        
    }


    /* .transporte-sec .sec-content,
    .trust-brand-sec .sec-left,
    .contact-sec .contact-head,
    .banner-sec .sec-content {
        padding-right: 0;
    } */

    .banner-sec h1 {
        font-size: 37px;
        line-height: 42px;
    }

    .banner-sec p {
        margin-block: 10px 20px;
    }

    .banner-sec .sec-content,
    .banner-sec .sec-img {
        width: 100%;
    }

    .banner-sec .sec-img {
        width: 100%;
        height: 89vw;
    }

    .brand-sec .sec-head br,
    .transporte-sec .sec-head br,
    .trust-brand-sec .sec-left p br,
    .full-width-sec h2 br,
    footer .location p br {
        display: block;
    }

    .transporte-sec .btn-primary {
        margin-top: 24px;
    }

    .brand-sec .brand-box.meilever-brand img {
        width: 89px;
        height: 40px;
    }
    
    .feature-sec p {
        font-size: 16px;
        line-height: 21px;
    }

    .feature-sec .feature-icon {
        width: 96px;
        height: 96px;
        margin-bottom: 19px;
    }

    .feature-sec .feature-box img {
        width: 100%;
    }

    .performance-sec,
    .transporte-sec,
    .full-width-sec,
    .easy-service-sec,
    .experience-sec,
    .feature-sec {
        padding-block: 40px;
    }

    .trust-brand-sec .sec-left,
    .trust-brand-sec .sec-right,
    .contact-sec .contact-head,
    .contact-sec .contact-form {
        width: 100%;
    }

    .trust-brand-sec {
        text-align: center;
    }

    .trust-brand-sec .sec-right {
        gap: 0px 30px;
        margin-top: 20px;
    }

    .trust-brand-sec .box img {
        width: 80px;
    }

    .trust-brand-sec .sec-left p {
        max-width: 306px;
        margin-inline: auto;
    }

    .service-sec .box .mob-img {
        display: block;
        width: 100%;
    }

    .service-sec .desk-img {
        display: none;
    }

    .easy-service-sec span.text-count {
        font-size: 21px;
        width: 24px;
        height: 24px;
        margin-bottom: 16px;
    }

    .easy-service-sec p,
    .experience-sec p {
        font-size: 16px;
        line-height: 21px;
    }

    .experience-sec img {
        margin-block: 0 30px;
    }

    .experience-sec h6 {
        font-size: 21px;
        line-height: 26px;
    }

    .experience-sec .desk-img {
        display: none;
    }

    .experience-sec .mob-img {
        display: block;
    }

    .testi-sec .item p {
        font-size: 16px;
        line-height: 21px;
    }

    .testi-sec .item {
        max-width: 220px;
    }

    .testi-sec button img {
        width: 28px;
    }

    .testi-sec .owl-nav {
        top: 10%;
    }

    .testi-sec .item h6 {
        font-size: 16px;
        line-height: 21px;
    }

    .contact-sec .contact-form {
        margin-top: 30px;
    }

    .ty-sec {
        min-height: 150px;
    }

    .ty-sec h2 {
        font-size: 37px;
        line-height: 42px;
    }

    .ty-sec p {
        font-size: 16px;
        line-height: 21px;
    }

    footer .footer-logo {
        order: 1;
    }

    footer .footer-menu {
        order: 2;
    }

    footer .social-links {
        order: 3;
        margin-left: -40%;
        padding-top: 25px;
    }

    footer .cont-info {
        order: 4;
    }

    footer .location-one {
        order: 5;
    }

    footer .location-two {
        order: 6;
    }

    footer h6,
    footer .cont-info a,
    footer .footer-links,
    footer .footer-logo p,
    footer .location p {
        font-size: 12px;
        line-height: 17px;
        /* color: #ffffff; */
    }


    footer .location span {
        display: block;
        margin-top: 10px;
    }

    footer .box:not(.footer-links) {
        grid-column: span 2;
    }

    footer .location:has(.white) h6 {
        margin-bottom: 0;
    }

    footer img.footer-icon {
        width: 12px;
        position: relative;
        top: 4px;
    }



    footer .copyright {
        margin-top: 40px;
        flex-direction: column;
        align-items: flex-start;
        /* gap: 10px; */
    }

    footer .copyright p,
    footer .copyright a {
        font-size: 9px;
        line-height: 14px;
    }

    .contact-sec .radio-button+.radio-button {
        margin: 0;
    }

    .contact-sec .outer-radio .radio-field:not(:last-child) {
        width: 75.75px;
    }

    .contact-sec .outer-radio .radio-field label {
        width: 100%;
    }

    .contact-sec .outer-radio .radio-field:not(:first-child) {
        margin-left: 12px;
    }

    .contact-sec .radio-field label {
        padding: 8px;
    }

    .location .numbr_mobile {
        display: flex;
    }

    .location .numbr_mobile img.footer-icon {
        top: 2px;
    }

    .transporte-sec h6 {
        margin-bottom: -3px;
    }

    .transporte-sec .sec-img img {
        min-height: 80vw;
        object-fit: fill;
    }

    .transporte-sec {
        background-color: #0000;
        padding-bottom: 0 !important;
    }

    section.trust-brand-sec {
        margin-top: 0 !important;
    }

    .trust-brand-sec .sec-right .box {
        min-height: 70px;
    }

    section.full-width-sec {
        margin-block: 20px !important;
    }

    .service-sec .box-content h6 {
        padding-left: 0px;
    }

    .service-sec .box-content {
        padding: 20px 15px 20px;
    }

    .service-sec ul {
        margin: 5px 0 0 !important;
    }

    section#serviceSec .sec-btn.text-center {
        display: none;
    }

    .contact-sec .contact-form {
        padding-left: 16px;
    }

    section#contactSec {
        margin-bottom: 20px;
    }

    .box.footer-logo img {
        max-width: 57px;
        max-height: 57px;
        object-fit: cover;
    }

    .box.location.location-two h6.white {
        display: none;
    }

    .box.location.location-two ul li span {
        margin-top: 0;
    }

    .box.footer-links.footer-menu {
        padding-bottom: 15px;
        padding-top: 10px;
    }

    footer {
        background-color: var(--black);
        padding-block: 40px 30px;
    }

    .for_mobile {
        display: block;
    }

    .for_dekstop {
        display: none;
    }

    .banner-sec .sec-img img {
        object-fit: contain;
    }

    .sec-content.cd-headline.letters.rotate-2 p br:nth-of-type(2) {
        display: block;
    }
}

@media (max-width: 375px) {

    /* 18/6/24 start */
    .contact-sec .field input::placeholder {
        font-size: 14px;
    }

    .contact-sec .field label {
        font-size: 14px;
    }

    .contact-sec .outer-radio .radio-field:not(:last-child) {
        width: 69px;
    }

    .contact-sec .outer-radio .radio-field:not(:first-child) {
        margin-left: 5px;
    }

    .contact-sec .radio-field label {
        padding: 8px 3px;
    }
    .sec-content.cd-headline.letters.rotate-2 p br:nth-of-type(2) {
        display: block;
    }

    /* 18/6/24 end */
}

@media (max-width: 360px) {
    .banner-sec .sec-img {
        height: 275px;
        width: 100%;
    }

    .brand-sec .brand-box img {
        width: 100px;
    }

    .testi-sec .item {
        max-width: 200px;
    }

    .testi-sec button img {
        width: 24px;
    }

}

@media (max-width: 360px) {
    
    .experience-sec h6 {
        font-size: 16px;
        line-height: 18px;
    }
    .easy-service-sec p,
    .experience-sec p {
        font-size: 12px;
        line-height: 14px;
    }
}