@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Outfit:wght@100..900&display=swap');

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Comfortaa", serif;
}
/**The Botton Start **/
.contact-list {
    display: flex;
    z-index: 3000;
    position: fixed;
    bottom: 0;
    right: 0;
    border:none;
    background-color: transparent;
}

#icons{
     margin-top: -250px;
     position: fixed;
     padding-left: 6px;
}

.hidden {
    display: none;
}

.icon {
    display: block;
    
}
#toggleButton{
    background-color:transparent;
    border: none;
}

/**The botton End**/
@media screen and (min-width:769px) and (max-width:1400px){
    .hero-section{
        background-image: url('../assets/images/hero.svg');
       height:  auto;
       width: 100%;
       background-repeat: no-repeat;
       background-size: cover;
       object-fit: cover;
     }
     .hero-child{
        background-color:rgba(71, 96, 202, .755);
        height: auto;
        width: 100%;
        
     }
    .hero-text-color{
        position: relative;
        font-size: 2rem !important;
        padding-top: 50px !important;
    }
}
/** The Header Section Start**/
#header{
    background-color: rgba(255, 255, 255, 1);
    /* padding: 10px 0px 5px 0px; */
   
}
.dropdown-menu:hover .dropdown-item{
    background-color: #4760CA;
    color: #4760CA;
}
.header-txt-color{
    color: #2E2E2E;
    font-size: 1rem;
}
#logo img{
  max-height: 60px;
}
#join-btn{
    background-color: #4760CA;
    border: none;
    padding: 2px 15px 2px 15px;
    border-radius: 8px;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 1);
    /* width: 300px; */
}


/** The Header Section Ends**/

/** The Hero Section Start */
 .hero-section{
   background-image: url('../assets/images/hero.svg');
   height:  auto;
   width: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   object-fit: cover;
  
 }
  .hero-child{
    background-color:rgba(71, 96, 202, .755);
    height: auto;
    width: 100%;
    
 }
 .hero-text-color{
    color: rgba(255, 255, 255, 1);
    font-size: 2.4rem;
    /* font-weight: 600; */
    text-align: justify;
    padding-top: 150px;
 }
 .hero-text-dec{
    color: rgba(255, 255, 255, 1);
    text-align: justify;
    font-size: 1rem;
 }
 .div-button{
    gap: 20px;
    display: flex;
    padding-top: 20px;
    padding-left: 50px;
   
 }
 .link-des{
    color: rgba(46,46,46,1);
    text-decoration: none;
    height: 60px;
    width:230px;
    background-color: rgba(255, 255, 255, 1);
    padding: 1rem 1rem 1rem 1rem;
    font-size: 20px;
    line-height: 26px;
    border-radius: 10px;
    text-align: center;
 }
 /* .div-img{
    display: flex;
    flex-direction: column;
 } */
 
 /* .div-img .img1{
     position: relative;
     left: -20px;  
     width: 100%;
     transform: translateX(-20px);
 } */
 /* .div-img .img2{
    position: relative;
    left: -40px;
      position: relative;
      width:100%;
      transform: translateX(-50px);
} */
/** The Hero Section Ends**/

/** The Keep Way Section Start**/
.text-desc-way{
    color: rgba(71, 96, 202, 1);
    font-size: 2.3rem;
    font-weight: 300;
    margin-top: 30px;
}
.txt-right-color{
    color: rgba(71, 96, 202, 1);
    font-size: 1.6rem;
    margin-top: 55px;
}
.txt-right-desc{
    color: rgba(46,46,46,1);
    font-size: 0.8rem !important;
    text-align: justify;
    position: relative;
    top: -20px;
}
.txt-right-desc::before{
    content: "";
    height: 3px;
    width:50px;
    display: block ;
    background:rgba(46, 46, 46, 1);
    position: relative;
    top: 18px;
    left: -70px;
}

/** The Keep Way Section Ends**/

/** The Eco-Friendly Section Start**/
 .eco-friendly-section{
    background-image: url('../assets/images/trucks-highway-mountain-sunset.png');
    height: 750px;
    width: 100%;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    object-fit: cover;
   
} 
.eco-friendly-child-section{
    background-color: rgba(0, 0, 0, 0.5);
    height: 750px;
    width: 100%;
    
} 

