@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
:root{
  --color_primary:#f30a25;
  --color_white:#fff;
  --color_secondary:#000;
  --color_text:#4e4e4e;
  --color_dark:#2b2d2f;
  --color_primary_1:#f30a25;
  --color_primary_2:#690509;
  --color_body:#f4f4f4;
  --color_boder:#313131;
  --box_shadow:   rgba(0, 0, 0, 0.24) 0px 3px 5px;
  --btn_gradient:linear-gradient(to right top, var(--color_primary_1) ,var(--color_primary_2));
  --transition: 300ms ease ;
  --sm_margin:4rem;
  --xs_margin:2rem;
  --half_margin:8rem;
  --full_margin:16rem;
  --h1:4rem;
  --h2:3.5rem;
  --h3:3rem;
  --h4:2.5rem;
  --h5:1.1rem;
  --h6:1.6rem;
  --animate-duration: 800ms !important;
  --animate-delay: 2s !important;
}


/*===== Timeline Css=====*/
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1170px;
  margin-top: 0 auto;
  margin-top:1rem !important;

}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

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

Main components 
-------------------------------- */

@media only screen and (min-width: 1170px) {

}

#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block::after {
  clear: both;
  content: "";
  display: table;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
    top: 20px;
    left: 0;
    width: 50px;
    height: 50px;
  background-color: #0f9cf3;
  text-align:center;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #ffffff, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img svg {
  display: block;
  position: relative;
    left: 50%;
   top: 35%;
    margin-left: -8px;
    margin-right: -8px;
  color:white !important;
}
.cd-timeline-img.cd-picture {
  background: #75ce66;
}
.cd-timeline-img.cd-movie {
  background: #c03b44;
}
.cd-timeline-img.cd-location {
  background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -moz-transform: scale(1.2);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.cd-timeline-content {
  position: relative;
  margin-left: 60px;
 background:#f4f4f4 !important;
  border-radius: 0.25em;
  padding: 1em;
  box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content::after {
  clear: both;
  content: "";
  display: table;
}
.cd-timeline-content h2 {
  color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
  float: right;
  padding: .8em 1em;
  background: #acb7c0;
  color: #ffffff;
  border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #bac4cb;
}
.cd-timeline-content .cd-date {
  float: left;
  padding: .8em 0;
  opacity: .7;
}
.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #ffffff;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
  

}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%;
  }
  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #ffffff;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
  }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #ffffff;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
  .cssanimations .cd-timeline-content.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-content.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-2 0.6s;
    -moz-animation: cd-bounce-2 0.6s;
    animation: cd-bounce-2 0.6s;
  }
}

@media only screen and (min-width: 1170px) {
  /* inverse bounce effect on even content blocks */
  .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
    -webkit-animation: cd-bounce-2-inverse 0.6s;
    -moz-animation: cd-bounce-2-inverse 0.6s;
    animation: cd-bounce-2-inverse 0.6s;
  }
}
@-webkit-keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(20px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -moz-transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(-20px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
/*====== End timeline css====*/

/* Add this CSS to your stylesheet */
nav {
  transition: all 0.3s ease;
  /* other navbar styles */
}

.window-scroll {
  background-color: #fff; /* example background color */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* example box shadow */
  /* other styles for the scrolled state */
}


::-webkit-scrollbar {
  width: 10px;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
  color: black !important;
  background:none !important;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* body{
  font:14px/24px 'Heebo', sans-serif !important;
} */
/* For normal text */
/* body {
  font-family: "Times New Roman", Times, serif !important;
  font:14px/24px;
} */

/* For headings */
/* h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, serif !important;
} */

/* For decorative text */
/* p.special {
  font-family: Garamond, serif !important;
} */

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2));
  /* height: 5rem; */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to top right, var(--color_primary_1) ,var(--color_dark));
}

.nav-link{
  color: var(--color_dark);
}
/* .nav-link{
  background: var(--btn_gradient);
} */
/* end of scroll bar */
*{
  margin:0;
  padding: 0;
  border: 0;
  outline: 0;
 font-size: 16px;
  text-decoration: none;
  box-sizing: border-box;

 
}

/* p{
  font-size: 16px !important; 
} */
/* .swal2-icon.swal2-success [class^=swal2-success-line] {

  background-color: var(--color_secondary) !important;
} */

/* .swal2-icon.swal2-success .swal2-success-ring {

  border: 0.25em solid var(--color_primary_1) !important;
} */
.contact-info{
  list-style-type: none;
}
.wrong_info{
  padding: 2rem;
  color: white;
  border-radius: .5rem;
}
/* ============API badge=========== */
.badge{
  width: 100% !important;
  padding: 0.5rem !important;
}
.news_img{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 1rem;
}

.track_container{
  width: 100%;
  position: relative;
  padding: 1rem;
}
.track_inner_container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  text-align: left !important;
}

.image_container{
  position: relative;
}
.arrow_dwon{
  position: absolute;
  top:40%;
  color: var(--color_body);
  left: 48%;
  right: 48%;
  box-shadow: var(--box_shadow);
  border-radius: 50%;
  animation: bounce 2s infinite;
  transition: var(--transition);


}
.arrow_dwon:hover{
  cursor: pointer;
  animation:none;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.fraud_card{
  width: 100%;
  background: var(--btn_gradient);
  color: var(--color_white);
}
.carousel_navs{
  display: flex;
  flex-direction: row !important;
  justify-content: space-between !important;
}

.fraud_head{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.delivery_container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form_lable{
  font-size: 1rem;
  font-weight: 900;
  display:block;
  margin-left: 1rem;
  margin-top: .1rem;
  color:#b10818;
  transition: all .5s;
}
.form_style:placeholder-shown + .form_lable{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2rem);
}


.de_style{
  border: solid #e9ecef;
  border-style: dashed;
  padding: 1rem;
  width: 100%;
  height: 100%;
  margin-top: 2rem;
}

.com_style{
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color_body)
}
.deposit{
  left: 10%;
}

.track_card_header{
  position: relative;
  height: 4rem;
  padding: 0;
}
.search_container{
  position: absolute;
  width: 70%;
  display: grid;
  right: 25%;
  transform: translateX(25%);
  gap: 1rem;
  margin: auto;
  padding: .5rem;
  grid-template-columns: 65% 15%;
}

.more_track_btn{
  background:transparent;
  color: var(--color_dark);
  border-radius: .5rem;
  /* line-height: 2.5rem; */
  border: solid 2px #ce0018;
  transition: var(--transition);
  transform: scale(1);
  font-weight: 500;
  text-align: center;
}
.table_position{
  position: relative;
  width: 100%;
  height: 60vh;
}

.table_position table{
  position: absolute;
  left: 50%;
}

.more_track_btn:hover{
  transform: scale(1.1);
  background-image: var(--btn_gradient);
  color: #fff;
  /* border: solid 2px #fff; */
}

.consinee_info{
  border: solid #e9ecef;
  border-style: dashed;
  padding: 1rem;
}

.tracking_number{
  border: solid #e9ecef;
  border-style: dashed;
  padding: 1rem; 
}

/*======== end of badge API*/

.wrong_info h3{
  font-size: 1.1rem;
  margin-top: .5rem;
}
.wrong_info h3 a{
  font-size: 1.1rem;
}


.quote_right_info .quote_img{
  width:40% !important; 
  height:15vh !important;
}

.quote_right_info h5{
  font-size: var(--h5) !important;
}

a{
  text-decoration: none !important;
  color: inherit;
}
a:hover{
  color: inherit;
}

.contact_aside p {
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: 1px;
}
.aside_img h5{
  font-size: var(--h4) !important;
  font-weight: 800;
}

body{
  background-color: var(--color_white);
  font-family: 'Montserrat', sans-serif;
  font:14px/24px;
}
.Services_headers{
  font-size: var(--h6);
  font-weight: 900;
  text-align: center;
}

.print_page{
  border-radius: .5rem;
  margin-top: -1rem;
}

html {
  scroll-behavior: smooth;
}
button{
  font-family: 'Montserrat', sans-serif;
}

.window-scroll{
  height: 6rem !important;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.377); 
  transition: all 300ms ease;
} 


.window-scroll .upper_inner_nav{
  visibility: hidden;
}

.fold_btn{
  display: none;
}

.navbar-toggler{
  color: var(--color_dark);
  background: var(--color_body);
}
/* navbar styling */


h1{
  font-size: var(--h3);
  font-weight: 900;
}

h5{
  font-size: var(--h5);
  font-weight: 700; 
  /* color: var(--color_text); */
}
h2{
 font-weight: 900;
}

.common_heading h5{
  position: relative;
  background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2));
  font-size: var(--h6) !important;
  text-transform: uppercase;
  text-align: left;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight: 900;
}

.common_heading{
  background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2));
  text-transform: uppercase;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight: 900;
}
.common_heading_modal{
  background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight: 900;
}

.small_heading{
  color: var(--color_text) !important;
  font-size: 1.1rem;
}
.small_heading p{
  font-size: 1.1rem;
  font-weight: 500;
}
.section_padding{
  padding: 1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  /* margin-top: 2rem; */
}


#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 30px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-image: var(--btn_gradient);
  width: 3rem;
  height:3rem;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: .5rem; /* Some padding */
  border-radius: 50%; /* Rounded corners */
  font-size: 12px; /* Increase font size */
  transform: scale(1);
  transition: var(--transition);
}
#myBtn:hover{
  transform: scale(1.2);
}
#Branches{

  background: var(--color_body);
  }
  .branch_layer{
    position: absolute;
    display: block;
    width: 100%;
    height: 100vh;
    top: 100;
    bottom: 100;
    background: rgba(0, 0, 0, 0.5);
    /* overflow-y: scroll; */
  }

  .contact-info{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 1rem;
    position: relative;
    height: 25vh;
  }

  .contact-info::before{
    position: absolute;
    content: '';
    display: block;
    width: 1%;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    background-image: var(--btn_gradient);
  }

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}


