/* @font-face {
font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} */
.page-wrapper{
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header .containers{
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 99;
}
.logos img{
  width: 150px;
}
.logos{
  margin-left: 3%;
  width: 10%;
}
.cons button{
  border: none;
  background-color: blue;
  padding: 20px;
  border-radius: 10px;
}
.cons{
  margin-inline-end: 5%;
}
.cons button a{
  text-decoration: none;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: 'Rubik',;
  text-transform: uppercase;
}
nav{
  flex: 1;
  text-align: right;
  margin-inline-end: 1%;
}
nav ul li{
  padding: 13px;
  display: inline-block;
}
ul li a{
  font-family: 'Rubik',sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: black;
  text-decoration: none;
}
.ham{
  display: none;
}
input[type="checkbox"]{
  display: none;
}
#hide{
  display: none;
}

/* hero section starts */
.hero{
  /* margin-block-start: 10%; */
  padding: 150px 0 30px;
}
.hero-text{
  margin-inline-start: 10%;
  margin-block-start: 10%;
}
.hero-text h1{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 3.5rem;
  line-height: 1.5;
}
.hero-text p{
  font-family: 'Rubik',sans-serif;
  font-size: 1.3rem;
}
.hero-img{
  /* border: 10px solid black; */
  margin-top: -5%;
  width: 90%;
}
.hero-img img{
  width: 110%;
}
/* hero section end */

/* about us section starts */
  .about-us{
    margin-inline-start: 5%;
    margin-block-start: 2%;
  }
  .about-container{
    background-color: white;
    box-shadow: 5px 5px 5px rgb(228, 224, 224);
    /* padding: 20px; */
    border-radius: 30px;
    width: 97%;
  }
  .about-text{
    width: 150%;
  }
  .about-text h4{
    font-family: 'Rubik',sans-serif;
    font-weight: bold;
    font-size: 1.6rem;
  }
  .about-text p{
    font-family: 'Rubik',sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
  color: black;
    text-transform: capitalize;
  }
  .about-us-text{
    /* border:  10px solid black; */
    width: 100%;
    gap: 30px;
    padding-left: 15%;
    padding-right: 0%;
    padding-top: 5%;
    border-left: 3px solid silver;
    /* padding-bottom: 4%; */
  }
  .about-us-img img{
    width: 60px;
  }
  .about-us-img{
    margin: auto 0;
  }
/* about us section end */

/* why choose section starts */
.choose-us-img{
  margin-inline-start: 10%;
}
.choose-us-img img{
  width: 110%;
}
.choose-us-img .play-img{
  position: absolute;
  top: 30%;
  width: 20%;
  left: 50%;
}
.choose-us{
  padding: 80px 0 10px;
}
.choose-us-text h5 img{
  width: 3%;
  padding-right: 7px;
}
.choose-us-text{
  margin-inline-start: 10%;
}
.choose-us-text h1{
  font-family: 'Rubik';
  font-weight: bold;
  font-size: 2.5rem;
  width: 50%;
  line-height: 1.5;
  text-transform: capitalize;
}
.choose-text-options{
  margin-block-start: 5%;
  line-height: 2;
}
.choose-text-options h5{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: capitalize;
}
.choose-text-options p{
  width: 60%;
  color: black;
  font-family: 'Rubik',sans-serif;
}
/* why choose section end */

/* services section starts */
/* .services{
  padding: 100px 0 60px;
  margin-inline-start: 5%;
}
.heading-text{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.heading-text h1{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 2.5rem;
  text-transform: capitalize;
}
.heading-text p{
  width: 50%;
  font-family: 'Rubik',sans-serif;
  text-align: center;
  font-size: 1.1rem;
  color: gray;
  font-weight: 300;
}
.service-img img{
  width: 80px;
}
.service-img,
.service-text{
  text-align: center;
}
.service-background{
  background-color: gainsboro;
  padding: 50px;
}
.service-options{
  gap: 150px;
}
.service-text p{
  font-family: 'Rubik',sans-serif;
  width: 70%;
  margin: 0 auto;
} */
/* services section end */

