:root {
    --black-color: #04232F;
    --text-color: #4F4F4F;
    --accent-color: #02B1D0;
    --formUnfilledText-color: #B3C0FF;
    --formUnfilled-color: #B5B5B5;
    --red-color: #F94D4D;

}

* {
    box-sizing: border-box;
}
body {
    font-family: 'Inter', sans-serif;
}

 /* -------------------------------- Start NavBar -------------------------------- */
.navbar {
    justify-content: center;
    padding: 0;
}

.navbar .container {
    margin-left: 10.3rem;
    margin-right: 10.3rem;

}

.navbar .navbar-nav .nav-link {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--text-color);
}
.navbar .navbar-nav .nav-link.active {
    color: var(--accent-color);
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
}

.navbar .navbar-nav .nav-link:hover
{
    color: var(--accent-color);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar .navbar-toggler {
    padding-right: 0%;
}


 /* -------------------------------- End NavBar -------------------------------- */




/* -------------------------------- Start main-container --------------------------------*/
.main-container {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
/* -------------------------------- End main-container --------------------------------*/


/* -------------------------------- Start Landing --------------------------------*/


.main-container .landing {
    position: relative;
    max-width: 1400px;

}


.landing .landing-content {
    position: absolute;
    left: 8%;
    top: 34%;
    display: flex;
    flex-wrap: wrap;
    /* flex-direction; */
}

.landing .landing-content span {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 130%;
    color: #FFFFFF;
    padding-bottom: 28px;
}

.landing .landing-content a {
    width: 190px;
    height: 48px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    background: #02B1D0;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
}
.landing img {
    width: 100%;
}
/* -------------------------------- End Landing --------------------------------*/


/*-------------------------------- Start About us -------------------------------- */
.about-us {
    display: flex;
    flex-wrap: wrap;
    margin-left: 10.3rem;
    margin-right: 10.3rem;
    padding: 0;
}

.about-us .header-title {
    display: inline-block;
    padding-top: 132px;
    padding-bottom: 68px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 130%;
    text-align: center;
    color: #04232F;
}

.about-us .description  {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #4F4F4F;
    padding-right: 30px;
    padding-left: 0;
}

.about-us img {
    padding-right: 0 ;
}


/*-------------------------------- End About Us --------------------------------*/



/* -------------------------------- Start Our-trackers --------------------------------*/

.our-trackers{
    margin-left: 10.3rem;
    margin-right: 10.3rem;
    padding-bottom: 132px;
}
.Our-trackers-header {
    text-align: center;
    padding-top: 77px;
    padding-bottom: 57px;
    font-weight: 600;
    font-size: 32px;
    line-height: 130%;
}

.Our-trackers-content {
    display: flex;
    grid-gap: 30px;
    justify-content: space-between;
}

.trackers {
    background: #F4F6FF;
    border-radius: 8px;
    width: 22%;
    height: 374;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.trackers img {
    padding-left: 34px;
    padding-top: 36px;
    padding-right: 34px;
    padding-bottom: 10px;
}

.trackers span {
    display: block;
    text-align: center;
    padding-bottom: 20px;
}

.btn-See-our-devices {
    display: flex;
    justify-content: flex-end;
    padding-top: 59px;
}

.btn-See-our-devices .btn {
    width: 171px;
    height: 48px;
    border: 2px solid #02B1D0;
    border-radius: 8px;
    background-color: #fff;
    color: #02B1D0;
    font-size: 16px;
    line-height: 19px;
    color: #02B1D0;
}
/* --------------------------------  End Our-trackers --------------------------------*/



/* --------------------------------  Start Vehicle trackers --------------------------------*/
.Vehicle-trackers {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between; */
    padding-left: 23px;
    padding-right: 23px;
    padding-bottom: 89px;
}

.Vehicle-trackers .header-items {
    font-size: 24px;
    line-height: 130%;
    text-transform: uppercase;
    color: #000000;
    font-weight: 500;
    padding-bottom: 5px;
}

.Vehicle-trackers .Vehicle-trackers-header {
    text-transform: none;
}

.Vehicle-trackers .header-items:last-child {
    padding-top: 70px;
}

.Vehicle-trackers .items-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 70px;
}

.Vehicle-trackers .items-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card-body {
    flex: unset !important;
    padding: 1rem 1rem;
}

.Vehicle-trackers-header {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 130%;
    text-align: center;
    color: #04232F;
}


.Vehicle-trackers .card {
    margin-top: 55px;
    width: 23%!important;
    margin-top: 12px;
    justify-content: space-around;
}

.Vehicle-trackers .items-1 .card:last-child {
    width: 460px !important;
}

.Vehicle-trackers .items-2 .card:last-child {
    width: 460px !important;
}

.Vehicle-trackers .items-1 .card:last-child img {
    padding-left: 136px;
    padding-right: 138px;
}

.Vehicle-trackers .items-2 .card:last-child img{
    padding-left: 136px;
    padding-right: 138px;
}


.Vehicle-trackers.card-img-top {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}
.Vehicle-trackers .card-body {
    padding: 1.5rem 1rem;
    text-align: center;
}

.tracker.Vehicle-trackers {
    padding-bottom: 0 ;
}
/* --------------------------------  End Vehicle trackers --------------------------------*/



/* --------------------------------  Start Vehicle trackers items --------------------------------*/
.Vehicle-trackers-item .item-content {
    display: flex;
}

.card-text {

    color: #4F4F4F;

}

.Vehicle-trackers-item .history-links  {

    padding-top: 55px;
    padding-bottom: 100px;
}

.Vehicle-trackers-item .history-links a {

    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    color: #4F4F4F;
    text-decoration: none;
}

.Vehicle-trackers-item .history-links a:last-child {
    color: #02B1D0;
    font-weight: bold;
}


.Vehicle-trackers-item .item-content img {
    width: 347px;
    height: 413.56px;
    /* object-fit: cover; */
}

.Vehicle-trackers-item .item-description {
    padding-left: 30px;
}

.Vehicle-trackers-item .item-content .Vehicle-trackers-name {
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    color: #04232F;
    display: block;
    
    padding-bottom: 25px;
}

.Vehicle-trackers-item .item-content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #3C3C3C;
    margin-bottom: 0;
    padding-bottom: 62px;
}

.Vehicle-trackers-item .Vehicle-trackers-overview {

    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #02B1D0;
    padding-top: 62px;

}

.Vehicle-trackers-item .unorder-list {
    display: flex;
    justify-content: space-between;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    padding-top: 47px;
    color: #4F4F4F;
    
}

.Vehicle-trackers-item ul {
    padding-left: 1.3rem;
    width: 46%;
}


.btn-user-manual-container {
    display: flex;
    padding-bottom: 77px;
}

.btn-user-manual-container .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 296.54px;
    height: 46px;
    background: #02B1D0;
    border-radius: 8px;
    border: none;
}

