* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;

}

body {
   background-color: white;
   /* background-color: #01377D; */
   color: black;
   /* background-color: #01377D; */
}

.head {
   display: flex;
   width: 100%;
   height: 6vh;
   justify-content: space-between;
   align-items: center;
   background-color: #01377D;
}

.head h3 {
   margin-left: 80px;
   /* color: #121212; */
   color: white;
}

.head h3:hover {
   color: #ffc400;
   font-size: large;
}

.button {
   background-color: white;
   border: none;
   color: black;
   padding: 10px 25px;
   text-align: center;
   border: 1px solid black;
   font-size: 14px;
   cursor: pointer;
   transition-duration: 0.4s;
}

.button:hover {
   border: 1px solid #ffc400;
   background-color: #ffc400;

}

/* navbar ************************************************************************************************************************************************/
.header {
   min-height: 100vh;
   width: 100%;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/home\ images/pexels-harald-hechler-4803814.jpg);
   background-position: center;
   background-size: cover;
   position: relative;
   
}


nav {
   display: flex;
   padding: 2% 6%;
   justify-content: space-between;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.1);
   height: 15vh;
}

nav img {

   width: 151px;
   height: 14vh;
   margin-top: 16px;


}

.nav-links {
   flex: 1;
   text-align: right;

}

.nav-links ul li {
   list-style: none;
   display: inline-block;
   padding: 8px 12px;
   position: relative;
}

.nav-links ul li a {

   color: white;
   text-decoration: none;
   font-size: 13;
   text-transform: uppercase;

}

.nav-links ul li a:hover {
   color: yellow;
   transition-duration: 0.4s;
   /* font-size: large; */
}

.nav-links ul li::after {
   content: '';
   width: 0%;
   height: 2px;
   /* background: #f44336; */
   background: #714b36;

   display: block;
   margin: auto;
   transition: 0.5s;
}

.nav-links ul li:hover::after {
   width: 100%;
}

/* Styles for the dropdown container */
.dropdown {
   position: relative;
   display: inline-block;
}

/* Styles for the dropdown content */
.dropdown-content {
   display: none;
   padding: 5px;
   position: absolute;
   background-color: transparent;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
   text-align: center;
   font-size: 15px;
}

/* Styles for the dropdown items */
.dropdown-content li {
   list-style-type: none;

}

/* Change color of dropdown items on hover */
.dropdown-content li:hover {

   color: black;

}

/* Show dropdown content when hovering over dropdown */
.dropdown:hover .dropdown-content {
   display: block;

}


.text-box {
   width: 90%;
   color: #fff;
   position: absolute;
   top: 60%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}

.text-box h1 {
   font-size: 55px;


}

.text-box p {
   margin: 10px 0 40px;
   font-size: 18px;
   color: #fff;

}

.hero-btn {
   display: inline-block;
   /* margin: auto; */
   text-decoration: none;
   color: #fff;
   /* border: 1px solid #fff; */
   background: transparent;
   position: relative;
   cursor: pointer;
}

.hero-btn:hover {
   border: 1px solid #f44336;
   background: #f44336;
   transition: 1s;
   padding: 5px;

}

nav .fa-solid {
   display: none;
}

.fa-bars {
   display: none;
}

/*******main******************************************************************************************************************************/
/* 01*/

.main_center_colam {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.main_both {
   display: flex;
   /* background-color: DodgerBlue; */
   width: 100%;
   height: 80vh;
   /* background-color: rgba(0, 0, 0, 0.1); */
   background-color: aliceblue;
   /* margin-top: 80px; */

}


.main_both_right {
   width: 30%;
   margin: 80px 60px;
   font-size: 1.5vw;

}

.main_both_right h1 {
   color: #01377D;
}

.main_both_right p {
   padding: 8px;
   color: #303030;
}

.button_main_2 {
   background-color: #04AA6D;
   border-radius: 45px;
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   margin: 40px 150px;
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
}

.button_main_2:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}



.main_both_left {
   width: 70%;
   height: 60vh;
   border-radius: 10px;
   /* background-color: #f44336; */
   background-image: url(images/home\ images/vecteezy_airplane-and-cargo-in-the-airport-at-sunset-3d-rendering_28576282.jpg);
   background-position: center;
   background-size: cover;
   position: relative;
   margin: 50px;
}

.main_both_left h1 {
   text-align: center;
   padding: 40px;
}

/***************************************************************************************************/
/*02*/
.services_our {
   background-color: #01377D;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   /* justify-content: center; */
   flex-direction: column;
}

.services_our_text h1 {
   font-size: 8vh;
   color: white;
   text-align: center;
   padding-top: 37px;
}

.services_our_text h2 {
   font-size: 55px;
   color: white;
   text-align: center;
   padding-top: 37px;
}

.services_our_img {

   display: flex;
   width: 90%;
   margin: 25px;
   height: 80%;
   flex-wrap: wrap;
   display: flex;
   align-items: center;
   justify-content: center;

}

.services_our_img_1 {

   height: 52vh;
   width: 293px;
   margin: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   color: white;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/ser/carg\ d.jpg);
   background-size: cover;
   background-position: center;
}

