body{
    margin: 0px;
    padding: 0px;
    background-repeat: no-repeat;
    background-size:100%;
   background-color:#e9f3ff;
}

a{
    text-decoration: none;
}

nav{
    display: flex;
    background-color: white;
    width: 100%;
    height: 69px;
    align-items: center;
justify-content: center;
gap: 100px;
border-bottom: 1px solid rgba(0, 0, 0, 0.63);
}

.nav-left img{
    width: 180px;
    cursor: pointer;
}

.nav-center ul{
    display: flex;
    gap:50px;
}
.nav-center ul li{
    list-style: none;
    color:black;
    cursor: pointer;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.nav-center ul li:hover{
 color:rgb(27, 200, 248);
transition: all ease-in-out 0.5s;
}

.nav-right button{
    padding: 10px 40px;
    border: none;
    border-radius: 20px;
    color: white;
    background-color:rgb(0, 200, 255) ;
}


.nav-right{
    display: flex;
    align-items: center;
    justify-content:center;
    gap: 50px;
}

.nav-right button:hover{
    background: none;
    border: 1px solid black;
     color:rgb(27, 200, 248);
     transition: all ease-in-out 0.5s;
}

.nav-right button i{
    display:none;
}

.nav-right button:active{
    background-color: aqua;
        transition: all ease-in-out 0.0s;
        color: white;
}
.nav-right i{
    font-size: 30px;
   color: black;
}
#menu{
    display: none;
}

#user{
    display: none;
}

#vec{
    display: none;
}


@media (max-width: 768px){

    nav{
       gap:100px;
    }

.nav-left img{
    width: 175px;
}


   .nav-center{
    display: none;
   }

   #menu{
    display: flex;
    font-size: 25px;
}

#user{
    display: flex;
       font-size: 25px;
}

.nav-right{
    gap:30px;
}

.nav-right button {
    display: none;
}

}

.main{
    width: 100%;
    height: 485px;
    background-color:#e9f3ff;
    display: flex;
    justify-content: space-between;
    
}
.main-right img{
    width: 696px;
}


.main-left h3{
    margin-top:120px ;
    margin-bottom: 6px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color:rgb(1, 119, 254);

}

.main-left h1{
    margin: 1px;
    color: #2639ed;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 40px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.main-left{
    width: 600px;
    margin-left: 40px;

}

.main-buttons{
    display: flex;
    gap:30px;
    margin-top: 40px;
}



.main-buttons button{
    padding: 10px 30px;
    border: none;
    background-color:rgb(0, 170, 255) ;
    border-radius: 20px;
    color: white;
}

#contact-us{
    background: none;
    border: 1.5px solid rgb(0, 170, 255) ;
    color: rgb(0, 170, 255) ;
}
#contact-us:active{
    background-color:  rgb(0, 170, 255);
    color: white;
}

@media (max-width: 768px){

#pc{
    display: none;
}

#vec{
    display: flex;
    width: 370px;
    margin-top: 80px;
    margin-left:23px;
}


.main{
    display: block;
    padding-top: 70px;
    height: 735px;
}


.main-left{
    margin-left: 20px;
    width: 95%;
}




.main-left h3{
    margin-top: 0px;
    font-size: 15px;
}

.main-left h1{
    font-size:25px;
}


.main-buttons button{
     padding: 10px 20px;
     font-size: 15px;
}

}


.company{
    width: 100%;
    height: 200px;
    text-align: center;
    margin-top: 150px;
}
.company h6{
    font-size: 15px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: block;
    margin: 0px;
    color: rgba(10, 72, 152, 0.792);
}
.company h2{
    color: rgba(0, 117, 250, 0.815);
    display: block;
    margin-top: 20px;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.company-table{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:150px;
    margin-top: 20px;
}

.logos{
    
    width: 100px;
    height: 100px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}




.logos img{
    width: 70px;
     filter: opacity(60%);
}


.logos img:hover{
    filter: none;
}


@media (max-width: 768px){

    .company{
        margin-top: 0px;
    }

    .company-table{
        gap: 30px;
    }

    .logos img{
        width: 50px;
    }
}

.about{
    width: 100%;
    display: flex;
    justify-content:center;
    gap:50px;
    margin-top: 100px;
    margin-bottom: 50px;
}

.about-right{
    text-align: center;
    width: 400px;
}

.about-left img{
    width: 500px;
    margin-top: -30px;
    border-radius: 10px;
    border: 2px solid black;
    padding: 10px;
}

.about-right h6{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgba(10, 72, 152, 0.792);
    margin: 0px;
    font-size: 16px;
}
.about-right h2{
    color: #0447daca;
    margin-top: 10px;
    font-size: 30px;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.about-right #parg{
    color:#043a70a7;
    font-size: 18px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.marks{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    font-size: 10px;
    margin: 0px;
    gap:6px;
    margin-left: -100px;
    font-family:Arial, Helvetica, sans-serif;
    color: rgba(0, 0, 0, 0.662);
}
.marks i{
    font-size: 20px;
    color: rgb(21, 77, 77);
}

@media (max-width: 768px){
    .about{
        display: block;
    }

    .about-left{
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0px;
    }
    
    .about-left img{
        width: 350px;
    }

    .about-right{
        width: 100%;
        margin: 0px;
        text-align: center;
        margin-top: 30px;
    }
.marks i{
    font-size: 15px;
}

.marks {
    font-size: 8px;
    width: 95%;
    margin: 0px;
    text-align: center;
}

.about-right #parg{
    margin-bottom: 0px;
    width: 95%;
}

}

.services{
    width: 100%;
    height: 350px;
    text-align: center;
}
.services h5{
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      color: rgba(10, 72, 152, 0.792);
}
.services h1{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #075eea;
    font-size: 48px;
}

.services-list{
    width: 100%;
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    height: 220px;
}
.sbox{
    width: 220px;
    height: 170px;
    border-radius: 10px;
    background-color: rgba(119, 187, 219, 0.393) ;
    text-align: center;
    padding: 20px;
  color: rgb(3, 75, 116) ;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.sbox i{
    font-size: 50px;
    color: rgb(0, 114, 228);
}

.sbox h4{
    margin-top: 10px;
    font-size: 20px;
    margin-bottom: 0px;
}

.sbox p{
    color:rgba(3, 75, 116, 0.628) ;
    font-size: 15px;
    margin-top: 10px;
}




@media (max-width: 768px){

.services-list{
    display: block;
}

.services{
    text-align: center;
    height: 900px;
    }

.sbox{
    margin-top: 30px;
    margin-left: 75px;
}


.services h1{
font-size: 25px;
}
}

.footer{
    margin-top: 100px;
    width: 100%;
    height: 500px;
    background-color: #1f294e;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:150px;
}

.footer-left{
    text-align: center;
}

.footer-left ul li{
    list-style: none;
    margin-top: 25px;
}

.phone-email{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
}

.footer-right{
    width: 400px;
}

.footer-right input{
    width: 260px;
    height:30px;
    font-size: 20px;
    border-radius: 5px;
}

.footer-center i{
    font-size: 30px;
}

.footer-right button{
padding: 10px 20px;
border: none;
background-color: #0089c0;
color: white;
border-radius: 5px;
position: absolute;
margin-left: 5px;
}

@media (max-width: 768px){
    .footer{
        display: block;
        height: 800px;
        text-align: center;
        padding-top: 30px;
    }
   
    .footer-center{
        margin-top: 50px;
    }

    .footer-right{
        margin-top: 30px; 
    }

    .footer-right input{
        margin-left: -80px;
    }


}