body{

  overflow-x: hidden !important;

  padding: 0px;

  margin: 0px;

}

* {

  /* font-family: newfont; */

}

@font-face {

  font-family: newfont;

  src: url('../fonts/AbrilFatface-Regular.ttf');

}

@font-face {

  font-family: newfont1;

  src: url('../fonts/Futura/FuturaPTDemi.otf');

}

@font-face {

  font-family: newfont2;

  src: url('../fonts/Futura/FuturaPTHeavy.otf');

}

@font-face {

  font-family: newfont3;

  src: url('../fonts/Futura/FuturaPTDemi.otf');

}

@font-face {

  font-family: newfont4;

  src: url('../fonts/Futura/FuturaPTMedium.otf');

}

@font-face {

  font-family: newfont8;

  src: url('../fonts/Futura/FuturaPTBold.otf');

}



@font-face {

  font-family: newfont8;

  src: url('../fonts/Futura/');

}



.tooltip {

  position: relative;

  display: inline-block;

  border-bottom: 1px dotted black;

  font-family: newfont;

}



.tooltip .tooltiptext {

  visibility: hidden;

  width: 200px;

  background-color: #fff;

  color: #000000;

  text-align: center;

  border-radius: 6px;

  padding: 0px 0;

  position: absolute;

  z-index: 1;

  top: 19px;

  height: 50px;

  font-size: 12px;

  left: 105%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: 'newfont1';

}



.tooltip:hover .tooltiptext {

  visibility: visible;

}



.tooltip1 {

  position: relative;

  display: inline-block;

  border-bottom: 1px dotted black;

}



.tooltip1 .tooltiptext1 {

  visibility: hidden;

  width: 200px;

  background-color: #fff;

  font-family: newfont;

  color: #000000;

  text-align: center;

  border-radius: 6px;

  padding: 0px 0;

  position: absolute;

  z-index: 1;

  top: 19px;

  height: 50px;

  font-size: 12px;

  left: 105%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: 'newfont1';

}



.tooltip1:hover .tooltiptext1 {

  visibility: visible;

}



.mySidenav {

  width: 360px;

}

.body_wrap{

    background: url('../assets/Home-assets/background.jpg') no-repeat center center fixed; 

  background-size: cover;
 height:100vh;
/* overflow:hidden; */

}
 

 .main_heading{

  font-size: 42px;

  animation: fadeIn ease 10s;

  -webkit-animation: fadeIn ease 10s;

  font-weight:700;

 line-height: 4rem;

  font-family: newfont2 ;

} 

.sidenav {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 4;

    top: 0;

    left: 0;

    background-color: #111;

    overflow-x: hidden;

    transition: 0.5s;

    padding-top: 60px;

  }

  

  .sidenav a {

    padding: 8px 8px 8px 12px;

    text-decoration: none;

    font-size: 45px;

    font-family: newfont;

    font-weight: 600;

    color: #262626;

    display: block;

    transition: 0.3s;

    line-height:4.5rem;

  }

  

  .sidenav a:hover {

    color: #f1f1f1;

    /* border-bottom: 1px solid; */

  }

  

  .sidenav .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

  }

  .index_logo_padding{
  padding-top: 11% ;
}

  @media screen and (max-height: 450px) {
     .index_logo_padding{
      padding-top: 0% !important;
    }

    .sidenav {

      padding-top: 15px;

    }

    

    .sidenav a {

      font-size: 18px;

    }

  }

  .padng_div{

    margin-left: 20px;

  }

  .down_btns{

    margin: 10px;

  }

  .logo_sec{

    padding-top: 11% !important;

  }

  .tag_line_div{

    padding-left: 16%;

  }

  .menu_area{

    margin-left: 20px;

  }