.services_our_img h1 {
   font-size: 5vh;
}

.services_our_img p {
   margin: 6px;
   padding: 15px;
}

.services_our_img_2 {
   height: 52vh;
   width: 293px;
   margin: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   color: white;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/ser/pexels-frans-van-heerden-2881632.jpg);
   background-size: cover;
   background-position: center;
}

.services_our_img_3 {
   height: 52vh;
   width: 293px;
   margin: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   color: white;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/ser/sc.jpg);
   background-size: cover;
   background-position: center;
}

.services_our_img_4 {
   height: 52vh;
   width: 293px;
   margin: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   color: white;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(/images/ser/los.JPG);
   background-size: cover;
   background-position: center;
}

.services_our_img_5 {
   height: 52vh;
   width: 293px;
   margin: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   color: white;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/ser/go.jpg);
   background-size: cover;
   background-position: center;
}

.services_our_img_6 {
   height: 52vh;
   width: 293px;
   margin: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   color: white;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/ser/flete.jpeg);
   background-size: cover;
   background-position: center;
}

.services_our_img_1:hover {
   background-image: url(images/ser/carg\ d.jpg)
}

.services_our_img_2:hover {
   background-image: url(images/ser/pexels-frans-van-heerden-2881632.jpg);
}

.services_our_img_3:hover {
   background-image: url(images/ser/sc.jpg);
}

.services_our_img_4:hover {
   background-image: url(images/ser/los.JPG);
}

.services_our_img_5:hover {
   background-image: url(images/ser/go.jpg)
}

.services_our_img_6:hover {
   background-image: url(images/ser/flete.jpeg);
}

/********************************* slider*********************************************************************************/
/*03*/
.work_regals_wework {
   width: 90%;
   margin: 30px;
   flex-direction: column;
   display: flex;
   align-items: center;
   justify-content: center;
}

.work_regals_wework h1 {
   font-size: 5vw;
   text-align: center;
   color: #01377D;
}

.work_regals_wework h3 {
   text-align: center;
   font-size: 1vw;
   color: #303030;
}

.slider-container {
   width: 64%;
   overflow: hidden;
   position: relative;
   height: 200px;
   margin-left: 16vw;
   /* Adjust height as needed */
   background-color: #01377d;
}

.slider {
   display: flex;
   transition: transform 0.5s ease;
   height: 100%;

}

.slide {
   flex: 0 0 30%;
   text-transform: uppercase;
   /* Each slide takes up 100% of container width */
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   margin: 2px;
   position: relative;
   /* background-color:rgb(1, 55, 125) ; */
}

.slide img {
   width: 100%;
   height: 70%;
   object-fit: contain;
}

.text {
   position: absolute;
   bottom: 10px;
   left: 0;
   width: 100%;
   text-align: center;
   color: white;
   font-size: 25px;
   padding: 10px 0;
}

.prev,
.next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   padding: 10px;
   z-index: 1;
}

.prev {
   left: 0;
}

.next {
   right: 0;
}

*/

/********************************************************************************************/
/*04*/
.main_three_text {
   width: 100%;
   height: 100%;
}

/* .main_three_text_one H1 {
   width: 50%;
   font-size: 6VH;
   margin-left: 5VW;
   margin-top: 5VW;
} */
.main_three_text_one H1 {
   width: 80%;
   font-size: 5VH;
   margin-left: 5VW;
   margin-top: 5VW;
}

.main_three_text_one h3 {
   margin-top: 2vh;
   font-size: 4VH;
   margin-left: 28VW;
   color: rgba(0, 0, 0, 0.50);
}

.main_button_3 {
   background-color: #04AA6D;
   border-radius: 45px;
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   margin: 40px 150px;
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
}

.main_button_3:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

/***********************************************************************************************/
/*05*/
.main_work_service {
   width: 100%;
   height: 100%;
}

.main_work_service_1 {
   width: 100%;
   height: 50%;
   display: flex;
}

.main_work_service_1_1 {
   width: 50%;
   height: auto;
   background-image: url(/images/home\ images/cargo-ship.jpg);
   background-position: center;
   background-size: cover;
   position: relative;
}

.main_work_service_1_2 {
   width: 50%;
   height: 100%;
   /* background-color: rgba(0, 0, 0, 0.1); */
   /* color: #6B3838; */
   display: flex;
   /* justify-content: center; */
   align-items: center;
   flex-direction: column;
}

.main_work_service_1_2 i {
   background-color: #fae9e2;
   padding: 5px;
   border-radius: 50px;
}


.main_work_service_1_2 h1 {
   margin-top: 5vh;
   font-size: 40px;
   text-align: center;

}

.main_work_service_1_2 h3 {

   /* margin-top: 2vh; */
   font-size: 25px;
   color: #01377D;

}

.main_work_service_1_2_text {
   display: flex;
   margin: 50px;
   flex-direction: column;

}

.main_work_service_1_2_text h4 {
   font-size: 25px;
   display: flex;
   padding: 15px;
   align-items: center;
   justify-content: center;
   margin: 20px;
}

