*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}
body{
    background-color: black;
    
}
.web-content{
    display: none ;
}
.headings{
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: white !important;
    margin: 3% auto 3% 8%;
    /* font-family: 'Libre Bodoni', serif; */
    letter-spacing: 0.09cm;
    color: aqua;
}
.contact-btn{
    padding: 1% 2%;
    width: 150px;
    background-color: aqua;
    border: none;
    border-radius: 15px;
    margin-top: 2%;
}
.contact-btn a{
    text-decoration: none;
    color: black;
}
.contact-btn:hover{
    background-color: rgb(28, 167, 167);
}
.preloader{
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0; */
    
    /* background-color: black ; */
}
.circle{
    position: absolute;
    height: 100px;
    width: 100px;
    display: inline-block;
    /* border: 1px solid; */
    border-radius: 50%;
    /* animation: loading 2s linear both infinite ; */
}
.circular-element{
    height: 15px;
    width: 15px;
    position: relative;
    
    border-radius: 5%;
    
    animation: dot 3s ease-out both infinite alternate-reverse;
    display: inline-block;
}
.element-1{
    background-color: white;
    /* top: 82%;
    right: -47%; */
    top: 43%;
    left: 0;
    border-radius: 50%;
}

.div-1{
    /* border-right: 2px dashed rgb(27, 160, 160); */
    border-right-width: 60%;
    top : 30vh;
    left: 45vw;
}
.div-2{
    border: 2px dashed gray;
    /* border-right-width: 60%; */
    top : 30vh;
    left: 45vw;
    animation: loading 8s linear both infinite ;
}
.preloader p{
    font-weight: 600;
    /* margin: auto; */
    position: absolute;
    top: 50vh;
    left: 45vw;
    color: gray;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.2cm;
}
.container p span.cursor {
    display: inline-block;
    background-color: #ccc;
    margin-left: 0.1rem;
    width: 3px;
    animation: blink 1s infinite;
}
.container p span.cursor.typing {
    animation: none;
}
.preloader h2{
    position: absolute;
    top: 45vh;
    color: white;
    left: 45vw;
}
@keyframes blink {
    0%  { background-color: #ccc; }
    49% { background-color: #ccc; }
    50% { background-color: transparent; }
    99% { background-color: transparent; }
    100%  { background-color: #ccc; }
}
@keyframes loading {
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(180deg);
    }
    75%{
        transform: rotate(270deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes dot{
    0% {
        transform: translate(0rem,0rem) rotate(0deg);
    }
    33% {
        transform: translate(0.4rem,1rem) rotate(120deg);
    }
    66% {
        transform: translate(0.8rem,1.6rem) rotate(240deg);
    }
    100% {
        transform: translate(1.8rem,2.3rem) rotate(360deg);
    }
}
nav{
    height: 70px;
    position: fixed;
    left: 0;
    right: 0px;
    top:0;
    background-color: black;
    z-index: 100;
    /* transition: 10s; */
}
.brand-logo{
    position: fixed;
    margin: 10px;
}
nav .nav-ul{
    /* margin-left: 25%;    */
    list-style: none;
    width: 75%;
    float: right;
}
/* nav .nav-ul li{
   display: inline-block;
   margin: 1% 2% ;
} */
nav .nav-ul li a{
    text-decoration: none;
    color: white;
    font-family: 'Montserrat', sans-serif;

}
nav .nav-ul li a:hover{
    color: aqua;
    font-weight: bolder;
}
nav button{
    border: none;
    width: 40px;
}
.active-element{
    font-weight: bolder;
}
.menu{
    right: 20px;
}
.show-items{
    position: absolute;
    right: 13%;
    top: 22px;
}
.menu-icon{
    /* position: absolute;
    right: 13%; */
    top: 20px;
    font-size: 30px;
    /* display: hidden; */
}
.menu-icon:hover,.show-items:hover{
    cursor: pointer;
}

.socialLinks{
    /* background-color: white; */
    width: 100px;
    height: 400px;
    position: fixed;
    bottom: 12%;
    left: 0%;
}
.socialLinks a{
    display: block;
    margin: 18%;
}
.fa-facebook-f,.fa-instagram,.fa-github,.fa-linkedin-in,.fa-twitter{
    color: azure;
    font-weight: lighter;
}
.fa-facebook-f:hover,.fa-instagram:hover,.fa-github:hover,.fa-linkedin-in:hover,.fa-twitter:hover{
    font-weight: bolder;
}
.socialLinks a:hover{
    cursor: pointer;
}
.spacer{
    aspect-ratio: 980/540;
    /* height: 30vh; */
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.layer1{
    background-image:linear-gradient(220deg,rgba(0,0,0,0.5) 24%,rgba(0,0,0,1)60%), url(../images/developer-bg.jpg);
    background-size: cover;
    background-position: left;
    
    /* position: absolute;
    right: 0;
    top: 50px; */
    /* option color 
    #DEB7FF*/
}
.home{
    /* border: 1px solid white; */
    /* height: 90vh; */
    /* display: flex; */
    flex-direction: column;
    color: white;
    align-items: left;
    /* margin: 10% 20%; */
    /* background: url('../images/pexels-frank-cone-3214110.jpg');
    background-repeat: no-repeat;
    background-position: top right ; */
    padding: 15% 20%;
    /* background-size: cover; */
    
}
.home h1{
    color: aqua;
    /* font-family: 'Tapestry', cursive; */
    font-family: 'Josefin Sans', sans-serif;
    font-size: 3rem;
}
.typingEffect p {
    font-size: 1rem;
    padding: 0.5rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    text-align: left;
    overflow: hidden;
  }
  .typingEffect p span.typed-text {
    font-weight: normal;
    color: rgb(167, 245, 245);
  }
  .typingEffect p span.cursor {
    display: inline-block;
    background-color: #ccc;
    margin-left: 0.1rem;
    width: 3px;
    animation: blink 1s infinite;
  }
  .typingEffect p span.cursor.typing {
    animation: none;
  }
  @keyframes blink {
    0%  { background-color: #ccc; }
    49% { background-color: #ccc; }
    50% { background-color: transparent; }
    99% { background-color: transparent; }
    100%  { background-color: #ccc; }
  }
.home p{
    /* color: ; */
    font-family: 'Mulish', sans-serif;
}
.home p span{
    /* font-size: 150%; */
}
.img-container{
    margin-left: 4%;
}
.myImg{
    width: 91%;
    object-fit: fill;
}
.about{
    padding: 10% ;
    position: relative;
    /* background-color: aqua; */
}
.about-img{
    /* display: flex; */
    /* align-items: right; */
    text-align: center;
    position: relative;
    margin-right: 3%;
    z-index: 1;
    /* display: grid;
    align-items: center; */
}
.border{
    position: absolute;
    height: 300px;
    width: 230px;
    top: 10%;
    right: 10%;
    border: 1px solid aqua !important;
    z-index: -6;
    /* background-color: aliceblue; */
}
.about-des{
    padding-top: 2%;
}
.about-des p{
    color: white;
}
.about-des p span{
    color: aqua;
}

.skills{
    /* margin-bottom: 10%;*/
    margin-left: 10%; 
}
.skill-section{
    margin-left: 2.5%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.skill-set{
    width: 270px;
    height: 150px;
    border-radius: 20px;
    /* border: 1px solid gray; */
    margin: 3% 4%;
    text-align: center;
    padding: 1% 1.5%;
    color: white;
    background-color: rgb(15, 15, 15);
    transition-duration: 1s;
}
.skill-set:hover{
    transform: scale(110%);
    background-color: rgb(48, 47, 47);
    transition-duration: 1s;
}

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.snip1217 {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
.snip1217 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1217 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 1.5em;
  padding: 0;
}
.snip1217 a {
  padding: 0.3em 0;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
  display: inline-block;
}
.snip1217 a:before,
.snip1217 a:after {
  height: 3px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-color: aqua;
  width: 0;
}
.snip1217 a:before {
  top: 0;
  left: 0;
}
.snip1217 a:after {
  bottom: 0;
  right: 0;
}
.snip1217 a:hover,
.snip1217 .current a {
  color: #ffffff;
}
.snip1217 a:hover:before,
.snip1217 .current a:before,
.snip1217 a:hover:after,
.snip1217 .current a:after {
  width: 100%;
}
.education{
    padding: 1% 3% 1% 8%;
}
.education-box{
    margin: 5% auto;
    background-color:rgb(180, 246, 246);
    opacity: 0.8;
    color: black;
    padding: 6% 7%;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    
}
.education-box h2{
    font-family: 'Rubik', sans-serif;
    margin-bottom: 12px;
}
.education-box p span{
    font-weight: bold;
    
}
.mywork{
    color: white;
    padding: 3% 1% 3% 18%;
    /* margin: auto 7%; */
}
.width-fix{
    width: 97% !important;
}
.projectName{
    padding: 2%;
    width: 100%;
    margin-bottom: 25px;
    border-bottom: 2px solid aqua;
    /* color: aqua; */
}
.mywork p a, .fa-arrow-up-right-from-square{
    /* text-decoration: ; */
    margin: 2% auto;
    color: rgb(171, 241, 241);
    /* font-size: 18px; */
}
.project-img{
    padding: 3%;
    /* display: flex; */
    /* align-items: center; */

    background-color: white;
    /* background-image: url(../images/placement-book-screenshot-min.png); */
    background-size: cover;
    background-position: top;
    transition: ease-in-out;
    transition-duration: 10s;
}
.project-img1{
    background-image: url(../images/placement-book-screenshot-min.png);
}
.project-img2{
    background-image: url(../images/MyDoctor-ss.png);
}
.project-img3{
    background-image: url(../images/organicLife-ss-min.jpg);
}
.project-img:hover{
    background-position: bottom;
    
}
.heading-margin-fix{
    margin-left: 0%;
}
.contact {
    padding: 3% 11%;
}
.contact-details{
    background-color: aqua;
    margin: 1% 1% 16px 1%;
    padding: 1% 1%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* align-items: center; */
}
.contact-details h6,.contact-details p{
    /* display: inline-block; */
    color:black;
}
.contact-details p{
    align-items: right;
    margin: auto 2%;
    /* text-align: right; */
}
.contact-details .p-1{
    /* margin-left: 30%; */
}
.contact form{
    margin: auto 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid gray;
    border-radius: 15px;
}
.contact form h3{
    color: rgb(180, 246, 246);
    margin-top: 2%;
}
.contact form .input{
    margin: 2% auto;
    
    width: 80%;
}
.submit-btn{
    padding: 1% 2%;
    background-color: rgb(180, 246, 246);
    border-radius: 15px;
    border: none;
    margin-bottom: 2%;
}
.submit-btn:hover{
    transform: scale(1.04);
    background-color: rgb(18, 121, 121);
}
.footer-section{
    text-align: center;
    /* color: white; */
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    /* justify-content: center; */
    margin: 1% 40% ;
}
@media only screen and (max-width:300px){
    .skill-set{
        margin: 3% 0% 3% 4%;
    }
    .border{
        display: none;
    }
    
    .skills-ul{
        margin: auto 0% auto 8%;
    }
}
@media only screen and (max-width:310px){
    .skill-set{
        width: 224px;
        height: 170px;
        margin-right: 1.77%;
    }
    .about-img{
        /* margin: 3% 0% 3% 8% !important; */
        padding-left: 10%;
    }
    .mywork{
        
    padding: 3% 1% 3% 21%;
    }
    .mywork p{
        line-height: 27px;
    }
}
@media only screen and (max-width:450px){
    .border{
        right: -2%;
        top: 6%;
    }
    .education{
        padding: 1% 5% 1% 17%;
    }
}
@media only screen and (min-width:768px){
    .about-des {
        padding: 7% 0% 0% 8%;
    }
}
@media only screen and (max-width:760px){
    .fa-facebook-f,.fa-instagram,.fa-github,.fa-linkedin-in,.fa-twitter{
        font-size: 1.5rem !important;
    }
    
    .skills-ul{
        background-color: rgb(25, 21, 21);
        margin: auto 5%;
    }
    .home{
        margin-top: 15%;
    }
    
    .education{
        padding: 1% 5% 1% 17%;
    }
    .education-box{
        margin: 10% auto;
    }
    .mywork h2{
        padding-left: 3%;
    }
    .project-img{
        height: 500px;
        margin-top: 2%;
    }
    .contact{
        padding: 3% 1%;
        margin: 1% 1% 1% 14%;
    }
}
@media only screen and (max-width:767px){
    .about-des{
        padding: 13% 0% 1% 13%;
        margin-top: 5%;
    }
    .about-img{
        margin: 3%;
    }
}
@media only screen and (min-width:760px){
    .education-box{
        padding: 4%;
    }
}
@media only screen and (min-width:995px){
    .menu-icon,.show-items{
        display: none !important;
    }
    nav .nav-ul li{
        display: inline-block;
        margin: 22px 3% ;
    }
    .project-img{
        height: 500px;
    }
}
@media only screen and (max-width:995px){
    /* nav{
        height: 55px;
    } */
    
    .nav-ul{
        background-color: black;
        /* margin-bottom: 44px; */
        height: 100vh;
        padding-top: 16px;
        border-left: 1px solid gray;
        text-align: center;
        display: none;
    }
    .nav-ul li{
        display: block;
        margin: 10% 18%;
        text-align: center;
        padding-bottom: 5px;
        border-bottom: 1px solid gray;
        /* background-color: black; */
    }
    .menu{
        display: none;
        
    }
    .project-img{
        height: 350px;
    }
}
@media only screen and (min-width:1160px){
    .skill-set {
        padding: 1%;
    }
}
.row>*{
    /* width: 92% !important;    */
}
.superParent{
    overflow-x: hidden;
}