.fleets_section{
  background-color: var(--color_body);
}
.fleets_holder_right{
  text-align: right !important;

}
.fleets_text_left{
  text-align: left !important;
}
.fleets_text_right{
  text-align: justify;
  text-justify: inter-word;
}
.fleets_image_right{
  text-align: right !important;
}
.service_cards h5{
  font-weight: 900;
}


/*=================about team=====================*/


/* teams style */

.team{
  background: var(--color_body);
  /* box-shadow: inset 0 0 3rem rgb(243, 10, 37); */
  padding: 1rem;
}
.team_container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
}

.team_member{
  /* background: var(--btn_gradient);
  color: var(--color_light); */
  padding: .5rem;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.team_member:hover{
  background: var(--btn_gradient);
  border-color: 5px white;
  color: white;
  font-weight: 900;
}


.team_member:hover .team_img{
  border: solid #fff;
}
.about_icons{
  font-size: 1rem !important;
  background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2)) !important;
  padding: .7rem;
  border-radius: 50%;
}


.team_member:hover .team_socials{
 right: 0;
}

.team_member img{
  filter: saturate(1);
}

/* .team_member:hover img{
  filter: saturate(1);
} */

.team_member_info{
  text-align: center;
  margin-top: 1.4rem;
}

.team_member_info p{
  color: var(--color_light)
}
.team_member_info h5{
  /* color: #fff; */
  font-weight: 700;
}

.team_socials{
  position: absolute;
  top: 40%;
  right: -100%;
  display: flex;
  flex-direction: column;
  background: var(--color_body);
  border-radius: 1rem 0 0 1rem ;
  transform: translateY(-40%);
  transition: var(--transition);
  box-shadow: -2rem 0 2rem rgba(0, 0, 0, 0.308);
}

.team_socials a{
  padding: .5rem;
}

.product_banner{
  height: 55rem;
  width: 100%;
}


/*===================end of about team==================*/



/*============= end of mobile section =============*/

.services_style{
  margin-left: 11rem;
}

/* =============get a quote =============*/


/*=============end of get a quote================*/


/* ============= careers section ============= */

.career{
  height: 100vh;
  width: 100%;
  position: relative;
  background-image: url('../images/skynet pictures/JOINUS.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1);
  transition: var(--transition);

}

.career_inner_header{
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 25%;
  text-align: center;

}


.career_btn{
  min-width: 20%;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color_white);
  background: transparent;
  border: solid 1px var(--color_white);
}
.career_btn:hover{
  background:var(--color_primary_1);
  color: var(--color_white);
}
.job_btn{
  margin-top: 5rem;
}

.career_inner_header h1{

  color: var(--color_white);
}

.carreer_layer{
  position: absolute;
  display: block;
  width: 100%;
  height: 100vh;
  top: 100;
  bottom: 100;
  background: rgba(0, 0, 0, 0.5);
}

.job_search_div{
  display: grid;
  grid-template-columns: 40% 30% 30%;
  gap: 1rem;
  position: relative;
}
.search_and_input{
  display: grid;
  position: relative;
  grid-template-columns: 100%;
  /* gap: 1rem; */
}
.car_search{
  color: var(--color_primary_1);
  position: absolute;
  background: transparent;
  right: 0;
  top: 10%;
}
.closed_cards{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 1rem;
  position: relative;
  background: var(--color_body);
  /* height: 25vh; */
}

.closed_cards::before{
  position: absolute;
  content: '';
  display: block;
  width: 1%;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  background-image: var(--btn_gradient);
}
.success_badge{
  padding: .7rem;
}
.card_badge{
  position: absolute;
  top:0;
  right: 0;
  transform: rotate(45deg);
  width: 3rem;
  height: 2.5rem;
  
}
.header_icons{
  color: var(--color_primary_1);
  margin-right: 1rem;
}
.danger_header_icons{
  color: var(--color_primary);
  margin-right: 1rem;
}
.danger_text{
  color: var(--color_white);
  text-transform: uppercase;
}
.impotant_navs_text{
  font-size: 14px !important;
  color: var(--color_white);
  transition: var(--transition);
}
.impotant_navs_text:hover {
  background: var(--color_white);
  font-weight: 700;
  color:var(--color_primary_1)
}
.impotant_navs{
  width: auto;
  height: auto;
  display: flex;
  padding:.1rem;
  z-index: 2;
  /* position: absolute; */
  flex-direction: row;
  /* margin: 2rem; */
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fraud_awareness{
  position: absolute;
  right: 45%;
}

ul li a{
  text-decoration: none;
}
    /* ==================Navbar====== */
    .small_nav_side{
      display: none !important;
    }
    .print_image{
      display: none;
    }

nav{
 background-image: var(--btn_gradient);
  width: 100%;
  height: auto;
  top: 0;
  right: 0;
  border: none;
  height: 8rem;
  position: fixed;
  z-index: 99;
}
.upper_inner_nav{
  margin-top: .8rem;
}
.lower_inner_display{
  position: relative;
  display: grid;
  grid-template-columns: 100%;
}
.indus_back{
  display: none;
}

.lower_position{
   position: relative;
}
.nav_buttons{
  position: absolute;
  width: 100% !important;
  text-align: center;
}
.socials_ic{
  position: absolute;
  right: 5%;
  margin-top: .4rem;
}
.top_nav_text{
  color: var(--color_secondary);
  font-weight: 600;
  font-size: 17px;
  transition: var(--transition);
}
.top_nav_text:hover{
  color: var(--color_white);
  text-decoration: underline !important;
}
.so_icons{
  color: var(--color_primary_1);
  font-size: 1rem;
  background: white;
  border-radius: 50%;
  padding: .5rem;
}

.close_sidebar{
  display: none;
  visibility: hidden;
}
.nav_container{
  position: absolute;
  display: flex;
  top: 25%;
  bottom: 25%;
  margin-top: .5rem;
  justify-content: flex-start;
  align-items: center;
}
.nav_container_resize{
  margin-top: -1rem;
}
nav button{
  display: none;
}

.nav_menu{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2rem;
  list-style-type: none !important;
}

.nav_menu .nav-item .top_nav{
  color: var(--color_white) !important;
  font-weight: 600;
  line-height: 1rem;
  font-size: 17px;
  padding: .5rem;
}
.brand_icon{
  width: 100% !important;
  height: 4rem;
}
.brand_ref{
 border-style: dashed;
 width:auto;
 height: 100% !important;
}

.search_icon{
  color: var(--color_primary_2) !important;
  line-height: 1rem;
  padding: .5rem;
  border-radius: 5rem;
  background-color:var(--color_white); 
}

.nav-item .top_nav:hover{
  text-decoration: underline !important;
}

.nav-item .top_nav{
  transition: all 800ms ease;
}
.btn-close{
  color: #fff !important;
}

.dropdown:hover .dropdown-menu{
  display: block;
  transform: translateY(0);
}
.dropdown-menu{
  width: 40rem;
  transition: var(--transition);
}
.dropdown-item{
  padding: 1rem;
  font-weight: 400;
  color: var(--color_dark);
  transition: var(--transition);
}
.dropdown-item:hover{
  background: var(--color_primary_1);
  color: var(--color_white);
}

.form-check-input:checked {
  background-color: var(--color_primary_1) !important;
  border-color: var(--color_primary_1) !important;
}
.swal2-icon.swal2-info {
  border-color: var(--color_primary_1) !important;
  color: var(--color_primary_1) !important;
}

.send_radio{
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 2;
  padding: 1rem;
}
.form-check-input {
  margin-top: 0 !important;
}
/* =========sweet alert========== */
.swal2-popup {
  width: 50rem !important;
}
.swal2-html-container{
  overflow-x: hidden !important;
}
/* ===== end of sweet alerts-======== */
.footer{
  position: relative;
  background:#2b2d2f;
  color: white;
  padding: 3rem;
  border: none;
  overflow-y: hidden;
}

.footer_icons{
  /* margin-right: 1rem !important; */
}

.footer_image{
  position:absolute;
  margin: auto;
  left: 0;
  right: 0;
  top:-1rem;
  text-align: center;
}

.footer_btn{
  position:absolute;
  margin: auto;
  left: 0;
  right: 0;
  top:-6rem;
  bottom: 100;
  text-align: center;
  z-index: 1; 
  height: 5%;
  background: red;
  border: none;
}

.quick_btn{
  width: 5rem;
  height: 5rem;
  background-color: transparent !important;
  border: 2px solid var(--color_primary_1);
  border-radius: 50%;
  transition:  all 2s ease;
  padding: 0px;
  transform: scale(.9);
  transition: var(--transition);
  /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}
.quick_btn_round{
  width: 5rem;
  height: 5rem;
  background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2)) !important;
  /* border: .1rem solid var(--color_boder); */
  border-radius: 50%;
  box-shadow: var(--box_shadow);
  color: var(--color_white);
  font-size: 12px !important;
  padding: 6px;
  transform: scale(.9);
  font-weight: 600;
  transition: var(--transition);
  /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}
.quick_btn_round:hover{
  transform: scale(1);
}

