*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

  body{
    overflow-x: hidden;
  }
.container{
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

.row{
    display: flex;
    flex-wrap: wrap;
}

/* header section */

header{
     margin-top: 48px;
}
header>div>div{
    justify-content: space-between;
    align-items: center;

}

  .nav-logo>img{
    width: 240px;
    height: 49px;
  }


    .nav-bar>ul{
        display: flex;
        flex-direction: row;
        gap: 30px;
    }
   
    .nav-bar{
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 250PX;
    }


li{
    list-style-type: none;
    padding: 15px;
}

a{
    text-decoration: none;
    color: black;
    font-size: 18px;

}

.btn{
    display: flex;
    gap: 20px;
    /* flex-direction: column; */
    align-items: center;
}



.sign{
    
    background: orange;
    padding: 10px 30px;
    height: 49px;
    width: 119px;
    border-radius: 10px;
    text-align: center;

}
.log-in{
    align-items: center;
}



.ham-menu {
  display: none;
} 

/* responsive */


@media screen and ( max-width : 1100px ) {
    .nav-bar, .nav-bar>ul{
        flex-basis: 100%;
        display: none;
        flex-direction: column;
    }

    .ham-menu{
        display: block;

    }
    #menu:checked ~ .nav-bar,
    #menu:checked ~ .nav-bar>ul{
        display: flex;
        gap: 20px;
        
    }
    .btn{
        flex-direction: column;
    }
    
}




















/* banner section */
      
     .banner-section{
     margin-top: 50px;
    }
 .section>div>div{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
 }

   .left-content>h2{
    font-size: 70px;
    font-weight: 850;
    color: #0B1B35;
   }

   .left-content{
        height: 338px;
       width: 500px;
   }

   .chat{
    font-size: 22px;
    font-weight: 500;
    margin-top: 20px;
    color: #000000;
   }

   .banner-btn{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
   }
   
   .btn1{
    background: orange;
    padding: 10px 35px;
    border-radius: 10px;
    margin-top: 10px;
    text-wrap: nowrap;
}

  .banner-btn>img{
    margin-top: 16px;
  }

   .common-class{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
   }


    .img1>img{
        height: 601px;
    width: 601px;
    margin-top: 30px;
      /* width: 100%; */
    }
    
    .more{
        color: black;
        font-size: 18px;
        font-weight: 700;
        margin-top: 12px;
        text-wrap: nowrap;
    }



    /* responsive */
       @media screen and ( max-width: 426px ) {
         .left-content>h2{
            font-size: 42px;
         }
         .chat{
            font-size: 17px;
            margin-top: 10px;
         }
         .banner-btn{
            margin-top: 20px;
            gap: 7px;
         }
         .img1{
            margin-top: -200px;
            /* width: 100%; */
         }
          .left-content{
            text-align: center;
          }
       }
      
@media screen and ( max-width : 786px ){
    .img1>img{
        width: 100%;
        object-fit: contain;
        margin-top: 130px;
    }
   
}
     

     /* banner section2 */
    
      .banner-section2{
     margin-top: 40px;
}



    
.passage1{
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #8A898E;

}

    .passage111{
      font-size: 52px;
      font-weight: 700;
      color: #0B1B35;
    }
    .text{
        align-items: center;
        text-align: center;
        font-size: 10px;
        font-weight: lighter;
        text-transform: uppercase;
    }
   