.tagline_divss{
  padding-left: 16%;
}
.text_ordering{
padding-left: 8%;
}
.rdc_head{
  font-size: 29px;font-weight: 700;font-family: 'newfont';letter-spacing: 2px;
}
  @media only screen and (max-width: 600px) {
    .reachus{
      height: auto !important;
    }
    .rch_us{
      margin-left: 20px;
    }
    .mrgn{
      margin-top: 8px;
    }
    .icons{
      width: 90px;
    }
    .flip-card1{
      width: 95px !important;
    }
    .flip-card{
      width: 100px;
      height: 100px;
    }
     .flip-card2{
      width: 144px !important;
    }
    .rdc_head{
        font-size: 22px;
        font-weight: 700;font-family: 'newfont';letter-spacing: 2px;
      }
    .know_more_btn{
      margin-bottom: 30px;
      margin-top: 30px;
    }
    .strt{
      margin-top: 25px;
    }
    .card_top_headings{
      font-size: 14px;
    }
    .block_text{
      font-size: 13px;
          }
    .wtwedotagline{
      order: 2;
    }
    .wtwedopara{
      order: 3;
    }
     .logo_fd{
    /* width: 40% !important; */
    width: 120px;
    height: auto;
    margin-top: -45px;
    margin-bottom: 8%; 
  }
  .whoweare_tagline{
order: 2;
  }
    .whatwedo{
margin-top: 4% !important;
    }
    .box5{
   
    width: 100% !important;
  margin-bottom: 35px !important;
    margin-top: 0px !important;
  }
    .para_area{
    /* padding: 18px;
    padding-left: 0px !important; */
    }
    .rows_inside{
    padding-left: 10px !important;
    margin-left: 0px !important;
}
    .tagline_divss{
  padding-left: 1%;
}
    .footer_sec{
      padding:6px !important;
      font-size: 11px !important;
    }
    .button{
      width: 80% !important;
    }
    .text_ordering{
order: 2;
margin-top: 10%;
    justify-content: center;
    }
    .index_logo_padding{
      padding-top: 0% !important;
    }

    .menu_area {

      margin-left: 0px !important;

  }

    .social_icons{

      flex-direction: column !important;

    }

    #menu_button{

      width: 30px !important;

  }

    .tag_line_div{

      text-align: center !important;

      padding-left: 0px !important;

    }

    .dwn{

      margin-top: 6px !important;

    }

    .logo_sec{

padding-top: 3% !important;

    }

    .country_res{

      margin-top: 50px !important;

    }

    .res_div{

      margin-top: 55px !important;

    }

    .main_heading{

      font-size: 28px !important;

      line-height: 2.5rem !important;
	font-family: newfont2;

    }

    .padng_div{

      margin-left: 0px;

    }

  }

  .reachus_headings{

    font-weight: 600;

  }

  .country_card{

    background-color: #2B2B2B;

    color: #fff;

    padding: 6px;

    font-size: 14px;

  }

  .country_card:hover{

    background-color: rgb(0,0,0,0.08);

    transition: 0.8s;

  }

  .country_card_logo{

    width: 50%;

    margin-top: -40px;

  }

  .reachus_text_inputs{

    background-color:transparent;    
    width: 100%;

    padding: 5px;

    border: 1px solid #fff;

  }

  .reachus_text_inputs:focus{

    background-color: #fff !important;

    transition: 0.4s;

    outline: none;

  }

  .send_btn{

    background-color: #fff;

    padding: 10px;

    border-radius: 3px;

    font-size: 11px;

    font-weight: 500;

    border: none;

    cursor: pointer;

  }

  .rdc_label{

    background-color: black;

    color: #fff;

    font-size: 15px;

    border-radius: 4px;

    padding: 1px 10px;

    font-weight: bolder;

    letter-spacing: 1px;

  }

  .know_more_btn{

    background-color: black;

    color: #fff;

    border: none;

    padding: 3px 18px;

cursor: pointer;

margin-top: 24px;

cursor: pointer;

  }

  .flip-card_brd{

    background-color: transparent;

    width: 215px;

    height: 148px;

    perspective: 1000px;

  }

  .flip-card_brd:hover .flip-card-inner {

    transform: rotateY(180deg);

  }

  .flip-card {

    background-color: transparent;

    width: 145px;

    height: 148px;

    perspective: 1000px;

    cursor: pointer;

  }
  .flip-card1 {

    background-color: transparent;

    width: 145px;

    height: 148px;

    perspective: 1000px;

    cursor: pointer;

  }
  .flip-card2{
    background-color: transparent;

    width: 145px;

    height: 148px;

    perspective: 1000px;

    cursor: pointer;
  }
  .logo_{

    width: 70%;

  }

  .flip-card2 {

    background-color: transparent;

    width: 215px;

    height: 148px;

    perspective: 1000px;

    cursor: pointer;

  }

  

  .flip-card-inner {

    position: relative;

    width: 100%;

    height: 100%;

    text-align: center;

    transition: transform 0.6s;

    transform-style: preserve-3d;

    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */

  }

  

  .flip-card:hover .flip-card-inner {

    transform: rotateY(180deg);

  }

  

  .flip-card-front, .flip-card-back {

    position: absolute;

    width: 100%;

    height: 100%;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

  }

  

  .flip-card-front {

    background-color:transparent;

    color: black;

  }

  

  .flip-card-back {

    background-color: black;

    color: white;

    font-size: 13px;

    transform: rotateY(180deg);

    display: flex;

    /* flex-direction: column; */

    align-items: center;

    justify-content: center;

    border-radius: 5px;

  }

  .bcm_headings{

    font-size: 22px;

    font-family: 'newfont';

  }

  .overlap_div{

    width: 30%;

    position: absolute;

    top: 18%;

    left: 40%;

  }

  .main_logo{

    margin-bottom: 30px;

  }

  .social_icons a{

    font-size: 22px;

    color: black;

  }

  .box1 {

    cursor: pointer;

    float: left;

    position: relative;

    width: 100%;

    padding: 32px;

    font-size: 13px;

    height: 170px;

    margin: 5px;

    background-color: #2b2b2b;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: -20px;

}