.quick_btn:hover{
  transform: scale(1);
}
.outer_footer_btn{
  position: relative;
  margin-bottom: 1.5rem;
  width: 100%;
}
.inner_btn{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.core_btn{
  position: relative;
  width: 100%;
}
.new_quick_b1{
position: absolute;
top: -5rem;

}
.new_quick_b2{
  position: absolute;
 
  left: 5rem;

  }
  .new_quick_b3{
    position: absolute;
    right: 5rem;
  
    }
    .new_quick_b4{
      margin-top: 4rem;
      /* top: 2rem; */
   
    }
.animation_footer{
  display: none;
}

@keyframes show_action_btn {
  from {margin-top: 10rem;}
  to {margin-top: 0rem;}
}

@keyframes hide_action_btn {
  from {margin-top: 0rem;}
  to {margin-top: 15rem;}
}

.center_ul{
  position: relative;
}
.footer_center{
  position: absolute;
  left: 25%;
}

.footer_ul_center{
  margin-left: 8rem !important;
 
  /* margin: auto; */
}
.footer_ul{
  list-style-type: circle !important;
}

.socials{
  display: grid;
  grid-template-columns: 10% 10% 10% 10%;
  grid-area: 1rem;
  font-size: 2rem;
}

.socials a{
  color: var(--color_white) !important;
  margin-top: 1rem;
  gap: 1rem;
}
.sacials_icons{
  font-size: 1.5rem !important;
  background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2)) !important;
  padding: 1rem;
  border-radius: 50%;
}
.home_header{
  height: 100vh;
  width: 100%;
  position: relative;
  background-image: url('../website_images/hero.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 8rem;
  background-attachment: fixed !important;
}

.back_layer{
  position: absolute;
  display: block;
  width: 100%;
  height: 100vh;
  top: 100;
  bottom: 100;
  background: rgba(0, 0, 0, 0.3);
}
.inner_content{
 position: absolute;
 top: 15%;
 bottom: 15%;
 width: 100%;

}
.where_my_pa{
  margin-top: var(--half_margin);
  color: var(--color_white) !important;
      text-align: center;
}
.send_par_btn{
  background:transparent;
  color: var(--color_dark);
  width: 15%;
  border-radius: .5rem;
  line-height: 2.5rem;
  border: solid 2px #ce0018;
  transition: var(--transition);
  transform: scale(.9);
  font-weight: 500;
  text-align: center;
}
.send_par_btn:hover{
  transform: scale(1);
  background-image: var(--btn_gradient);
  color: #fff;
  border: solid 2px #fff;
}
.read_more_btn{
  background: transparent;
  color: var(--color_dark);
  width: 15rem;
  border: solid 2px var(--color_primary_1);
  text-align: center;
  height: 3rem;
  padding: auto;
  font-weight: 400;
  border-radius: 1rem;
  transform: scale(.9);
  transition: var(--transition);
}

.contact_btn{
  background: transparent;
  color: var(--color_dark);
  width: 40% !important;
  border: solid 2px var(--color_primary_1);
  text-align: center;
  height: 3rem;
  padding: auto;
  font-weight: 400;
  border-radius: 1rem;
  transform:scale(.9);
  transition: var(--transition);
}
.contact_btn:hover{
  background: var(--btn_gradient);
  color: white;
  transform:scale(1);
  border: solid 3px var(--color_white);
}

.read_more_btn:hover{
  background:var(--btn_gradient);
  color: var(--color_white);
  width: 15rem;
  border: solid var(--color_white);
  transform: scale(1);
  /* border: solid .5px var(--color_white) !important; */

}
.track_div{

  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 2rem;
}
.track_input{
  width: 40%;
  height: 4rem !important;
  background-color: transparent;
}
/* .row{
  background: purple;
} */

.track_btn{
  background-image: var(--btn_gradient);
  position: absolute;
  color: var(--color_white);
  width: 10%;
  height: 4rem;
  font-weight: 900;
  z-index: 2;
  right: 30%;
  font-size: 1.3rem !important;
  border-left: solid 0px !important;
  border: solid 1px var(--color_white);
}


.track_input::placeholder{
  color: var(--color_white) !important;
  font-weight: 400;
}

.header_cards{
 
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 5rem;
  gap: 1rem;
}
.welcome_cards{
  width: 20rem !important;
  border-radius: 1rem;
 background-image: var(--color_body) !important;
  height: 10rem;
  border: solid var(--color-white);
  overflow: hidden;
  position: relative;
  transition: var(--transition);
  transform: scale(.9);
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.welcome_cards:hover{
  cursor: pointer;
  transform: scale(1);
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;

}

.welcome_cards::before{
  position: absolute;
  content: '';
  width: 7rem;
  height: 3rem;
  display: block;
  background-image: var(--btn_gradient);
  margin:-27px;
  transform:rotate(45deg);
  right: 0;
}

.header_card_text{
  padding: .2rem;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  margin-top: 3rem;
  color: var(--color_dark) !important;
  text-align: center;
}

.fleets_holder{
  font-weight: 600 !important;
}

.wel_come_icon{
  text-align: center;
  color: var(--color_primary_1);
}

/* end of header section */

/* services section */
.right_card{
  border-radius: 50px 0 ;
  height: 68vh;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: var(--color_white);
}
.right_card_footer{
border-radius: 50px 0 !important;
}
.right_image{
  border-radius: 40px 0 ;
  height: 15rem;    
}
.left_card{
  border-radius: 0 50px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 68vh;
  background-color: var(--color_white);
}
.right_card_left{
  border-radius: 0 50px !important;   
}

.left_image{
  border-radius: 0 40px;
  height: 15rem;
}
.service_cards{
  margin-top: 2rem;
  padding: 5px;
}
.service_card_titile{
  font-weight: 900;
  color: var(--color_text); 
}

.services_section{
  background: var(--color_body) !important;
}

/* end of services section */


/* industry section */

.sector_imgs{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}
.industry_sector{
  background: var(--color_white) !important;
  padding-top: 6rem;
}

.sector_cards{
  height: 65vh;
  position: relative;
  transition:var(--transition);
  transform: scale(.95)

}
.pro_card{
  transition:var(--transition);
  transform: scale(.95);
}

.pro_card:hover{
  transform: scale(1);
  cursor: pointer;
}
.pro_card:hover .card-footer{
 background: var(--btn_gradient) ;
}
.pro_card:hover .read_more_btn{
  border: solid transparent;
  color: var(--color_white);
}
.sector_cards::before{
  content: '';
  display: block;
  position: absolute;
  width: 2%;
  min-height: 4vh;
  transition:transform .2s,
  width .4s cubic-bezier(1,0,0,1) .2s;
  background: rgba(0, 0, 0, 0.24);
  bottom: 41%;
}
.sector_cards:hover::before, .sector_cards:hover::after,.sector_cards:hover .sec_read_more_btn{
 
  background:var(--btn_gradient);
  color:var(--color_white);
  border: solid 1px var(--color-white);
}
.sector_cards:hover{
 transform: scale(1);
  cursor: pointer;
}

.sector_cards::after{
  content: '';
  display: block;
  position: absolute;
  width: 15%;
  min-height: 8vh;
  background: rgba(0, 0, 0, 0.239);
  border-top-left-radius: 100%;
  transition:transform 2s,
  width .4s cubic-bezier(1,0,0,1) 2s;
  bottom: 0%;
  right: 0;
}
.in_more_btn{
  position: absolute;
  bottom: 2%;
  left: 20%;
  right: 20%;
}
.cards_btn{
  width: auto;
  background: transparent;
  color: var(--color_primary_1);
  border: solid 1px var(--color_primary_1);
}

.cards_btn:hover{
  width: auto;
  background: var(--btn_gradient);
  color:var(--color_white);
  border: solid 1px var(--color_primary_1);
}


.indus_pro{
  margin-top: 1rem;
}

.inner_div_pro{

  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 3rem;
}
.indus_pro h6{
  font-size: 2rem;
  font-weight: 900 !important;
  color: var(--color_dark);
}

/* end of industry section */


/* mobile section */


/* frequently asked questions */

.accordion{
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.accordion-body{
  background-color: var(--color_body) !important;
}


.contact_container{
  background: var(--color_body) !important;
  padding: 4rem;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 2rem;
  height: 30rem;
  margin: 7rem auto;
  border-radius: 1rem;
}

.contact_aside{
  background: var(--btn_gradient);
  padding: 1rem;
  border-radius: 1rem;
  position: relative;
  color: var(--color_white);
  width: 100%;
  bottom: 10rem;
  height: 70vh;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.aside_img{
  width: 100%;
}
.contact_aside p{
 font-size:0.9rem ;
  margin-bottom: 1rem;
}
.contact_details li{
  display: flex;
  gap: 1rem;
  /* align-items: center; */
  margin-bottom: 2rem;
  padding: .2rem;
}
.contact_details{
  padding: 1rem;
  width: 35vw !important;
}
.contact_socials{
  display: flex;
  gap: 0.8rem;
  color: var(--color_white);
  margin-top: 5rem;
}

.contact_socials a{
/* background: var(--color_white); */
padding: 1rem;
border-radius: 50%;
font-size: 0.9rem;
transition: var(--transition);
}

.contact_socials a:hover{
  background:  transparent;
}

/* form stylying */
.contact_form{
  display:  flex;
  flex-direction: column;
  gap: 1.2rem;
}
.form_name{
  display: flex;
  gap: 1.2rem;
}
.form_name input[type="text"]{
  width: 50%;
}
input, textarea{
  width: 100%;
  padding: 1rem;
  background-color: var(--color_white);
  border-radius: .5rem;
  border: 1px solid #ced4da;
}
form .btn{
  width: max-content;
  margin-top: 1rem;
  cursor: pointer;
}
.contact_img{
  width: 100%;
  height: 20vh;
}
.contact_us_section{
  /* height: 85vh; */
  width: 100%;
  position: relative;
  background-image: url('../images/2173x1448_bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* end of contact us section */

/*================ Industry page ========================= */
.industry_nav{
  position: relative;
  min-height: 5rem;
  margin-top:8rem;
  background-color: var(--color_body);
  width: 100%;
  overflow: hidden;
  display: block;
}
.industry_items{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style: none;
  position: absolute;
  gap: 2rem;
  width: 100%;
  overflow: hidden;
  height: 100%;
  font-weight: 600;
  align-items: center;
}
.industry_links{
  padding: 2rem;
  width: 100%;
  font-weight: 600;
  transition: var(--transition);
}
.industry_items .industry_links:hover{
  background: var(--color_white);
  color: #ce0018;
  font-weight: 600;
}
.industry_items .active{
  position: relative;
  background: var(--color_white);
  min-height: 100%;
  color: #ce0018;
  font-weight: 600;
 
}
.owl-theme .owl-dots .active span{
  background: var(--btn_gradient) !important;
}
.fleet_carousel{
  position: relative !important;
}
.owl-theme .owl-nav{
  position: absolute !important;
  top: 20%;
  /* bottom: 20%; */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  height: 0%;
}
.owl-theme  span{
  font-size: 5rem;
  height: 0%;
  color: var(--color_primary_1);
  font-weight: 400;
}
.close_icon{
  /* float: right;
  color: white; */
}

/*==============end of industry page ==================== */

/* ===============about us section================ */

.about_section{
margin-top: 8rem !important;
}
.about_small_nav{
  width: 100%;
  height: 50%;
  background:var(--color_body);

}

.side_cards{
  background: var(--btn_gradient);
  color: var(--color_body);

}
.middle_card{
  background: var(--color_body);
  color: var(--color_primary_1);

}

.about_card_inner{
  position: absolute;
  top: 40%;
  bottom:40%;
   right: 2%;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  font-weight: 900 !important;
}
.about_cards{
  height: 50vh !important;
  font-weight: 900;
  width: 95%;
  /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
  position: relative;
  border-radius: 1rem;
  transition: var(--transition);
}
.about_text{
  text-align: justify;
  text-justify: inter-word;
}
.about_cards:hover{
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  cursor: pointer;
}
.mission{
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: 40%;
  height: 100%;
  background: linear-gradient(to left bottom, var(--color_primary_2), var(--color_primary_1));
  color: white;
  position: absolute;
}
.about_img{
  background-image: url('../website_images/about_hero.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 55vh;
  margin-top: -.5rem;
  width: 100%;
  position: relative;
}
.mission_text{
  position: absolute;
  font-family: Georgia, serif !important;
  top: 40%;
  bottom: 40%;
  width: 60%;
  left: 27%;
  right:27%;
}
.background{
display: block;
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ===========about use section=================== */
.services_style{
  margin-left: 11rem;
}

/* =============get a quote =============*/

.modal-header{
  background: var(--color_body);
/*   
  color: var(--color_primary_1) !important; */
}

/*=============end of get a quote================*/


/* ============= careers section ============= */

.career{
  height: 100vh;
  width: 100%;
  position: relative;
  background-image: url('../images/skynet pictures/JOINUS.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1);
  transition: var(--transition);

}

.career:hover{

}

.career_inner_header{
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 25%;
  text-align: center;

}


.career_btn{
  min-width: 20%;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color_white);
  background: transparent;
  border: solid 1px var(--color_white);
}
.career_btn:hover{
  background:var(--color_primary_1);
  color: var(--color_white);
}
.job_btn{
  margin-top: 5rem;
}

.career_inner_header h1{

  color: var(--color_white);
}

.carreer_layer{
  position: absolute;
  display: block;
  width: 100%;
  height: 100vh;
  top: 100;
  bottom: 100;
  background: rgba(0, 0, 0, 0.5);
}

.job_search_div{
  display: grid;
  grid-template-columns: 40% 30% 30%;
  gap: 1rem;
  position: relative;
}
.search_and_input{
  display: grid;
  position: relative;
  grid-template-columns: 100%;
  /* gap: 1rem; */
}
.car_search{
  color: var(--color_primary_1);
  position: absolute;
  background: transparent;
  right: 0;
  top: 10%;
}


.closed_cards{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 1rem;
  position: relative;
  background: var(--color_body);
  /* height: 25vh; */
}

.closed_cards::before{
  position: absolute;
  content: '';
  display: block;
  width: 1%;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  background-image: var(--btn_gradient);
}
.success_badge{
  padding: .7rem;
  /* border-top-right-radius: 1.5rem; */
}
.card_badge{
  position: absolute;
  top:0;
  right: 0;
  transform: rotate(45deg);
}
.gal_img{
  border-radius: .7rem;
  transition: var(--transition);
  transform: scale(1);
}
.gal_img:hover{
  transform: scale(.9);
}
/*============= end of career section =============*/

/* ===========client feedback====================== */

.client_feed_bark{
  width: 100%;
  position: relative;
  background-image: url('../footer_img/Background-website-01.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.testimonials_Container{
  overflow-x: hidden;
  position: relative;
  margin-bottom: 5rem;
}
.testimonial{
  padding-top: 2rem;
  transition: var(--transition);
}
.testimonial:hover .avatar{
  padding: 0rem;
}
.avatar{
  width: 6rem;
  height: 6rem;
  border-radius:50%;
  overflow: hidden;
  left: 50%;
  margin: 0 auto 1rem;
  padding: .5rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  z-index: 10;
  border: .5rem solid var(--color_primary_1);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}

.avatar img{
  z-index: 5;
  width: 100%;
  height: 100%;
  border-radius:50%;
}
.testimonial_info{
text-align: center;
}
.testimonial_body{
  background: #b10818;
  padding: 2rem;
  position: relative;
  margin-top: 2rem;
  color: var(--color_white);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.testimonial_body::before{
  content: '';
  display: block;
  background: linear-gradient(135deg, transparent, #b10818,#b10818);
  width: 3rem;
  height: 3rem;
  position: absolute;
  left: 45%;
  top: -1.5rem;
  transform: rotate(45deg);
}

/* =============end of client feedbark==============*/


/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (max-width: 320px){
  /* .row{
    background: blue;
  } */

  .arrow_dwon{
    top:60%;
    left: 45%;
  }
  .mission {
    width: 90%;
    aspect-ratio: 1;
    top: 10;
    bottom: -50%;
    transform: rotate(90deg);
}
.mission_text {
  transform: rotate(-90deg);
}
  .footer_center{
    position: static;
  }
  .team_container {
    display: grid;
    grid-template-columns:1fr;
    gap: 1.5rem;
}
.contact_btn {
    width: 70% !important;
}
  .product_banner {
    height: auto !important;
    width: 100%;
    margin-top: 8rem;
}
  .send_par_btn {
    width: 60%;
}
  .small_product{
    margin-top: 8rem !important;
  }
  .right_card{
    border-radius: 60px 0 ;
    height: 95vh !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: var(--color_white);
  }
  .right_card_footer{
  border-radius: 50px 0 !important;
  }
  .right_image{
    border-radius: 40px 0 ;
    height: auto;    
  }
  .left_card{
    border-radius: 0 70px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    height: 95vh !important;
    background-color: var(--color_white);
  }
  .right_card_left{
    border-radius: 0 50px !important;   
  }
  
  .left_image{
    border-radius: 0 40px;
    height: auto;
  }
  .sector_cards{
    height: 95vh !important;
    position: relative;
    transition:var(--transition);
  
  }
  .sector_cards::before{
    bottom: 50%;
  }
  #myBtn {

    width: 3rem;
    height:3rem;
  
  }
  .contact_socials {
    margin-top: 0;
}
.contact_details {
  padding: 0.5rem;
  width: 85vw !important;

}  
.contact_aside p {
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 1px;
}
.aside_img h5 {
  font-size: 1.6rem !important;
  font-weight: 800;
}
  .inner_content{
    position: absolute;
    top: -10%;
    /* bottom: 10%; */
    width: 100%;
   
   }
   .contact-info{
    height: 15rem !important;
   }
   .small_nav_side{
    display: block !important;
  }
  .branch_layer{
    overflow-y: scroll;
  }
  .big_nav_side{
    display: none !important;
  }
  
  .close_sidebar{
    display: block;
    visibility:visible;
    float: right;
    margin-top: -1.5rem;
    margin-right: -1.8rem;
   
  }
  nav{
    width: 100%;
    position: fixed;
  }
  /* .top_nav_{
    visibility: hidden;
  } */
  .nav_container{
    display: flex;
    justify-content: space-between;
  }
  .socials_ic{
  
    right:0;
  
  }
  .nav_buttons{
    margin-top: 1.1rem;
    padding: .2rem;
    visibility: hidden;
  }
  .socials_ic{
    margin-top: .5rem !important;
  }
  .upper_inner_nav{
    margin-top: 0 !important;
  }
  .top_nav_icons{
    color: var(--color_secondary);
    font-weight: 0;
    font-size: 1rem;
    gap: 0;
    margin: 0;
  }
  .nav_menu{
    position: fixed;
    right: 0;
    height: fit-content;
    width: 0%;
    top:0;
    background-image: var(--btn_gradient);
    height: 100vh;
    gap: 1rem;
    border-bottom: solid 5px;
    display: block;
    visibility: hidden;
    transition: var(--transition);
    margin-top: 0 !important;
  }
  .top_nav {
    padding: 1.2rem !important;
    border-bottom: solid 1px var(--color_white);
  }

  h1{
    font-size: 2rem !important;
  }
  .fold_btn{
    display: block;
    color: var(--color_white);
  }
  
  .quote_right_info .quote_img{
    width:50% !important; 
    height:12vh !important;
  }

  .contact_aside{
    bottom: 2rem;
    width: 100%;
    height: auto;

  }

.accordion{
  display: grid;
  grid-template-columns: 1fr;
}
.contact_container{
grid-template-columns: 100%;
gap: 0rem;
margin-top: 0;
padding: 0;
height: auto;
}
.contact_form{
margin: 0 1rem 1rem;
}
.form_name{
    flex-direction: column;
}

.form_name input[type="text"]{

    width: 100%;
}
.contact_form input, textarea{
  width: 100%;
  padding: 1rem;
  background-color: var(--color_white);
  color: var(--color_dark);
  border-radius: .5rem;
  border: solid .5px var(--color_dark);
}
  .socials{
    display: grid;
    grid-template-columns: 10% 10% 10% 10%;
    font-size: 2rem;
    gap: 2rem;
  }
  .fleets_holder_right{
    text-align: auto !important;
    font-weight: 900 !important;
  
  }
  .fleets_holder_left{
    font-weight: 900 !important;
  }
 
  .footer_ul_center{
    margin-left: 0 !important;
  }
  .fleets_text_left{
    text-align: left !important;
  }
  .fleets_text_right{
    text-align: auto;
    text-justify:distribute-all-lines;
  }
  .fleets_image_right{
    text-align:auto
  }
  .section_padding{
    padding: 1rem;
    padding-top: 3rem;
  }
  h1{
    font-size: var(--h3);
  }
  .track_input{
    width: 100%;
    margin: .5rem;
  }
  .track_btn{
    background-image: var(--btn_gradient);
    position: absolute;
    color: var(--color_white);
    width: 30%;
    height: 4rem;
    font-weight: 900;
    z-index: 2;
    right: 0;
    font-size: 1.3rem !important;
    border-left: solid 0px !important;
    border: solid 1px var(--color_white);
    margin: .5rem;
  }

  .sacials_icons{
    font-size: 1.1rem !important;
    background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2)) !important;
    padding: 1rem;
    border-radius: 50%;
    
  }
  .track_input::placeholder{
    color: var(--color_white) !important;
    font-weight: 100;
    font-size: 1rem;
  }
  
  .welcome_cards{
    width: 20rem !important;
    border-radius: 1rem;
    background-color: var(--color_body);
    height: 10rem;
  }
  
  .header_card_text{
    padding: 0rem;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-top: 2rem;
    color: var(--color_text) !important;
    text-align: center;
  }
  
  .industry_items{
    display:  flex;
    flex-direction: column;
    position: relative;
    grid-template-columns: 100%;
    align-items:flex-start;
    gap: 3rem;
    margin-top: 0rem; 

  
 }
 
.industry_nav{
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
left: 0;
width: 0%;
top:0;
height: 100vh;
position: fixed;
visibility: hidden;
margin-top: 0%;
z-index: 200;
transition: var(--transition);
 }

 .industry_items li{
   border-bottom: solid 1px var(--color_primary_1);
   color: white;
   width: 100%;
 }

 .indus_back{
  display: block;
}

.brand_icon{
  width: 80% !important;
}


}
@media (min-width: 321px) and (max-width: 480px) and (orientation:portrait){
     /* .row{
    background: pink;
  } */

  .arrow_dwon{
    top:70%;
     left: 45%;
  }
  .about_cards {
    height: 50vh !important;
}
  .team_container {
    display: grid;
    grid-template-columns:1fr;
    gap: 1.5rem;
}
/* .mission {
  width: 100%;
  aspect-ratio: 1;
  top: 10;
  bottom: -70%;
  transform: rotate(90deg);
}
.mission_text{
  transform: rotate(-180deg);
} */

.mission {
  width: 100%;
  aspect-ratio: 1;
  top: 10;
  bottom: -50%;
  transform: rotate(90deg);
}
.mission_text {
transform: rotate(-90deg);
}
.about_padding{
  margin-top: 19rem !important;
}
  .search_container{
    position: absolute;
    width: 100%;
    display: grid;
    right: 0%;
    transform: translateX(0%);
    grid-template-columns: 80% 20%;
    padding-right: 1rem;
    gap: .5rem;
  }
  .product_banner {
    height: auto !important;
    width: 100%;
    margin-top: 8rem;
}
  .send_par_btn {
    width: 60%;
}
  .small_product{
    margin-top: 8rem !important;
  }
  .footer_center {
    position: static;
   
}
  .right_card{
    border-radius: 60px 0 ;
    height: 71vh !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: var(--color_white);
  }
  .right_card_footer{
  border-radius: 50px 0 !important;
  }
  .right_image{
    border-radius: 40px 0 ;
    height: auto;    
  }
  .left_card{
    border-radius: 0 70px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    height: 71vh !important;
    background-color: var(--color_white);
  }
  .right_card_left{
    border-radius: 0 50px !important;   
  }
  
  .left_image{
    border-radius: 0 40px;
    height: auto;
  }
  .sector_cards{
    height: 71vh !important;
    position: relative;
    transition:var(--transition);
  
  }
  .sector_cards::before{
    bottom: 45%;
  }
  #myBtn {

    width: 3rem;
    height:3rem;
  
  }
  .contact_socials {
    margin-top: -2rem;
}
.contact_details {
  padding: 0.5rem;
  width: 90vw !important 
}

.aside_img h5 {
  font-size: 1.6rem !important;
  font-weight: 800;
}
  .inner_content{
    position: absolute;
    top: 0%;
    /* bottom: 10%; */
    width: 100%;
   }
   .contact-info{
    height: 15rem !important;
   }
   .small_nav_side{
    display: block !important;
  }
  .branch_layer{
    overflow-y: scroll;
  }
  .big_nav_side{
    display: none !important;
  }
  
  .close_sidebar{
    display: block;
    visibility:visible;
    float: right;
    margin-top: -1.5rem;
    margin-right: -1.8rem;
   
  }
  nav{
    width: 100%;
    position: fixed;
  }
  .top_nav_menu{
    visibility: hidden;
  }
  .nav_container{
    display: flex;
    justify-content: space-between;
  }
  .socials_ic{
    right:0;
  }
  .nav_buttons{
    margin-top: 1.1rem;
    padding: .2rem;
    visibility: hidden;
  }
  .socials_ic{
    margin-top: .5rem !important;
  }
  .upper_inner_nav{
    margin-top: 0 !important;
  }
  .top_nav_icons{
    color: var(--color_secondary);
    font-weight: 0;
    font-size: 1rem;
    gap: 0;
    margin: 0;
  }
  .nav_menu{
    position: fixed;
    right: 0;
    height: fit-content;
    width: 0%;
    top:0;
    background-image: var(--btn_gradient);
    height: 100vh;
    gap: 1rem;
    border-bottom: solid 5px;
    display: block;
    visibility: hidden;
    transition: var(--transition);
    margin-top: 0 !important;
  }
  
  
  .top_nav {
    padding: 1.2rem !important;
    border-bottom: solid 1px var(--color_white);
  }

  h1{
    font-size: 2rem !important;
  }
  .fold_btn{
    display: block;
    color: var(--color_white);
  }
  
  .quote_right_info .quote_img{
    width:50% !important; 
    height:12vh !important;
  }

  .contact_aside{
    bottom: 2rem;
    width: 100%;
  }

.accordion{
  display: grid;
  grid-template-columns: 1fr;
}
  .contact_container{
    grid-template-columns: 100%;
    gap: 0rem;
    margin-top: 0;
    padding: 0;
    height: auto;
}
.contact_form{
margin: 0 1rem 1rem;
}
.form_name{
    flex-direction: column;
}

.form_name input[type="text"]{
    width: 100%;
}
.contact_form input, textarea{
  width: 100%;
  padding: 1rem;
  background-color: var(--color_white);
  color: var(--color_dark);
  border-radius: .5rem;
  border: solid .5px var(--color_dark);
}
  .socials{
    display: grid;
    grid-template-columns: 10% 10% 10% 10%;
    font-size: 2rem;
    gap: 2rem;
  }

  .fleets_holder_right{
    text-align: auto !important;
    font-weight: 900 !important;
  
  }
  .fleets_holder_left{
    font-weight: 900 !important;
  }
  .contact_btn{
    width: 60% !important;
  }
  
  .footer_ul_center{
    margin-left: 0 !important;
  }
  .fleets_text_left{
    text-align: left !important;
  }
  .fleets_text_right{
    text-align: auto;
    text-justify:distribute-all-lines;
  }
  .fleets_image_right{
    text-align:auto
  }
  .section_padding{
    padding: 1rem;
    padding-top: 3rem;
  }
  h1{
    font-size: var(--h3);
  }
  .track_input{
    width: 100%;
    margin: .5rem;
  }
  .track_btn{
    background-image: var(--btn_gradient);
    position: absolute;
    color: var(--color_white);
    width: 30%;
    height: 4rem;
    font-weight: 900;
    z-index: 2;
    right: 0;
    font-size: 1.3rem !important;
    border-left: solid 0px !important;
    border: solid 1px var(--color_white);
    margin: .5rem;
  }

  .sacials_icons{
    font-size: 1.1rem !important;
    background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2)) !important;
    padding: 1rem;
    border-radius: 50%;
    
  }
  .track_input::placeholder{
    color: var(--color_white) !important;
    font-weight: 100;
    font-size: 1rem;
  }
  
  .welcome_cards{
    width: 20rem !important;
    border-radius: 1rem;
    background-color: var(--color_body);
    height: 10rem;
  }
  
  .header_card_text{
    padding: 0rem;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-top: 2rem;
    color: var(--color_text) !important;
    text-align: center;
  }
  
  .industry_items{
    display:  flex;
    flex-direction: column;
    position: relative;
    grid-template-columns: 100%;
    align-items:flex-start;
    gap: 3rem;
    margin-top: 0rem; 

  
 }
 
.industry_nav{
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
left: 0;
width: 0%;
top:0;
height: 100vh;
position: fixed;
visibility: hidden;
margin-top: 0%;
z-index: 200;
transition: var(--transition);
 }

 .industry_items li{
   border-bottom: solid 1px var(--color_primary_1);
   color: white;
   width: 100%;
 }

 .indus_back{
  display: block;
}

.brand_icon{
  width: 80% !important;
}
.contact_aside {
  height: 70vh;
}

.footer_btn {

  top: -10rem;

}

}

@media (min-width: 481px) and (max-width: 767px)  and (orientation: landscape)  {
  .mission {
    width: 50% !important;
    aspect-ratio: 0 !important;
    top: 0 !important;
    bottom: 0% !important;
    transform: rotate(0) !important;
}
.industry_links {
  padding: 0rem;
  width: 100%;
  font-size: 10px !important;
  font-weight: 600;
  
}
.industry_items .active {
  font-weight: 600;
  padding: 1rem !important;
}

.track_btn {
  height: 4rem;
  margin-top: 0.5rem;
  font-weight: 900;
  z-index: 2;
  right: 10%;
}

.brand_ref{
  display: none;
}
.nav_menu .nav-item .top_nav {
  color: var(--color_white) !important;
  font-weight: 900;
  line-height: 1rem;
  font-size: 11px;
  padding: 0rem;
}
.window-scroll {
  padding-top: 2rem;
}

.mission_text {
  transform: rotate(0deg) !important;
  margin-bottom: 1rem;
}
.about_padding {
  margin-top: 1rem !important;
}
  .team_container {
    display: grid;
    grid-template-columns:1fr 1fr !important;
    gap: 1.5rem;
}
  .product_banner {
    height: auto !important;
    width: 100%;
    margin-top: 0rem;
}
  .send_par_btn {
    width: 50%;

}
.footer_center {
  position: static;
  left: 0;
  right: 0;
}
  .small_product{
    margin-top: 8rem !important;
  }
  .inner_content {
    top: -25% !important;
    bottom:0!important;
}
.header_cards {
  margin-top: 1rem;
}
/* .row{
  background: purple;
} */
.right_card{
  border-radius: 60px 0 ;
  height: 30rem !important;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: var(--color_white);
}
.right_card_footer{
border-radius: 50px 0 !important;
}
.right_image{
  border-radius: 40px 0 ;
  height: auto;    
}
.left_card{
  border-radius: 0 70px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 30rem !important;
  background-color: var(--color_white);
}
.right_card_left{
  border-radius: 0 50px !important;   
}

.left_image{
  border-radius: 0 40px;
  height: auto;
}
.sector_cards{
  height: 30rem !important;
  position: relative;
  transition:var(--transition);

}
.sector_cards::before{
  bottom: 45% !important;
  height: 2rem !important;
}
.track_input {
  width: 80% !important;
  margin: 0.5rem;
}
.track_btn {
  width: 25% !important;
}
.nav_menu {
  height: 60rem !important;
}
.accordion {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
}

.sector_cards::after {
  min-height: 13vh !important;
}
.contact_container {
  grid-template-columns: 50% 50% !important;
  gap: 0.5rem;
  margin-top: 0;
  padding: 1rem !important;
  height: 32rem !important;
}
.contact_details {
  width: 45vw !important;
  
}
.contact-info {
  height: 60vh;
  padding: 1rem;
}
.contact_btn {

  width: 60% !important;
}
.contact_socials {
  margin-bottom: 0rem !important;
}


.contact_aside {

  width: 100%;
  bottom: 4rem;
  height: auto;
}
.form_name {
  display: flex;
  flex-direction: column;
}
.form_name input[type="text"] {
  width: 100%;
}
.send_par_btn {
  width: 25% !important;

}
}
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) and (orientation:portrait){

  .arrow_dwon{
    top:60%;
    /* right: 50%; */
     left: 45%;
  }
  .about_cards {
    height: 50vh !important;
}
  .team_container {
    display: grid;
    grid-template-columns:1fr;
    gap: 1.5rem;
}
/* .mission {
  width: 100%;
  aspect-ratio: 1;
  top: 10;
  bottom: -55%;
  transform: rotate(90deg);
}
.mission_text{
  transform: rotate(-180deg);
} */

.mission {
  width: 100%;
  aspect-ratio: 1;
  top: 10;
  bottom: -50%;
  transform: rotate(90deg);
}
.mission_text {
transform: rotate(-90deg);
}

.about_padding{
  margin-top: 13rem !important;
}
  .product_banner {
    height: auto;
    width: 100%;
    margin-top: 8rem;
}
  .small_product{

    margin-top: 8rem;
  }
  .search_container{
  
    grid-template-columns: 75% 25%;
    gap: .1rem;
    left: 0;
    right: 0;
    transform: translateX(0);
    width: 100%;
  }
  

  .team_container {
   
    grid-template-columns: 1fr;

}
  
.product_banner{
  height: 30rem;
  width: 100%;
  margin-top: 8rem;
}
.small_product{
  margin-top: 8rem !important;
}
.send_par_btn{

  width: 60%;
}

  .center_ul{
    position: static;
  }
  .footer_center{
    position:static;
    left: 0;
    right:0;
  }
  
  .footer_btn{
    position:absolute;
    margin: auto;
    left: 0;
    right: 0;
    top:-6rem;
    text-align: center;
    z-index: 1; 
    height: 5%;
    background: red;
    border: none;
  }
  .footer_btn_round{
    position:absolute;
  
  }

#myBtn {

  width: 3rem !important;
  height:3rem !important;

}
.inner_content{
  position: absolute;
  top: 5%;
  bottom: 5%;
  width: 100%;
 
 }
 .aside_img h5 {
  font-size: 2rem !important;
}

 .contact-info{
  height: 15rem !important;
 }
 .right_card{
  border-radius: 50px 0 ;
  height: 65vh;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: var(--color_white);
}
.right_card_footer{
border-radius: 50px 0 !important;
}
.right_image{
  border-radius: 40px 0 ;
  height: auto;    
}
.left_card{
  border-radius: 0 50px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 65vh;
  background-color: var(--color_white);
}
.right_card_left{
  border-radius: 0 50px !important;   
}

.left_image{
  border-radius: 0 40px;
  height: auto;
}


.sector_cards{
  min-height: 65vh;
  position: relative;
  transition:var(--transition);

}

.sector_cards::before{
  bottom: 45%;
}

.sector_cards::after{
  width: 17%;
  position: absolute;
  min-height: 7vh;
  bottom: 0%;
  right: 0;
}


.small_nav_side{
  display: block !important;
}
.branch_layer{
  overflow-y: scroll;
}


.big_nav_side{
  display: none !important;
}

.close_sidebar{
  display: block;
  visibility:visible;
  float: right;
  margin-top: -1.5rem;
  margin-right: -1.8rem;
 
}
nav{
  width: 100%;
  position: fixed;
}
/* .top_nav_{
  visibility: hidden;
} */
.nav_container{
  display: flex;
  justify-content: space-between;
}
.socials_ic{

  right:0;

}
.nav_buttons{
  margin-top: 1.1rem;
  padding: .2rem;
  visibility: hidden;
}
.socials_ic{
  margin-top: .5rem !important;
}
.upper_inner_nav{
  margin-top: 0 !important;
}
.top_nav_icons{
  color: var(--color_secondary);
  font-weight: 0;
  font-size: 1rem;
  gap: 0;
  margin: 0;
}
.nav_menu{
  position: fixed;
  right: 0;
  height: fit-content;
  width: 0%;
  top:0;
  background-image: var(--btn_gradient);
  height: 100vh;
  gap: 1rem;
  border-bottom: solid 5px;
  display: block;
  visibility: hidden;
  transition: var(--transition);
  margin-top: 0 !important;
}


.top_nav {
  padding: 1.2rem !important;
  border-bottom: solid 1px var(--color_white);
}
  h1{
    font-size: 2rem !important;
  }
  .fold_btn{
    display: block;
    color: var(--color_white);
  }
  
  .quote_right_info .quote_img{
    width:50% !important; 
    height:12vh !important;
  }

  .contact_aside{
    bottom: 2rem;
    width: 100%;
    height: auto;
  }

.accordion{
  display: grid;
  grid-template-columns: 1fr;
}
  .contact_container{
    grid-template-columns: 100%;
    gap: 0rem;
    margin-top: 0;
    padding: 0;
    height: auto;
}
.contact_form{
margin: 0 1rem 1rem;
}
.form_name{
    flex-direction: column;
}

.form_name input[type="text"]{

    width: 100%;
}
.contact_form input, textarea{
  width: 100%;
  padding: 1rem;
  background-color: var(--color_white);
  color: var(--color_dark);
  border-radius: .5rem;
  border: solid .5px var(--color_dark);
}

  .socials{

    display: grid;
    grid-template-columns: 10% 10% 10% 10%;
    font-size: 2rem;
    gap: 2rem;
  }
  .footer_ul{
    letter-spacing: 1px;
    list-style: circle;
  }

  .fleets_holder_right{
    text-align: auto !important;
    font-weight: 900 !important;
  
  }
  .fleets_holder_left{
    font-weight: 900 !important;
  }
  .contact_btn{
    width: 40% !important;
  }
  
  .footer_ul_center{
    margin-left: 0 !important;
  }
  .fleets_text_left{
    text-align: left !important;
  }
  .fleets_text_right{
    text-align: auto;
    text-justify:distribute-all-lines;
  }
  .fleets_image_right{
    text-align:auto
  }
  .section_padding{
    padding: 1rem;
    padding-top: 3rem;
  }
  h1{
    font-size: var(--h3);
  }
  .track_input{
    width: 100%;
    margin: .5rem;
  }
  .track_btn{
    background-image: var(--btn_gradient);
    position: absolute;
    color: var(--color_white);
    width: 30%;
    height: 4rem;
    font-weight: 900;
    z-index: 2;
    right: 0;
    font-size: 1.3rem !important;
    border-left: solid 0px !important;
    border: solid 1px var(--color_white);
    margin: .5rem;
  }

  .sacials_icons{
    font-size: 1.1rem !important;
    background: linear-gradient(to bottom right, var(--color_primary_1) ,var(--color_primary_2)) !important;
    padding: 1rem;
    border-radius: 50%;
    
  }
  .track_input::placeholder{
    color: var(--color_white) !important;
    font-weight: 100;
    font-size: 1rem;
  }
  
  .welcome_cards{
    width: 20rem !important;
    border-radius: 1rem;
    background-color: var(--color_body);
    height: 10rem;
  }
  
  .header_card_text{
    padding: 0rem;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-top: 2rem;
    color: var(--color_text) !important;
    text-align: center;
  }
  
  .industry_items{
    display:  flex;
    flex-direction: column;
    position: relative;
    justify-content:flex-start;
    gap: 4rem;
    margin-top: 0rem; 

  
 }
 
 .industry_nav{
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
left: 0;
width: 0%;
top:0;
height: 100vh;
position: fixed;
visibility: hidden;
margin-top: 0%;
z-index: 200;
transition: var(--transition);
 }

 .industry_items li{
   /* border-bottom: solid 1px var(--color_primary_1); */
   color: white;
   width: 100%;
 }

 .indus_back{
  display: block;
  margin-left: 1.5rem;
}
.contact_details{
  width: 90vw;
  font-size: 4px;
}
.contact_aside p {
  font-size: 13px !important;
}
.aside_img h5 {
  font-size: 1.6rem !important;
}

} 

@media (min-width: 768px) and (max-width: 915px) and (orientation: landscape) {

  .industry_links {
    padding: 0rem;
    width: 100%;
    font-size: 10px !important;
    font-weight: 600;
    
  }

  .industry_items .active {
    font-weight: 600;
    padding: 1rem !important;
  }
  .team_container {
    display: grid;
    grid-template-columns:1fr 1fr !important;
    gap: 1.5rem;
}
    .sector_cards{
      height: 33rem !important;
      position: relative;
      transition:var(--transition);
    
    }
    .sector_cards::before {
      bottom: 55%;
      height: 2rem;
  }
  .sector_cards::after {
    width: 23%;
    position: absolute;
    min-height: 7vh;
    bottom: 0%;
    right: 0;
  }
    .right_card{
      border-radius: 50px 0 ;
      height: 33rem !important;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      background-color: var(--color_white);
    }
    .right_card_footer{
    border-radius: 50px 0 !important;
    }
    .right_image{
      border-radius: 40px 0 ;
      height: auto;    
    }
    .left_card{
      border-radius: 0 50px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      height: 33rem !important;
      background-color: var(--color_white);
    }
    .right_card_left{
      border-radius: 0 50px !important;   
    }
    
    .left_image{
      border-radius: 0 40px;
      height: auto;
    }
    
    .contact_aside {
      width: 100%;
      bottom: 5rem;
      height: 35rem !important;
  }
    .welcome_cards {
      height: 40vh !important;
  }
  .contact_socials {
    margin-top: auto;
}

  .header_card_text {
    margin-top: 1rem;
    
  }
.read_more_btn {
  width: 15rem;
}

.inner_content {
  top: -25%;
  bottom: 0%;
}
.header_cards {
  margin-top: 2rem;
  gap: 1rem;
}
.track_input {
  width: 60% !important;

}
.track_btn {
  width: 15%;
  right: 20%
}
.contact_btn {
width: 70% !important;
}

.sector_cards::after {
  min-height: 20vh;
  width: 5rem;
}
.nav_menu .nav-item .top_nav {
  font-size: 13px !important;
  font-weight: 900;
  padding: 0 !important;
}
.contact_details {
  padding: 1rem;
  width: 32vw !important;
}
.contact-info {
  box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
  padding: 1rem;
  position: relative;
  height: 70vh;
}
.form_name {
  display: flex;
  gap: 1.2rem;
  flex-direction: column;
}
.brand_icon {
  display: none !important;
  
}
.contact_container {
  padding: 4rem;
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 2rem;
  height: 35rem;
}
.form_name input[type="text"] {
  width: 100%;
}
.aside_img h5 {
  font-size: 1.7rem !important;
  font-weight: 800;
}
.team_container {
  display: grid;
  grid-template-columns:1fr 1fr 1fr!important;
  gap: 1.5rem;
}
.send_par_btn {
  width: 25% !important;

}
}
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px)and (orientation:portrait) {
/* =====products and services cards=============*/

.arrow_dwon{
  top:60%;
   left: 45%;
  /* right: 50%; */
}

.mission {
  width: 100%;
  aspect-ratio: 1;
  top: 10;
  bottom: -50%;
  transform: rotate(90deg);
}
.mission_text {
transform: rotate(-90deg);
}
.about_cards {
  height: 30vh !important;
  width: 95%;
}
.team_container {
  display: grid;
  grid-template-columns:1fr 1fr !important;
  gap: 1.5rem;
}
.form_name input[type="text"] {
  width: 100%;
}
.form_name{
  flex-direction: column;
}
.contact_container{
  background: var(--color_body) !important;
  padding: 2rem;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 1rem;
  height: 34rem;
  margin: 7rem auto;
  border-radius: 1rem;
}
.aside_img h5 {
  font-size: 1.9rem !important;
  font-weight: 800;
}
.contact_btn{
  width: 50% !important;
}
/* .row{
  background-color: green;
} */
.fold_btn{
  display: block;
  color: var(--color_white);
}
.small_nav_side{
  display: block !important;
}
.branch_layer{
  overflow-y: scroll;
}


.big_nav_side{
  display: none !important;
}

.close_sidebar{
  display: block;
  visibility:visible;
  float: right;
  margin-top: -1.5rem;
  margin-right: -1.8rem;
 
}
nav{
  width: 100%;
  position: fixed;
}
.top_nav_{
  visibility: hidden;
}
.nav_container{
  display: flex;
  justify-content: space-between;
}
.socials_ic{

  right:0;

}
.nav_buttons{
  margin-top: 1.1rem;
  padding: .2rem;
  visibility: hidden;
}
.socials_ic{
  margin-top: .5rem !important;
}
.upper_inner_nav{
  margin-top: 0 !important;
}
.top_nav_icons{
  color: var(--color_secondary);
  font-weight: 0;
  font-size: 1rem;
  gap: 0;
  margin: 0;
}
.nav_menu{
  position: fixed;
  right: 0;
  height: fit-content;
  width: 0%;
  top:0;
  background-image: var(--btn_gradient);
  height: 100vh;
  gap: 1rem;
  border-bottom: solid 5px;
  display: block;
  visibility: hidden;
  transition: var(--transition);
  margin-top: 0 !important;
}


.top_nav {
  padding: 1.2rem !important;
  border-bottom: solid 1px var(--color_white);
}


/* ==========end_slidebar=============== */


.right_card{
  border-radius: 50px 0 ;
  height: 48vh;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: var(--color_white);
}
.right_card_footer{
border-radius: 50px 0 !important;
}
.right_image{
  border-radius: 40px 0 ;
  height: auto;    
}
.left_card{
  border-radius: 0 50px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 48vh;
  background-color: var(--color_white);
}
.right_card_left{
  border-radius: 0 50px !important;   
}

.left_image{
  border-radius: 0 40px;
  height: auto;
}
/* ======end of products and services cards======= */


/* =======industry section===========*/

.sector_cards{
  height: 48vh !important;
  position: relative;
  transition:var(--transition);

}

.sector_cards::before{
  bottom: 40%;
}

.sector_cards::after{
  width: 17%;
  position: absolute;
  min-height: 7vh;
  bottom: 0%;
  right: 0;
}

/* =======end of industry section====== */



/* ==========branch section ============= */

.contact-info{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 1rem;
  position: relative;
  height: 16rem !important;
  list-style-type: none;
}

/* ==========end of branch section======= */

.track_input{
  width: 74%;
  height: 4rem !important;
  background-color: transparent;
  position: relative;
  border: solid 1px var(--color_white);
}

.track_btn{
  background-image: var(--btn_gradient);
  position: absolute;
  color: var(--color_white);
  width: 19%;
  height: 4rem;
  font-weight: 900;
  z-index: 2;
  right: 13%;
  /* margin-right: .1rem; */
  font-size: 1.3rem !important;
  border-left: solid 0px !important;
  border: solid 1px var(--color_white);
}
.welcome_cards{
  height: 15vh !important;
}
.header_card_text{
  font-size: 1.5rem !important;
}

h1{
  font-size: var(--h1) !important;
}
.contact_aside{
  height: auto;
  margin-top: 6rem;
}

.industry_links {
  color: white;
  font-size: 1rem;
}
.industry_items {
  display: flex;
  flex-direction: column;
  position: relative;
  grid-template-columns: 100%;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0rem;
}

.industry_nav {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  left: 0;
  width: 0%;
  top: 0;
  height: 100vh;
  position: fixed;
  visibility: hidden;
  margin-top: 0%;
  z-index: 200;
  transition: var(--transition);
}

.send_par_btn {
  width: 25%;
}
.product_banner {
  height: 30rem;
  width: 100%;
  margin-top: 8rem;
}
.small_product{
margin-top: 8rem;
height: auto;
}

 
}

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

  .nav_menu .nav-item .top_nav {
    font-size: 14px !important;
    padding: 0.1rem;
}

    .sector_cards{
      height: 38rem !important;
      position: relative;
      transition:var(--transition);
    
    }
    .sector_cards::before {
      bottom: 55%;
      height: 2rem;
  }
  .sector_cards::after {
    width: 25%;
    position: absolute;
    min-height: 20vh;
    bottom: 0%;
    right: 0;
  }
    .right_card{
      border-radius: 50px 0 ;
      height: 38rem !important;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      background-color: var(--color_white);
    }
    .right_card_footer{
    border-radius: 50px 0 !important;
    }
    .right_image{
      border-radius: 40px 0 ;
      height: auto;    
    }
    .left_card{
      border-radius: 0 50px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      height: 38rem !important;
      background-color: var(--color_white);
    }
    .right_card_left{
      border-radius: 0 50px !important;   
    }
    
    .left_image{
      border-radius: 0 40px;
      height: auto;
    }
    
    .contact_aside {
      width: 100%;
      bottom: 6rem;
      height: 41rem !important;
  }
    
    
    .welcome_cards {
      height: 25vh !important;
  }

  .header_card_text {
    margin-top: 3rem;
    
  }
.read_more_btn {
  width: 15rem;
}



.inner_content {
  top: 2%;
  bottom: 0%;
}

.track_input {
  width: 55% !important;

}
.track_btn {
  width: 12%;
  right: 22.6%;
}

.contact-info {
  height: 34vh !important;
}

.aside_img h5 {
  font-size: 2rem !important;
  font-weight: 800;
}

.quick_b2 {
  text-align: center;
  margin-left: 13rem;
  left: 15rem !important;
  right: 0;
  top: -4rem;
}

.quick_b1 {
  text-align: center;
  margin-right: 13rem;
  left: 38rem;
  right: 0;
  top: -4rem;
}
  }
  /* @media (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation:landscape){ 
      .row{
        background: pink;
      }
  } */
/* =============== large laptops and mac book ==========*/
@media (min-width: 1025px) and (max-width: 1280px) { 
  /* .row{
    background: purple;
  } */

  #myBtn {
    width: 3rem;
    height: 3rem;
}


.inner_content {
  position: absolute;
  top: 0%;
  bottom: 10%;
  width: 100%;
}

.in_more_btn {
  bottom: 2%;
  left: 10%;
}
.socials{
  gap: 0.5rem;
} 

.contact-info {
  height: 35vh;
}
.contact_btn {
  width: 50% !important;
  height: 3.5rem;
  padding: auto;
  font-weight: 500;
}
/*================ Industry page ========================= */
.footer_btn{
  position:absolute;
  margin: auto;
  left: 0;
  right: 0;
  top:-6rem;
  bottom: 100;
  text-align: center;
  z-index: 1; 
  height: 5%;
  background: red;
  border: none;
}
.footer_btn_round{
  position:absolute;

}

.industry_nav{
  margin-top: 8rem;
}
.industry_items{
  gap: 1rem;
}
.industry_links{
  padding: 2rem;
  transition: var(--transition);
}




/* .row{
  background: palegreen;
} */

.sector_cards::before{
  bottom: 52%;
}

.sector_cards::after{
  width: 17%;
  min-height: 7vh;
  bottom: 0%;
  right: 0;
}

.right_card{
  border-radius: 50px 0 ;
  height: 68vh !important;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: var(--color_white);
}
.right_card_footer{
border-radius: 50px 0 !important;
}
.right_image{
  border-radius: 40px 0 ;
  height: auto;    
}
.left_card{
  border-radius: 0 50px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 68vh;
  background-color: var(--color_white);
}
.right_card_left{
  border-radius: 0 50px !important;   
}

.left_image{
  border-radius: 0 40px;
  height: auto;
}
.sector_cards{
  height: 68vh !important;
  position: relative;
  transition:var(--transition);

}

.contact_aside {
  width: 36vw;
  bottom: 5rem;
  height: 70vh;
  padding: 2rem;
  
}
.contact_aside h5{
  font-size: 1.6rem !important;
  width:100%;
}
.contact_socials {
  margin-top: 2rem;
}
.nav_menu .nav-item .top_nav {
  padding: 0.2rem;
}
.nav_menu .nav-item .top_nav {
  line-height: 1rem;
  font-size: 15px;
  padding: 0.3rem;
}

.contact_container {
  background: var(--color_body) !important;
  padding: 4rem;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 2rem;
  height: 34rem;
  margin: 7rem auto;
  border-radius: 1rem;
}
}