.main_work_service_1_2_text p {
   font-size: 15px;
   align-items: center;
   justify-content: center;
   color: rgba(0, 0, 0, 0.50);

}

.main_work_service_2 {
   width: 100%;
   height: 50%;
   display: flex;
}

.main_work_service_2_1 {
   width: 50%;
   height: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 25px;

}

.main_work_service_2_2 {
   width: 50%;
   height: auto;
   background-image: url(images/home\ images/many-transport-trucks-parked-service-station-sunset-ai-generative.jpg);
   background-position: center;
   background-size: cover;
   position: relative;



}

.main_work_service_2_1 h2 {
   font-size: 25px;
   color: #01377D;
   padding: 25px;
}

.main_work_service_2_1 h1 {
   font-size: 35px;
}

.main_work_service_2_1 i {
   background-color: #fae9e2;
   padding: 5px;
   border-radius: 50px;
}

/***********************************************************************************************/
/* 06 **counter********************************************* */
.main_counter {
   height: 50%;
   width: 100%;
   background-color: #00093c;
}

.main_counter i {
   font-size: 4em;
}

.c1 {
   font-size: 2em;
}

.main_allcounters {
   width: 100%;
   height: 80%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
}

.main_counter_1 {
   color: white;
   padding: 50px;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   gap: 2vh;
}

.main_counter_2 {
   color: white;
   padding: 50px;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   gap: 2vh;
}

.main_counter_3 {
   color: white;
   padding: 50px;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   gap: 2vh;
}

.main_counter_4 {
   color: white;
   padding: 50px;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   gap: 2vh;
}




/******************************************************************************************************************/
/*07*/
.main_four_one {
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.1);
   align-items: center;
   display: flex;
   flex-direction: column;
}

.main_four_one_text {
   text-align: center;
   font-size: 40px;
   margin: 40px;
   color: #01377D;
}

.flex-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   width: 90%;
   height: 100%;
}


.flex-item {
   width: 23vh;
   /* Set width for each flex item */
   margin: 10px;
   text-align: center;
   box-sizing: border-box;
   /* Include padding and border in the width */
   padding: 20px;
   border-radius: 5px;

}

.flex-item img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 5px;
   /* Rounded corners for images */
}

.flex-item i {
   width: 50px;
}

.flex-item p {
   margin-top: 10px;
   color: #01377D;
}

/*********************************************************************************************************************/
/*08*/

.main_five_contectus {

   height: 100%;
   /* margin-top: 7vh; */
   width: 100%;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/home\ images/img_bg_support_Home-UWA2MTY.jpg);
   background-position: center center;
   background-size: cover;
   position: relative;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

}

.main_five_contectus_text {
   /* display: flex; */
   text-align: center;
   justify-content: center;
   padding: 15px;
   gap: 8px;
   color: white;
}

.main_five_contectus_text h1 {
   font-size: 5vh;
   padding: 20px;
   border-bottom: 2px solid white;
   width: 30%;
   /* text-align: center; */
   margin-left: 35vw;
}

.main_five_contectus_text h1:hover {
   border-bottom: 2px solid yellow;
}

.main_five_contectus_text h3 {
   font-size: 58px;

}

.main_five_contectus_text h4 {
   font-size: 15px;
   padding-top: 25px;
   width: 100%;
   margin-left: 4px;

}



/**********************************************************************************************/


/*testimonials*****************************************************/
/*09*/


.main_seven_Testimonials {
   width: 100%;
   height: 70vh;
   background-color: rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
}

.testimonial-slider {
   width: 80%;
   margin: 50px auto;
   overflow: hidden;
   position: relative;
   border-radius: 10px;
}

.testimonial-slides {
   display: flex;
   transition: transform 0.5s ease-in-out;
}

.testimonial-slide {
   flex: 0 0 100%;
   max-width: 100%;
   text-align: center;
}

.testimonial-card {
   padding: 40px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
   text-align: center;
}

.testimonial-profile-img {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   margin-bottom: 20px;
   object-fit: cover;
   border: 4px solid #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.testimonial-title {
   font-size: 24px;
   color: #333;
   margin-bottom: 10px;
}

.testimonial-content {
   font-size: 18px;
   color: #666;
   margin-bottom: 20px;
}

/* Navigation arrows */
.testimonial_prev,
.testimonial_next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: auto;
   padding: 10px;
   background-color: rgba(0, 0, 0, 0.5);
   color: #fff;
   border-radius: 5px;
   font-size: 20px;
   z-index: 1;
}

.testimonial_prev {
   left: 10px;
}

.testimonial_next {
   right: 10px;
}

/* Responsive styles */
@media (max-width: 768px) {
   .testimonial-card {
      padding: 20px;
   }

   .testimonial-profile-img {
      width: 80px;
      height: 80px;
      margin-bottom: 10px;
   }

   .testimonial-title {
      font-size: 20px;
   }

   .testimonial-content {
      font-size: 16px;
   }

   .testimonial_prev,
   .testimonial_next {
      font-size: 16px;
      padding: 8px;
   }
}

