@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/*********************************
            Common css
*********************************/
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-size: 16px; line-height: 165%; font-family: 'Montserrat', sans-serif; overflow-x: hidden; scroll-behavior: smooth;}
p, ul, li, h1, h2, h3, h4, figure { padding: 0; margin: 0;}
a {text-decoration: none;}
a:hover {text-decoration: none;}
li {list-style: none;}
h1 {font-size: 66px; color: var(--white); font-weight: 500; color: var(--white); line-height: 106%; margin-bottom: 40px;}
h2 {font-size: 40px; font-weight: 500;}
h3 {font-size: 24px; font-weight: 500;}
h4 {font-size: 20px; font-weight: 700;}
p {font-size: 17px; font-weight: 400; color: var(--lightblack);}

.devide {display: block;}
.lightwhite {color: var(--lightWhite);}
/*********************************
    common padding and margin
*********************************/
button:focus {outline: 0;}
/*********************************
            Color
*********************************/
:root {
    --lightOrange: #FCAE17;
    --white: #ffffff;
    --lightWhite: #DBEAFE;
    --greenClr: #52D28B;
    --black: #000000;
    --blueClr: #2563EB;
    --lightblue: #2B7FFF;
    --bluebg: #1A41C3;
    --lightblack: #585858;
    --midblack: #101828;
    --bgClr: #F9FAFB;
    --midlightwhite: #808BA1;
    --brdrclr: #BFBFBF;
    --lightGrey: #ADADAD;
    --bginput: #E3E3E3;
    --txtplcehlder: #868686;
    --smgrey: #F9FAFB;
}
.btn {background-color: var(--blueClr); transition: color 0.5s; color: var(--white); border-radius: 7px; padding: 10px 15px;}
.btn:hover {color: var(--lightWhite); background-color: var(--lightblue);}
.flex-align-center {display: flex; align-items: center; justify-content: center;}
/* .container {max-width: 100%; padding: 0 15px} */
.dir-column {flex-direction: column;}
/*********************************
            Header
*********************************/
header {width: 100%; position: fixed; top: 0; left: 0; background-color: var(--white); z-index: 999;}
.navList { margin-left: auto;}
.navList .nav-item { margin-left: 20px;}
.navList .nav-item:first-child { margin-left: 0px;}
.mainNav {padding: 20px 0;}
.nav-item.active .nav-link, .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {color: var(--lightOrange);}
.mainNav.navbar-light .navbar-nav .nav-item:hover .nav-link {color: var(--lightOrange);}
.navbar-light .navbar-nav .nav-item {margin-left: 20px;}
.navbar-light .navbar-nav .nav-link {font-weight: 500; color: var(--black); font-size: 20px; opacity: 1;}
.get-quote {margin-left: 30px;}
.bg-successbd {background-color: var(--lightblue);  font-size: 13px; border-radius: 7px; padding: 10px 14px; margin-bottom: 30px; font-weight: 500;}

.navbar-light .navbar-toggler-icon {background-image: url("../images/menu.png");}
.navbar-toggler:focus {box-shadow: none;}