.eco-txt-top{
   color: rgba(255, 255, 255, 1);
   position: relative;
   top: 50px;
   text-align: center;
}

/** The Eco-Friendly Section Ends**/

/** The Solution Section Start and **/
.solution-section{
    background-color: rgba(71, 96, 202, 0.4);
    height: 600px auto;
    width: 100%;

}
.text-desc-solution{
    color: rgba(71, 96, 202, 1);
    font-size: 2rem;
    font-weight: 300;
    margin-top: 30px;
}
.btn1-btn1{
    height: 50px;
    width: 350px;
    background-color: rgba(71, 96, 202, 1);
    font-size: 24px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    border: none;
    border-radius: 5px;
    margin-top: 50px;
    margin-bottom: 60px;
}
.after-bg{
    color:rgba(46,46,46,1);font-size:1.2rem;
}
.after-bg::after{
    content: " ";
    display: block;
    height: 3px;
    width: 50px;
    position: relative;
    background-color: rgba(46, 46, 46, 1);
    float: inline-end;
    left:1%;
    top: 15px;
}
.after-bg2::after{
    content: " ";
    display: block;
    height: 3px;
    width: 50px;
    position: relative;
    background-color: rgba(46, 46, 46, 1);
    float: inline-end;
    left:1%;
    top: -17px;
}
.after-bg2{
    color:rgba(46,46,46,1);font-size:1.2rem;
}
.btn2-btn2{
    height: 80px;
    width: 300px;
    background-color: rgba(71, 96, 202, 1);
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 1);
    float: inline-end;
}
.btn3-btn3{
    height: 50px;
    width: 350px;
    background-color: rgba(71, 96, 202, 1);
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    border: none;
    border-radius: 5px;
    position: relative;
    top:-20%;
    left: -12%;
    
}
/** The Solution Section Ends and**/

/** The Footer Section Start **/
.footer{
    background-color: rgba(46, 46, 46, 1);
    height: 140px ;
    width: 100%;

}
.div-footer{
    display: flex;
    gap: 10px;
    padding-top:40px;
}
.div-footer-right{
    display: flex;
    gap: 5px;
    padding-top:20px;
}
.div-title-left{
    display: flex;
    gap: 20px;
    transform: translateX(-26px);
}
/** The Footer Section Ends**/


/** Our Services Pages Section start*/

.container-services{
    width: 100%;
    position: relative;
    object-fit: cover;
}
.my-services{
    width: 100%;
}
.container-services p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:2.4rem;
    left: 35%;
    top: 50%;
}

.title-desc{
    color:rgba(46,46,46,1);font-size:1rem;text-align:justify;padding:5px;
}
.title-desc::before{
    content: " ";
    height: 3px;
    width:45px;
    color:rgba(255,255,255,1);
    position: relative;
    display: block;
    top:12px;
    left:-53px;
}
.ft{color:rgba(46,46,46,1);text-align: justify;padding:5px;}

/** Our Services Pages Section Ends*/
/** The About Section Start*/
.container-about{
    width: 100%;
    position: relative;
    object-fit: cover;
}
.my-about{
    width: 100%;
}
.container-about p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:2.4rem;
    left: 43%;
    /* text-align: center; */
    top: 50%;
}
.container-privacy{
    width: 100%;
    position: relative;
    object-fit: cover;
}
.container-terms{
    width: 100%;
    position: relative;
    object-fit: cover;
}

.container-privacy p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:2.4rem;
    left: 16%;
    /* text-align: center; */
    top: 30%;
}
.container-terms p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:2.4rem;
    left: 35%;
    top: 40%;
}
.about-offer-section{
    
    background-image: url('images/distribution-warehouse-interior-with-workers-wearing-hardhats-reflective-jackets-walking-storage-area.svg');
    height:auto;
    object-fit: cover;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    
}
.about-bg-color{
    background-color: rgba(0, 0, 0, 0.3);
    height:auto;
    padding-top: 40px;
    padding-bottom: 50px;
}
/** The About Section Ends*/
/** The Eco Friendly hero Section Start**/