/*************************************************************************************************************************/
/*media */

@media(max-width: 700px) {
   .text-box h1 {
      font-size: 20px;
   }

   .head {
      display: none;
   }

   .nav-links ul li {
      display: block;
   }

   .nav-links ul li {

      padding: 6px 3px;
   }

   .nav-links {
      position: fixed;
      background-color: #f44336;
      height: 80vh;
      width: 200px;
      top: 0;
      right: -200px;
      text-align: left;
      z-index: 2;
      transition: 1s;
   }

   nav .fa-solid {
      display: block;
      color: #fff;
      margin: 10px;
      font-size: 22px;
      cursor: pointer;
   }

   .fa-bars {
      display: block;
      color: #fff;
      margin: 10px;
      font-size: 25px;
      cursor: pointer;

   }

   .nav-links ul {

      padding: 16px;
   }

   /*main*/

   .main_both {
      display: flex;
      flex-direction: column;
      height: 100%;
   }

   .main_both_right {

      width: 92%;
      margin: 29px 15px;

   }

   .dropdown-content {
      display: block;
      padding: 5px;
      position: relative;
      min-width: 160px;
      box-shadow: none;
      font-size: 11px;
   }

   .main_both_right h1 {
      font-size: 4em;
   }

   .main_both_right p {
      font-size: 3em;
   }

   .main_both_left {
      width: 100%;
      margin: 0;
   }

   /**********/
   .services_our_text h1 {
      font-size: 6vh;

   }

   .services_our_text h2 {
      font-size: 8vw;

   }

   .services_our_img h1 {

      padding: 15px;
      font-size: 6vw;
   }

   .services_our_img p {
      margin: 6px;
      padding: 15px;
      font-size: 4vw;
   }

   /*////////*/
   .work_regals_wework h1 {
      font-size: 7vw;
      text-align: center;
      color: #01377D;
   }

   .work_regals_wework h3 {
      text-align: center;
      font-size: 4vw;
      color: #303030;
   }

   .slider-container {
      width: 80%;

      margin-left: 11vw;

   }

   .slide {
      flex: 0 0 100%;

   }

   /*--------------------------------*/
   .main_three_text_one H1 {
      width: 80%;
      font-size: 4VH;
      /* margin-left: 5VW; */
      /* margin-top: 5VW; */
   }

   /*//////////////////////*/
   .main_work_service_1_1 {
      display: none;
   }

   .main_work_service_1_2 {
      width: 100%;
      padding: 50px;
   }

   .main_work_service_2_2 {
      display: none;
   }

   .main_work_service_2_1 {
      width: 100%;
   }



   /*************************/


   .main_five_contectus_text h1 {


      border-bottom: 2px solid white;
      width: 100%;
      text-align: center;
      margin-left: 0;

   }

   .main_five_contectus_text h3 {
      font-size: 38px;
      padding: 11px;
   }

   .openbtn-container h1 {
      padding: 0;
   }

   /****************************************/
   .button_main_1 {
      margin: 0;
   }

   ;

   .button_main_2 {
      margin: 0;
   }

   ;

   .button_main_3 {
      margin: 0;
   }

   ;

   .button_main_4 {
      margin: 0;
   }

   ;

}

/*******************************************************************************************************************/
/* button*******************************************************************/

.button_main_1 {
   background-color: #04AA6D;
   border-radius: 45px;
   border: none;
   color: white;
   padding: 15px 40px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   /* margin: 40px 150px; */
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   transition-duration: 0.4s;
}

.button_main_1:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}



.button_main_2 {
   background-color: #04AA6D;
   border-radius: 45px;
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   margin: 40px 150px;
   /* margin: 37px 121px; */
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
}

.button_main_2:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button_main_3 {
   background-color: #04AA6D;
   border-radius: 45px;
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   margin: 40px 150px;
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
}

.button_main_3:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button_main_4 {
   background-color: #04AA6D;
   border-radius: 45px;
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   margin: 40px 150px;
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
}

.button_main_4:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}


/***************************************************************************/
.main_regal_img {
   display: flex;
   width: 60%;
   height: 22vh;
   align-items: center;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   gap: 3vh;
   border-bottom: black 1px solid;


}

.work_regals_box {
   border: 2px solid black;
   width: 15vw;
   height: 20vh;
   display: flex;
   background-color: rgba(0, 0, 0, 0.2);
   align-items: end;
   justify-content: center;

}

/*****************************footer*************************************/
.footer {
   width: 100%;
   position: absolute;
   /* background: linear-gradient(to right, #00093c, #2d0b00); */
   background-image: url(images/home\ images/globe-bg.jpg);
   background-size: cover;
   color: #fff;
   padding: 37px 0 0px;
   font-size: 13px;
   line-height: 20px;
}

.row {
   display: flex;
   width: 87%;
   margin: auto;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;

}

.row i {
   padding-right: 5px;
}

.col {
   flex-basis: 25%;
   padding: 10px;
}