/* services section start */
  .services{
  padding: 150px 0 60px;
  margin-inline-start: 5%;
  margin-inline-end: 5%;
}
.heading-text{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  flex-direction: column;
}
.heading-text h1{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 2.5rem;
  text-transform: capitalize;
  margin: 0 auto;
}
.heading-text p{
  width: 50%;
  font-family: 'Rubik',sans-serif;
  text-align: center;
  font-size: 1.1rem;
  margin: 0 auto;
  color: gray;
  font-weight: 300;
}
.card-deck{
  margin-block-start: 3%;
}
.card{
  border-radius: 20px;
  text-align: center;
  background-color: ghostwhite;
  padding: 40px;
  cursor: pointer;
}
.card:hover{
  background-color: white;
  box-shadow: 5px 5px 5px 5px rgb(228, 224, 224);
}
.card-body h4{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 1.3rem;
  margin: 0 auto;
  text-transform: capitalize;
}
.card-body p{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  color: black;
  text-align: center;
  margin: 0 auto;
  font-weight: 300;
}
.card img{
  margin: 0 auto;
  width: 80px;
}
/* services section end */

/*shipment section start */
.shipment{
  padding: 150px 0 60px;
}
.city-options{
  position: absolute;
  left: 5%;
  margin-block-start: 5%;
}
.houston{
  border: 3px solid gainsboro;
  border-radius: 10px;
  width: 80%;
  padding: 10px;
  margin-bottom: 3%;
  cursor: pointer;
}
.houston:hover{
  background-color:cornflowerblue;
}
.houston h4{
  text-transform: uppercase;
  font-weight: 300;
  font-family: 'Rubik',sans-serif;
  font-size: 1.2rem;
}
.minneapolis{
  border: 3px solid gainsboro;
  border-radius: 10px;
  width: 80%;
  padding: 10px;
  margin-bottom: 3%;
  cursor: pointer;
}
.minneapolis:hover{
  background-color: cornflowerblue;
}
.minneapolis h4{
  text-transform: uppercase;
  font-weight: 300;
  font-family: 'Rubik',sans-serif;
  font-size: 1.2rem;
}
.lagos{
  border: 3px solid gainsboro;
  border-radius: 10px;
  width: 80%;
  padding: 10px;
  margin-bottom: 3%;
  cursor: pointer;
}
.lagos:hover{
  background-color: cornflowerblue;
}
.lagos h4{
  text-transform: uppercase;
  font-weight: 300;
  font-family: 'Rubik',sans-serif;
  font-size: 1.2rem;
}
/*shipment section end */