.container-eco-friendly{
    width: 100%;
    position: relative;
   object-fit: cover;
}
.my-eco-friendly{
    width: 100%;
}
.container-eco-friendly p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:2.4rem;
    left: 25%;
    top: 50%;
}
/** The Friendly hero Section Start**/

/** The benfit Section Start **/
.benfit-eco{
    height: 650px;
    /* width: 100%; */
    background-image: url('../assets/images/benfit-bg.svg');
    background-repeat: no-repeat;
    background-size:cover;
    margin-top: 30px;
    object-fit: cover;
}
.benfit-un{
    font-size:28px;color:rgba(255, 255, 255, 1);margin-top: 25px;
}
.benfit-un::before{
    content: " ";
    display: block;
    height: 3px;
    width: 50px;
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    top: 25px;
    left:-60px;
}
/** The benfit Section ends**/

/** The Bussiness Solution **/
.simplify-pragraph{
    color:rgba(71, 96, 202, 1);font-size:2.2rem;
}















/** The Responsive Mobile View And Tablet **/
@media screen and (max-width:768px){
    
    .hero-section .hero-child{
        background-color:rgba(71, 96, 202, .755);
        height:auto;
        width: 100% !important; 
    }
    .hero-text-color{
        font-size:22px !important;
        text-align: justify;
        padding-top: 15px !important;
        font-weight: 500;
        padding: 5px;
    }
    .hero-text-dec{
        font-size: .8rem !important;
        padding: 5px;
    }
    .div-button{
        gap: 15px !important;
        padding-left: 0px !important;
        padding-bottom: 30px;
    }
    
    .div-button .link-des {
        width: 324px !important;
        height: 50px;
        font-size: 11px !important;

    }
    
   .footer{
    height: auto;
    width: 100%;
   }
   .div-footer-right img{
    width: 145px !important;
    height: 74px !important;
   }
   .App-Store{
    margin-top:0 !important;
   }
   .h-75{
    height: 100% !important;
    width: 100%;
   }
   .eco-friendly-section{
    height: auto;
    background-image: url('../assets/images/trucks-highway-mountain-sunset.png');
    /* width: 100%; */
    background-size: 100% 100%;
    background-repeat:no-repeat;
    object-fit: cover;
    /* transform: translateY(-250px); */
    
   }
   
   .eco-friendly-child-section{
    background-color: rgba(0, 0, 0, 0.5);
    height: auto;
    width: 100%;
    
}
/** The Child Box Eco-friendly start**/
.child-box{
    width: 100% !important;
    margin-left: -2px !important;
}
.child-box-txt-desc{
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 1);
    position: relative;
    left: -11px !important;
    padding-top: 0px;
}
/** The Child Box Eco-friendly start**/   
   .container-services p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:1rem !important;
    left: 35%;
    top: 50%;
}
.container-eco-friendly p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:1rem !important;
    left: 15% !important;
    top: 50%;
}

.container-about p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:1rem !important;
    left: 35%;
    top: 50%;
}
.container-privacy p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:1rem !important;
    left: 45%;
    top: 40%;
}
.container-terms p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:1rem !important;
    left: 35%;
    top: 40%;
}
.container-privacy p{
    position: absolute;
    color:rgba(255,255,255,1);
    font-size:1rem !important;
    left: 15%;
    top: 40%;
}


.ft{
    color:rgba(46,46,46,1) !important;
    text-align: justify !important;
    font-size: 13px !important;
}
.pt{
    margin-top: 20px !important;
}
.title-desc::before{
    content: " ";
    height: 3px;
    width:30px !important;
    background-color: rgba(46,46,46,1);
    position: relative;
    display: block;
    top:12px;
    left:-53px;display:flex;
}
.mt-5{
    margin-top: 3px !important;
}
.term-desc{
    font-size: 1.2rem !important;
    margin-top: 15px ;
}
.term6{
    padding: 6px !important;
}
.benfit-eco{
   height: auto;
   top: 0px !important;
   background-image: url('../assets/images/benfit-bg.svg');
  background-repeat: no-repeat;
}