.col:nth-child(2),
.col:nth-child(3) {
   flex-basis: 15%;
}

.col h3 {
   width: fit-content;
   margin-bottom: 20px;
   position: relative;

}

.email-id {
   width: fit-content;
   border-bottom: 1px solid #ccc;
   margin: 20px 0;
}

ul li {
   list-style: none;
   margin-bottom: 12px;
}

ul li a {
   text-decoration: none;
   color: #fff;
}

from {
   padding-bottom: 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid #ccc;
   margin-bottom: 50px;
}

from.fa-solid {
   font-size: 18px;
   margin-right: 10px;

}

from input {
   width: 100%;
   background: transparent;
   color: #ccc;
   border: 0;
   outline: none;

}


from button {
   background: transparent;
   border: 0;
   outline: none;
   cursor: pointer;


}

from button .fa-solid {
   font-size: 16px;
   color: #ccc;

}

.social_icon i {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   text-align: center;
   line-height: 40px;
   font-size: 20px;
   color: #000;
   background: #fff;
   margin-right: 15px;
   cursor: pointer;

}

.underline {
   width: 100%;
   height: 5px;
   background: #767676;
   border-radius: 3px;
   position: absolute;
   top: 25px;
   overflow: hidden;
   left: 0;
}

.underline span {
   width: 15px;
   height: 100%;
   background: #fff;
   border-radius: 3px;
   position: absolute;
   top: 0;
   left: 10px;
   animation: moving 2s linear infinite;

}

hr {
   width: 90%;
   border: 0;
   border-bottom: 1px solid #ccc;
   margin: 20px auto;
}

.copywrite {
   text-align: center;
}


@keyframes moving {
   0% {
      left: -20px;
   }

   100% {
      left: 80%;
   }
}

@media (max-width: 700px) {
   .footer {
      bottom: unset;
   }

   .col {
      flex-basis: 100%;

   }

   .col:nth-child(2) .col:nth-child(3) {
      flex-basis: 16%;
   }

   .main_both {
      display: flex;
      flex-direction: column;
   }

   .col:nth-child(3) {
      flex-basis: 45%;
   }
}

/***********************************************************************/

/************************************************************************************************************************/
/* right slider */

.sidebar {
   z-index: 5;
   height: 40vh;
   width: 0;
   position: fixed;
   top: 39%;
   right: 0;
   background-color: #00142e;
   background-image: url(/imgs/development.png);
   background-position: center;
   background-size: cover;
   overflow-x: hidden;
   transition: 0.5s;
   padding-top: 20px;
   z-index: 4;

}

.sidebar-content {

   color: white;

}

.sidebar-contents {

   margin-top: 2em;

}

.sidebar-contents p {
   color: white;
   padding: 20px;
   font-size: 1.3em;
}

.sidebar-contents i {
   font-size: 20px;
   color: #04AA6D;
   padding-right: 8px;
}

.closebtn {
   position: absolute;
   top: 0;
   right: 25px;
   font-size: 36px;
   margin-left: 50px;
   color: white;
}

.openbtn-container {
   top: 45%;
   float: right;
   /* transform: rotate(-90deg); */
   position: fixed;
   right: 0;
   z-index: 2;
   cursor: pointer;
   transform: rotate(270deg);
   right: -38px;
}

.openbtn-container :hover {
   background-color: #01377D;
   color: white;
}

.openbtn-container h1 {
   padding: 10px 15px;
   cursor: pointer;
   color: white;
   background-color: #01377D;
   background-color: rgb(219, 36, 36);
   float: left;
   font-size: 22px;

}

/* **********************************conect from********************************************************************** */
/*10*/
.popup {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   /*Semi-transparent black background*/
   z-index: 9999;
}

/* Popup content */
.popup-content {
   background: transparent;
   background-color: white;
   max-width: 400px;
   margin: 10% auto;
   /* Center horizontally and 10% from top */
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   /* Add a subtle shadow */
   animation: slideDown 0.3s ease;
   /* Add slide down animation */
}

/* Close button */
.popup-content_1 {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.close {
   /* position: fixed;
   top: 150px;
   right: 560px; */
   color: #01377D;
   font-size: 40px;
   border: 2px solid #01377D;
   padding-left: 5px;
   padding-right: 5px;

}

.close:hover {
   background-color: #01377d;
   color: white;
   text-decoration: none;
   cursor: pointer;
}


.close:focus {
   color: #000;
   text-decoration: none;
   cursor: pointer;
}

/* Form styling */
form {
   display: flex;
   flex-direction: column;
}

label {
   font-weight: bold;
   margin-bottom: 5px;
}

input,
textarea {
   margin-bottom: 10px;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
}

input[type="submit"] {
   background-color: #4CAF50;
   color: white;
   border: none;
   border-radius: 5px;
   padding: 10px 20px;
   cursor: pointer;
}

input[type="submit"]:hover {
   background-color: #45a049;
}

/* Animation keyframes for sliding down */
@keyframes slideDown {
   from {
      transform: translateY(-100%);
      opacity: 0;
   }

   to {
      transform: translateY(0);
      opacity: 1;
   }
}


/* button*/
.button2 {
   background-color: #04AA6D;
   border-radius: 45px;
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   margin: 40px 150px;
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
}

.button2:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}