/* how-it-works section starts */
.how-it-works{
  background-image: url(../images/how-bg.3cb4a0d847a26d277626.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  height: 200%;
}
.how-container{
  display: flex;
  text-align: center;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.line{
  background-color: blue;
  border: 5px solid blue;
  height: 200px;
}
.how-img1 .lines{
  background-color: blue;
  border: 5px solid blue;
  height: 200px;
}
.how-img1 img,.how-img2 img, .how-img3 img{
  background-color: white;
  width: 250px;
  border: 10px solid blue;
  border-radius: 20%;
  padding: 40px;
}
.how-it-works{
  padding: 60px 0 200px ;
}
.how-text{
  background-color: white;
  border-radius: 10px;
  margin-block-end: 5%;
  /* margin-inline-start: 11%; */
  width: 40%;
  padding: 20px;
}
.how-text p{
  font-family: 'Rubik',sans-serif;
  font-weight: 300;
}
.how-text h4{
  font-family: 'Rubik',sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
}
/* how-it-works section end */

/* pricing section starts */
.pricing{
  /* padding: 10px 0 60px; */
  margin-inline-end: 3%;
  margin-inline-start: 3%;
}
#price-card{
  border-radius: 10px;
  text-align: center;
  background-color: white;
  padding: 40px;
  cursor: pointer;
  box-shadow: 5px 5px 5px 5px rgb(228, 224, 224);
  margin-inline-end: 3%;
  margin-inline-start: 3%;
}
.price-body1{
  border-bottom: 1px solid gainsboro;
  padding-bottom: 60px;
}
.price-body1 h4{
  font-family: 'Rubik',sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 2;
  margin: 0 auto;
  text-transform: capitalize;
}
.price-body1 h5{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 1.4rem;
  margin: 0 auto;
  text-transform: capitalize;
}
.price-body1 p{
  font-family: 'Rubik',sans-serif;
  font-weight: 300;
  font-size: 1.3rem;
  margin: 0 auto;
  text-transform: capitalize;
  text-decoration: line-through;
}
.price-body2 .address{
  font-family: 'Rubik',sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  margin: 0 auto;
  padding-top: 10px;
  text-transform: capitalize;
}
.price-body2 .contact{
  font-family: 'Rubik',sans-serif;
  font-weight: 300;
  color: gray;
  padding-top: 10px;
  font-size: 1rem;
  margin: 0 auto;
  text-transform: capitalize;
}
.price-body1 p span{
  color: blue;
}
.price-body1 h5 span{
  color: blue;
}
.price-body1 h2{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 1.8rem;
  margin: 0 auto;
  line-height: 1.5;
  text-transform: capitalize;
}
.card-body p{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  color: black;
  margin: 0 auto;
  font-weight: 300;
}
.message{
  margin-block-start: 13%;
  border: 1px solid gainsboro;
}
.message a, .messages a{
  text-decoration: none;
  color: black;
}
.message a :hover{
  color: black;
  text-decoration: none;
}
.messages a :hover{
  color: black;
  text-decoration: none;
}
.message:hover{
  transform: scale(1.1);
}
.messages:hover{
  transform: scale(1.1);
}
.message img{
  width: 50px;
}
.messages{
  margin-block-start: 5%;
  border: 1px solid gainsboro;
}
.messages img{
  width: 50px;
}
.message p, .messages p{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
}
/* pricing section end */

/* location section starts */
.location{
  padding: 150px 0 60px;
  margin-inline-end: 3%;
  margin-inline-start: 3%;
}
#location-card a .main-img{
  width: 100%;
}
.location-img p a img{
  width: 40px;
}
.location-imgs p a img{
  width: 40px;
}
.location-img{
  margin-block-start:5%;
  border: 1px solid gainsboro;
}
.location-imgs{
  margin-block-start:15%;
  border: 1px solid gainsboro;
}
.location-img:hover{
  transform: scale(1.1);
}
.location-text p{
  font-family: 'Rubik',sans-serif;
  font-weight: 300;
  text-transform: capitalize;
  font-size: 1.1rem;
  padding-bottom: 20px;
  margin: 0 auto;
}
.button button{
  background: none;
  border: 2px solid blue;
  padding: 10px;
}
.button button a{
  text-transform: uppercase;
  color: blue;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.2rem;
  font-family: 'Rubik',sans-serif;
}
#location-card{
  border-radius: 10px;
  text-align: center;
  background-color: white;
  padding: 20px;
  cursor: pointer;
  box-shadow: 5px 5px 5px 5px rgb(228, 224, 224);
  margin-inline-end: 3%;
  margin-inline-start: 3%;
  /* height: 600px; */
}
/* location section end */

