@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    font-family: 'Poppins', sans-serif;
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}
header{
    background-color: rgba(236, 235, 235, 0.801);
    width: 100%;
    z-index:999;
    display:flex;
    justify-content:space-between;
    align-items: center;
    padding: 10px 200px;
    box-shadow: 0px 2px 30px rgb(82, 82, 82);
}
.logo{
    text-decoration:none;
    text-transform:uppercase;
    color:rgb(0, 0, 0);
    font-weight:700;
    font-size: 1.8em;
}
.nav a{
    color:rgb(42, 42, 42) ;
    text-transform: none;
    font-weight:500;
    font-size: 1.1em;
    text-decoration:none;
    padding-left: 30px;
    transition: 0.7s ease;
}
.nav a:hover{
    color: rgb(255, 0, 0);
}
section{
    padding: 100px 200px;
}
.main{
    width:100%;
    min-height: 100vh;
    display:flex;
    align-items: center;
    background-image: url(Untitleddvd-1.png);
    background-size: cover;
    background-position:center;
    background-attachment:fixed;
}
.main h2{
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size:0.9em
}
.main h2 span{
    color: rgb(0, 0, 0);
    font-weight: bolder;
    font-size:2.8em;
    display:inline-block;
    margin-top:10px ;
    text-shadow: 3px 3px white;
}
.main pre{
    display: inline-block;
    margin-top: 4px;
    margin-bottom:4px;
    color: rgb(39, 39, 39);
    letter-spacing: 1px;
    font-size:0.9em;
}
.main-btn{
    color: white;
    background-color: rgb(0, 0, 0);
    display: inline-block;
    font-weight:600;
    letter-spacing: 1px;
    text-decoration:none;
    padding:1.1em 2.1em;
    border-radius: 15px;
    margin-bottom: 30px;
    margin-top: 0px;
    transition: 0.7s ease;
    
}
.main-btn:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    transform: scale(1.1);
}
.social-icons a{
    color: white;
    font-size: 1.7em;
    padding-right: 12px;
    padding-left:10px ;
    transition:  0.7s ease;
}
.social-icons a:hover{
   color: rgb(255, 0, 0);
}
.title{
    display:flex;
    justify-content:center;
    color:rgb(0, 0, 0);
    font-size: 2.2em;
    font-weight:bolder;
    margin-bottom:30px;
}
.content{
    display:flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.content{
    display: flex;
    box-shadow: 0 5px 25px rgba(1, 1, 1, 0.25);
    width: 12em;
    background-image:-webkit-linear-gradient(rgb(196, 196, 196),rgb(255, 255, 255));
    border-radius:10px;
    padding: 15px;
    margin: 15px;
    transition: 0.7s ease;
}
.card:hover{
    transform:scale(1.1);
}
.icon{
    font-size: 4em;
    color:rgb(0, 0, 0);
    text-align: center;
}
.h{
    color: rgb(0, 0, 0);
    margin-bottom: 15px;
    align-items: center;
}
::-webkit-validation-bubble-arrow-clippe.info1{
    box-shadow: 0 5px 25px rgba(1, 1, 1, 0.25);
    width: 22.1em;
    background-image: -webkit-linear-gradient(rgb(196, 196, 196),rgb(255, 255, 255));
    border-radius:10px;
    padding: 100px;
    margin: 15px;
    transition: 0.7s ease;  
}
.info1:hover{
    transform:scale(1.8);
}

.st0{
    font-size: 4em;
    color:rgb(0, 0, 0);
    text-align: center;
}
.h3{
    color: rgb(0, 0, 0);
    margin-bottom: 5px;
    margin-left: 1.5em;
}
#h3::first-letter{
        text-transform:uppercase;
}
.a1{
        text-decoration: none;
        color: black;
}
.a1:hover{
    text-decoration:underline;
        color: rgb(0, 119, 255);
}
pre::selection{
    color: rgb(255, 0, 0);
    text-transform:capitalize;
    transform:scale(1.1);
}
span h3{
    rgb(0, 0, 0);
    margin-bottom: 15px;
    margin-left:2.1em;
}
#projects{
    background-color: rgb(0, 0, 0);
}
#projects .content{
    margin-top: 30px;
}
.project_card{
    background-image: -webkit-linear-gradient(rgb(196, 196, 196),rgb(255, 255, 255));
    min-height: 14em;
    border: 1px solid white;
    box-shadow: 0 2px 8px white;
    width:14em;
    overflow: hidden;
    border-radius: 10px;
    margin-right: 22px;
    margin-left: 22px;
    margin-top:30px;
    margin-bottom: 30px;
    transition: 00.7s ease;
}
.project_card:hover{
    transform: scale(1.1);
}
.project_card img{
    width:100%;
    transition: 00.7s ease;
}
.project_card img:hover{
    opacity: 0.9;
}
.project_info{
padding: 1em;
}
.project_title{
    display: flex;
    justify-content: space-between;
    text-transform:uppercase;
    font-weight:800;
    margin-top: 10px;
    font-size: 85%;
}
.more_details{
    text-decoration: none;
    color: rgb(0, 0, 0);
    transition: 0.9s ease;
}
.more_details:hover{
    transform: scale(1.1);
}
video{
    width:100%;
    transition: 00.7s ease; 
}
video:hover{
    opacity: 0.9;
}
#Layer_1{
    fill: black;
    color: black;
}
.icon1 {
    font-size: 3em;
    color:rgb(0, 0, 0);
    text-align: center;
}
svg{
    font-size: 3em;
    color:rgb(0, 0, 0);
    text-align: center;
    fill: black;
}
.h{
    color:rgb(0, 0, 0);
    margin-bottom: 15px;
    align-items: center;
}
.footer{
    background-color: rgb(0, 0, 0);;
    color: white ;
    padding: 2em;
    display: flex;
    justify-content: space-between;
}
.footer p{
    margin-top: 10px;
    font-weight: 600px;
}
.footer .social-icons{
   margin-top: 8px;
   font-size: 0.8em;
}
.imag1{
    position: absolute;
    left: 990px;
    top: 300px;
    width: 487px;
    height: 300px;
    border-radius: 30px;
}
.imglibk{
    position: absolute;
    border-radius: 30px;
    z-index: 111;
    left: 1190px;
    top: 419px;
    width: 80px;
    height: 80px;
    font-size: 8em;
    color:rgb(0, 0, 0);
    text-align: center;
}
.info1{
    box-shadow: 0 5px 25px rgba(1, 1, 1, 0.25);
    width: 21.1em;
    background-image: -webkit-linear-gradient(rgb(196, 196, 196),rgb(255, 255, 255));
    border-radius:10px;
    padding: 25px;
    margin: 15px;
    transition: 0.7s ease;  
}
.info1:hover{
    transform:scale(1.1);
}
@media (max-width:475px){
.main{
    width:100%;
    min-height: 100vh;
    display:flex;
    align-items: center;
    background-image: url(pagebannerzedz1.png);
    background-size:100% ;
    background-position: center;
    background-attachment:fixed;
}
}
@media (max-width:1023px){
    .imag1{
    position: none;
    left: 0px;
    top: 0px;
    width: 0px;
    height: 0px;
    border-radius: 0px;
    }
    header{    padding: 12px 20px;
        width: 100vw;
    }
    #contactflex{
        transform: scale(0.7);

    }
    .info1{
        margin-bottom: 3em;

    }
    .nav a{
    font-weight:0;
    font-size: 0.7em;
    text-decoration:none;
    padding-left: 10px;
    }
    .logo{
        font-size: 0.85em;
    }
    .title{
        font-size: 1em;
    }
    section{
        padding: 50px 10px;
        justify-content: center;
    }
    .main-btn h2{
        font-size:1em;
    }
    .main h3{
        font-size: 0.6em;
    }
    .main h2 span{
        font-size: 1.8em;
    }
    .main{
        justify-content: center;
        padding-top: 10px;
        width: 100vw;

    }
    .content{
        flex-direction: column;
        align-items:center;
        width: 13em;
    }
    .card{
        width: 11.1em;
   }
   .email{
       font-size: 0.8em;
   }
   .footer .social-icons{
       font-size: 0.6em;
       margin-top: 8px;
   }
   header{
    position: fixed;
   }

}
#projects,#services{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.title1{
    color: white;
    background-color: rgb(0, 0, 0);
}
#contactflex{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

}
.info1{
    transform:scale(1.3);
}
.info1:hover{
    transform:scale(1.4);
}
.content:hover{
    transform:scale(1.2);
}
.card{
    transition: 0.7s ease;
}
.card:hover{
    transform:scale(1.1);
}