/* -------------------------About us page-----------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/



.about_header {
   height: 70vh;
   width: 100%;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/about\ us/pexels-pixabay-262353.jpg);
   background-position: center;
   background-size: cover;
   color: #fff;
}

.about_text {
   align-items: center;

}

.about_text h1 {
   text-align: center;
   padding-top: 10vh;
   padding-bottom: 10vh;
   font-size: 10vh;


}

.about_text p {
   margin: 2vw;
   font-size: 3vh;

}

.main_about_1 {
   width: 100%;
   height: 100%;
   display: flex;

}

.main_about_1_left {
   width: 50%;
   height: 100%;

}

.main_about_1_left h5 {
   margin-left: 100px;
   font-size: 30px;
   margin-top: 150px;
}

.main_about_1_left h5 i {
   font-size: 30px;
}

.main_about_1_left h1 {
   margin: 55px;
   font-size: 60px;
   color: #01377D;
}

.main_about_1_right {
   width: 50%;
   height: 100%;
   padding-top: 143px;
}

.main_about_1_right P {
   font-size: 20PX;
   width: 100%;
   color: #303030;
   margin-top: 7px;
}


.main_about_2 {
   width: 100%;
   height: 80vh;
   display: flex;
   /* background-color: #04AA6D; */
}

.main_about_2_img {
   width: 90%;
   height: 100%;
   /* background-color: #01377D; */
   margin-left: 75px;
   display: flex;

}

.main_about_2_img_1 {
   width: 33%;
   height: 100%;
   border: white solid 6px;
   background-image: url(images/about\ us/cargo\ d.jpg);
   background-position: center;
   background-size: cover;
}

.main_about_2_img_2 {
   width: 33%;
   height: 100%;
   border: white solid 6px;
   background-image: url(images/about\ us/APS_28-New.jpg.webp);
   background-position: center;
   background-size: cover;
}

.main_about_2_img_3 {
   width: 33%;
   height: 100%;
   border: white solid 6px;
   background-image: url(images/about\ us/TuSimple_Self_Drving_Truck_4_copy.webp);
   background-position: center;
   background-size: cover;
}

.main_about_3 {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   /* background-color: #04AA6D; */
}



.main_about_3_1 {
   width: 30%;
   height: 100%;
   display: flex;
   align-items: center;
   /* justify-content: center; */
   flex-direction: column;
   padding: 35px;

}

.main_about_3_1 h1 {
   padding: 8px;
   color: #194694;
}

.main_about_3_1 p {
   padding-top: 25px;
   color: #474747;
   padding: 50px;
}


.main_about_3_2 {
   width: 30%;
   height: 100%;
   display: flex;
   align-items: center;
   /* justify-content: center; */
   flex-direction: column;
   padding: 35px;
}

.main_about_3_2 h1 {
   padding: 8px;
   color: #194694;
}

.main_about_3_2 p {
   padding-top: 25px;
   color: #474747;
   padding: 50px;

}

.main_about_3_3 {
   width: 30%;
   height: 100%;
   display: flex;
   align-items: center;
   /* justify-content: center; */
   flex-direction: column;
   padding: 35px;
}

.main_about_3_3_text {
   margin-top: 10px;

}

.main_about_3_3 h1 {
   padding: 8px;
   color: #194694;
}

.main_about_3_3_text p {
   font-size: 20px;
   background-color: rgba(0, 0, 0, 0.1);
   margin: 3px;
   color: #474747;

}

.main_about_3_3_text i {
   background-color: white;
   padding: 5px;

}




.main_about_4 {
   width: 100%;
   height: 100%;
   background-color: #01377d;
}

.main_about_4_contact_us {
   width: 100%;
   display: flex;
}

.main_about_4_contact_us h1 {
   color: white;
   font-size: 40px;
   width: 80%;
   padding: 5px;
   width: 80%;
}

.main_about_4_btn {
   display: flex;
   justify-content: center;
   align-items: center;
}

.button2A {
   background-color: #04AA6D;
   border: none;
   color: white;
   padding: 12px 30px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   /* margin: 0px 100px; */
   cursor: pointer;
   /* Safari */
   transition-duration: 0.4s;
}

.button2A:hover {
   background-color: white;
   color: black;
}