.box1:hover {

    background-color: black;

    color: #fff;

    -webkit-transform: scale(2, 2);

    -moz-transform: scale(2, 2);

    transform: scale(1.3);

    z-index: 9999;

    transition: 0.5s ease-in-out;

}

  

  .box2 {

    cursor: pointer;

    float: left;

    position: relative;

    width: 100%;

    padding: 32px;

    font-size: 13px;

    height: 170px;

    margin: 5px;

    background-color: #2b2b2b;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: -46px;

}

@-webkit-keyframes pulse {

  25% {

    transform: scale(1.1);

  }

  75% {

    transform: scale(1.1);

  }

}

.pulse:hover {

  -webkit-animation: pulse .8s linear infinite;

  animation: pulse .8s linear infinite;

  z-index: 9999;

}

.box2:hover {

    background-color: black;

    color: #fff;

    -webkit-transform: scale(2, 2);

    -moz-transform: scale(2, 2);

    transform: scale(1.3);

    z-index: 9999;

    transition: all 0.5s ease-in-out;

}

.box3 {

    cursor: pointer;

    float: left;

    position: relative;

    width: 100%;

    padding: 32px;

    font-size: 13px;

    height: 170px;

    margin: 5px;

    background-color: #2b2b2b;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-left: -40px;

    margin-top: 20px;

}

.reach_us_head{

  font-family: newfont;

  letter-spacing: 1px;

  font-size: 23px;

  font-variant: normal;

}

.country_card_text{

  font-family: newfont1;

}

.box3:hover {

    background-color: black;

    color: #fff;

    -webkit-transform: scale(2, 2);

    -moz-transform: scale(2, 2);

    transform: scale(1.3);

    z-index:9999 ;

    transition: 0.5s ease-in-out;

}

.box4 {

  cursor: pointer;

  float: left;

  position: relative;

  width: 100%;

  padding: 32px;

  font-size: 13px;

  height: 170px;

  margin: 5px;

  background-color: #2b2b2b;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-left: -40px;

  margin-top: -20px;

  margin-left: -31px;

}



.box4:hover {

  background-color: black;

  color: #fff;

  -webkit-transform: scale(2, 2);

  -moz-transform: scale(2, 2);

  transform: scale(1.3);

  z-index:9999 ;

  transition: 0.5s ease-in-out;

}

.box5 {

  cursor: pointer;

  float: left;

  position: relative;

  width: 87%;

  padding: 32px;

  font-size: 13px;

  height: 170px;

  margin: 5px;

  background-color: #2b2b2b;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-left: -40px;



}



