*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
}
body{
    background-color: black;
    overflow-x: hidden;
}
.main{
    height:100vh;
    background-image: url("images/background.jpg");
    position:relative;
    background-position: center center;
    background-repeat: no-repeat;
}
.bg{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8000) 0.000%, rgba(0, 0, 0, 0.7889) 8.333%, rgba(0, 0, 0, 0.7556) 16.67%, rgba(0, 0, 0, 0.7000) 25.00%, rgba(0, 0, 0, 0.6222) 33.33%, rgba(0, 0, 0, 0.5222) 41.67%, rgba(0, 0, 0, 0.4000) 50.00%, rgba(0, 0, 0, 0.2778) 58.33%, rgba(0, 0, 0, 0.1778) 66.67%, rgba(0, 0, 0, 0.1000) 75.00%, rgba(0, 0, 0, 0.04444) 83.33%, rgba(0, 0, 0, 0.01111) 91.67%, rgba(0, 0, 0, 0.000) 100.0%);
    position: relative;
    z-index: 2;
    width: 100%;    
}
.main .container{
    height:100vh;
    width:100%;
    background-color: black;
    opacity: 0.55;
    top: 0;
    position: absolute;
}
nav{
     width: 80vw;
    justify-content: space-between;
    margin: auto;
    display: flex;
    align-items: center;
    height:90px
    
}
nav img{
    color: red;
    position: relative;
    z-index:10;
}
nav button{
    position: relative;
    z-index:10;
}
.text{
    color:white;
    height:85%;
    margin: 0 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap:20px;
    position: relative;
}
.text h1{
    font-size:70px;
    font-weight: bolder;
    font-family:'Times New Roman', Times, serif;
    text-align: center;
    width: 50%;
    line-height: 73px;
   
}
.text h2{
    font-weight: 400;
    font-size: 20px;
    text-align: center;
}
.text h3{
    font-weight: 400;
    font-size: 18px;
    font-family: 'Helvetica Neue';
    text-align: center;
    
}
.btn{
    padding:3px 8px;
    font-weight: bold;
  
}
.btnred{
    background-color: red;
    color: white;
    padding:11px 24px;
    border: none;
    height: 120%;
    border-radius: 5px;
    font-size: 25px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;

}
.btnred:hover{
    background-color: rgb(197, 6, 6);
}
.main input{
    padding:10px 101px 8px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);;
    height: 120%;
    width: 33%;
    color:rgb(255, 255, 255);
    border: 1px solid rgba(246,238,238,0.5);


}
.main input::placeholder{
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255,0.5);
}
.redsm{
    background-color: red;
    color: white;
    padding:8px 16px;
    margin-right: 15px;
    border-radius: 5px;
    border: none;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;

}
.redsm:hover{
    background-color: rgb(212, 4, 4);
}
.herobtn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    margin-top: 5px;
    gap:10px;
    width: 100%;
}
.btneng{
    background-color: rgba(0, 0, 0,0.4);
    color: white;
    min-width: auto;
    font-weight: 400;
    font-size: 16px;
    padding:5px 20px;
    margin: 0px 14px;
    border:1px solid rgba(246,238,238,0.5);
    border-radius: 5px;
    cursor: pointer;
}
.secondpage{
    height: 110vh;   
    width:96vw; 
    padding: 20px 100px 20px 140px;
 
   
}

