index.css

* {
    margin: 0;
    padding: 0;
}
body{
    width: 100vw;
    height: fit-content;
    overflow-x: hidden;
    font-family: 'Titillium Web', sans-serif;
}
.all{
    width: 96vw;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}



                         /* HEADER */

.header{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
.navbar{
    width: 99vw;
    height: fit-content;
    margin: auto;
}
.navbar img{
    width: 100%;
    height: fit-content;
    position: sticky;
    left: 0;
    top: 0;
}
.nav-2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 99vw;
    padding: 5px 0px;
    margin: auto;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.nav-2 > div{
    display: flex;
    flex-direction: row;
    width: fit-content;
    justify-content: space-around;
}
.nav-2 > div > div , .nav-2 > div > p{
    margin: 0px 15px;
}

.nav-2 > div > div:hover , .nav-2 > div > p:hover{
    font-weight: 700;
    border-bottom: 2px solid blue;
    color: blue;
}

                           /* BODY */

.body{
    width: 100%;
    height: auto;
}
     
/* MOBILE */

.points{
    display: flex;
    flex-direction: row;
    padding: 30px 0px;
    justify-content: space-around;
    margin-top: 20px;
}
.description-points{
    width: 60%;
    margin-left:30px ;
}
.point{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid rgb(145,129,145);
    margin: 15px 0px;
    padding: 20px;
}
.number{
    font-size: 60px;
    font-weight: 700;
    margin: 0px 20px;
    color: rgb(145,129,145);
}
.info{
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}
.info h3{
    font-size: 19px;
    margin-bottom: 15px ;
}
.info p{
    font-size: 14px;
    color: rgb(145,129,145);
}
#infos{
    display: flex;
    flex-direction: row;
    margin: 10px 0px;
    align-items: flex-start;
    margin: 20px 0px;
}
#infos img{
    width: 150px;
    height: 70px;
}