.box5:hover {

  background-color: black;

  color: #fff;

  -webkit-transform: scale(2, 2);

  -moz-transform: scale(2, 2);

  transform: scale(1.3);

  /* z-index: ; */

  transition: 0.5s ease-in-out;

}
.card_top_headings{
  border-bottom: 1px solid #fff;
}
@media only screen and (max-width:992px){

  .logo_{

    /* width: 100%; */

    width: 260px;

  }
  .whatwedo{
      margin-top: 20% ;
  }

}

  @media only screen and (max-width: 600px) {

  .overlap_div{

      display: flex;

      position: unset;

      width: 100%;

    }

    /* .social_icons{

      justify-content: space-evenly;

      padding-top: 18px;

    } */

   

    .main_logo{

      margin-bottom: 10px;

    }

  }

  @media only screen and (max-width: 992px) {

    .box{ 

      /* font-size:10px !important; */

    }

    .social_icons{

      flex-direction: column !important;

    }

    .box1{ font-size:10px; margin-left: auto;}

    .box2{font-size:10px !important;margin-top: 0px;margin-left: auto}

    .box3{ font-size:10px !important;margin-left: 0px ;margin-left: auto;

    margin-top: 0px;}

    .box4{font-size:10px !important;margin-left: 0px;

      margin-top: 0px;

      margin-left: 0px;}

      .box5{ font-size:10px !important;margin-left: 0px;}



    }

  .footer_links a{

    color: #5b6069;

  }
    .logo_fd{
    /* width: 60%;  */
    width: 200px;
    height: auto;
  }
  .para_area{

    text-align: justify;

    padding-left: 2.35%;

    font-family: newfont1;

  }

  .footer_sec{

    background-color: black;

    color: #5b6069;

    font-size: 13px;

    padding: 8px;

  }

  .index_btn1{

    background-color: #fbfbfb;

    color: black;

    border: 3px solid black;

    border-radius: 10px;

    font-size: 16px;

    font-weight: 600;

    font-family: newfont3;

    margin-top: 10px;

    padding: 3px 10px;

    cursor: pointer;

  }

  .index_btn2{

    background-color: #fbfbfb;

    color: black;

    border-radius: 10px;

    padding: 3px 10px;

    border: 3px solid black;

    font-size: 16px;

    font-weight: 600;

    margin-top: 10px;

    font-family: newfont3;

    cursor: pointer;

  }

  .main_row{

    padding: 20px;

  }

  .index_btn1:hover{

    background-color: black;

    color: #fff;

    transition: 0.5s ease;

  }

  .index_btn2:hover{

    background-color: black;

    color: #fff;

    transition: 0.5s ease;

  }

 .div1{

  position: absolute;

  left: 44%;

  font-size: 30px;

 }

.blog1{

  background-color: #313131;

  color: #fff;

  padding: 20px;

font-size: 15px;

/* font-family: newfont4; */

}

.blog2{

  background-color: #adadad;

  color: #fff;

  padding: 20px;

font-size: 15px;

/* font-family: newfont4; */

}

.reachus_btn{

  background-color: #fff;

  color: #000;

  border: none;

  padding: 5px;

  font-size: 13px;

  font-weight: 700;

  border-radius: 4px;

  cursor:pointer;
}

#menu_button {

  width: 39px;

  overflow: hidden;

}



#menu_checkbox {

  display: none;

}



#menu_label {

  position: relative;

  display: block;

  height: 29px;

  cursor: pointer;

}



#menu_label:before,

#menu_label:after,

#menu_text_bar {

  position: absolute;

  left: 0;

  width: 100%;

  height: 5px;

  background-color: #000;

}



#menu_label:before,

#menu_label:after {

  content: '';

  transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) left;

}



#menu_label:before {

  top: 0;

}



#menu_label:after {

  top: 12px;

}



#menu_text_bar {

  top: 24px;

}



#menu_text_bar:before {

  content: 'MENU';

  position: absolute;

  top: 11px;

  right: 0;

  left: 0;

  color: #000;

  font-size: 10px;

  font-weight: bold;

  font-family: 'Montserrat', Arial, Helvetica, sans-serif;

  text-align: center;

}



#menu_checkbox:hover+#menu_label:before {

  left: -39px;

}



#menu_checkbox:hover+#menu_label:after {

  left: 39px;

}



#menu_checkbox:hover+#menu_label #menu_text_bar:before {

  animation: moveUpThenDown 0.8s ease 0.2s forwards, shakeWhileMovingUp 0.8s ease 0.2s forwards, shakeWhileMovingDown 0.2s ease 0.8s forwards;

}



@keyframes moveUpThenDown {

  0% {

    top: 0;

  }



  50% {

    top: -27px;

  }



  100% {

    top: -16px;

  }

}



@keyframes shakeWhileMovingUp {

  0% {

    transform: rotateZ(0);

  }



  25% {

    transform: rotateZ(-10deg);

  }



  50% {

    transform: rotateZ(0deg);

  }



  75% {

    transform: rotateZ(10deg);

  }



  100% {

    transform: rotateZ(0);

  }

}



@keyframes shakeWhileMovingDown {

  0% {

    transform: rotateZ(0);

  }



  80% {

    transform: rotateZ(3deg);

  }



  90% {

    transform: rotateZ(-3deg);

  }



  100% {

    transform: rotateZ(0);

  }

}