@media(max-width: 700px) {
   .main_about_1 {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
   }

   .main_about_1_left {
      width: 100%;
      height: 100%;
   }

   .main_about_1_left h1 {
      margin: 55px;
      font-size: 8vw;
      color: #01377D;
      /* text-align: center; */
   }

   .main_about_1_right {
      width: 100%;
      height: 50%;
      padding: 50px;
   }

   .main_about_1_right P {
      margin: 23px;

   }

   .main_about_2_img {
      width: 100%;
      height: 100%;
      /* background-color: #01377D; */
      margin-left: 0;
      display: flex;
   }

   .main_about_3 {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      /* background-color: #04AA6D; */
      flex-wrap: wrap;
   }

   .main_about_3_1 {
      width: 100%;
      display: flex;
      align-items: center;
      /* justify-content: center; */
      flex-direction: column;
      padding: 35px;
   }

   .main_about_3_2 {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      /* justify-content: center; */
      flex-direction: column;
      padding: 35px;
   }

   .main_about_3_3 {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      /* justify-content: center; */
      flex-direction: column;
      padding: 35px;
   }

   .main_about_3_3_text {
      margin-top: 0px;
      height: 100%;
   }

   .main_about_3_3_text p {
      font-size: 22px;
      background-color: rgba(0, 0, 0, 0.1);
      margin: 11px;
      color: #474747;
      padding-top: 5px;
   }

   .main_about_4 {
      width: 100%;
      height: 100%;
      background-color: #01377d;
      display: flex;
      align-items: center;
   }

   .main_about_4_contact us {
      width: 100%;
      height: 100%;
   }

   .main_about_4 h1 {
      width: 100%;
      color: white;
      font-size: 2em;
      display: flex;
      padding: 10px;
   }

   .button2A {
      background-color: #04AA6D;
      border: none;
      color: white;
      text-align: center;
      text-decoration: none;
      font-size: 13px;
      cursor: pointer;
      transition-duration: 0.4s;
   }

}

/*--------------------------------------------------------------------------------------*/
/*                            conact us
/*---------------------------------------------------------------------------------------*/
.conactus_header {
   height: 80vh;
   width: 100%;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/c/banner_contact.jpg);
   background-position: center;
   background-size: cover;
   color: #fff;
}

.ContactUs_main {
   width: 100%;
   height: 100%;
   overflow: hidden;
}


.contentUs_main_info_main {
   /* background-color: #f44336; */
   width: 100%;
   height: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
  
}
.main_counectus_map {
   height: 80vh;
   width: 100%;
   margin-left: 15%;
   
}
.main_counectus_map iframe {
   height: 90%;
   width: 80%;
}

.main_counectus_map_1 {
   width: 100%;
   height: 100%;


}
.main_counectus_map_2{
   width: 100%;
   height: 100%;
   display: none;
}
.main_counectus_map_3{
   width: 100%;
   height: 100%;
   display: none;
}



.main_counter_0 {

   width: 100%;
   height: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}
