*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
 }

 :root{
   --color-black: #141623;
   --color-green: #00966B;

}

 .container{
    max-width: 1150px;
    margin: auto;
 }

 /* nav css starts  */
 
 .main-nav{
   background-color: var(--color-black);

 }
 .line-through{
   display: none; 
 }

 .nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
 }

 .nav-items ul{
   display: flex;
   flex-direction: row;
   list-style: none;
   gap: 30px;
 }

 .nav-items ul li a{
   color: #fff;
   text-decoration: none;
   font-weight: 400;
   font-size: 16px;
 }

 .nav-items ul li a:hover{
   opacity: 0.5;
}

 .nav-cart a{
   text-decoration: none;
   background-color: var(--color-green);
   padding: 13px 40px;
   color: white;
   font-weight: 600;
   border-radius: 8px;
 }

 .nav-cart a:hover{
   background-color: #fff;
   color: #00966B;
   transition: all .5s ease-in-out;
 }

 /* nav css ends  */
 
 /* tablet responsive  */
/* @media(max-width:768px){
   .nav{
      padding: 20px;
   }
   .hero-block{
      flex-direction: column;
   }
   .hero-left{
      text-align: center;
      margin-top: 24px;
   }
   .hero-right img{
      display: none;
   }
} */

 /* tablet responsive  */

 /* hero css starts  */
.hero{
   background-color: var(--color-black);
   color: white;
  
}

.hero-block{
   display: flex;
   align-items: center;
   height: 110vh;

}
.hero-left{
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}
.hero-left h1{
font-weight: 700;
font-size: 85px;
line-height: 85px;
}

.hero-left p{
   margin-top: 28px;
   margin-bottom: 70px;
   color: #B8BEBD;
   font-weight: 400;
   font-size: 20px;
}
.hero-left i{
   font-size: 20px
}

.herobtn-one{
   background-color: var(--color-green);
   padding: 20px 30px;
   color: white;
   text-decoration: none;
   font-weight: 600;
   border-radius: 8px;
}

.herobtn-two{
   /* border: 1px solid #B8BEBD; */
   padding: 20px 30px;
   text-decoration: none;
   color: #fff;
   font-weight: 600;
   border-radius: 8px;
}

.herobtn-two:hover{
   background-color: #fff;
   color: #00966B;
   transition: all 0.7s ease-in;
}
.hero-right img{
   width: 600px;
   height: 700px;
}

 /* hero css ends  */

 /* best services css starts  */
.services{
   margin-bottom: 150px;  
}
 .service-header{
   text-align: center;
 }

 .service-header h2{
   margin-top: 150px;
   margin-bottom: 18px;
   font-size: 50px;
   font-weight: 700;
 }

 .service-header p{
   padding: 0 300px;
   font-size: 18px;
   font-weight: 400; 
   margin-bottom: 70px;
 }

 .all-boxes{
   display: flex;
   gap: 30px; 
   padding: 30px;
 }

 .box{
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 48px 20px; 
   transition: all .5s ease-out;
 }

.box:hover{
   box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.05);
   border-radius: 10px;
   border: none;

}
 .box h4{
   margin-top: 32px;
   margin-bottom: 20px;
   font-size: 24px;
   font-weight: 700;

 }

 .box img{
   width: 100px;
   height: 100px;
 }

 .box p{
   font-size: 18px;
   font-weight: 400;
   color: #5C6965;
 }
 /* best services css ends  */

 /* user friendly starts  */
.user-block{
   margin-bottom: 150px; 
}
.mainuser{
   display: flex;
   align-items: center;
   gap: 130px;

}
.left-block img{
   width: 470px;
   height: 600px;
}
.right-block h2{
   font-size: 50px;
   font-weight: 700;
   margin-bottom: 18px; 
}
.right-block p{
   font-size: 18px;
   font-weight: 400;
   color: #5C6965;
   margin-bottom: 38px; 
}
.right-block a{
   color: white;
   background-color: var(--color-green);
   padding: 16px 28px;
   border-radius: 4px;
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
}
.right-block{
   align-items: start;
}
/* user friendly ends  */

/* tracking css starts */
.tracking-block{
   margin-bottom: 150px; 
}
.maintracking{
   display: flex;
   align-items: center;
   gap: 130px; 
}
.left-track h2{
   font-size: 50px;
   font-weight: 700;
   margin-bottom: 18px;
   color: #001B13;
}
.left-track p{
   font-size: 18px;
   font-weight: 400;
   color: #5C6965;
   margin-bottom: 38px; 
}
.left-track a{
   color: white;
   background-color: var(--color-green);
   padding: 16px 28px;
   border-radius: 4px;
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
}
.right-track img{
   width: 470px;
   height: 660px; 
}
/* tracking css ends */

/* discover css starts  */
.main-div{
   margin-bottom: 150px; 
}
.app{
   color: white;
   text-align: center;
   padding: 95px 270px ;
   background: #141623;
   border-radius: 22px;
}

.app h2{
   font-size: 50px;
   font-weight: 700;
   margin-bottom: 18px;

}

.app p{
   font-size: 14px;
   font-weight: 400;
   color: #B8BEBD;
   margin-bottom: 38px;
   ;
}
.app img{
   cursor: pointer;
}

/* discover css ends  */

/* footer css starts  */
.footer{
   margin-bottom: 100px;
}
.parent-footer{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 48px;
}

.left-child h5{
   font-size: 30px;
   font-weight: 700;
   color: #001B13;
   margin-top: 36px;
   margin-bottom: 18px;
   margin-right: 400px;
   flex-basis: 100%; 
}
 
.left-child input{
   padding: 17px 200px 17px 17px;
   border-radius: 6px;
}

.options{
   display: flex;
   flex-direction: row;
   gap: 40px;
   justify-content: space-between;
   
}

.options h6{
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 16px;
}

.opt ul li{
   font-size: 16px;
   font-weight: 400;
   color: #5C6965;
   list-style: none;
   line-height: 2;
   cursor: pointer; 
}

.footer-line{
   max-width: 1150px;
   margin: auto;
   border: 1px solid #E9EDEC;
}

.last-div{
   margin-bottom: 52px; 
   display: flex;
   justify-content: space-between;
}

.last-one p{
   font-size: 16px;
   font-weight: 400;
   color: #5C6965; 
}

.last-two i{
   font-size: 30px;
   /* background-color: #00966B;  */
   padding: 2px;
   border-radius: 4px;  
   cursor: pointer;
}

.last-two i:hover{
   background-color: #00966B;
}