.heading{
    color: white;
    margin-top:20px;
    overflow-x: hidden; /* Disables horizontal scrolling (left to right) */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.secondline{
    padding:20px  20px;
    padding-right: 20px;
}
.secondline button{
    background-color: rgba(0, 0, 0,0.4);
    color: white;
    min-width: auto;
    font-weight: 400;
    font-size: 16px;
    padding: 8px 20px;
    margin-right: 20px;
    border:1px solid rgba(246,238,238,0.5);
    border-radius: 5px;
    cursor: pointer;
}
.thirdline {
    padding: 10px;         /* Add padding around the container */
    box-sizing: border-box; /* Include padding in the total size */
    overflow: hidden;      /* Prevent scrolling beyond the container */
}

.top10{
    height:40vh;
    min-width: 10%;
    overflow-x: auto;      /* Allow horizontal scrolling */
    overflow-y: hidden; 
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.top10 ul{
    display: flex;
    align-items: center;
    gap: 40px;
    padding:10px 10px;
    padding-right: 200px;
    margin-right: 200px;
    width:100%;
    box-sizing: border-box;
   
}
.top10 button{
    background: none;
    border: none;
    padding: 0;           /* Remove button padding */
    cursor: pointer; 
}


.top10 ul li img{
    height: 15rem;
    object-fit: contain;
    border-radius: 10px;
    
}


.fourthsecond{
    width:100%;
    display: flex;

}
.fourthline h2{
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin-left: 15px;
   
    
   
}
.box {
    
    position: relative;
    color: white;
    width:23%;
    height:18rem;
    margin: 20px 10px;
    border-radius: 16px;
    background: linear-gradient(149deg, #192247 0%, #210e17 96.86%);
    
}

.first h1,.second h1,.third h1,.fourth h1{
    font-size:25px;
    padding:20px 20px;
    font-weight: 500;
    font-family: sans-serif;
    
     
}
.headingfour p{
    color: rgb(161, 161, 161);
    font-size: 17px;
    font-family: sans-serif;
    padding:3px 10px;
    font-weight: 400;
}
.first img,.second img,.third img,.fourth img{
    height:50px;
  position: absolute;
  bottom: 10px; /* Adjust the distance from the bottom */
  right: 10px;

}

.faq{
    height:auto;
    width:80vw;
    margin-bottom: 80px;
    position: relative;

}
.faq h2{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    margin-right: 2px;

    margin-top: 40px;
    margin-bottom: 20px;
}
.questions{
    color: white;
    display: flex;
    width:77vw;
    justify-content: space-between;
    background-color: rgb(45 45 45);
    padding: 1.5rem;
    border: none;
    cursor: pointer;
    margin-left: 20px;
    margin-top: 10px;
   
}
.questions h1{
    font-size: 25px;
    font-family: sans-serif;
    font-weight: normal ;
}

.questions i{
    font-size: 35px;
    font-weight: 400;
} 
.questions:hover{
    background-color: #404040;
    transition: 0.5s;
}
#infodiv1,#infodiv2,#infodiv3{
    display: none;
}
#infodiv1,#infodiv2,#infodiv3,#infodiv4,#infodiv5,#infodiv6{
   
    display: flex;
    width:77vw;
    justify-content: space-between;
    background-color: rgb(45 45 45);
    padding: 1.5rem;
    border: none;
    cursor: pointer;
    margin-left: 20px;
    margin-top: 3px;
    box-sizing: border-box;   
}


#infodiv1 p,#infodiv2 p,#infodiv3 p,#infodiv4 p,#infodiv5 p,#infodiv6 p{
    color: white;
    font-size: 1.5rem;
    font-family: sans-serif;
    font-weight: normal ;
    
}