.main_counter_0 :hover {
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.main_counter_0 h2 {
   text-align: center;
   font-size: 4vh;
   padding: 20px;
   color: #01377D;
}

.main_counter_0 h3 {
   color: #636363;
   padding: 8px;
}



.main_counter_0_1 {
   width: 30%;
   height: 90%;
   display: flex;
   justify-content: center;
   flex-direction: column;
   padding: 29px;

}
.main_counter_0_1 :hover {
   box-shadow:none;
}



.main_counter_0_2 {
   width: 30%;
   height: 90%;
   display: flex;
   justify-content: center;
   flex-direction: column;
   padding: 24px;

}
.main_counter_0_2 :hover {
   box-shadow:none;
}



.main_counter_0_3 {
   width: 30%;
   height: 90%;
   display: flex;
   justify-content: center;
   flex-direction: column;
   padding: 24px;

}
.main_counter_0_3 :hover {
   box-shadow:none;
}





.conectus_main_1 {

   width: 100%;
   height: 100%;
   background-color: #01377d;

}

.conectus_main_1_1 {
   margin: 20px;
   margin: 5px;
   height: 100%
}

.conectus_main_1_1 h1 {

   font-size: 73px;
   margin-top: 63px;
   color: white;
}

.conectus_main_1_1 h3 {

   font-size: 20px;
   color: white;
   margin-top: 25px;

}

.contentUs_main_info {
   height: 100%;
   width: 100%;

}

.contentUs_main_info h1 {
   text-align: center;
   padding-top: 10vh;
   padding-bottom: 10vh;
   font-size: 7vh;
}




/* 
.contentUs_main_info_main_left {

   width: 50%;
   padding: 8px;
   height: 100%;
}

.contentUs_main_info_main_left h1 {
   color: #01377D;
   width: 40vw;

}
.contentUs_main_info_main_left h2{
   margin-left: 55px;
   color:#01377D;

}
.contentUs_main_info_main_left h3 {

   margin-left: 4vw;
   padding: 1vh;
   /* color: rgba(0, 0, 0, 0.50); */
/*
   color: rgb(13, 51, 3);
}
*/

.contentUs_main_info_main_right {

   width: 50%;
   height: 100%
}

.image_ind {
   width: 50%;
   height: 80%;
   z-index: -999;
   position: absolute;


}

.contentUs_main_info_main_right i {
   margin-top: 225px;
   margin-left: 147px;
   color: white;
   font-size: 29px;
}


.conectus_main_2 {
   width: 100%;
   height: 100%;
   display: flex;

}

.conectus_main_2_1 {
   width: 50%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;

}

.conectus_main_2_1 h1 {
   padding: 15px;
   font-size: 25px;
   color: #01377D;
}

.conectus_main_2_1 li {
   padding: 5px;
}

.conectus_main_2_2 {
   width: 50%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}


.conectus_main_2_2 h1 {
   padding: 13px;
   font-size: 25px;
   margin-top: 1px;
   color: #01377D;
}

.conectus_main_2_2 li {
   padding: 5px;
}

.conectus_main_2 i {
   width: 20px;
   color: #01377D;
}

.conectus_main_3 {
   height: 100%;
   width: 100%;
   background-color: #01377d;
}


.conectus_main_3 h1 {
   color: white;
   margin: 50px;
   font-size: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
}


.conectus_main_4 {
   width: 100%;
   height: 100%;
   display: flex;
   flex-wrap: wrap;

}

.conectus_main_4_1 {
   width: 70%;
   height: 80vh;
   background-image: url(images/c/6222537.jpg);
   background-position: center;
   background-size: cover;
}

.conectus_main_4_2 {
   width: 30%;
   height: 100%;
   margin-top: 163px;

}

.conectus_main_4_2 h1 {
   color: #01377d;
   font-size: 55px;
}

.conectus_main_4_2 h3 {
   color: #7e7e7e;
   padding: 25px;
}

.conectus_main_4_2 button {
   margin-left: 180px;
}

.conectus_main_4_2 button:hover {
   background-color: #01377D;
   color: white;
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.conectus_main_5 {
   width: 100%;
   height: 100%;
}

.conectus_main_5 h1 {
   color: #01377D;
}






@media(max-width: 700px) {
   .contentUs_main_info h1 {
      padding: 33px;
      font-size: 4vh;
      width: 100%;
   }

   .contentUs_main_info_main_left {
      width: 100%;

   }

   .contentUs_main_info_main_left h3 {

      padding: 1vh;

   }

   .contentUs_main_info_main_right {
      display: none;
   }

   .main_counter_0_1 {
      width: 100%;
      gap: 7px;

   }

   .main_counter_0_2 {
      width: 100%;
      gap: 7px;

   }   
    .main_counter_0_3 {
      width: 100%;
      gap: 7px;
  }


   .main_counectus_map {
      display: none;
   }

   .conectus_main_1_1 h3 {
      font-size: 0.9em;
   }

   .conectus_main_2 {
      width: 100%;

      display: flex;
      flex-wrap: wrap;
   }

   .conectus_main_2_1 {
      width: 100%;
   }

   .conectus_main_2_2 {
      width: 100%;
   }

   .conectus_main_3 {
      height: 100%;
   }

   .conectus_main_3 h1 {

      padding: 1px;
      font-size: 13px;

   }

   .conectus_main_4_1 {
      width: 100%;
      height: 52vh;
   }

   .conectus_main_4_2 {
      width: 100%;
      height: 100%;

   }

   .conectus_main_4_2 {
      width: 100%;
      height: 100%;
      margin-top: 0;
   }

}



/**************************************************************************************/





/*--------------------------------------------------------------------------------------*/
/*                        servicees
/*---------------------------------------------------------------------------------------*/


.services_header {
   height: 80vh;
   width: 100%;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/ser/top-view-plane-boxes.jpg);
   background-position: center;
   background-size: cover;
   color: #fff;
}

.service_main_0 {
   width: 100%;
   height: 100%;
}

.service_main_0_1 {
   width: 100%;
   height: 100%;
   text-align: center;
   font-size: 3em;
   padding: 20px;
   color: #01377D;
}


.service_container {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.container {
   display: flex;
   flex-wrap: wrap;
   width: 85%;
}

.box {

   margin: 39px;
   width: 40%;
   height: 440px;
   border: 1px solid #000;
   display: flex;
   justify-content: center;
   align-items: baseline;
   background-size: cover;
   background-position: center;

}

.box a {
   margin-top: 400px;
   color: #01377D;
   background-color: white;
   font-size: 35px;
   padding: 20px;
   text-decoration: none;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Define background images for each box */
.box1 {
   background-image: url('/images/ser/serv/air.jpg');
}

.box2 {
   background-image: url('/images/ser/serv/Sea-Freight2-7d4wm0qjueitcyk0nvwmoq6heqzimxa6uj9sxcdvtr4.jpg');
}

.box3 {
   background-image: url('/images/ser/serv/Warehousing3-7d4wm0zy8av686nn0d0oyf440ou8b2985wkbs55hw0w.jpg');
}

.box4 {
   background-image: url('/images/ser/serv/full-shot-man-walking-by-trucks-fleet.jpg');
}

.box5 {
   background-image: url('/images/ser/serv/Door-to-Door.jpg');
}

.box6 {
   background-image: url('/images/ser/serv/NVOCC.jpg');
}

.box7 {
   background-image: url('/images/ser/serv/LCL-Consolidation-S3.jpg');
}




@media (max-width: 768px) {
   .box {
      flex-basis: calc(100% / 3);
      /* Adjust the width for smaller screens */
   }
}

@media (max-width: 480px) {
   .box {
      flex-basis: 100%;
      /* Full width on smaller screens */
   }
}