.card-section{
    justify-content: space-between;
    display: flex;
    margin-top: 108px;
    flex-wrap: wrap;
}
.card{
    max-width: 352px;
    height: 464px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.img4{
    margin-top: 30px;
}
   a{
      text-decoration: none;
   }

.img2{
    margin-top: 30px;
     
}
.img2>img{
        width: 77px;
    height: 77px;
    object-fit: contain;

}


.img3{
    margin-top: 30px;
}


  .button{
        display: inline-block;
    background: orange;
    padding: 11px 36px;
    margin-top: 18px;
    border-radius: 10px;
  }
.banner-section2>div>div{
    display: flex;
    flex-direction: column;
    margin-top: -150px;
}

  .passage-2{
    font-weight: bold;
    margin-top: 41px;
    font-size: 30px;
  }

    .passage-3{
        color: #000000;
        margin-top: 19px;
    font-size: 18px;
    font-weight: regular;
    margin-top: 32px;

    }



    /* responsive */

     @media screen and ( max-width : 425px ) {
      .card-section{
         gap: 20px;
         margin-top: 15px;
      }
      .passage-2{
         font-size: 25px;
      }
      .passage-3{
         font-size: 15px;
      }
      .passage1{
         font-size: 11px;
      }
      .passage111{
         font-size: 25px;
      }
      
     }

     /* banner-section3 */

     
 .banner-section3{
        margin-top: 108px;
     }


    .short{
        height: 224px;
        width: 324px;
    }

       .passage4{
        color: #1E0E62;
        font-size: 22px;
        font-weight: 500;
       }

     .passage5{
        color: #15143966;
       margin-top: 20px;
       height: 125px;
       max-width: 325px;
       font-size: 16px;
       font-weight: 400px;
     }



     .button2{
         display: flex;
         align-items: center;
         justify-content: center;
           border-radius: 31px;
          background: white;
          border: 1px solid gray;
          margin-top: 75px;
          height: 49px;
          width: 132px;
     }


     .picture{
        max-width: 687px;
        height: 385px;
        border-radius: 10px;
     }

     .picture>img{
      width: 100%;
     }
     .banner-section3>div>div{
        justify-content: space-between;
     }


     /* responsive */

      @media screen and ( max-width : 425px ){
         .short{
            text-align: center;
        /* margin-left: 165px; */
         }
         .banner-section3{
            margin-top: 70px;
         }
         .button2{
            margin-top: -16px;
               margin-left: 80px;
         }
         .picture{
            margin-top: 26px;
         }
      }
    
     /* banner-section4 */
          

           .banner-section4{
            margin-top: 378px;
           }

       .common{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: -135px;
    width: 100%;
 }
    
  .test{
    margin: auto;
    margin-top: -300px;
  }

     .passage6{
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        color: #8A898E;
    
     }
    

     .passage7{
        margin-top: 19px;
        font-size: 52px;
        font-weight: 700;
        color: #0B1B35;
     }

 .first{
    display: flex;
    gap: 30px;
    height: 237px;
    width: 470px;
 }
 .content{
    display: flex;
    flex-direction: column;
    gap: 30px;
 }

   .content>p{
    font-size: 18px;
    font-weight: 500;
    color: 0B1B35;
   }
   .task{
    margin-top: -5px;
    font-size: 14px;
    font-weight: 700;
    color: #0B1B35;
    letter-spacing: 2px;
   }

 .second{
    display: flex;
    gap: 30px;
     height: 237px;
    width: 470px;
 }

 
    .content2>p{
        font-size: 18px;
        font-weight: 500;
        color: #0B1B35;
        
    }
    .task1{
        font-size: 14px;
        font-weight: 700;
        margin-top: 41px;
        color: #0B1B35;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

 .content2{
    display: flex;
    flex-direction: column;
    gap: 30px;
 }

  .third{
    display: flex;
    gap: 30px;
     height: 237px;
    width: 470px;
  }
       .content3{
        font-size: 18px;
        font-weight: 500;
        color: #0B1B35;
       }
     
       .task2{
        margin-top: 10px;
        font-size: 14px;
        font-weight: 700;
         color: #0B1B35;
        text-transform: uppercase;
        letter-spacing: 2px;

       }






  .content3{
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .forth{
    display: flex;
    gap: 30px;
     height: 237px;
    width: 470 px;

  }

    .content4{
          font-size: 18px;
        font-weight: 500;
        color: #0B1B35;
    }

       .task3{
        margin-top: 7px;
        font-size: 14px;
         color: #0B1B35;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
       }
  .content4{
    display: flex;
    flex-direction: column;
    gap: 30px;
  }  
    
       /* responsive */

       
  @media screen and  ( max-width: 426px ){
   .passage6{
      font-size: 12px;
   }
   .test{
    margin-top: -550px;
   }
   .common{
    margin-top: -380px;
   }
   .passage7{
      text-align: center;
      font-size: 35px;
   }
  }










      /* banner-section5 */
       
      .banner-section5{
        margin-top: 190px
      }

      .team{
        margin: auto;
        margin-top: -200px;
      }

     .passage8{
        font-size: 14px;
        font-weight: 700;
        color: #8A898E;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: center;
     }
     
     .passage9{
        font-size: 52px;
        margin-top: 19px;
        font-weight: 700;
        color: #0B1B35;
        text-transform: capitalize;
     }

        .common2{
            display: flex;
            flex-wrap: wrap;
            margin-top: -130px;

        }
        .box1{
            min-height: 370px;
            max-width: 370px;
            border: 1px solid gray;
            margin-top: 53px;
                display: flex;      
             flex-direction: column;
           justify-content: center;
          align-items: center;
            
        }

        .icon{
            display: flex;
            margin-top: 28px;
        }

       .icon1 {
            height: 62px;
            width: 122px;
            border: 1px solid black;
            display: flex;
            align-items: center;
             justify-content: center;
            
        }


         .icon1>img{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 38px;
            width: 19px;
            font-size: 22px;
            object-fit: contain;
         }

        .img5>img{
            margin-top: 50px;
        }

        .box1>p{
            margin-top: 29px;
            font-size: 22px;
            font-weight: 500;
            color: #1E0E62;
        }

       .text-t{
        margin-top: 16px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #15143966;

       }


       /* responsive  */

        @media screen and ( max-width: 426px ) {
         .passage9{
            text-align: center;
            font-size: 36px;
         }
       }
        @media screen and ( max-width : 768px ) {
         .box1{
            width: 100%;
            object-fit: contain;
         }
         .icon1 {
             height: 62px;
            width: 96px;
   
         }
         
       }




      /* banner-section7 */
           
      .banner-section7{
        margin-top: 50px;
      }
      .section>div>div{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.text4{
    text-align: center;
    width: 100%;
}
.text1{
    font-size: 14px;
    font-weight: 700;
    color: #8A898E;
}

.text2{
    font-size: 52px;
    font-weight: 700;
    color: #0B1B35;
}

.img10>img{
    max-width: 367px;
    min-height: 421px;
    
}

.common1{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.right-side{
    max-width: 700px;
    
}


input{
    /* height: 39px; */
        max-width: 700px;
        width: 100%;
        border-radius: 49px;
        padding: 24px 67px;
        margin-top: 40px;
    }



@media screen and ( max-width : 426px ) {
    .img10>img{
         width: 100%;
         object-fit: contain;
    
   }
}

.btn0{
        display: flex;
         align-items: center;
         justify-content: center;
           border-radius: 49px;
          border: 1px solid gray;
            height: 39px;
        max-width: 700px;
        background: orange;
        margin-top: 30px;
          
}
a{
    text-decoration: none;
}

      

  /* .footer-section */
     .footer{
        margin-top: 50px;
     }

   .footer>div>div{
    /* gap: 90px; */
    justify-content: space-between;
    align-items: center;
   }

   .footer1{
    display: flex;
   }


   .last>ul{
    display: flex;
    gap: 10px;
    color: #1E0E62;
    font-size: 16px;
    font-size: 400;
    flex-wrap: wrap;
   }

   .line{
    border: 1px solid gray;
    margin-top: 31px;
   }

   .last-one{
    margin-top: 40px;
    font-size: 16px;
    font-weight: 400;
    color: #15143966;
   }