/*********************************
            Bnnaer
*********************************/
.banner {position: relative; width: 100%; background:linear-gradient(to right, #162E76 0%, #163CB2 100%); padding: 120px 0 100px; margin-top: calc(100px - 0px);}
.text-area p {color: var(--white);  color: var(--white); margin-bottom: 80px; font-size: 20px; font-weight: 500; max-width: 90%;}
.text-area .btn {padding: 10px 20px;}
.arrow {margin-left: 10px;}
.bnr-img {position: relative;}
.box-wht {background-color: var(--white); border-radius: 20px; padding: 20px 25px; width: 250px; position: absolute; left: -50px; bottom: -50px;}
.count {margin-left: 20px;}
.count li h3 { font-weight: 500;}
.count li p, .fs17 {font-weight: 400; font-size: 17px; color: var(--lightblack);}


/*********************************
            Mission
*********************************/
.mission {padding: 80px 0; background-color: var(--bgClr);}
.mid-head h2 {text-align: center; color: var(--black); margin-bottom: 30px;}
.mid-head p {font-size: 20px; text-align: center; font-weight: 400; color: var(--lightblack); max-width: 60%; margin: 0 auto; margin-bottom: 80px; line-height: 144%;}
.box-info:hover  {box-shadow: 0px 0px 18px -4px #BDBDBD;}
.box-info img  {transition: 0.5s ease;}
.box-info:hover  img {transform: scale(1.2);}
.box-info { border-radius: 15px; background-color: var(--white); transition: box-shadow 0.5s; padding: 40px; height: 100%;}
.box-info h3, .box-info-choose h3, .hsl h2, .chs-sc img, .int-deta h3, .count-box img, .call-box img, .miles-box h3 {margin-bottom: 20px;}
.box-info p, .smal-head p, .box-info-choose p, .ndc-info p, .chs-sc p, .count-box p {font-size: 17px; color: var(--lightblack); transition: 0.5s;}
.box-info img, .box-info-choose img {margin-bottom: 20px; transition: 0.5s;}

/*********************************
            Solution
*********************************/
.solution {padding: 70px 0; background-color: var(--white);}
.w100img {width: 100%; object-fit: cover;}
.mx-img-text { display: flex; align-items: flex-start; margin-left: 40px; padding-top: 40px;}
.mx-img-text .multi-hvr, .ftdt-box img  {margin-right: 20px;}
.smal-head h3 {margin-bottom: 13px; transition:color  0.5s;}
.mx-img-text .multi-hvr .grimg, .mx-img-text:hover .multi-hvr .blimg {display: none;}
.mx-img-text:hover .multi-hvr .grimg {display: block;}
.mx-img-text:hover .smal-head h3 {color: var(--greenClr);}
.content.show {display: block; }
.content { transition: display 0.4s ease; display: none;}
.scroll-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}
.btndwn {
  width: 36px;
  height: 36px;
  background-color: var(--blueClr);
  border-radius: 50%;
  background-image: url(../images/readmore.png);
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  transition: background-image 0.5s ease;
  cursor: pointer;
}
.upBtn {
  transform: rotate(180deg);
  transform-origin: center;
}
.btndwn.addbg {background-image: url("../images/readless.png");}
.add-on {max-height: 500px; overflow-y: scroll; overflow-x: hidden; scrollbar-width: none;}
.add-on::-webkit-scrollbar { display: none; }

.wrap-contain {max-width: 90%; margin: 0 auto; width: 100%;}
.w100 {width: 100%;}

/*********************************
            why
*********************************/
.why {padding: 100px 0 70px; background-color: var(--white);}
.box-info-choose { border-radius: 15px; background-color: var(--white); transition: 0.5s; padding: 40px 30px; margin-bottom: 30px; height: 100%;}
.box-info-choose:hover {box-shadow: 0px 0px 18px -4px #BDBDBD;}
.box-info-choose:hover img {transform: scale(1.2);}

/*********************************
            Ready to ship
*********************************/
.ship {background-color: var(--bluebg); padding: 70px 0;}
.wrap-ship h2 {color: var(--white); margin-bottom: 30px; text-align: center;}
.wrap-ship p, .hsl p {color: var(--lightWhite); font-size: 20px; max-width: 50%; line-height: 144%; margin: 0 auto; margin-bottom: 50px; text-align: center;}
.ship-btn {display: flex; justify-content: center;}
.ship-btn .btn {background-color: var(--white); color: var(--bluebg); font-weight: 500; margin-right: 15px;}
.ship-btn .btn:hover {opacity: 0.9;}
.ship-btn .btn.btn-green {background-color: var(--greenClr); color: var(--white);} 

/*********************************
            footer
*********************************/
footer {padding: 100px 0; background-color: var(--midblack);}
.hd-ft h3 a {color: var(--white); display: inline-block; margin-left: 7px; font-size: 24px;}
.sml-para p {color: var(--midlightwhite); font-weight: 500; margin-bottom: 40px;}
.hd-ft, .int-deta p {margin-bottom: 30px;}
footer h4 {color: var(--white); margin-bottom: 30px;}
.list li {margin-bottom: 20px;}
.list li a {color: var(--midlightwhite); transition: 0.5s;}
.list li a:hover {color: var(--white);}
.ft-sm-icon {margin-right: 7px;}

/*********************************
            Range
*********************************/
.range-slider {background-color: var(--lightWhite); padding: 70px 0;}
.hsl p {color: var(--lightblack); max-width: 65%;}
.hsl h2, .count-box {text-align: center;}
.items-child {display: flex; align-items: center; justify-content: space-between; margin-top: 30px;}
.items-child li {margin-right: 20px; font-size: 17px; color: var(--lightblack); font-weight: 400;}
.blchild { font-size: 24px; color: var(--black); font-weight: 500; display: block;}



  .slider::-moz-range-track {
  height: 6px;
  border-radius: 5px;
  background: #ddd;
  }

/*#owl-contact {display: none;}*/
.owl-carousel#owl-contact .owl-item img {display: inline-block !important; width: auto !important;}
.global .call-box {margin: 0 15px;} 


.custom-range {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

/* Track */
.custom-range::-webkit-slider-runnable-track {
  height: 17px;
  border-radius: 47px;
  background: linear-gradient(to right, var(--greenClr, green) 0%, var(--greenClr, green) 50%, #fff 50%, #fff 100%);
}
.custom-range::-moz-range-track {
  height: 17px;
  border-radius: 47px;
  background: #fff;
}
.custom-range::-moz-range-progress {
  height: 17px;
  border-radius: 47px;
  background: var(--greenClr, green);
}

/* Thumb */
.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 29px;
  width: 29px;
  border-radius: 50%;
  background: var(--greenClr, green);
  border: 2px solid var(--greenClr, green);
  cursor: pointer;
  margin-top: -6px;
}
.custom-range::-moz-range-thumb {
  height: 29px;
  width: 29px;
  border-radius: 50%;
  background: var(--greenClr, green);
  border: 2px solid var(--greenClr, green);
  cursor: pointer;
}

/* Replace blue glow with green */
.custom-range:focus {
  outline: none;
}








/**********************************************
          Inner pages
          Resources Banner
***********************************************/
.inner-banner {margin-bottom: 80px;}
.inner-banner .wrap-mod {max-width: 80%; margin: 0 auto;}
.inner-banner .wrap-mod .bg-successbd {padding: 10px 40px;}
.inner-banner .wrap-mod h1, .chs-sc {text-align: center;}
.inner-banner .wrap-mod p {color: var(--white); text-align: center; max-width: 70%; font-size: 20px; line-height: 135%; margin: 0 auto;}

/**********************************************
                  Freight
***********************************************/
.freight-sec {margin-bottom: 60px;}
.freight-sec .col-sm-12 {margin-bottom: 30px;}
.frght-box {border-radius: 15px; background-color: var(--white); overflow: hidden; box-shadow: 0px 0px 18px -4px #BDBDBD;  height: 100%;}
.frght-img-sec {position: relative; overflow: hidden; border-radius: 15px;}
.frght-box .frght-img-sec img {transition: 0.5s;}
.frght-box:hover .frght-img-sec img {transform: scale(1.1); opacity: 0.9;}
.chld-mg {position: absolute; top: 20px; left: 15px;}
.ndc-info {padding: 40px 30px;}
.ndc-info h3 {margin-bottom: 20px; font-size: 24px; color: var(--lightblack); font-weight: 500; text-align: left;}
.ndc-info p {margin-bottom: 30px;  text-align: left;}
.bill-list li {padding-left: 40px; background-image: url("../images/vullet.png"); background-repeat: no-repeat; background-size: 24px; background-position: 0% 50%; font-size: 17px; color: var(--lightblack); margin-bottom: 20px;}
/**********************************************
              Why us inner page
***********************************************/
.why-inr {padding: 90px 0; background-color: var(--bgClr);}
.chs-sc h3, .count-box h3 {margin-bottom: 10px;}
.inner-banner .rs-pon .bg-successbd {padding: 10px 14px;}
/**********************************************
             Feature inner page
***********************************************/
.feature {padding-bottom: 80px;}
.ft-bx .col-sm-12 {margin-bottom: 30px;}
.ftdt-box {border: 1px solid var(--brdrclr); border-radius: 15px; height: 100%; padding: 30px 20px; display: flex; align-items: flex-start;}
.int-deta h4 {font-size: 17px; color: var(--blueClr); font-weight: 600; margin-bottom: 5px;} 
.ftdt-box .arrow img {margin-right: 0;}
.int-deta .btn {padding: 10px 22px;}
.modal-ft {padding: 45px 60px; border: 0; padding-top: 0;}
.indiv .modal-header {border: 0;}
.indiv .modal-body {padding: 0;}
.indiv .btn-close {background: url("../images/close.png"); background-repeat: no-repeat; opacity: 1;  cursor: pointer; margin-top: 30px; margin-right: 20px;}


/**********************************************
          Inner pages
          Our Location Global section
***********************************************/
.global {margin-bottom: 70px;}
.corner {width: 100%; height: 400px; border-radius: 30px; overflow: hidden;}
.corner iframe {width: 100%; height: 100%;}
.cst-acordion .accordion-button:not(.collapsed) {background-color: var(--white) !important; color: var(--greenClr);}
.cst-acordion .accordion-button {background-color: var(--white); color: var(--black); font-size: 32px; font-weight: 500; border: 0; border-bottom: 1px solid var(--brdrclr); box-shadow: none; padding-left: 30px;}
.flags {margin-right: 20px;}
.accordion-button::after {background-image: url("../images/blue_arrow_accordion.png");}
.accordion-button:not(.collapsed)::after {background-image: url("../images/green_arrow_accordion.png");}
.cst-acordion .accordion-body {background-color: var(--lightWhite); border-radius: 0 0 30px 30px; padding: 30px 50px;}
.cst-acordion .accordion-body p {font-size: 20px; line-height: 144%; color: var(--lightblack);}
.cst-acordion .accordion-item {border: 0;}

/**********************************************
          Regional section
***********************************************/
.regional {padding: 80px 0 60px; background-color: var(--lightWhite);}
.count-box {box-shadow: 0px 0px 18px -5px #96B5DE; padding: 30px 45px; background-color: var(--white); border-radius: 15px; height: 100%;}
.count-box img {transition: 0.5s;}
.count-box:hover img {transform: scale(1.2);}
.regional .col-sm-12, .on-image .col-sm-12 {margin-bottom: 20px;}

  /**********************************************
          Inner pages
          Reach Us section
***********************************************/
  .call-box {border-radius: 15px; border: 1px solid var(--brdrclr); padding: 30px 30px; text-align: center; height: 100%;}
  .call-box h2 {font-size: 32px; color: var(--black); font-weight: 500; margin-bottom: 20px; text-align: center;}
  .call-box p {text-align: center; margin-bottom: 30px;}
  .call-box p a {color: var(--blueClr); margin-bottom: 10px;}
  .smxpara {font-size: 10px; color: var(--lightGrey );}
  .call-box p.min-mr, .call-box .btn img {margin-bottom: 0;}
  .call-box .btn {padding: 10px 20px;}
  .call-box .btn .arrow {margin-left: 20px;}
  .clbox .col-sm-12 {margin-bottom: 25px;}
  .clbox {max-width: 80%; margin: 0 auto;}

  /**********************************************
          Message section
***********************************************/
  .message {padding: 60px 0; background-color: var(--bgClr);}
  .bg-frm {padding: 60px 40px; border-radius: 15px; border: 1px solid var(--brdrclr); background-color: var(--white);}
  .fs32 {font-size: 32px; color: var(--black); font-weight: 500; margin-bottom: 40px; line-height: 135%;}
  .form-group {margin-bottom: 30px;}
  .bg-frm .form-label {font-size: 17px; color: var(--lightblack); margin-bottom: 15px;} 
  .bg-frm .form-control, .bg-frm select, .dropdown-selected { background-color: var(--bginput); border: 1px solid var(--brdrclr); border-radius: 15px; padding: 12px 20px;}
  .bg-frm select, .dropdown-selected {background-image: url("../images/select.png"); background-repeat: no-repeat; background-size: 13px; background-position: 95% 50%; appearance: none; cursor: pointer;}
  .bg-frm ::placeholder {font-size: 17px; color: var(--txtplcehlder);}
  .bg-frm .btn  {width: 100%; margin-top: 45px;}
  .bg-frm select {width: 100%;}
  .form-control:focus {box-shadow: none;}
  :focus-visible {outline: none;}
  .ofc-loc {margin-top: 40px; padding-left: 25px;}
  .ofc-loc p {margin-bottom: 30px;}
  .ofc-loc h3 {color: var(--greenClr); margin-bottom: 25px;} 

  /**********************************************
  			Inner pages
         About page section
***********************************************/
.abtbdg {padding: 10px;}
.journey {padding: 50px 0 60px;}
.abt-banner {margin-bottom: 0;}
.our-jrney {border-radius: 30px; width: 100%; overflow: hidden;}
.head-jrney {padding-top: 20px;}
.head-jrney h2 {margin-bottom: 30px; color: var(--black); line-height: 110%;}
.head-jrney p {margin-bottom: 20px; font-size: 20px; color: var(--lightblack);}

  /**********************************************
         Milestones section
***********************************************/
.milestones {padding: 80px 0 100px;}
.miles-wrap {width: 100%; position: relative;}
.miles-wrap::after {content: ""; height: 100%; width: 10px; position: absolute; left: 50%; transform: translateX(-50%); background-image: url(../images/line.png); background-repeat: no-repeat; background-position: center; top: 0;}
.miles-box {padding: 30px 40px 40px; text-align: right; box-shadow: 0px 0px 30px -16px #BDBDBD; border: 1px solid var(--brdrclr); border-radius: 15px; max-width: 90%;}
.miles-box.text-left {text-align: left; margin-left: auto;}
.miles-box h4, .leader-info h4 {font-size: 17px; font-weight: 600; color: var(--blueClr); margin-bottom: 15px;}
.miles-box .mlimg {margin-right: 15px; }

 /**********************************************
         Onimage section
***********************************************/
.on-image {padding: 60px 0;}
.dtimgbx {width: 100%; height: 100%; border-radius: 15px; overflow: hidden; filter: grayscale(1); transition: 0.5s;}
.dtimgbx:hover { filter: grayscale(0);}

 /**********************************************
         Leadership section
***********************************************/
.leadership {background-color: var(--smgrey); padding: 40px 0 70px;}
.card-leader .row {max-width: 60%; overflow: hidden; margin: 0 auto; border-radius: 15px; align-items: center; background-color: var(--white);}
.leader-info  {padding: 10px 40px;}
.leader-info h3 {margin-bottom: 5px; font-size: 24px;}
.mgd {text-align: right; border-radius: 15px; overflow: hidden;}
.sets {background-color: var(--white);}


.dropdown {
  position: relative;
  width: 100%;
  user-select: none;
}


.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--brdrclr);
  border-top: none;
  border-radius: 15px;
  display: none;
  overflow-y: auto;
  box-shadow: 0px 0px 18px -4px #BDBDBD;
  z-index: 99;
}
.dropdown-list div {
  padding: 12px 16px;
  cursor: pointer;
}

.dropdown-list div:hover {
  background: var(--brdrclr);
  color: var(--lightblack);
}

.show, .dropdown-list.sconddrop {
  display: block;
}


/**********************************************
         Step progress section
***********************************************/

#stepsSection {
  background-color: var(--lightWhite); padding: 70px 0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}


.progress-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 90%;
}
  
.progress-bar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 11px;
  /*background: #dbeafe;*/
  background: #c2f2d7;
  border-radius: 4px;
  transform: translateY(-50%);
  overflow: hidden;
}

.progress {
  position: absolute;
  left: 0;
  height: 100%;
  width: 0%;
  background: #34d399;
  border-radius: 4px;
  transition: width 1s ease-in-out, height 1s ease-in-out;
}

.step {
  position: relative;
  text-align: center;
  flex: 1;
  z-index: 1;
}

.circle {
  width: 30px;
  height: 30px;
  background: #fff;
  border: 3px solid #34d399;
  border-radius: 50%;
  margin: 0 auto 20px;
  transition: background 0.4s, border 0.4s;
}

.circle.active {
  background: #34d399;
}

.step span {
  display: block;
  font-size: 13px;
  color: #6b7280;
}

.step b {
  font-size: 15px;
  color: #111827;
}