/* .list-your{
    position: relative;
    transform: translateY(-250px) !important;
} */
.ht{
    font-size: 15px !important;
    color:rgba(71, 96, 202, 1);
    position: relative;
    margin-top: 30px;
}
.ht1{
    font-size: 12px !important;
    color: rgba(46, 46, 46, 1);
    position: relative;
    /* transform: translateY(-220px); */
}
.pt-5{
    padding-top: 0px !important;
}
.after-bg{
   font-size: 14px;
   color:rgba(46,46,46,1);
}
.after-bg2{
    font-size: 14px;
   color:rgba(46,46,46,1);
}
.after-bg::after{
    content: " ";
    display: block;
    height: 3px;
    width: 50px;
    position: relative;
    background-color: rgba(46, 46, 46, 1);
    float: inline-end;
    left:3%;
    top: -13px;
}
.after-bg2::after{
    content: " ";
    display: block;
    height: 3px;
    width: 50px;
    position: relative;
    background-color: rgba(46, 46, 46, 1);
    float: inline-end;
    left:4%;
    top: -11px;
}
.reduce{
    font-size: 0.8rem !important;
}
.simplify-pragraph{
    font-size: 1.2rem !important;
    margin-top: 122px;
    color: rgba(71, 96, 202, 1);
}
.txt-right-desc {
    color: rgba(46, 46, 46, 1);
    font-size: 1.2rem;
    text-align: justify;
    position: relative;
    top: -19px;
}
.btn3-btn3 {
    height: 50px;
    width: 350px;
    background-color: rgba(71, 96, 202, 1);
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    border: none;
    border-radius: 5px;
    position: relative;
    top: -20%;
    left: -2%;
    transform: translateY(39px);
}
/* .div-img .img1{
    position: relative;
    left: -20px;  
    width: 100% !important;
    transform: translateX(1px);
} */
/* .div-img .img2{
   position: relative;
   left: -40px;
   position: relative;
     width: 100% !important;
    transform: translateX(-1px);
} */
.solution-section{
    background-color: rgba(71, 96, 202, 0.4);
    height: 600px auto;
    width: 100%;
    /* transform: translateY(-250px); */

}
.btn1-btn1{
    height: 50px;
    width: 300px !important;
    background-color: rgba(71, 96, 202, 1);
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    border: none;
    border-radius: 5px;
    margin-top: 50px;
    margin-bottom: 60px;
}
.house-bg{
        height: 280px;
        width: 127px !important;
        position: relative;
        top: 10px;
    
}
}

@media screen and (max-width:500px){
    .btn3-btn3{
        height: 50px;
        width: 300px !important; 
        background-color: rgba(71, 96, 202, 1);
        font-size: 15px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        border: none;
        border-radius: 5px;
        position: relative;
        top: -20%;
        left: -2%;
        transform: translateY(39px);
    }
    
}


/** The Animation keyframse**/
.hero-text-color{
    padding-top: 150px;
    position: relative;
    animation: mymove 1s  forwards ;
}
@keyframes mymove {
    from {left:-800px;}
    to {left: 5px;}
  }
  .hero-text-dec{
    
    position: relative;
    animation: mymove1 0.5s  forwards ;
}
@keyframes mymove1 {
    from {left:-800px;}
    to {left: 5px;}
  }

  .div-img{
    display: flex;
    flex-direction: column;
    animation: mymove2 0.5s  forwards ;
    position: relative;
 }
 @keyframes mymove2 {
    from {right:-800px;}
    to {right: 5px;}
  }
  .moving-right{
    position: relative;
    animation: mymove3 .5s  forwards ;
  }
  @keyframes mymove3 {
    from {right:-800px;}
    to {right: 5px;}
  }

  /** The Testing Working new pages**/
  #hero-section{
    background-image: url('../assets/images/hero.svg');
   height: auto;
   width: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   object-fit: cover;
   /* position: relative; */
  }
  #hero-section #hero-child-section{
    background-color:rgba(71, 96, 202, .755);
    height: auto;
    width: 100%;
    
    position: relative;
  }