.phone{
    width: fit-content;
    height: 660px;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    border-radius: 20px;
}

  .iphone-x {
    position: relative;
    margin: auto;
    width: 350px;
    height: 650px;
    background-color: #7371ee;
    background-image: linear-gradient(60deg, #7371ee 1%,#a1d9d6 100%);
    border-radius: 40px;
    box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919, 0px 0px 0px 20px #111;
    z-index: 0;
  }
    
    .iphone-x::before,
    .iphone-x::after{
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .iphone-x i,
    b,
    s,
    span {
      position: absolute;
      display: block;
      color: transparent;
    }
    
    .iphone-x i,.iphone-x b{
     z-index: 1;
    }
    .mobslide{
     width: 100%;
     height: 100%;
     border-radius: 40px;
    }
    .mobslide .carousel-inner .carousel-item{
        width: 100%;
        height: 100%;
    } 
    .mobslide .carousel-inner{
        border-radius: 40px !important;
    }
    .mobslide .carousel-inner .carousel-item .d-block{
        width: 100%;
        height: 650px;
    }

    .iphone-x i {
      top: 0px;
      left: 50%;
      transform: translate(-50%, 6px);
      height: 8px;
      width: 15%;
      background-color: #101010;
      border-radius: 8px;
      box-shadow: inset 0px -3px 3px 0px rgba(256, 256, 256, 0.2);
    }
    
    b {
      left: 10%;
      top: 0px;
      transform: translate(180px, 4px);
      width: 12px;
      height: 12px;
      background-color: #101010;
      border-radius: 12px;
      box-shadow: inset 0px -3px 2px 0px rgba(256, 256, 256, 0.2);
    }
    s {
      top: 50px;
      color: #fff;
      text-align: center;
      text-decoration: none;
      width: 100%;
      font-size: 70px;
      font-weight: 100;
      padding-top: 60px;
    }


    /* TABS */

        /* Porters services */

.porters{
    width: 98%;
    height: fit-content;
    overflow: hidden;
    margin: 50px 30px;
}
    .porters h3{
        font-weight: 700;
        font-size: 24px;
        font-weight: 700;
    }


    body{
        font-family: Arial;
    }

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 99%;
  text-align: center;
}
    
.tab::-webkit-scrollbar {
    display: none;
  }
.tab img{
   width: auto;
   height: 200px;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 36px 12px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: rgb(240,244,255);
  width: 99%;
}


.wheeler-3{
    display: flex;
    /* justify-content: space-around; */
}
.wheeler-3 img{
    width: 50%;
    height: fit-content;
}
.wheeler-3 > div{
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 50%;
    height: fit-content;
}
.tabcontent h3 , .tabcontent p, .tabcontent button{
    margin: 20px 0px;
}
.fare{
    font-size: 20px;
    background: white;
    padding: 20px 30px;   
    border: 1px solid black; 
    width: fit-content;
}


    /* OFFER POSTER */

    .offers{
   width: 100%;
   padding-left: 30px;
   position: relative;
   bottom: 30px;
    }
    .offers h3{
        font-weight: 700;
        font-size: 24px;
        font-weight: 700;
    }
    .offers-poster{
        width: 100%;
        height: fit-content;
    }
    .offers-poster img{
        width: 100%;
        height: auto;
    }






      /* single image */

.adds{
    width: 100%;
    height: fit-content;
    background-color: rgb(246,244,254);
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
}
      .add{
          width: 55%;
          margin:40px auto;
          text-align: left;
          padding: 30px 20px;
      }
      .add:hover{
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
      }
      .add img{
          width: 100%;
          height: auto;
      }
      .add h3 {
          margin: 30px 0px;

      }
      .add p {
          margin: 30px 0px;
      }
      .know-more{
          color: white;
          font-weight: 700;
          background: #8E2DE2;  /* fallback for old browsers */
          background: -webkit-linear-gradient(to left, #4A00E0, #5a4d66);  /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to left, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
          margin: 30px 0px;
          padding: 8px 10px;
          border: none;
          border-radius: 10px;
          width: fit-content;
          height: fit-content;
                }

                
.our-info{
    width: 100%;
    height: fit-content;
    background: #8E2DE2;  /* fallback for old browsers */
          background: -webkit-linear-gradient(to left, #4A00E0, #8E2DE2);  /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to left, #4A00E0, #8E2DE2);
}
.our-info h4{
    text-align: center;
    color: white;
    margin: 20px auto;
    padding: 30px 0px;
}
.our-in{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    height: fit-content;
    color: white;
    margin: 40px 0px;
}




.people{
    width: 100%;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
}
.people h3{
                    font-weight: 700;
                    font-size: 24px;
                    font-weight: 700;
                    margin: 40px 0px 20px 0px;
}
.people-img{
    width: 100%;
    height: fit-content;
    margin: 20px 0px;
    display: flex;
    justify-content: center;
}
.people img{
    width: 80%;
}




    /* ACCORDION */
    .accorbody{
        width: 100%;
        height: fit-content;
        padding: 10px;
        font-family: 'Titillium Web', sans-serif;
        background: rgb(250,250,250);
        padding: 20px;
    }
    .accorbody h3{
        font-weight: 700;
        font-size: 24px;
        margin-left: 30px;
    }
    .accordion{
        width: 60%;
        margin: auto;
        margin: 10px auto 25px auto;
    }
  .hr{
      width: 30px;
      height: 5px;
      background: #4568DC;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #B06AB3, #4568DC);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #B06AB3, #4568DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      border-radius: 10px;
            margin: 15px 0px;
            margin-left: 30px;
        }
        
        
        
/* FAQs */

.faqs{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 25px 0px;
    background-color: rgb(237,233,253);
}
.img{
    width: 100px;
    height: 100px;
    margin: 0px 20px;
}
.img img{
   width: 90%;
   height: 90%;
}
.qusetions{
  display: flex;
  flex-direction: column;
}
.qusetions h3, .offers h3{
        font-size: 23px;
        margin-bottom: 15px;
}
.qusetions button{
    width: fit-content;
    height: fit-content;
    padding: 10px 15px;
    background-color: rgb(58,58,58);
    border: none;
    border-radius: 10px;
}
.qusetions a{
    color: white;
    text-decoration: none;
}






                           /* FOOTER */


.knowus{
    height: fit-content;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    background-color: rgb(0,0,0);
    color: white;
    padding-top: 25px;
    font-family: 'Titillium Web', sans-serif;
}
.knowus h3{
    font-size: 17px;
    margin-bottom: 20px;
    color: white;
    font-weight: 700;
}
#porter{
    font-size: 32px;
}
.knowus ul{
    font-size: 14px;
    width: 170px;
    height: 170px;
    text-align: start;
    color: white;
    list-style: none;
}
.porter li{
    font-size: 22px;
}
.knowus li{
    margin-bottom: 8px;
    margin: 15px 0px;

}
.knowus li a{
    color: white;
    text-decoration: none;
    font-size: 15px;
}
.knowus li a:hover{
    color: orange;
}
#dowapp{
    display: flex;
    flex-direction: column;
    margin: 10px 0px;
    align-items: flex-start;
}
#sociallink{
    display: flex;
    flex-direction: column;
}
#img-1, #img-2{
     width: 200px;
     height: 80px;
}


/* last-row */
.last-foot{
    background-color: rgb(0,0,0);
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.last-foot img{
    height: auto;
}
.last-foot:hover{
    cursor: not-allowed;
}
#sociallink{
    display: flex;
    flex-direction: row;
}
#sociallink i{
    width: 40px;
    font-size: 25px;
    color: white;
    margin: 0px 30px;
}
.text{
    color: white;
}



