* {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    font-size: 16px;
}


body {
    overflow-x: hidden;
}


li {
    list-style: none;
}

a {
    text-decoration: none;
}

nav.navbar {


    /*    padding: 0;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    background-color: #fff;
    z-index: 10;

    margin: 0 auto;
    /* position: fixed; */
    top: 0;
    width: 100%;

}

.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 55%;

   margin-bottom: 0;
   padding-bottom: 0;

}



nav a.nav-link {

    color: black;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    position: relative;
}

nav a.nav-link:hover {
    color: #324fe6;
}

nav a.nav-link::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 0%;
    background-color: #324fe6;
    left: 0;

    bottom: 0;
    transition: 0.3s ease-in-out;

}

nav a.nav-link:hover::after {
    width: 100%;
}


.btn {
    width: 180px;
    background-color: #324fe6;

    border-radius: 2px;
    color: white;
    font-size: 14px;
    padding: 10px 0;
    box-shadow: inset 0 0 0 0 #4d6af9;
    transition: 0.3s;
}

.btn img {
    margin-left: 3px;
}

.btn:hover {
    color: white;
    box-shadow: inset 180px 0 0 0 #4d6af9;
}

@media (max-width: 1200px){

    .nav-menu{
        width: 65%;
    }
    
}

@media (max-width: 992px) {
    nav.navbar {
        /* position: fixed; */
        top: 0;
        width: 100%;
        margin: 0 auto;
    }

    .nav-menu {
        /* position: fixed; */
        position: absolute;
        right: -100%;
        top: 70px;
        z-index: 10;
        flex-direction: column;
        background-color: #fff;

        border-top: 1px solid #eee;
        text-align: center;
        transition: 0.3s ease-in-out;
        height: 480px;
        padding: 10% 0 16%;
    }

    .nav-menu.active {
        right: 0%;

    }


    .hamburger {
        display: block;
        cursor: pointer;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        -webkit-transform: translateY(8px) rotate(45deg);
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        -webkit-transform: translateY(-8px) rotate(-45deg);
        transform: translateY(-8px) rotate(-45deg);
    }
}

@media(max-width:768px) {
    .nav-menu {
        width: 100%;
        height: 640px;
        padding-bottom: 30%;
    }
}

@media(max-width:576px) {
 

    ul.nav-menu {
        height: 620px;
    }
}

@media(max-width:375px) {
    .nav-menu {
        height: 520px;
    }
}

/* HEADER  */

header {
    /* height: 90vh; */
    height: 560px;
    position: relative;
    background-color: #f4f7fd;
    z-index: -2;
    margin-top: 70px;


}



h1 {
    font-size: 50px;
    color: black;
    font-weight: bold;
}

header p {
    color: #616161;
    font-weight: 500;
}

.header-content {
    width: 85%;

}

header .container {
    position: relative;
}

.green-top {
    position: absolute;
    width: 24%;
    top: -10%;
    right: 10%;
    z-index: -1;
}

.blue-arrow {
    position: absolute;
    width: 8%;
    left: -2%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: -1;
}

.img-header {
    position: relative;

}

.img-header img {
    max-width: 100%;
}

.img-header:before {
    content: url(img/dots.png);

    top: -34px;
    right: -34px;
    position: absolute;
    z-index: -1;

}

.img-header::after {
    content: url(img/card.png);
    position: absolute;
    transform: scale(0.8);
    top: 160px;
    left: -100px;
}

@media(min-width:1400px) {
    header {
        height: 760px;
    }

    .img-header::after {

        top: 250px;
        left: -100px;
    }
}


@media(min-width:1380px) {
    .blue-arrow {

        left: 0%;

    }
}



@media(max-width:1300px) {

    .blue-arrow,
    .green-top {
        display: none;
    }


}

@media(max-width:1200px) {
    h1 {
        font-size: 40px;
        width: 100%;
    }

    .img-header::after {

        top: 110px;
        left: -100px;
    }

}

@media(max-width:992px) {


    h1 {
        font-size: 34px;
        width: 100%;
    }

    .img-header::after {

        transform: scale(0.6);

        top: 40px;
    }

    header {
        height: 480px;
    }


}

@media(max-width:768px) {

    .header-content {
        width: 95%;
        margin: 0 auto;
        text-align: center;
    }

    .img-header {
        margin: 0 auto;
        width: 80%;
    }

    .img-header::after {
        transform: scale(0.7);
        top: 90px;

    }


    header {
        height: 640px;
    }

    h1 {
        font-size: 30px;
    }

    header p {
        padding-top: 8px;
        margin-bottom: -50px;
    }

    .img-header {
        padding-bottom: 24px;
    }
}

