@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');


/*  font-family: "Nanum Pen Script", cursive; */
:root{--primary-color: #0B54A0; --grey-color: #303236;}
body{
    color: #18191a;
    font-family: "Poppins", sans-serif;
    line-height: 1.6;
}


img{max-width: 100%;}

a{text-decoration: none;}

p:last-child,ul,figure{margin-bottom: 0;}

.fw-bolder{font-weight: 800!important;}

.text-primary{color: var(--primary-color)!important;}
.bg-primary{background-color: var(--primary-color)!important;}

.btn{
    display: inline-block;
    color: #fff;
    background-color: #303236;
    padding: 0.2rem 1.3rem;
    border-radius: 50px;
    box-shadow: 0 0 0 0 rgba(48, 50, 54, 0);
    transition: all 0.3s ease-in-out;
}
.btn:hover{
    color: #fff;
    background-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(11, 84, 160, 0.3);
}
.btn.btn-primary{
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn.btn-normal{border-radius: 5px;}
.btn.btn-lg{
    font-size: initial;
    padding: 0.5rem 2rem;
}

/*  */
.heading-style{
    display: inline-block;
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    padding-bottom: 11px;
}
.heading-style::after{
    content: "";
    /* width: 200px; */
    height: 1px;
    background-color: #010101;
    position: absolute;
    left: 0;
    bottom: 0;
    animation: scaleX 0.6s linear forwards;
    animation-delay: 1s;
}
.heading-style.center-align::after{
    left: 50%;
    transform: translateX(-50%);
}

.section-block{
    padding-top: 90px;
    padding-bottom: 90px;
}
.section-block-md{
    padding-top: 60px;
    padding-bottom: 60px;
}

.bg-light-green{background-color: #DDECD7;}
.bg-light{background-color: #F2F2F2!important;}
.bg-gradient-1{
    background: -webkit-linear-gradient(270deg, #E0E0E0 0%, #F2F2F2 9.11%, #F2F2F2 89.32%, #E0E0E0 100%);
    background: -moz-linear-gradient(270deg, #E0E0E0 0%, #F2F2F2 9.11%, #F2F2F2 89.32%, #E0E0E0 100%);
    background: -o-linear-gradient(270deg, #E0E0E0 0%, #F2F2F2 9.11%, #F2F2F2 89.32%, #E0E0E0 100%);
    background: -ms-linear-gradient(270deg, #E0E0E0 0%, #F2F2F2 9.11%, #F2F2F2 89.32%, #E0E0E0 100%);
    background: linear-gradient(270deg, #E0E0E0 0%, #F2F2F2 9.11%, #F2F2F2 89.32%, #E0E0E0 100%);
}
/* .bg-gradient-2{
    background: -webkit-linear-gradient(270deg, #F2F2F2 9.11%, #F2F2F2 99.99%);
    background: -moz-linear-gradient(270deg, #F2F2F2 9.11%, #F2F2F2 99.99%);
    background: -o-linear-gradient(270deg, #F2F2F2 9.11%, #F2F2F2 99.99%);
    background: -ms-linear-gradient(270deg, #F2F2F2 9.11%, #F2F2F2 99.99%);
    background: linear-gradient(270deg, #F2F2F2 9.11%, #F2F2F2 99.99%);
} */

/* list-style-1 */
.list-style-1 li{
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}
.list-style-1 li::before{
    content: "";
    background: url(../images/icons/triangle-right-outline-icon.svg) no-repeat center / contain;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 6px;
    left: 0;
    transition: all 0.3s ease-in-out;
}
.list-style-1 li:hover::before{left: 3px;}
/* list-style-icon */
.list-style-icon li{
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}
.list-style-icon li:last-child{margin-bottom: 0;}
.list-style-icon li .icon{
    position: absolute;
    top: 5px;
    left: 0;
    width: 20px;
    transition: all 0.3s ease-in-out;
}
.list-style-icon li:hover .icon{left: 2px;}

/*  */
.form-floating > .form-control:focus{border-color: #00A9E7; box-shadow: none;}
.form-floating > .form-control{
    height: 3rem;
    min-height: auto;
    padding: 0.5rem .75rem;
}
.form-floating > label{
    height: 3.1rem;
    padding: 0.6rem .75rem;
}
.form-floating > textarea.form-control{height: 110px;}

.social-media ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 5px;
}
.social-media ul li a{
    font-size: 1.2rem;
    display: block;
    padding: 2px 4px;
}

@keyframes scaleX{
    0%{width: 0;}
    100%{width: 200px;}
}





/* -- Header -- */
/* top-bar */
.top-bar{
    background-color: var(--grey-color);
    padding: 5px 0;
}
.top-bar a{color: #fff;}
.top-bar ul{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}
.top-bar .title{
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}
.top-bar .title .icon{
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 18px;
    padding-left: 1px;
    background-color: #fff;
    border-radius: 100%;
}
.top-bar .title .icon img{max-width: 80%;}
.top-bar .column{padding: 0;}
.top-bar .column:nth-child(1) ul li{
    position: relative;
    padding: 0 8px;
}
.top-bar .column:nth-child(1) ul li:last-child{padding-right: 0;}
.top-bar .column:nth-child(1) ul li:not(:last-child):after{
    content: "";
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
}
.top-bar .column:nth-child(2) ul li{
    position: relative;
    padding-right: 15px;
}
.top-bar .column:nth-child(2) ul li:last-child{padding-right: 0;}
.top-bar .column:nth-child(2) ul li:not(:last-child)::after{
    content: "";
    width: 1px;
    height: 15px;
    background: #FFFFFF;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
}

/* navbar-brand */
header{
    position: relative;
    background-color: #fff;
    transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0);
    z-index: 1;
}
header .navbar-brand{
    width: 240px;
    transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
header .navbar-nav .nav-item{padding-inline: 0.7rem;}
header .navbar-nav .nav-item .nav-link{
    position: relative;
    color: #010101;
    padding-left: 0;
}
header .navbar-nav .nav-item .nav-link.active{
    color: var(--primary-color);
    font-weight: 700;
}
header .navbar-nav .nav-item .nav-link.active::after,
header .navbar-nav .nav-item .nav-link::after{
    content: "";
    width: 0px;
    height: 2px;
    background-color: var(--primary-color);
    position: absolute;
    left: 0;
    bottom: 6px;
    transition: all 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
header .navbar-nav .nav-item .nav-link.active::after,
header .navbar-nav .nav-item:hover .nav-link::after{
    width: 20px;
}

header .navbar-toggler{border: none;}
header .navbar-toggler:focus{box-shadow: none;}

/* fixed */
header.fixed{
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0.2), 0 5px 25px -8px rgba(0, 0, 0, 0.1);
    z-index: 100;
}
header.fixed .top-bar{display: none;}
header.fixed .navbar{padding: 3px 0;}
header.fixed .navbar-brand{width: 180px;}

/* banner-slider */
.banner-slider{z-index: auto;}

/* about section */
.about-section{
    padding-bottom: 160px;
}
.img-wrap-1{
    position: relative;
    z-index: auto;
}
.img-wrap-1 figure{
    position: relative;
    max-width: 80%;
    height: 380px;
    border-radius: 0 0 0 50px;
    margin: 0 auto;
    overflow: hidden;
}
.img-wrap-1 figure img{
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.img-wrap-1::after{
    content: "";
    background: url(../images/about-img-bg.png) no-repeat center / cover;
    width: 500px;
    height: 400px;
    border-radius: 0 0 50px 0;
    position: absolute;
    left: -28%;
    bottom: -35%;
    opacity: 0.1;
    z-index: -1;
    animation: fadeInLeft 0.3s;
}
.exp-line{
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
}
.exp-line .number{
    display: inline-block;
    background-color: var(--primary-color);
    width: 34px;
    height: 34px;
    border-radius: 100%;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    font-size: 1.42rem;
    font-weight: 800;
    text-align: center;
    line-height: 34px;
}

/* hexagone-grid */
.hexagone-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0px 30px;
    padding-right: 25px;
}
.hexagone-grid .column{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 187px;
    height: 215px;
    background-color: var(--primary-color);
    padding: 20px 30px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    margin-bottom: -15px;
}
.hexagone-grid .column .content{
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}
.hexagone-grid .column .icon{
    display: inline-block;
    /* max-width: 50%; */
    margin-bottom: 10px;
}
.hexagone-grid .column p{
    color: #fff;
    line-height: 1.4;
}
.hexagone-grid .column:nth-child(even){background-color: #00A9E7;}
.hexagone-grid .column:first-child{margin-left: 25px;}
.hexagone-grid .column:last-child{margin-right: -25px;}
.hexagone-grid .column:hover .content{transform: scale(1.04);}

/* fleets-section */
.fleets-section{}
.fleets-slider .swiper-slide{height: auto;}
/* block-design-1 */
.block-design-1{
    height: 100%;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}
.block-design-1 *{transition: all 0.3s ease-in-out;}
.block-design-1 figure{
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 25px 40px;
    border-radius: 50px 50px 0 0;
    overflow: hidden;
}
.block-design-1 figure img{
    max-width: 80%;
    transform: scale(1);
}
.block-design-1 figure::after{
    content: "";
    width: 100%;
    height: 100%;
    background: url(../images/bg/cars-bg-img.png);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    z-index: -1;
}
.block-design-1 figcaption{
    display: inline-block;
    padding: 8px 20px 8px 15px;
    background-color: var(--primary-color);
    border-radius: 0 50px 50px 0;
    position: absolute;
    left: 0;
    bottom: 0;
}
.block-design-1 figcaption > *{
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0;
}
.block-design-1:hover figure img{transform: scale(1.08);}
.block-design-1:hover figcaption{bottom: 15px;}

/* services-block */
.services-block{
    position: relative;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 25px 25px 25px;
    border-radius: 15px;
    transform: translateY(0);
    box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.services-block *{transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.services-block .content{
    color: initial;
    /* flex: 0 0 auto; */
    position: relative;
}
.services-block .content .title{
    max-width: 90%;
    color: #fff;
    font-size: 1.1rem;
    line-height: normal;
    display: inline-block;
    font-weight: 600;
    padding: 5px 25px 5px;
    margin: 0 0 10px -25px;
    background-color: var(--primary-color);
    border-radius: 0 50px 50px 0;
}
.services-block figure{
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: url(../images/bg/vector-bg-1.svg) no-repeat center right / contain;
    margin-bottom: 0;
}
.services-block figure img{
    height: 75%;
    transform: scale(1);
}
.services-block:hover{
    transform: translateY(-6px);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.4);
}
.services-block:hover figure img{transform: scale(1.05);}

/* review-box */
.testimonials-slider .swiper-slide{height: auto;}
.review-box{
    height: 100%;
    color: #202020;
    background-color: #F4F4F4;
    padding: 25px 30px;
    border-radius: 0 20px 0 0;
}
.review-box .title{
    color: var(--primary-color);
    font-size: 1.08rem;
    font-weight: 800;
}
.review-box .designation{
    color: #808080;
    font-weight: 500;
}

/* clients-section */
.logo-box{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 140px;
    background-color: #fff;
    padding: 25px 25px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    transform: translateY(0);
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.logo-box img{max-width: 100%; transform: scale(1); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.logo-box:hover{
    box-shadow: 0px 4px 50px -5px rgba(0, 0, 0, 0.4);
    transform: translateY(-5px);
}
.logo-box:hover img{transform: scale(1.02);}
.clients-section .grid-box{
    display: flex;
    flex-wrap: wrap;
    gap: 25px 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.clients-section .grid-box .logo-box{
    flex: 0 0 calc(100% / 5 - 16px);
    height: 110px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
}
.clients-section .grid-box .logo-box:hover{box-shadow: 0px 3px 30px -5px rgba(0, 0, 0, 0.4);}

/* footer */
footer{
    overflow: hidden;
    position: relative;
    color: #fff;
    font-family: "Urbanist", sans-serif;
    background-color: #121212;
    padding-top: 140px;
    margin-top: 20px;
    clip-path: polygon(50% 11%, 100% 0, 100% 100%, 0 100%, 0 0);
    z-index: 1;
}
footer::after{
    content: "";
    position: absolute;
    background: url(../images/bg/bg-pattern-1.svg) no-repeat bottom center / cover, #303236;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 89%;
    clip-path: polygon(50% 11%, 100% 0, 100% 100%, 0 100%, 0 0);
    z-index: -1;
}
footer .path-wrap{
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    /* height: 50px; */
    /* background: url(../images/bg/path-line-vector.svg) no-repeat center / cover; */
}
footer .path-wrap .icon{
    position: absolute;
    top: -12px;
    right: 25px;
    transform: translateX(0) rotate(-1deg);
    /* offset-path: path("M 0 40 Q 400 0 900 40"); */
    offset-distance: 0%;
    offset-rotate: auto;
    /* animation: carAnimation 12s both 0.1s infinite linear; */
}

@keyframes carAnimation{
    0%{
        right: 0;
        transform: translateX(120%) translateY(-20px) rotate(-2deg);
    }
    50%{
        right: 50%;
        transform: translateX(0%) translateY(5px) rotate(5deg);
    }
    100%{
        right: 100%;
        transform: translateX(-120%) translateY(-10px) rotate(15deg);
    }
}

footer a{color: #fff;}
/* widget */
footer .widget .title{
    position: relative;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 1;
}
footer .widget .title::before{
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #151921;
    position: absolute;
    left: -8px;
    bottom: -1px;
    z-index: -1;
}
footer .widget .info-list > li{
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
}
footer .widget .info-list > li .icon{
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 2px;
    left: 0;
}
footer .widget .info-list > li .icon img{max-width: 56%;}
footer .widget .info-list > li .list li{position: relative;}
footer .widget .info-list > li .list li:not(:last-child)::after{
    content: "|";
    margin: 0 4px;
}
/*  */
footer .widget .link-list > li a{
    display: block;
    position: relative;
    padding: 2px 0 2px 36px;
    margin-bottom: 10px;
}
footer .widget .link-list > li, footer .widget .link-list > li *{transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
footer .widget .link-list > li a::before{
    content: "";
    width: 25px;
    height: 17px;
    background: url(../images/icons/car-outline-icon-light-1.svg) no-repeat center / contain;
    position: absolute;
    top: 6px;
    left: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer .widget .link-list > li:hover a{
    color: #00b2ef;
    /* padding-left: 36px; */
}
footer .widget .link-list > li:hover a::before{left: 3px;}
/* copyright */
footer .copyright p{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #121212;
    padding: 8px 35px;
    clip-path: polygon(0% 0%, 100% 0, 98% 100%, 2% 100%);
}
footer .copyright p .line{
    display: inline-block;
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, #121212 6.73%, #FFFFFF 47.6%, #121212 100%);
    margin: 0 10px;
}
footer .copyright p span:nth-child(2){
    font-family: "Nanum Pen Script", cursive;
    color: #00B3F0;
    font-size: 1.1rem;
    font-weight: 400;
    margin-right: 4px;
}

/* cta-modal */
/* .modal-open:has(.cta-modal){
    overflow-y: auto!important;
    padding-right: unset!important;
}
.cta-modal{
    height: auto;
    top: auto;
    bottom: 0;
} */
.cta-modal {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: auto;
  /* background: rgba(0,0,0,0.5); */
  display: none;
  align-items: end;
  justify-content: center;
  z-index: 1000;
}
.cta-modal.show {
  display: flex;
}
.cta-modal .modal-dialog{
    max-width: 950px;
    width: 90%;
    align-items: end;
    position: relative;
    top: 15px;
}
.cta-modal .modal-content{
  background: #fff;
    border-color: var(--primary-color);
    border-radius: 10px;
  position: relative;
  animation: fadeIn 0.3s ease;
}
.cta-modal .modal-content .modal-title{
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
}
.cta-modal .btn-close{
    cursor: pointer;
    font-size: 12px;
    opacity: 0.9;
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-51%);
    z-index: 1;
}
.cta-modal .modal-body{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 0;
    padding: 0.9rem 3.4rem 0.9rem 1.4rem;
}
.cta-modal .modal-body .btn{margin-right: 15px;}
.cta-modal .modal-body .btn img{
    width: 18px;
    margin: -3px 4px 0 -2px;
}
/* fadeIn */
@keyframes fadeIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* page-banner-section */
.page-banner-section{
    position: relative;
    color: #fff;
    padding: 20px 0 35px;
    z-index: 1;
}
.page-banner-section::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00A9E7;
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 50% 100%, 0 75%);
    z-index: -1;
}
.page-banner-section .breadcrumb .breadcrumb-item img{width: 18px;}
.page-banner-section .breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    content: "|";
    color: #fff;
}
.page-banner-section::before{
    content: "";
    width: 1px;
    height: 66px;
    background-color: var(--grey-color);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -46px;
}

/*  */
.count-list li{
    font-family: "Urbanist", sans-serif;
    display: flex;
    align-items: center;
    column-gap: 15px;
    margin-bottom: 25px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.count-list li *{transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.count-list li:last-child{margin-bottom: 0;}
.count-list li .number{
    width: 100px;
    position: relative;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    transform: scale(1);
}
.count-list li .number span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.count-list li p{
    font-size: 2rem;
}
.count-list li:hover .number{transform: scale(1.05);}

/* member-column */
.member-column figure{
    position: relative;
    padding: 0 16px 16px 0;
    margin: 0 15px 15px;
}
.member-column figure::after{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 95%;
    height: 95%;
    background-color: var(--primary-color);
    border-radius: 5px;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}
.member-column figure img{width: 100%;}
.member-column:hover figure::after{
    right: 2px;
    bottom: 2px;
}
.member-column .name{
    font-size: 1.5rem;
    font-weight: 700;
}

/* -- services page -- */
.row-design-1 .content-box{
    padding: 30px 35px;
    transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.row-design-1 *{transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);}
.row-design-1 .content-box .title{
    font-size: 1.4rem;
    font-weight: 800;
}
.row-design-1 .image-box figure{
    width: 100%;
    min-height: 300px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #D7EAFF;
    padding: 35px 25px;
    border-radius: 20px;
}
.row-design-1 .image-box figure img{transform: scale(0.85);}
.row-design-1:hover .image-box figure img{transform: scale(0.95);}

/* -- Fleet page -- */
.filter-dropdown{
    display: inline-flex;
}
.filter-dropdown .dropdown-toggle{
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    background-color: #F3F3F3;
    padding: 4px 15px;
    border: 1px solid #5E5E5E;
    border-radius: 50px;
}
.filter-dropdown .dropdown-toggle:hover{
    color: #fff;
    background-color: var(--primary-color);
}
.filter-dropdown .dropdown-menu{
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    background-color: #F3F3F3;
    letter-spacing: 0.2px;
    border-radius: 17px;
    border-color: #5E5E5E;
    padding: 0 0;
    overflow: hidden;
    margin-top: 8px!important;
    z-index: 10;
}
.filter-dropdown .dropdown-menu .dropdown-item{
    cursor: pointer;
    padding: 0.4rem 1rem;
}
.filter-dropdown .dropdown-menu .dropdown-item:not(:last-child){border-bottom: 1px solid #5E5E5E;}
.filter-dropdown .dropdown-menu .dropdown-item.active{
    background-color: var(--primary-color);
    color: #fff;
}
.filter-dropdown .dropdown-menu .dropdown-item:active{background-color: #808080;}
/*  */
.products-grid{min-height: 480px;}
.products-grid .itemBox{display: none; width: 100%; margin-bottom: 100px;}
/* title-style-1 */
.title-style-1{display: flex; position: relative; align-items: center; column-gap: 10px;}
.title-style-1::after{content: ""; width: 35%; height: 1px; background-color: #000;}

/*  */
.block-design-2{margin: 0 auto; font-family: "Urbanist", sans-serif; text-align: center; transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);}
.block-design-2 *{transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);}
.block-design-2 figure{position: relative; top: 0; height: 185px; margin-inline: auto;}
.block-design-2 figure img{-o-object-fit: contain; object-fit: contain; height: 100%;}
.block-design-2 .content{position: relative; padding: 30px 30px; z-index: 1;}
.block-design-2 .content::after{content: ""; background-color: #fff; padding: 30px 20px; border-radius: 10px; box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.1); width: 100%; height: 75%; position: absolute; left: 0; bottom: 0; z-index: -1; transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);}
.block-design-2 .content .title{ font-size: clamp(18px, 1.3vw, 20px); font-weight: 700; text-transform: uppercase;}
.block-design-2 .content .btn-group{width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px;}
.block-design-2 .content .btn-group li{flex: 0 0 auto;}
.block-design-2 .content .btn{padding: 0.3rem 1.2rem;}
.block-design-2 .content .btn i{margin-right: 6px;}
.block-design-2 .content .btn.whatsapp-btn{background-color: #25D366;}
.block-design-2 .content .btn.whatsapp-btn i{font-size: 1.1rem;}
.block-design-2:hover figure{top: -4px;}
.block-design-2:hover .content::after{content: ""; background-color: #ECF6F0; height: 70%; box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.15);}



/* -- contact page -- */
.contact-page .info-column a{color: inherit;}
.contact-page .info-column .title{
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.form-wrap{
    position: relative;
    background-color: #fff;
    padding: 35px 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
}
.form-wrap .btn{border-color: #5E5E5E;}
.form-wrap::after{
    content: "";
    background-color: #00A9E7;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    top: 15px;
    left: 13px;
    z-index: -1;
    transform: none;
    transition: all 0.3s ease-in-out;
}
.form-wrap:hover::after{transform: translate(-2px, -2px);}
.form-wrap .bg-img{
    width: 165px;
    height: 165px;
    background: url(../images/vectors/dotted-circles-vector.svg) no-repeat center / contain;
    position: absolute;
    right: -85px;
    bottom: -88px;
    z-index: -1;
}










/* -- Responsive -- */
@media only screen and (min-width: 768px){
    .row-design-1 .image-box figure{min-height: 400px;}
}
@media only screen and (min-width: 992px){
    .row-design-1 .content-box{margin-right: -2px;}
    .row-design-1:nth-child(odd) .content-box{
        margin-right: 0;
        margin-left: -2px;
    }
}
@media only screen and (min-width: 1200px){
    header .navbar-nav .nav-item{
        margin: 0 0.5rem;
        padding-inline: 1rem;
    }
}

@media only screen and (max-width: 1399px){
    .img-wrap-1 figure{max-width: 90%;}

    .hexagone-grid .column{
        width: 175px;
        height: 203px;
        padding: 15px 25px;
        margin: 0 -8px -23px;
    }
    
    .block-design-2 figure{height: 165px;}
    .block-design-2 .content{padding: 25px 25px;}
    .block-design-2 .content .btn-group{gap: 5px;}
}

@media only screen and (max-width: 1199px){
    .logo-box{padding: 15px 15px;}

    .about-section{padding-bottom: 100px;}
    .img-wrap-1::after{width: 400px; height: 300px; bottom: -30%;}
    .img-wrap-1 figure{height: 320px;}

    .hexagone-grid{padding-right: 0;}

    footer, footer::after{clip-path: polygon(50% 9%, 100% 0, 100% 100%, 0 100%, 0 0);}
    footer .path-wrap{top: 25px;}
    footer .path-wrap > svg{height: 50px;}

    .count-list li{column-gap: 10px; margin-bottom: 15px;}
    
    .block-design-2 .content .btn{padding: 0.2rem 0.7rem;}
    .block-design-2 .content .btn.whatsapp-btn i{font-size: inherit;}
}

@media only screen and (max-width: 991px){
    .top-bar .column{font-size: 0.8rem;}
    header .navbar-collapse{
        position: absolute;
        top: 102px;
        left: 0;
        width: 100%;
        background-color: #f8f8f8;
        box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    header .navbar-nav .nav-item:not(:last-child){margin: 6px 8px;}
    header.fixed .navbar-collapse{top: 73px;}

    .about-section{padding-bottom: 70px;}
    .img-wrap-1::after{
        left: -45%;
        bottom: -22%;
    }
    .img-wrap-1 figure{max-width: 100%;}
    .exp-line{font-size: 1.1rem;}

    .hexagone-grid{gap: 0px 0px;}
    .hexagone-grid .column:first-child{margin-left: 0;}
    .hexagone-grid .column{
        width: 165px;
        height: 193px;
        padding: 15px 18px;
        margin: 0 5px -25px;
    }
    .hexagone-grid .column p{font-size: 0.9rem;}

    footer, footer::after{clip-path: polygon(50% 6%, 100% 0, 100% 100%, 0 100%, 0 0);}
    footer::after{height: 92.5%;}
    footer .path-wrap .icon{transform: translateX(0) rotate(-4deg);}
    
    .count-list li .number{
        width: 80px;
        font-size: 1.4rem;
    }
    .count-list li p{font-size: 1.7rem;}

    .row-design-1 .content-box{
        padding: 20px 25px 35px;
        margin-bottom: -15px;
    }
    .row-design-1 .image-box figure{
        min-height: auto;
        padding: 20px 20px;
    }

}

@media only screen and (max-width: 767px){
    .section-block{
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .section-block-md{
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .top-bar .column + .column{margin-top: 10px;}
    header .navbar-brand{width: 210px;}
    header .navbar-collapse{top: 92px;}

    .img-wrap-1::after{left: -40%; bottom: -10%;}

    .hexagone-grid .column{width: 150px; height: 178px; padding: 10px 15px 15px; margin: 0 8px 10px;}
    .hexagone-grid .column .icon{margin-bottom: 7px;}

    .block-design-1 figure{padding: 30px 10px 40px; border-radius: 30px 30px 0 0;}
    .block-design-1 figcaption > *{font-size: 1.1rem;}

    .services-block{padding: 20px 20px 20px;}
    .services-block .content{font-size: 0.9rem;}
    .services-block .content .title{max-width: 95%; font-size: 1rem; padding: 5px 20px 5px; margin: 0 0 10px -20px;}

    .clients-section .grid-box{justify-content: center;}
    .clients-section .grid-box .logo-box{flex: 0 0 calc(100% / 3 - 20px);}

    footer, footer::after{clip-path: polygon(50% 4.4%, 100% 0, 100% 100%, 0 100%, 0 0);}
    footer::after{height: 94.4%;}
    footer .path-wrap .icon{top: -10px; transform: translateX(0) rotate(-4deg);}
    footer .path-wrap > svg{height: 40px;}
    footer .copyright p{padding: 8px 15px;}

    .member-column .name{font-size: 1.3rem;}
    
    .row-design-1 .content-box{padding: 20px 20px 35px;}
    .row-design-1 .content-box .title{font-size: 1.3rem;}

    .block-design-2 figure{height: 140px;}
    .block-design-2 .content{padding: 20px 20px;}
    .block-design-2 .content .title{margin-bottom: 8px;}
    .block-design-2 .content .btn, .block-design-2 .content .btn i{font-size: 0.8rem;}

    .filter-dropdown .dropdown-menu .dropdown-item{padding: 0.4rem 0.7rem;}

    .form-wrap{padding: 25px 20px;}
}

@media only screen and (max-width: 575px){
    .heading-style{padding-bottom: 7px;}
    .heading-style.center-sm::after{
        left: 50%;
        transform: translateX(-50%);
    }

    header .navbar-brand{width: 190px;}
    header .navbar-collapse{top: 86px;}

    .img-wrap-1 figure{height: 250px;}
    .img-wrap-1::after{
        width: 350px;
        height: 250px;
    }
    .exp-line{font-size: 1.05rem;}
    
    .hexagone-grid{gap: 0 15px;}
    .hexagone-grid .column{
        width: 130px;
        height: 150px;
        padding: 6px 10px 10px;
        margin: 0 0 10px;
    }
    .hexagone-grid .column .icon img{max-width: 76%;}
    .hexagone-grid .column p{font-size: 0.8rem;}

    .services-block{padding: 20px 15px 20px;}
    .services-block .content .title{
        padding: 5px 15px 5px;
        margin: 0 0 10px -15px;
    }
    .services-block figure{
        height: auto;
        margin-left: auto;
    }
    .services-block figure img{height: 80%;}

    footer::after{opacity: 0.6;}
    footer .widget .title{font-size: 1.3rem;}
    footer .widget .info-list > li .icon{
        width: 23px;
        height: 23px;
    }
    footer .widget .link-list > li a{
        padding: 2px 0 2px 30px;
    }
    footer .widget .link-list > li a::before{
        width: 23px;
        height: 15px;
    }
    
    .cta-modal .btn-close{
        width: 2em;
        height: 2em;
        top: 4px;
        right: 4px;
        transform: translateY(0);
        padding: 0.5rem 0.5rem;
    }
    .cta-modal .modal-dialog{top: auto;}
    .cta-modal .modal-content .modal-title{
        font-size: 1.1rem!important;
        margin-bottom: 5px;
    }
    .cta-modal .modal-body{padding: 0.7rem 3rem 0.7rem 1rem;}
    .cta-modal .modal-body .content{font-size: 0.9rem;}

    .count-list li {
        column-gap: 7px;
        margin-bottom: 0px;
    }
    .count-list li .number{
        width: 68px;
        font-size: 1.2rem;
    }
    .count-list li p{font-size: 1.5rem;}
    
    .member-column figure{
        display: inline-block;
        width: 75%;
        padding: 0 10px 10px 0;
        margin: 0 8px 10px;
    }
    .member-column .name{font-size: 1.1rem;}
    .member-column .content{font-size: 0.9rem;}
    
    .row-design-1 .content-box .title{font-size: 1.2rem;}
    
    .contact-page .info-column .title{font-size: 1.1rem;}
}

@media only screen and (max-width: 480px){
    .top-bar .column{font-size: 0.68rem;}

    .img-wrap-1 figure{height: 220px;}
    .img-wrap-1::after{
        width: 320px;
        height: 220px;
    }
    .list-style-icon li{padding-left: 26px;}

    .hexagone-grid{gap: 0 12px;}

    .clients-section .grid-box .logo-box{
        height: 85px;
        padding: 10px 10px;
        flex: 0 0 calc(100% / 3 - 15px);
    }

    footer{padding-top: 120px;}
    footer, footer::after{clip-path: polygon(50% 3%, 100% 0, 100% 100%, 0 100%, 0 0);}
    footer::after{height: 95.8%;}
    footer .path-wrap{top: 20px;}
    footer .path-wrap .icon{
        top: -8px;
        transform: translateX(0) rotate(-6deg);
        width: 48px;
    }
    footer .path-wrap > svg{height: 31px;}

    .cta-modal .btn-close{
        width: 2em;
        height: 2em;
        top: 4px;
        right: 4px;
        transform: translateY(0);
        padding: 0.5rem 0.5rem;
    }
    .cta-modal .modal-content .modal-title{font-size: 1rem!important;}
    .cta-modal .modal-body{padding: 0.4rem 2.8rem 0.5rem 0.8rem;}
    .cta-modal .modal-body .content{font-size: 0.8rem;}
    .cta-modal .modal-body .btn{
        font-size: 0.9rem;
        padding: 0.2rem 0.9rem;
    }
    .cta-modal .modal-body .btn img{
        width: 15px;
        margin: -3px 6px 0 -4px;
    }

    .row-design-1 .content-box{
        font-size: 0.9rem;
        padding: 12px 15px 30px;
    }
    .row-design-1 .content-box .title{font-size: 1.1rem;}
    .row-design-1 .image-box figure{padding: 15px 10px;}
    
    .form-wrap{padding: 18px 15px;}
    .form-wrap::after{
        top: 10px;
        left: 10px;
    }
}

@media only screen and (max-width: 420px){
    .clients-page .logo-box{height: 100px;}
}
