/* meac booked air */
@media (min-width: 1180px) and (max-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){ 
  .sector_cards {
    height: 65vh ;
    position: relative;
    transition: var(--transition);
  }
  .left_card {
    height: 65vh;
    background-color: var(--color_white);
}

.right_card {
  height: 65vh !important;
  background-color: var(--color_white);
}
    .nav_menu .nav-item .top_nav {
      padding: 0.2rem;
  }
  .quick_b2 {
  
    left: 25% !important;

}
.inner_content {
  position: absolute;
  top: 0;
}
}
@media (min-width: 820px) and (min-height: 1180px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait){ 
  .sector_cards {
    height: 55vh;
    position: relative;
    transition: var(--transition);

  }


    .nav_menu .nav-item .top_nav {
      padding: 0.2rem;
  }
  .quick_b2 {
  
    left: 8rem !important;

}
.quick_b1 {
  left: 31rem;
  right: 0;
  top: -4rem;
}
}

@media (min-width: 360px) and (max-height: 780px)  and (orientation:portrait){ 
  .quick_b1 {
    left: 15rem;
    right: 0;
    /* top: -4rem; */
  }
  .quick_b2 {
  
    left: -9rem !important;

}
}
@media (min-width: 360px) and (max-height: 800px)  and (orientation:portrait){ 
  .quick_b1 {
    left: 15rem !important;
    right: 0;
    /* top: -4rem; */
  }
  .quick_b2 {
  
    left: -9rem !important;

}
}
@media (min-width: 390px) and (max-height: 844px)  and (orientation:portrait){ 
  .quick_b1 {
    left: 16rem !important;
    right: 0;
    /* top: -4rem; */
  }
  .quick_b2 {
  
    left: -8rem !important;

}
}
@media (min-width: 390px) and (max-height: 896px)  and (orientation:portrait){ 
  .quick_b1 {
    left: 17.5rem !important;
    right: 0;
    /* top: -4rem; */
  }

}
@media (min-width: 375px) and (max-height: 812px)  and (orientation:portrait){ 
  .quick_b1 {
    left: 16rem !important;
    right: 0;
    /* top: -4rem; */
  }

}