/* footer section starts */
.footer{
  padding: 100px 0 60px;
  background-color: ghostwhite;
}
.footer-container{
  /* margin-inline-end: 1%; */
  margin-inline-start: 5%;
}
.footer-icon{
  margin-top: 10%;
}
.footer h3{
  font-family: 'Rubik',sans-serif;
  font-weight: bold;
  font-size: 1.3rem;
}
.social{
  display: flex;
  gap: 30px;
}
.social li a span{
  color: blue;
  font-weight: 500;
  font-size: 1.5rem;
}
.footer .logo img{
  width: 150px;
}
.home h5,.links h5,.reach h5{
  font-weight: bold;
  font-family: 'Rubik',sans-serif;
  line-height: 2;
}
.home h6,.links h6{
  font-family: 'Rubik',sans-serif;
  color: gray;
  font-weight: 300;
  line-height: 1.5;
}
.reach h6 a{
  text-decoration: none;
  color: blue;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 2;
  font-family: 'Rubik',sans-serif;
}
.home,.links,.reach{
  margin-block-start: 20%;
}
/* footer section end */

@media only screen and (max-width:1100px){
  .header .containers{
     box-shadow: 5px 5px 5px rgb(228, 224, 224);
  background-color: #fff;
  }
  #hide{
    display: flex;
    margin-inline-start: 40%;
  }
  #show{
    display: none;
  }
  input[type="checkbox"]{
    display: none;
  }
  .ham{
    display: flex;
    margin-left: -100%;
  }
  .containers nav ul{
    display: block;
    position: fixed;
    background-color: white;
    height: 100%;
    width: 100%;
    top:  65px;
    left: -100%;
    margin-left: 0;
    overflow-y: auto;
    padding-bottom: 100px;
    transition:  all 0.3s ease;
  }
  nav #show-menu:checked ~ul{
    left:  0%;
  }
  nav ul li{
    width: 100%;
    text-align: center;
    line-height: 2.5;
  }
  .logos img{
  width: 150px;
  }
  ul li a{
    font-weight: bold;
    font-size: 1.3rem;
  }
}
@media only screen and (max-width:991px){
  .choose-us-img img{
    width: 90%;
  }
  .home,.links,.reach{
    margin-inline-start: 5%;
  }
  .choose-us-text h1{
    width: 100%;
  }
  .heading-text p{
    width:90% ;
  }
  .heading-text h1{
    margin: 0 auto;
    text-align: center;
  }
}
@media only screen and (max-width:540px){

}
@media only screen and (max-width:820px){
  .choose-us-img img{
    width: 90%;
  }
  .home,.links,.reach{
    margin-inline-start: 5%;
  }
}
@media only screen and (max-width:786px){
.header .containers{
  background-color: red;
}
.about-text{
  border-left: none;
  border-bottom: 3px solid silver;
}
}
@media only screen and (max-width:414px){
  .containers nav ul{
    top: 100px;
  }
  .choose-us-img img{
    width: 90%;
    border-radius: 20px;
  }
  .choose-us-text h1{
    width: 100%;
  }
  .choose-us-text h5 img{
    width: 30px;
  }
  .heading-text p{
    width: 90%;
  }
  .heading-text h1{
    margin: 0 auto;
    text-align: center;
  }
  .how-text{
    width: 60%;
  }
  .home,.links,.reach{
    margin-inline-start: 5%;
  }
}
@media only screen and (max-width:360px){
  .choose-us-img img{
    width: 90%;
    border-radius: 20px;
  }
  .choose-us-text h1{
    width: 100%;
  }
  .choose-us-text h5 img{
    width: 30px;
  }
  .heading-text p{
    width: 90%;
  }
  .heading-text h1{
    margin: 0 auto;
    text-align: center;
  }
  .how-img1 img,.how-img2 img,.how-img3 img{
    width: 200px;
  }
  .how-text{
    width: 60%;
  }
  .home,.links,.reach{
    margin-inline-start: 5%;
  }
}
@media only screen and (max-width:280px){
  .hero-text h1{
    font-size: 2.5rem;
    width: 100%;
  }
  .choose-us-text h1{
    font-size: 2rem;
  }
  .heading-text p{
    width: 100%;
  }
}