.footer {

  position: fixed;

  left: 0;

  bottom: 0;

  width: 100%;

  background-color: black;

  color: darkolivegreen;



  text-align: center;

}
.rows_inside{
    padding: 25px;
    margin-left: 25px;
}
.burgermenu{
  margin-left: 25px;
}
.down_btns_2{
margin-top: 3%;
}
.whatwedo{
  margin-top: 80px;margin-bottom:28px;
}
.desktop_sales{
          display:none;
          position: absolute;
          font-size: 48px;
          top: 30px;
          left: 8%;
          color: #080808;
          letter-spacing: 4px;
          font-family: newfont8; 
}
.desktop_logistics{
          display: none;
          position: absolute;
          left: 46%;
          color: #1b1b1b;
          font-size: 38px;
          letter-spacing: 4px;
          font-weight:700
}
.desktop_oper{
        display:none;
        position: absolute;
        left: 28%;
        font-size: 36px;
        color: gray;
        top: 85px;
        letter-spacing: 4px;
        color:  #a7a7a7;
        font-family: newfont8;
}
.desktop_tech{
        display:none;
        position: absolute;
        left: 68%;
        font-size:48px;
        top: 107px;
        letter-spacing: 4px;
        color: #080808;
        font-family: newfont8;
}
.desktop_fince{
        display:none;
        position: absolute;
        font-size: 38px;
        top: 150px;
        left: 10%;
        letter-spacing: 4px;
        color:  #464646;
        font-weight:700
}
.desktop_mark{
        display: none;
        position: absolute;
        left: 41%;
        font-size: 37.3px;
        top: 180px;
        letter-spacing: 4px;
        color: #353535;
        font-weight:700
}
.desktop_export{
        display: none;  
        position: absolute;
        font-size: 44px;
        color: gray;
        top: 235px;
        letter-spacing: 4px;
        left: 18%;
        font-weight: 800;
        color: #838383;
        font-family: newfont8;
}
.desktop_dist{
        display:none;
        position: absolute;
        font-size: 42px;
        top: 265px;
        left: 54%;
        font-weight: 800;
        color: #424242;
        letter-spacing: 4px;
        font-family: newfont8;
}
@media screen and (min-width: 1920px) {
  .bcm_margin{
    margin-top: 4%;
  }
  .desktop_sales
  {
    position: absolute;
    font-size: 65px;
    top: 30px;
    left: 0%;
    color: rgb(8, 8, 8);
    letter-spacing: 4px;
    font-family: newfont8;
  }
  .desktop_logistics{
    position: absolute;left: 40%;color: rgb(27, 27, 27);font-size: 53px;letter-spacing: 4px;font-weight: 700;
  }
  .desktop_oper{
    position: absolute;left: 20%;font-size: 53px;top: 110px;letter-spacing: 4px;color: rgb(167, 167, 167);font-family: newfont8;  
  }
  .desktop_tech{
    position: absolute;left: 61%;font-size: 63px;top: 107px;letter-spacing: 4px;color: rgb(8, 8, 8);font-family: newfont8;
  }
  .desktop_fince{
    position: absolute;font-size: 53px;top: 202px;left: 10%;letter-spacing: 4px;color: rgb(70, 70, 70);font-weight: 700;
  }
  .desktop_mark{
    position: absolute;left: 41%;font-size: 53.3px;top: 232px;letter-spacing: 4px;color: rgb(53, 53, 53);font-weight: 700;
  }
  .desktop_export{
    position: absolute;font-size: 53px;top: 340px;letter-spacing: 4px;left: 18%;font-weight: 800;color: rgb(131, 131, 131);font-family: newfont8;
  }
  .desktop_dist{
    position: absolute;font-size: 54px;top: 370px;left: 54%;font-weight: 800;color: rgb(66, 66, 66);letter-spacing: 4px;font-family: newfont8;
  }


  .services_texts_div{
    margin-top: 7%;
  }
  .box1{
    height: 215px;
    font-size: 16px;
    line-height: 1.5rem;
  }
  .box2{
    height: 215px;
     font-size: 16px;
    line-height: 1.5rem;
  }
  .box3{
    height:215px;
     font-size: 16px;
    line-height: 1.5rem;
  }
  .box4{
    height:215px;
     font-size: 16px;
    line-height: 1.5rem;
  }
  .box5{
    height:215px;
     font-size: 16px;
    line-height: 1.5rem;
    
  }
  .overlap_div{
top: 18%;
  }
  .whatwedo{
  margin-top: 8%;margin-bottom:0px;
}
  .whoweare_font{

 font-size: 24px;
  }
.para_area{
      font-size: 24px;
      padding-left: 5px;
    }
    .resp_med{
    padding-top: 100px;
    }
    .who_we_r{
      font-size: 40px;
      font-weight: unset;
    }
    .logo_resp{
      height: 136px;
    }

.index_logo_padding{
  padding-top: 20% !important;
}
.main_heading{
  font-size: 64px;
  line-height: 4.5rem;
}
.rows_inside{
    padding: 50px;
}
.down_btns_2{
margin-top: 0%;
}
}