.lasttext h3{
    font-weight: 400;
    font-size: 18px;
    font-family: 'Helvetica Neue';
    text-align: center;
    margin-left: 50px;
    
}
.lasttext{
    color: white;
    height: 85%;
margin-bottom: 7%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 20px;
    position: relative;
}
.lasttext input{
    padding:10px 101px 8px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);;
    height: 120%;
    width: 31%;
    background-color: #0f0f0f;;
    margin-left: 30px;
    color:rgb(255, 255, 255);
    border: 1px solid rgba(246,238,238,0.5);
}
.lasttext input::placeholder{
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255,0.5);
}
.herobtn1{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    margin-top: 5px;
    gap:10px;
    width: 150%;
    height:50px
}
footer{
    height: 58vh;
}
footer span{
    color: rgb(197, 197, 197);;
    max-width: 60vw;
    margin: 5000px 50px 50px 10px;
    font-family: sans-serif;
}
footer p{
    display: inline;
    text-decoration: underline;
}
.footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: white;
    margin-top: 40px;
    
}
.footer a{
    color: rgb(197, 197, 197);
    padding: 10px;
    font-family: sans-serif;
    font-size: 14px;
}
.footeritems{
    display: flex;
    flex-direction: column;
}
.lastbutton{
    margin-top: 60px;
}
.lastbutton h3{
    font-weight: normal ;
    font-family: sans-serif;
    color: rgba(239, 239, 239, 0.815);
    margin-top: 45px;
    margin-left: 18px;
    font-size: 14px;
}



 /*----------------------------responsive-------------------------------*/

 @media only screen and (max-width:1170px){
    body{
        overflow-x: hidden;
    }
    .box{
        height:14rem;
        width:22%;
    }
    .box h1{
        font-size: 16px;

    }
    .box p{
        font-size: 10px;
    }

 }



 @media only screen and (max-width:600px){
    html{
        overflow-x: hidden;
    }

    
    body{
        height: 450vh;
        max-width: ;
        overflow-x: hidden;
        
    }
    nav{
        width: 360px;
       justify-content:space-between;
       display: flex;
       flex-direction: row;
       align-items: center;
       height:35px;

       margin:14px 5px
      
 }
 nav img{
    height: 20px;
    width: 100px;
 }
  .buttton{
    display: inline;
    height: 26px;
    margin-left: 8px;
    

 }
 .buttton .btneng{
    font-size: 10px;
    padding: 5px 10px;
    margin-right: 16px;

 }
 .buttton .redsm{
    padding: 5px 10px;
    font-size: 10px;
    margin-right: 0px;
 }
   .main{
    height:82vh;
    width:auto;
    background-size: cover;
   
}
.main .container{
    height:82vh;
    width:100%;
    background-color: black;
    opacity: 0.55;
    top: 0;
    position: absolute;
}
.text{
    margin: 70px 10px;
    height: 54vh;
}
.text h1{
    font-size:41px; 
    width: 90%;
    line-height: 32px;
   
}
.text h2{
    font-size: 15px;
}
.text h3{
    font-weight: 400;
    font-size: 15px;
   
}
.herobtn{
    flex-direction: column;
    gap:19px
}
.main input{
    width: 90%;
}
.btnred{
    padding: 6px 9px;
    font-size: 17px;
}
.secondpage{
    padding: 6px 10px 10px 10px;
    width: 100vw;
}
.heading{
    margin-top: 6px;
}
.heading h2{
    font-size: 20px;
    margin-top: 10px;
}
.secondline{
    padding: 15px 0px;
   
}
.secondline button{
    font-size: 13px;
    margin-right: 10px;
}
.thirdline {
    padding: 0px;
    height: 55vw;;
    
}
.top10 ul{
    padding:8px 3px
}

.top10 ul li img{
    height: 10rem;
}
.fourthline h2{
    margin-left: 10px;
    font-size: 25px;

}
    
    .fourthsecond{
        display:flex;
        flex-direction: column;
    }
    .box{
        width:87%;
        height:13rem;
        margin: 10px 23px;

    }
    .first h1, .second h1, .third h1, .fourth h1 {
       font-size: 20px;
        padding: 11px 8px;
    }
    .box p {
        font-size: 13px;
    }
    .fourthline h2 {
        margin: 17px 47px;
        font-size: 18px;
      
    }
    .faq{
        margin-bottom: 46px;
        width: 100vw;
    }
    .questions{
        padding: 10px 16px;
        margin-left: 1px;
        width: 93vw;
    }
    .questions h1 {
        font-size: 15px;
    }

    .questions i {
        font-size: 21px;
    }
    #infodiv1, #infodiv2, #infodiv3, #infodiv4, #infodiv5, #infodiv6 {
        margin-left: 1px;
    }
    #infodiv1 p, #infodiv2 p, #infodiv3 p, #infodiv4 p, #infodiv5 p, #infodiv6 p {
        font-size: 13px;
        text-align: start;
    }
    .lasttext h3 {
        font-size: 15px;
        margin-left: 10px;
        text-align: start;
        margin-bottom: 10px;
    }
    .herobtn1{
        flex-direction: column;
        margin-bottom: 20px;
      
    }
    .lasttext input {
        padding: 13px 10px 13px 10px;
        width: 68%;
        margin-left: 2px;
    }
    footer span {
        margin: 10px;
    }
    .footer{
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }
    .footeritems a{
        font-size: 12px;
    }
    .lastbutton {
        margin-top: 45px;
    }
    .btneng {
        margin: 0px 10px;}
    .lastbutton h3 {
        margin: 30px 10px;

        }
 }