#icon-pdf{
    width: 17.29px;
    height: 22px;
}

#icon-download {
    width: 21.25px;
    height: 20px;
}

.a-download {
    text-decoration: none;
}



.Vehicle-trackers-item .btn-user-manual-container .btn span {
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
}



.Vehicle-trackers-item .btn-user-manual-container .btn.btn-user-manual {
    background: #02B1D0;
}

.Vehicle-trackers-item .btn-user-manual-container .btn.btn-datasheet {
    background: #4F4F4F;
    margin-left: 30.46px;
}

#BTTP20-img {

    height: 290.56px;

}

/* --------------------------------  End Vehicle trackers items --------------------------------*/




/* --------------------------------  Start Use cases --------------------------------*/

.use-cases .accordion {
    padding-bottom: 136px;
}

.use-cases .use-cases-header {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 130%;
    text-align: center;
    color: #04232F;
}

.use-cases .accordion-body {
    padding-top: 1rem;
    padding-bottom: 100px;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    background: #FAF9F9;
    box-shadow: 0px 1px 1px rgba(2, 177, 208, 0.25);
}

.accordion-button::after {
    background-image: url(../imgs/icons/akar-icons_plus.svg);
    transform: rotate(-180deg);
    padding-right: 27.33px;

}


.accordion-button:not(.collapsed)::after {
    background-image: url(../imgs/icons/akar-icons_minus.svg);
    transform: rotate(-180deg);
    /* transition: .6s; */
    
}

.accordion-flush .accordion-item .accordion-button.accordion-button-first {
    border-radius: 0;
    background: #FAF9F9;
    box-shadow: 0px 1px 1px rgb(2 177 208 / 25%);
    border-radius: 8px 8px 0px 0px;
}

.accordion-flush .accordion-item .accordion-button.accordion-button-last {
    border-radius: 0;
    background: #FAF9F9;
    box-shadow: 0px 1px 1px rgb(2 177 208 / 25%);
    border-radius: 0px 0px 8px 8px;
}

.accordion-flush .accordion-item .accordion-button {
    background: #FAF9F9;
    box-shadow: 0px 1px 1px rgba(2, 177, 208, 0.25);
    border-radius: 0px;
    height: 76px;
    font-weight: 500;
    font-size: 22px;
    line-height: 130%;
    text-transform: capitalize;
    color: #4F4F4F;
    padding-left: 22px;
}

.use-cases .accordion-body .use-case-img {
    padding-bottom: 110px;
    width: 100%;
}

.use-cases .accordion-body .use-case-span {
    padding-left: 190px;
    padding-right: 190px;
    text-align: center;
    display: block;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    color: #4F4F4F;
    padding-bottom: 50px;
}

.use-cases .accordion-body .use-case-description{
    display: flex;
    align-items: center;
    padding-bottom: 20px;
}

.use-cases .accordion-body .use-case-description-ul {
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 0;
}

.use-cases .accordion-body .use-case-description-ul .use-case-des {
    width: 91%;
    padding-left: 17px;
}

.use-cases .accordion-body .use-case-description-ul .use-case-ul {
    padding-top: 39px;
}

.use-cases .accordion-body .use-case-description-ul  .use-case-li {
    font-size: 18px;
    line-height: 150%;
    color: #04232F;
    padding-bottom: 5px;
}


.use-cases .accordion-body .use-case-description-container {
    padding-left: 105px;
    align-items: flex-start;
}