/* TRACKER */
.screen-div{
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.2);
    width: 100vw;
    height:90vh;
}
.track-order{
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 380px;
    height: 400px;
    margin: auto;
    margin-top: 200px;
}
.track-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 15px;
    align-items: center;
    border-bottom: 1px solid rgb(196,196,196);
    margin-top: 10px;
}

.track-head img, .caller-icon{
    width: 20px;
    height: 20px;
}
.inputs{
    display: flex;
    flex-direction: column;
}
.inputs input{
    width: 80%;
    padding: 10px 15px;
    margin: 20px auto;
}
.inputs button{
    background-color: rgb(41,98,255);
    color: white;
    font-weight: 700;
    border: none;
    width: 90%;
    margin: 10px auto;
    padding: 10px;
}


.track-foot{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-top:  1px solid rgb(196,196,196);
    padding: 15px 0px;
}



/* CITIES */
#transforming_cities{
   margin-left: 40px;
   display: flex;
   flex-direction: column;
   height: fit-content;
   margin: 20px 0px;
   padding: 50px 0px 50px 50px;
}
#transforming_design{
       background-color:rgb(63, 62, 242) ;
    width: 30px;
    height: 4px;
    border-radius: 8px;
        /* margin-left: 40px; */
       
}

#transforming_images{
    display: grid;
    grid-template-columns: repeat(8,150px);
    row-gap: 50px;
       height: auto;
       width: 80%;
       align-self: left;

}
#transforming_images div{
    width: 75%;
    height: 100px;
  text-align: center;

}
#transforming_images img{
    width: 85%;
    height: 85%;
    filter: grayscale(1);
}
#transforming_images img:hover{
    /* width: 90%; */
    filter: grayscale(0);
}
#header_text{
    font-size: 21px;
    padding-top: 30px;
    color: rgb(97, 95, 95);
    font-family: 'Titillium Web', sans-serif;
       font-weight: 10;
       margin-left: 25px;
}
#transforming_images div p{
    /* margin: 0; */
    padding: 0;
    width: 100%;
    text-align: center;
    /* border: 1px solid black; */
 
   margin-top: 10px;
   margin-bottom: 10px;
   color: gray;
   font-weight: 600px;
  
}
#transforming_images div {
    padding-top: 10px;
     padding-bottom: 10px;
     justify-content: center;
     margin: auto;
     cursor: pointer;
}
#transforming_images div div{

    border: 0.5px solid gray;
    border-radius: 20px;
}
#transforming_images div div:hover{
   border-color: blue;
}
#transforming_header_text {
       font-family: 'Titillium Web', sans-serif;
       font-size: 20px;
           font-weight: 700;
    color: #212121;
    padding-bottom: 20px;
}

body{
    position: relative;
}
#outofbound{
    height:50px;
    width:160px;
    font-size: 14px;
    position: absolute;
    top:-100%;
    left:30%;
    display: none;
}
#needmob{
    height:50px;
    width:160px;
    font-size: 14px;
    position: absolute;
    top:-100%;
    left:45%;
    display: none;
}
#needsrc{
    height:50px;
    width:160px;
    font-size: 14px;
    position: absolute;
    top:-100%;
    left:23%;
    display: none;
}
#needdes{
    height:50px;
    width:160px;
    font-size: 14px;
    position: absolute;
    top:-100%;
    left:34%;
    display: none;
}
view{
    margin-top: 10%;
}
#estimate{
    display: flex;
    /* border: solid 1px black; */
    width:70%;
    height:60px;
}
#estimate>div{
    border-right: 1px solid lightgray
}
#estimate>div>p{
    font-size: 12px;
}
#estimate>div>input,#estimate>div>select,#estimate>div>div>input{
    border: none;
    width: auto;
}
#chalbox{
    border: 1px solid black;
    width:100%;
    height:70px;
    margin:auto;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    /* overflow-x: hidden; */
    padding-left: 5px;

}

#only{
    width:327px;
    height:68px;
    background-color: #2962ff;
    color:white;
    font-weight: bold;
    font-size: 18px;
    margin-top:0%;


}
#showsrc,#showdes{
    background-color: white;
    z-index: 3;
}
#leftone{
    margin-bottom: 3%;
}
#finalmessage{
    display: none;
    height:150px;
    width:450px;
    background-color: white;
    position: absolute;
    top:1.3%;
    right:0%;
    text-align: center;
    padding-top: 20px;
}

@media all and (min-width:50px) and (max-width:1000px)
{
    #estimate{
        display: flex;
        /* border: solid 1px black; */
        width:70%;
        height:60px;
        overflow: scroll;
    }
    #only{
        width:100%;
    }
}
/* #des11{

}
#src11{

}

#mob11{

} */