/* For Big TV's (HD Screens) */
@media (min-width: 1281px) {
/* .row{
  background: yellow !important;
} */

.contact_aside {
  width: 100%;
  bottom: 7rem;
  padding: 3rem;
  height: auto;
}


.track_input {
  width: 35%;
  height: 4rem;
  background-color: transparent;
}
.contact_container {
  height: 32rem;
}
  #myBtn {
    width: 4rem;
    height: 4rem;
}

.contact_btn {
  width: 30% ;
  height: 3.5rem;
 
}
  
  .nav_menu .nav-item .top_nav {
    font-weight: 900;
    line-height: 1rem;
    font-size: 16px;
}
.top_nav_text {
  color: var(--color_secondary);
  font-weight: 600;
  font-size: 18px;
}
.sector_cards{
  height: 65vh !important;
  position: relative;
  transition:var(--transition);

}

.sector_cards::before{
  bottom: 53%;
}

.sector_cards::after{
  width: 17%;
  min-height: 7vh;
  bottom: 0%;
  right: 0;
}


.right_card{
  border-radius: 50px 0 ;
  height: 65vh !important;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: var(--color_white);
}
.right_card_footer{
border-radius: 50px 0;
}
.right_image{
  border-radius: 40px 0 ;
  height: auto;    
}
.left_card{
  border-radius: 0 50px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 65vh !important;
  background-color: var(--color_white);
}
.right_card_left{
  border-radius: 0 50px !important;   
}