.use-cases .accordion-body .use-case-description-2span .use-case-indes {
    font-size: 18px;
    line-height: 150%;
    color: #04232F;
}

.use-cases .accordion-body .use-case-description-2span {
    padding-bottom: 38px;
}

.use-cases .accordion-body .use-case-des{
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    text-transform: capitalize;
    color: #4F4F4F;
    padding-left: 15px;
}


/* --------------------------------  End Use cases --------------------------------*/






/* --------------------------------  Start Contact us --------------------------------*/

.contact-us {
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    background: url("../imgs/Contact-us.jpg") no-repeat;
    background-size: cover;
    position: relative;
    
}


.contact-us .contact-us-container  {
    width: 540px;
    height: 740px;
    margin-top: 101px !important;
    margin-bottom: 99px !important;
    max-width: 540px;
    margin: auto;
    background: #FAF9F9;
    border-radius: 10px;
    padding: 101px 450 99px 450px ;
    
}

.contact-us .contact-us-container textarea {
    resize: none;
}

.contact-us-form {

    position: absolute;
    left: 31.25%;
    right: 31.25%;
    top: 10.72%;
    bottom: 10.61%;
    background: #FAF9F9;
    border-radius: 10px;
}

.contact-us .header-contact-us {
    padding-left: 94px;
    padding-top: 47px;
}

.contact-us .header-contact-us .title-contact-us{
    display: block;
    font-weight: 600;
    font-size: 32px;
    line-height: 130%;
    color: #04232F;
}

.contact-us .header-contact-us .label-of-title-contact-us{
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #4F4F4F;
}



.contact-us .contact-us-input-group {
    padding-left: 95px;
    padding-right: 95px;
    padding-top: 24px;
    margin: 0 !important;
}

#first-contact-us-input-group {
    padding-top: 34px;
}

#last-contact-us-input-group{
    padding-top: 32px;
}

.contact-us .contact-us-input-group label{
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #4F4F4F;
    margin: 0;
    padding-bottom: 12px;
}

.contact-us .contact-us-input-group input{
    border: 1px solid #B3C0FF;
    box-sizing: border-box;
    border-radius: 8px;
    padding-left: 20px;
    height: 48px;
    background-color: #FAF9F9;
}

.contact-us .contact-us-input-group span{
    color: red;
}

.contact-us .contact-us-input-group textarea {
    height: 120px;
    border: 1px solid #B3C0FF;
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #FAF9F9;
}

.contact-us .contact-us-input-group input::placeholder ,
.contact-us .contact-us-input-group textarea::placeholder 
{
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #B5B5B5;
}

.contact-us .contact-us-input-group textarea::placeholder {

    padding-top: 5px;
    
}


.contact-us .btn-contact-us-container {
    display: flex;
    justify-content: flex-end;
    padding-right: 95px;
    padding-top: 32px;
}

.contact-us .btn-contact-us-container .btn {

    background: #02B1D0;
    border-radius: 8px;
    width: 190px;
    height: 48px;
    border: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
}

/* --------------------------------  End Contact us --------------------------------*/

/* --------------------------------  Start Footer --------------------------------*/

.footer  {
    padding: 35px  0;
    background:var(--black-color);
}

.footer .footer-site-logo {
    display: block;
}

.footer  span {
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #B5B5B5;
}

.footer  .links li {
    margin-bottom: 10px;
}

.footer .navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 49px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.footer .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #B5B5B5;
}


.footer .powered-content {
    text-align: center;
}

.footer .powered-content span {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #939393;
}


.footer .footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .footer-content img{
    margin-left: 74px;
}


/* --------------------------------  End Footer --------------------------------*/
.overley-form {
    background: rgba(196, 196, 196, 0.73);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    /* padding-top: 330px ;
    padding-bottom: 307px ;
    padding-left:470px ;
    padding-right:470px ; */
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: none;
    z-index:999;
}

.show-modal-success {
    width: 500px;
    height: 300px;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 2px 40px rgba(51, 50, 50, 0.05);
    border-radius: 4px;
    display:none;
    margin: auto !important;
    /* padding-top: 93px; */
}

.show-modal-success span {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #333232;
    display: block;
    /* padding-bottom: 25px; */
}

.show-modal-success p {
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    color: #696867;
    /* padding-left: 55px;
    padding-right: 55px; */
}

.contact-us-input-group .form-control.errorContact{

    border:1px solid #F94D4D;
}

.contact-us-input-group .form-control-textarea.errorContact{

    border:1px solid #F94D4D;
} 


.iti__flag-container .iti__arrow {
    display: none;
}

.iti--separate-dial-code .iti__arrow {
    display: inline-block;
}
.contact-us .contact-us-input-group span {
    color:#000000 !important;
}

.contact-us .contact-us-input-group .star-span {
    color:red !important;
}

/* .iti__flag-container {
    /* width: 100% !important; 
    right: auto !important;
}

.iti--separate-dial-code .iti__selected-flag {
    /* width: fit-content !important; 
}

.iti__country {
    white-space: unset !important;
}
.iti__country-list {
    white-space: unset !important;
} */