*{
    color: wheat;
    padding: 0px;
}
body{
    padding: 0px;
    margin: 0px;
        overflow-x: hidden;

}
.logoName h3{
    position: relative;
    color: skyblue;
    margin-top: -15%;
}

.logoImg{
    width: 100%;
    height: 100%;

}
.logoImg img{
    width: 60%;
    margin-top: -5%;
}




li{
    display: inline-flex;
    list-style: none;
    font-weight: bold;
    justify-content: space-evenly;
    align-items: center;

}
ul{
    display: inline-flex;
    list-style: none;
    font-weight: bold;
    justify-content: space-evenly;
    align-items: center;

}

.nav{
    display: grid;
    grid-template-columns: 60% 30%;
}
topHeader.sticky.scroll{
    display: flex;
    position: fixed;
    top: 50px;
    background-color: black;
}
header{
    width: 100%;
   display: grid;
   background-image: url('milkyway.jpg');
   height: 80vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: sticky;
        z-index: -1;

}
.midfront{
    display: grid;
    justify-content: center;
}
.btns{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: auto auto;
    gap: 10px;
    margin-top: -200px;

}

.btns button{
    width: 115px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    font-weight: bold;
    font-size: 19px;
}
.fName{
    font-size: 70px;
}
.abt{
    display: grid;
    grid-template-columns: 30% 3% 50%;
    background-color: black;
    padding: 10px;
}
.abtTitle{
    font-size: 30px;
    text-align: end;
}
.midline{
    width: 2px;
    height: 90%;
    background-color: white;
    margin-left: 10%;
}
.abtDes{
    font-size: 20px;
}
.btn button{
    width: 115px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    font-weight: bold;
    font-size: 19px;
}
#btnServices{
    background-color: rgb(122, 122, 122);
}
#btnCon{
    border: 1px white solid;
}
.services{
    text-align: center;
    font-size: 30px;
    color: rgb(141, 139, 117);
}
.servDes{
    text-align: center;
    font-size: 17px;
    color: black;
}
#services{
    display: grid;
    grid-template-columns: 30% 30%;
    justify-content: center;
    row-gap: 5%;
    gap: 5%;

}
.wb{
    background-color: blueviolet;
    height: 20vw;
    overflow: visible;
}
.ServType{
    text-align: center;
    font-size: 20px;
    margin: -1%;
    

}
.ServExp{
    text-align: center;
    margin: -1%;
}
.slideContainer{
    margin-top: 55px;
    display:inline-flex;
    background-color: rgb(189, 131, 160);
    height: min-content;
    width: 100%;
    gap: 3vw;
    overflow: hidden;z-index: -10000;
}
.milkywaySlide{
    color: white;
    margin-right: -100;
    font-weight:700;
    animation: belt 5s linear infinite;
    z-index: 1;
}
.projectsLst{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    row-gap: 10vw;    
    justify-content: center;

}
.p{
    height: 25vw;
    width: 25vw;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}
.p1{
    background-image: url('/basicCalculator.png');
border: 2px solid rgb(42, 46, 34);
   animation: showw  linear;
   animation-timeline:view();
   animation-range: entry 0 cover 40%;
   transform-origin: left;
}
.p2{
    background-image: url('/large-modern-passenger-airliner-jet.png');
border: 2px solid rgb(42, 46, 34);
   animation: showw  linear;
   animation-timeline:view();
   animation-range: entry 0 cover 40%;
   transform-origin: left;

}
.p3{
    background-image: url('/bussinessProfile.png');
   border: 2px solid rgb(42, 46, 34);
   animation: showw  linear;
   animation-timeline:view();
   animation-range: entry 0 cover 40%;
   transform-origin: left;

}
.p4{
    background-image: url('/personalProfile.png');
   border: 2px solid rgb(42, 46, 34);
   animation: showw  linear;
   animation-timeline:view();
   animation-range: entry 0 cover 40%;
   transform-origin: left;

}
.sub{
    font-size: medium;
    font-weight:bold;
}
.form{
    display: grid;
    grid-template-columns: 40% 60%;
}
form{
    display: grid;
    padding: 2%;
}
input{
    width: 60%;
    height: 50%;
    margin-left: 20%;
    color: black;
    font-size: 20px;

}

