*{
    margin: 0px;
    padding: 0;
    font-family:'Poppins',sans-serif;
    box-sizing: border-box;
}
body{
    background:rgb(5, 7, 27 ) ;
    margin: 0%;
    padding: 0%;
    color: #fff;
}
#header{ 
    width: 100%;
    height: 100vh;
}
.container{
    margin-top: 2px;
}

.logo{
    width: 150px;
    height:150px;
    margin-right: 650px;
    margin-top: 0%;
}

.container{
    margin-top: 0;
    padding-top: 0;
       
}
nav{
  
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: wrap; 
    margin-top: 0;
}

  

nav ul li{
    display:inline-block;
    list-style: none;
    margin:10px 20px;
    }
    
nav ul li a {
    color:white;
    text-decoration: none;
    font-size: 18px;
    position: relative;
    font-family:sans-serif;

}
nav ul li a::after{
    content:'' ;
    width:0;
    height:3px;
    background: aqua ;
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: 0.5s;
}
nav ul li a:hover::after{
    width: 100%;
}
nav.fa-solid{
    display: none;
}
.header-text {
     
    margin-top: 80px;
    font-size: 25px;

}
.header-text h1{
    font-size: 50px;
    margin-top: 20px;
    color: white;
    font-family:sans-serif; 
    text-align: center;

}
.header-text h2{
    color:white;
    font-size: 30px;
    font-family:sans-serif;
    text-align: center;
}
.header-text h4{
    color:white;
    font-family:sans-serif;
    text-align: center;
    font-size: 20px;
}
.header-text h1 span{
    color: aqua;


}
/*-------about-------*/
#about
{
    padding: 80px 0;
    color :#001840;
}
.row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.about-col-1
{
   flex-basis: 35%;

}
.about-col-1 img
{
  width: 85%;
  border-radius: 5px;
  padding-left: 20%;
}
.about-col-2{
    flex-basis: 60%;
    color:aliceblue;
    font-family: sans-serif;

}
.sub-title{
    font-size: 60px ;
    font-weight: 600;
    color:aqua;
    font-family: sans-serif;
   
}
.s-title{
    font-size: 30px ;
    font-weight: 600;
    color:#fff;
    font-family: sans-serif;
   padding-left: 5%;
   padding-top: 4%;
}
.fa img{
    width: 30%;
    padding: 5%;
    
     
}


.tab-titles{
    display:flex;
    margin:20px 0 40px;
}
.tab-links{
    margin-right: 50px;
    font-size: 18px;
    font-weight:500 ;
    cursor: pointer;
    position: relative;


}
.tab-links::after{
    content:'' ;
    width: 0;
    height: 3px;
    background: aqua;
    position: absolute;
    left: 0;
    bottom: -8px;
    transition: 0.5s;
}
 .tab-links.active-link::after{
    width: 50%;
 }
 .tab-contents ul li span{
     color:aquamarine;
     font-size: 14px;
 }
 .tab-contents ul li {
    list-style: none;
    margin: 10px 0;

 }
 .tab-contents{
    display: none;
 }
 .tab-contents.active-tab{
    display: block;
 }
 /*services*/
 #services{
    padding: 30px 0;
 }
 .services-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    grid-gap:40px;
    margin-top: 50px;
    padding: 5%;
   

 }
 .sub-title{
    padding-left: 5%;
 }

.services-list div{
    background: #001840;
    padding: 20px;
    font-size: 13px;
    font-weight: 300;
    border-right: 10px;
    transition:background 0.5s,transform 0.5s;

}
.services-list div i{
      font-size: 50px;
      margin-bottom: 30px;
}
.services-list div h2{
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px; 
}
.services-list div a{
    text-decoration: none;
    color: antiquewhite;
    font-family: 12px;
    margin-top: 20px;
    display: inline-block;
    

}

.services-list div:hover{
    background: rgb(95, 155, 155);
    teansform:translateY(-10px);
}
/*-------porthfolio-------*/
 
 .btn{
    display: block;
    margin: 50px auto;
    width:fit-content;
  
    padding: 14px 50px;
    border-radius:6px ;
    color:#fff;
    transition:background 0.5s;
    display: inline-block;
    background: rgb(95, 155, 155);
    margin: 10%;
     
   
   
 }
 .btn:hover{
    background:rgb(95, 155, 155) ;
 }
  
 
 /*-------contact--------*/
  #contact{
    padding: 50px 0;
    margin-right: 5%;
  }
  
  
 .contact-left{
    flex-basis: 35%;
 }
 .contact-right{
    flex-basis: 60%;
 }
 .contact-left p{
    margin-top: 30px;
 }
 .contact-left p i{
    color:rgb(95, 155, 155);
    margin-right: 15px;
    font-size: 20 px;
    padding-left: 10%;


 }
 .social-icon{
    margin-top: 30px;
    padding-left: 10%;

 }
 .social-icon a{
    text-decoration:none ;
    font-size: 20px;
    margin-right: 10px;
    color:#ababab;
    display: inline-block;
    transition:transform 0.5s;

 }
 .social-icon a:hover{
    color: rgb(95, 155, 155);
    transform:translate(-5px) ;
 }
 .btn.btn2{
    display: inline-block;
    background: rgb(95, 155, 155);
    

 }
  
     

  
 .container p{
    color: #fff;
 }
.contact-right form {
    width: 100%;
    
 
}
     
form input,form textarea{
    width: 100%;
    border:0;
    outline: none;
    background: #001840;
    padding: 15px;
    font-size: 18px;
    border-radius: 6px;
    margin: 15px 0;
   

}
form .btn2{
    padding: 14px 60px;
    font-size: 18px;
    margin-top: 20px;
    cursor: pointer;
    
     

}

.copyright{
     
 width: 100%;
 text-align: center;
 padding: 25px 0;
 background: #001840;
 font-weight: 300;
 margin-top: 20px;
  


}
.copyright i{
    color:aqua;
}
/*---------css for small screens ------*/

 @media only screen and (max-width:600px)
 {
    nav.fa{
        display: none;
         
    }
     #header{
        background-image: url(im/dt.png);
     }
    .header-text{
        margin-top: 50%;
        font-size: 16px;
         
    }
    .header-text h1{
        font-size: 30px;
        margin-left: 10px;
    }
    nav.fa{
        display: block;
        font-size :25px;
    }
    nav ul{
        background: aqua;
        position: fixed;
        top: 0;
        right: -200px;
        width: 200px;
        height: 100vh;
        padding-top: 50px;
        z-index: 2 ;
        transition:right 0.5s;

    }
    nav ul li {
        display: block;
        margin: 25px;
    }
    nav ul .fa{
        position: absolute;
        top: 25px;
        left: 25px;
        cursor: pointer;

    }
    .sub-title{
        font-size: 40px;
    }
    .about-col-1,.about-col-2{
        flex-basis: 100%S;
    }
    .about-col-1{
        margin-bottom: 30px;
    }
     .about-col-2{
        font-size: 14px;
     }
     .tab-links{
        font-size: 16px;
        margin-right: 20px;

     }
     .contact-left,.contact-right{
        flex-basis: 100%;
     }
     .copyright{
        font-size: 14px;
     }
 }