.left_image{
  border-radius: 0 40px;
  height: auto;
}
.contact-info {
  height: 30vh;
}
.inner_content {
  position: absolute;
  top: 15% ;
}

.track_btn {
  background-image: var(--btn_gradient);
  position: absolute;
  color: var(--color_white);
  width: 9%;
  height: 4rem;
  font-weight: 900;
  z-index: 2;
  right: 32%;
  font-size: 1.3rem !important;
  border-left: solid 0px !important;
  border: solid 1px var(--color_white);
}
/* .row{
  background: red;
} */
}

@media (min-width:1289px) and (max-width: 1440px) {
  /* .row{
    background: red;
  } */
  .right_card{
    height: 78vh !important;
  }
  

  .left_card{
    height: 78vh !important;
  }
  .sector_cards {
    height: 78vh !important;
    position: relative;
    transition: var(--transition);
}
.inner_content {
  top: 0% !important;
}
.contact_aside {
  width: 36vw;
  bottom: 5rem !important;
  height: auto;
  padding: 1rem;
}
/* .contact_aside {
  width: 100%;
  bottom: 5rem;
  padding: 3rem;
  height: 68vh;
} */
.contact-info {
  height: 35vh;
}
.contact_socials {
  gap: 0.8rem;
  margin-top: auto;
}
}




