.navgpstracking {
    color: #00bdff !important;
    text-align: center;
}

.page-footer1 {
    background: -webkit-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
    background: -o-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
    background: -ms-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
    background: -moz-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
    background: linear-gradient(to right, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
    color: grey;
    font-family: "DINRegular";
    font-size: 13px;
    text-align: left;
    padding: 1%;
}
@keyframes fadeInUp {
    from {
        transform: translate3d(0,60px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

body {
    position: relative;
}

.owl-next,
.owl-prev {
    display: none !important;
}

.logo-slider img {
    width: 100%;
}

.logo-slider .slick-slide {
    margin: 15px;
}

.slick-dots li.slick-active button:before {
    color: white;
    /* background: linear-gradient(186deg, rgba(0, 139, 168, 1) 35%, rgba(127, 0, 149, 1) 72%); */
}

.slick-dots li button:before {
    font-size: 12px;
}

.brands .container {
    text-align: center !important;
    width: 50% !important;
    padding-left: 30px !important;
}


@media(max-width: 505px) {
    .nav-pills .nav-link {
        border-radius: 0rem;
    }

    .ipadgps {
        display: none !important;
    }

    .ipadsection3 {
        display: none !important;
    }

    .mobilegps {
        display: block !important;
    }

    .mobilesection3 {
        display: block !important;
    }

    .navlinkside {
        background: rgb(130, 0, 192);
        background: -moz-linear-gradient(180deg, rgba(130, 0, 192, 1) 0%, rgba(106, 0, 166, 1) 37%, rgba(85, 0, 143, 1) 69%);
        background: -webkit-linear-gradient(180deg, rgba(130, 0, 192, 1) 0%, rgba(106, 0, 166, 1) 37%, rgba(85, 0, 143, 1) 69%);
        background: linear-gradient(180deg, rgba(130, 0, 192, 1) 0%, rgba(106, 0, 166, 1) 37%, rgba(85, 0, 143, 1) 69%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8200c0", endColorstr="#55008f", GradientType=1);
        color: white !important;
        padding: 11px 0px 10px 3px !important;
        transform: rotate(180deg);
        font-size: 8px !important;
        font-family: 'DINNextLTArabicLight';
    }


    .carousel-inner2 {
        padding: 10% 5% 5% 5% !important;
    }

    /* fieldset {
        width: 80%;
    }

    legend {
        margin-bottom: 0rem;
    } */

    .brands .container {
        text-align: center !important;
        width: 100% !important;
        padding-left: 0px !important;
    }

    .carousel-inner1 {
        padding: 10% 0% 5% 0% !important;
    }
}

.item {
    text-align: center !important;

    /*                     width:10% !important;*/
}

.logo-slider {
    text-align: center !important;
    padding: 10px !important;
    margin: 0 !important;
    /*                    width:10% !important;*/
}

nav {
    font-family: "DINRegular";
    font-size: 26px;
    background-color: #151520;
}

.border {
    border: 1px solid purple !important;
}

.border {
    background-color: #f0efff;
    border-radius: 20px;
    padding: 1rem;
    font-family: 'DINNextLTArabicLight';
    font-size: 1rem;
    color: #ff8e00;
    box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
    border: solid 1px transparent;
    background-image: linear-gradient(rgb(255, 11, 11), rgba(255, 255, 255, 0)), linear-gradient(101deg, #ff8e00, #7a167c);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 3px 1000px 1px #f0efff inset;
}

#navbar-left .nav-item {
    float: left;
    clear: left;
}

#navbar-leftmobile .nav-item {
    float: left;
    clear: left;
}

.navlinkside {
    background: rgb(130, 0, 192);
    background: -moz-linear-gradient(180deg, rgba(130, 0, 192, 1) 0%, rgba(106, 0, 166, 1) 37%, rgba(85, 0, 143, 1) 69%);
    background: -webkit-linear-gradient(180deg, rgba(130, 0, 192, 1) 0%, rgba(106, 0, 166, 1) 37%, rgba(85, 0, 143, 1) 69%);
    background: linear-gradient(180deg, rgba(130, 0, 192, 1) 0%, rgba(106, 0, 166, 1) 37%, rgba(85, 0, 143, 1) 69%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8200c0", endColorstr="#55008f", GradientType=1);
    color: white !important;
    padding: 8px 5px 8px 8px;

    transform: rotate(180deg);
    font-size: 11px !important;
    font-family: 'DINNextLTArabicLight';
}

.bg-light {

    background-color: transparent !important;
}

#navbar-left {
    position: fixed;
    top: 25%;
    left: 0;
    color: white !important;
    width: 10%;
    padding: 0 !important;
    margin: 0 !important;
/*    display: none;*/
    z-index: 888 !important;
    height: 40vh;
}


.carousel-inner1 {
    padding: 0% 5% 5% 0%;
}

.text-column {
    padding-top: 5% !important;
}



.topcorner {
    border-bottom-left-radius: 4rem !important;
}

.bottomcorner {
    border-top-left-radius: 4rem !important;
}

.gps-card-text {
    font-family: 'DINNextLTArabicLight';
    font-size: 20px !important;
    text-align: left !important;
    color: white !important;
    line-height: 1.1 !important;
    padding-top: 5%;
}


@media screen and (min-width: 799px) and (max-width:850px) {
    body {
        overflow-x: hidden !important;
    }

    /* .aboutus-desktop {
        display: block !important;
    }

    .aboutus-mobile {
        display: none !important;
    } */

    .gps-title1 {
        text-align: center;
        position: relative;
        font-family: 'DINNextLTArabicLight';
        font-size: 50px !important;
        color: #ff8e00 !important;
        padding: 12% 0% 0% 0%;
    }

    .gps-card-text {
        font-family: 'DINNextLTArabicLight';
        font-size: 25px !important;
        text-align: left !important;
        color: white !important;
        line-height: 1.1 !important;
        padding-top: 5%;
    }

    .card-text {
        font-family: 'DINNextLTArabicLight';
        color: #2d106a !important;
        font-size: 20px !important;
        text-align: left !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
    }

    .text-column {
        padding-top: 0% !important;
    }

    legend {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin-bottom: 0rem;
        font-size: 1.5rem;
        line-height: inherit;
        color: inherit;
        white-space: normal;
        text-align: center;
    }

    /* .ipadgps {
        display: block !important;
    }

    .mobilegps {
        display: none !important;
    }

    .ipadsection3 {
        display: flex !important;
    }

    .mobilesection3 {
        display: none !important;
    } */




}

.arrowbounce {
    animation: key1 1s ease infinite alternate;
}

@keyframes key1 {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-20px);
    }
}




section {
    background-color: #f0efff;
    position: relative;
}

section img {
    position: absolute;

}

.cardsize {
    width: 22%;
}



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops


  
*/


@media (min-width: 1600px) {
    .aboutus-section2 {
        /* height: 100vh; */
        height: 1000px;
    }


    .gps-section4 {
        height: 1200px;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .aboutus-section2 {
        /* height: 100vh; */
        height: 850px;
    }

    .gps-section4 {
        height: 1000px;
    }
}

@media (min-width: 1000px) and (max-width: 1199px) {
    .aboutus-section2 {
        /* height: 100vh; */
        height: 650px;
    }

    .gps-section4 {
        height: 800px;
    }
}

@media (min-width: 769px) and (max-width: 999px) {
    .aboutus-section2 {
        /* height: 100vh; */
        height: 550px;
    }

    .gps-section4 {
        height: 800px;
    }
}



@media (min-width: 1281px) {

    /* FLEET IMAGE LAYERS start */
    .centered {
        z-index: 2;

        left: 35% !important;
        top: 5.5vw !important;
        width: 30% !important;
        animation: fadeInUp 1s;

    }
 

    .card1 {
        left: 9%;
        top: 2.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;
    }

    .card2 {

        left: 4%;
        top: 17vw;
        z-index: 990;
        animation: fadeIn 1s ease-in both;
        animation-delay: 2s;
    }

    .card3 {

        left: 14%;
        top: 29vw !important;
        animation: fadeIn 1s ease-in both;
        animation-delay: 3s;
    }

    .card4 {

        right: 6%;
        top: 4.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 4s;
    }

    .card5 {

        right: 7%;
        top: 18.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 5s;
    }

    .cardsize {
        width: 30%;
    }

/*    .aboutus-section2 {
         height: 100vh; 
       height: 1000px;
    }*/

    /* FLEET IMAGE LAYERS END */


    /* INSURNCE FIRST IMAGE LAYERS start */


    .insurancetext {
        width: 30%;
        left: 50%;
        top: 0vw;
        animation: fadeIn 1s ease-in both;

    }

    .circle1 {

        left: 8% !important;
        top: 3vw;
        width: 10%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 0s;
    }

    .line1 {

        left: 12% !important;
        top: 6vw;
        width: 80%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 0s;
    }



    .circle2 {
        width: 6.5%;
        left: 20% !important;
        top: 3.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 0.5s;

    }

    .line2 {
        left: 22% !important;
        top: 3vw;
        width: 68%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 0.5s;
    }

    .circle3 {

        width: 8.5%;
        left: 29% !important;
        top: 3.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;
    }

    .line3 {

        left: 32% !important;
        top: 1.3vw;
        width: 56%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;
    }

    .circle4 {

        width: 5%;
        left: 40% !important;
        top: 3.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1.5s;
    }

    .line4 {

        left: 43% !important;
        top: 0.8vw;
        width: 43%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1.5s;
    }



    /* 
    .gps-section4 {
        height: 120vh;
    } */

    /* DRIVERS FIRST IMAGE LAYERS END */

}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {

    /* FLEET IMAGE LAYERS start */
    .centered {
        z-index: 2;

        left: 35% !important;
        top: 5.5vw !important;
        width: 30% !important;
        animation: fadeInUp 1s;

    }


    .card1 {

        left: 9%;
        top: 2.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;

    }

    .card2 {

        left: 4%;
        top: 17vw;
        z-index: 990;
        animation: fadeIn 1s ease-in both;
        animation-delay: 2s;
    }

    .card3 {

        left: 14%;
        top: 29vw !important;
        animation: fadeIn 1s ease-in both;
        animation-delay: 3s;
    }

    .card4 {

        right: 6%;
        top: 4.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 4s;
    }

    .card5 {

        right: 7%;
        top: 18.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 5s;
    }

    .cardsize {
        width: 30%;
    }


    /* FLEET IMAGE LAYERS END */


    /* INSURNCE FIRST IMAGE LAYERS start */


    .insurancetext {
        width: 30%;
        left: 50%;
        top: 0vw;
        animation: fadeIn 1s ease-in both;

    }

    .circle1 {

        left: 8% !important;
        top: 3vw;
        width: 10%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;
    }

    .line1 {

        left: 12% !important;
        top: 6vw;
        width: 80%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;
    }



    .circle2 {
        width: 6.5%;
        left: 20% !important;
        top: 3.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 2s;

    }

    .line2 {
        left: 22% !important;
        top: 3vw;
        width: 68%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 2s;
    }

    .circle3 {

        width: 8.5%;
        left: 29% !important;
        top: 3.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 3s;
    }

    .line3 {

        left: 32% !important;
        top: 1.3vw;
        width: 56%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 3s;
    }

    .circle4 {

        width: 5%;
        left: 40% !important;
        top: 3.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 4s;
    }

    .line4 {

        left: 43% !important;
        top: 0.8vw;
        width: 43%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 4s;
    }
/* .aboutus-section2 {
         height: 100vh; 
       height: 750px !important;
    }*/
    /* .gps-section4 {
        height: 80vh;
    } */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, -20%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 769px) and (max-width: 1024px) {

    /* FLEET IMAGE LAYERS start */
    .centered {
        z-index: 2;

        left: 35% !important;
        top: 5.5vw !important;
        width: 30% !important;
        animation: fadeInUp 1s;
    }


    .card1 {
        left: 9%;
        top: 2.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;
    }

    .card2 {

        left: 4%;
        top: 17vw;
        z-index: 990;
        animation: fadeIn 1s ease-in both;
        animation-delay: 2s;
    }

    .card3 {

        left: 14%;
        top: 29vw !important;
        animation: fadeIn 1s ease-in both;
        animation-delay: 3s;
    }

    .card4 {

        right: 6%;
        top: 4.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 4s;
    }

    .card5 {

        right: 7%;
        top: 18.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 5s;
    }

    .cardsize {
        width: 30%;
    }

    /* .aboutus-section2 {
        height: 134vh;
    } */

    /* FLEET IMAGE LAYERS end */


    /* INSURNCE FIRST IMAGE LAYERS start */


    .insurancetext {
        width: 30%;
        left: 50%;
        top: 0vw;
        animation: fadeIn 1s ease-in both;

    }

    .circle1 {

        left: 8% !important;
        top: 3vw;
        width: 10%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;
    }

    .line1 {

        left: 12% !important;
        top: 6vw;
        width: 80%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;
    }



    .circle2 {
        width: 6.5%;
        left: 20% !important;
        top: 3.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 2s;

    }

    .line2 {
        left: 22% !important;
        top: 3vw;
        width: 68%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 2s;
    }

    .circle3 {

        width: 8.5%;
        left: 29% !important;
        top: 3.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 3s;
    }

    .line3 {

        left: 32% !important;
        top: 1.3vw;
        width: 56%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 3s;
    }

    .circle4 {

        width: 5%;
        left: 40% !important;
        top: 3.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 4s;
    }

    .line4 {

        left: 43% !important;
        top: 0.8vw;
        width: 43%;
        animation: fadeIn 1s ease-in both;
        animation-delay: 4s;
    }

    /* .gps-section4 {
        height: 160vh;
    } */

    .driverimage {
        width: 68%;
        margin-left: 32%;

    }

    .iconimg {
        width: 26%;
    }

    .iconimg1 {
        width: 30%;
    }

    .iconimg2 {
        width: 17%;
    }

}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {

    /* FLEET IMAGE LAYERS start */
    .centered {
        z-index: 2;

        left: 35% !important;
        top: 5.5vw !important;
        width: 30% !important;
        animation: fadeInUp 1s;
    }


    .card1 {
        left: 9%;
        top: 2.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 1s;
    }

    .card2 {

        left: 4%;
        top: 17vw;
        z-index: 990;
        animation: fadeIn 1s ease-in both;
        animation-delay: 2s;
    }

    .card3 {

        left: 14%;
        top: 29vw !important;
        animation: fadeIn 1s ease-in both;
        animation-delay: 3s;
    }

    .card4 {

        right: 6%;
        top: 4.5vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 4s;
    }

    .card5 {

        right: 7%;
        top: 18.8vw;
        animation: fadeIn 1s ease-in both;
        animation-delay: 5s;
    }

    .cardsize {
        width: 30%;
    }

/*    .aboutus-section2 {
        height: 95vh !important;
    }*/

    /* DRIVERS FIRST IMAGE LAYERS END */

    /* .gps-section4 {
        height: 130vh !important;
    } */

    .driverimage {
        width: 68%;
        margin-left: 32%;

    }

    .iconimg {
        width: 26%;
    }

    .iconimg1 {
        width: 30%;
    }

    .iconimg2 {
        width: 17%;
    }


}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {
    .page-footer1 {
        background: -webkit-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: -o-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: -ms-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: -moz-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: linear-gradient(to right, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        color: grey;
        font-family: "DINRegular";
        font-size: 13px;
        text-align: center;
        padding: 1%;
    }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {
    .page-footer1 {
        background: -webkit-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: -o-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: -ms-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: -moz-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: linear-gradient(to right, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        color: grey;
        font-family: "DINRegular";
        font-size: 13px;
        text-align: center;
        padding: 1%;
    }
}


@media (min-width: 100px) and (max-width: 319px) {
    .page-footer1 {
        background: -webkit-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: -o-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: -ms-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: -moz-linear-gradient(left, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        background: linear-gradient(to right, rgb(13, 8, 18) 0%, rgb(23, 23, 38) 80%);
        color: grey;
        font-family: "DINRegular";
        font-size: 13px;
        text-align: center;
        padding: 1%;
    }
}



/* PROGRESS BAR START */
.circle {

    margin: 6px 6px 20px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 1.2;
}

.circle canvas {
    vertical-align: top;
    width: 200px !important;
}

.circle strong {
    font-family: 'DINNextLTArabicLight';
    position: absolute;
    top: 85px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 40px;
    color: #ff8e00;
}

.circle strong i {
    font-style: normal;
    font-size: 0.6em;
    font-weight: normal;
}

.circle span {
    font-family: 'DINNextLTArabicLight';
    font-size: 18px;
    display: block;
    color: white;
    margin-top: 12px;
}

.slick-dots li.slick-active button:before {
    color: white !important;
    /* background: linear-gradient(186deg, rgba(0, 139, 168, 1) 35%, rgba(127, 0, 149, 1) 72%); */
}


/* PROGRESS BAR END  */