@media(max-width:576px) {
    .img-header {
        width: 75%;
    }

    .img-header::after {

        transform: scale(0.6);
        left: -70px;
        top: 75px;
    }

    header {
        height: 620px;
    }
}

@media(max-width:555px) {
    .img-header {
        width: 75%;
    }

    .img-header::after {

        transform: scale(0.6);
        left: -80px;
        top: 55px;
    }

}

@media(max-width:460px) {


    .img-header::after {

        transform: scale(0.5);

        top: 35px;
    }

}

@media(max-width:375px) {

    h1 {
        font-size: 22px;
    }

    header p {
        font-size: 14px;
    }

    .img-header::after {

        transform: scale(0.4);
        left: -100px;
        top: 2px;
    }

    header {
        height: 520px;
    }

}

/* SECTION.FEATURES   */
section.features {
    padding: 70px 0;
    width: 100%;
    position: relative;
    height: 100%;
}

.green-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: -2;
    width: 7%;
}

div.ftr img {
    width: 20%;
}


h2 {
    color: black;
    text-align: center;
    font-weight: 700;
    font-size: 40px;
}



p.text-ftr {
    text-align: center;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 400;
    color: #3b4365;

    padding-bottom: 40px;
}



p.green {
    font-weight: 800;
    color: #11d2ad;
    text-align: center;
}



div.ftr img {
    margin: 0 auto;
    text-align: center;
    display: block;
}

div.ftr h4 {
    text-align: center;
    padding: 16px 0 10px;
    font-size: 16px;
    font-weight: 700;
}



div.ftr {
    width: 98%;
    transition: 0.3s;
    margin: 0 auto;
    display: block;
    height: 270px;
    box-shadow: 4px 4px 4px 4px #eee;
    background-color: white;
}

div.ftr:hover {
    transform: scale(1.2);
}

div.ftr p {
    width: 90%;
    margin: 0 auto;
    color: #3b4365;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

@media(max-width:992px) {
    .green-arrow {
        display: none;
    }

    p.text-ftr {
        width: 95%;
    }

    div.ftr3,
    div.ftr4 {
        margin-top: 20px;
    }

    .features .row {
        margin: 0 auto;
    }

    h2 {
        font-size: 30px;
    }
}

@media(max-width:768px) {
    div.ftr2 {
        margin-top: 20px;
    }

    h2 {
        font-size: 26px;
    }
}




/* SECTION.card  */
section.card {
    background-color: #f4f7fd;
    width: 100%;
    height: 520px;
    border: none;

    position: static;
    z-index: -2;
}

section.card h2 {
    text-align: left;
    width: 80%;
}

div.check p {
    display: inline-block;
    color: #3b4365;
    font-size: 14px;
    font-weight: 600;
}

div.check {
    margin-left: 10px;
    line-height: 10px;
}

div.card-img {
    width: 110%;
    margin-left: -10%;
}



section.card .row {
    position: relative;
    z-index: 3;
}




section.card .btn {
    margin-top: 12px;

}




@media(min-width:1380px) {
    div.shape-img {
        position: relative;

    }

    div.shape-img::after {
        position: absolute;
        content: url(img/shapes.png);
        display: block;
        top: 0;
        left: 0%;
        width: 10%;
        height: auto;
        max-width: 100px;
    }
}



@media(max-width:992px) {


    section.card h2 {
        width: 98%;

    }

    div.check {
        margin-left: -10px;
        font-size: 12px;
        width: 110%;
    }
}

@media(max-width:768px) {
    div.card-img {
        width: 100%;
        margin: 0 auto;
    }

    section.card h2,
    p {

        text-align: center;
    }

    div.check {
        margin-left: 10px;
    }

    section.card {
        height: 800px;
    }

    p.card-content {
        margin: 18px 0 28px;
    }

    section.card div.btn {
        margin: 20px auto 0;
        display: block;
    }

    .card-img img {
        margin-top: -70px;
    }
}




/* section.impact  */
section.impact {
    /* height: 80vh; */
    height: 500px;
    /* max-width: 1325px; */
    z-index: -2;
    position: relative;

    margin: 0 auto;
    background-image: url(img/world\ map.png);
    background-position: center;
    background-repeat: no-repeat;
}


.impact p.green {

    margin-top: -40px;
}

.impact h2 {
    width: 90%;
    margin: 0 auto 40px;

}

.impact h3 {
    font-size: 50px;
    font-weight: 700;
    color: #324fe6;
    text-align: center;
}

.impact .col-lg-3 p {
    font-weight: 700;
    color: black;
    text-align: center;
}

div.numbers {
    border-right: 1px solid #ccc;
    padding: 0 1%;
}

div.last-box {
    border: none;
}

@media(max-width:992px) {
    div.numbers {

        border: none;
    }

    .third-box,
    .last-box {
        margin-top: 70px;
    }

    .impact p.green {
        margin-top: 70px;
    }

    section.impact {

        margin-bottom: 70px;
    }
}


@media(max-width:768px) {

    .impact h3 {
        font-size: 40px;
    }
}

@media(max-width:576px) {


    .third-box,
    .last-box,
    .second-box {
        margin-top: 26px;
    }

    section.impact {

        margin-bottom: 250px;
    }

    .impact p.green {
        margin-top: 70px;
    }
}


/* section.truck  */

section.fuel-truck {
    background-image: url(img/truck\ image.jpg);
    height: 500px;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: -2;

}

div.shadow {

    height: 100%;
    position: relative;
}


img.green-arrow2 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    position: absolute;
    height: 50%;
    left: 0;
    top: -25%;

    z-index: 1;
}