@media print{
  footer {
      display: none;
  }


  .section_padding{
      display:none;
  }
  .brand_icon_print{
     display:block;
     width:100%;
     height:auto;
  }
  .print_image{
      display:none;
      width:30% !important;
  }
  .search_container{
      display:none;
  }
  .fa-print{
      color:red;
  }
  .badge{
      background: red;
      color:white;
  }
  nav{
      
      display:block;
      box-shadow: 0px;
  }
 
section{
  margin-bottom:18rem !important;
}
.print_page{
  display:none;
}
body {
-webkit-print-color-adjust: exact;
-moz-print-color-adjust: exact;
-ms-print-color-adjust: exact;
print-color-adjust: exact;
}
#myBtn{
  visibility: hidden;
}
.nav_menu{
  visibility: hidden;
}

}


/* @media (min-width: 1366px) and (min-height:625px){

  .contact_aside {
    width: 100%;
    bottom: 8rem;
    height: auto !important
}
.contact-info {
  height: 35vh;
}
  #myBtn {
    width: 4rem;
    height: 4rem;
}

.contact_btn {
  width: 35% !important;
  height: 3.5rem;
 
}

.top_nav_text {
  color: var(--color_secondary);
  font-weight: 600;
  font-size: 18px;
}
.sector_cards{
  height: 72vh !important;
  position: relative;
  transition:var(--transition);

}

.sector_cards::before{
  bottom: 45%;
}

.sector_cards::after{
  width: 17%;
  min-height: 7vh;
  bottom: 0%;
  right: 0;
}

.right_card{
  border-radius: 50px 0 ;
  height: 72vh !important;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: var(--color_white);
}
.right_card_footer{
border-radius: 50px 0 !important;
}
.right_image{
  border-radius: 40px 0 ;
  height: auto;    
}
.left_card{
  border-radius: 0 50px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 72vh;
  background-color: var(--color_white);
}
.right_card_left{
  border-radius: 0 50px !important;   
}

} */