textarea{
    width: 60%;
    margin-left: 20%;
    height: 100%;
    resize: none;
    border: none;
    border-radius:-0px;
    color: black;
    font-size: 20px;

}
#submit{
    width: 115px;
    margin-left: 20%;
    color: white;
    background-color: pink;
    margin-top: 2%;
    width: 115px;
    height: 40px;
    border: none;
    font-weight: bold;;
    font-size: 19px;    cursor: pointer;

}
.line{
    border:dashed 2px white;
    border-radius: 25%;
}
.topHeader{
     position: fixed;
    display: grid;
    grid-template-columns: 20% 80% 100%;
    text-align: center;
    justify-content: start;
    height: 22vh;
    animation: scroll 5s linear;
    animation-timeline:view();
    align-items: center;
    z-index: 1000000;
    background-color: black;
    overflow-y:visible;
    left: 0px;
    
}

@keyframes scroll {
    form{
        opacity: 0;
        scale: 0.5;
    }
    to{
        opacity: 1;
        scale: 1;

    }
    
}
@keyframes belt 
{
    

   to{
        transform: translateX(-100vw);
    }   

}
a{
    text-decoration: none;
}
@media screen and (max-width:560px) {
  
    #services{
        display: grid;
        grid-template-columns: 40% 40%;
        justify-content: center;
        row-gap: 5%;
        gap: 5%;
    
    }
    .wb{
        background-color: blueviolet;
        height:20vh;
        overflow: visible;
    }
}
.wts{
    background-image: url('/');
}
.fb, .wts{
    background-image: url('/');
    width:8vw;
    height: 8vw;
    border: 2px skyblue solid;
    border-radius: 50%;
    cursor: pointer;
    max-width: 30px;
    max-height: 30px;
}
.fb, .wts:hover{
    box-shadow: 0px 0px 0px 3px skyblue;
    
}
@keyframes showw {
    from{
        opacity: 0;
        scale: 0.5;
        

    }to{
        opacity: 2;
        scale: 1;

    }
    
}


#menu{
    position: absolute;
    visibility:collapse;
}
#ls li:hover{
    background-color: rgb(34, 32, 29);
    width:inherit;
    height: 50%;
}
.toggle-containe{
    display: block;
    background-color: inherit;
    width: 7vw;
    height: 7vw;
    position: absolute;
    justify-self:  last baseline;
    right: 5vw;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: hidden;
    visibility: collapse;
}
.lin{
    position: relative;
    width: 6vw;
    height: 1vw;
    background-color: white;
    justify-self: center;
    margin-top: 1vw;

}
@media screen and (max-width:900px) {
    #ls{
        right: -64vw;
        width:70vw
    }    
    .toggle-containe{
        display: block;
        
    }
    #ls{
        transition: 1s;
        position: fixed;
        display: grid;
        background-color: black;
        left: 50px;
        grid-template-rows: 20% 20% 20% 20%;
        justify-self: last baseline;
        right: -55VW;
        height: 100vh;
        top: 20.5vw;
        width: 50vw;
        visibility: collapse;
        justify-content: center;
        border-left: 2px solid red;
        align-items: center;
        z-index: 1000000;
    }
    .toggle-containe{
        visibility: visible;
    }
    #menu:checked~ .topHeader .toggle-containe>.mid{
        visibility: collapse;

    }
    #menu:checked~ .topHeader .toggle-containe>.tp{
        transition: 1s;
        transform: rotate(45deg);
        background-color: red;
        top: 1vw;
        left: -1vw;
        width: 15vw;
    }
    #menu:checked~ .topHeader .toggle-containe>.btm{
        transition: 1s;
        transform: rotate(-45deg);
        background-color: red;
        top: -4vw;
        left: 1vw;
        width: 15vw;
        margin: 2vw;
    }
    #menu:checked~ .topHeader >.nav>#ls{
        right: 5vw;
        visibility: visible;
    }
    
}
.social{
    grid-template-columns: 60% 1%;
    justify-self: center;
    width: 100vw;
}