section.fuel-truck h2 {
    text-align: left;
}



@media(max-width:1300px) {
    img.green-arrow2 {
        display: none;
    }
}

@media(max-width:992px) {

    div.shadow {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);

    }

    section.fuel-truck h2 {
        color: white;
    }

    section.fuel-truck p {
        color: #ddd;
    }
}



@media(max-width:768px) {

    div.shadow {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);

        height: 360px;
    }

    section.fuel-truck {
        height: 360px;
    }

    section.fuel-truck h2 {

        text-align: center;
        padding-bottom: 10px;
    }

    div.truck-text {
        margin-top: 0;
    }


}



/* section.reviews  */


section.reviews {
    padding: 70px 0;
}

img.stars {
    margin-bottom: 30px;
}

section.reviews .img-man {
    padding: 0;
}


section.reviews .box-shadow {
    -webkit-box-shadow: 23px -13px 100px -23px rgba(193, 193, 193, 1);
    -moz-box-shadow: 3px -13px 100px -23px rgba(193, 193, 193, 1);
    box-shadow: 23px -13px 100px -23px rgba(193, 193, 193, 1);
    border-radius: 4px;
}

.shadow-border {
    margin: 0;
    padding: 0;
}



.shadow-border section {
    width: 90%;
    margin: 0 auto;
}

.shadow-border h3 {
    font-size: 30px;
    font-weight: 700;
    margin: -26px 0 16px;
}

section.reviews p.text-center {
    padding: 10px 0;
}

div.img-man img {
    position: relative;
}

div.img-man::before {
    content: url(img/dots.png);
    position: absolute;
    z-index: -1;
    top: -26px;
    left: -26px;
}

p.quote {
    text-align: right;
    color: #324fe6;
    font-size: 14px;
    font-weight: 700;
    margin-top: 20px;
}

.box-shadow {
    position: relative;
    padding: 0;
    margin: 0;
}

.two-arrows {
    position: absolute;
    width: 4%;
    right: 0;
    top: 18px;
    padding: 0;
    z-index: -1;
}

@media(max-width:1300px) {
    .two-arrows {
        display: none;
    }
}

@media(max-width:1200px) {

    .shadow-border h3 {
        font-size: 24px;
    }

}

@media(max-width:992px) {


    .box-shadow {
        width: 80%;
        margin: 0 auto;
    }

    div.img-man {
        height: 60%;
    }

    section.reviews p.text-center {
        padding-bottom: 30px;
    }

    .review-content {
        padding: 30px 0;
    }
}

@media(max-width:768px) {
    .shadow-border h3 {
        text-align: center;
        font-size: 24px;
    }
}


@media(max-width:576px) {
    div.img-man::before {

        display: none;

    }

    .box-shadow {
        width: 90%;
        margin: 0 auto;
    }

}


/* section.last  */
section.last-section {
    padding: 0 0 60px;
}

section.last-section h4 {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    padding-bottom: 30px;
}

@media(max-width:768px){
    section.last-section div.item {
       text-align: center;
        margin: 0 auto 20px;
    }
}


footer p {
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    color: #999;
    padding: 0;
    margin: 0;
}

footer {
    background-color: #f4f7fd;
    padding: 14px;
}