@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
*,
*::after,
*::before{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html{
  /* standard size = 16px = 100% */
  /* we need fint size 10px so in percentage given below */
  font-size: 62.5%;
}

body{
  font-family: 'Poppins', sans-serif;
  background-color: #07131d;
}
#loader{
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: anim2 1.5s cubic-bezier(0.19, 1, 0.22, 1) 4s both;
}
#wrapperload{
  width: 70vw;
  height: 20vh;
  overflow: hidden;
}
#wrapperload .elem{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.elem p{
  font-size: 4vh;
}
.elem .elem-name{
  font-size: 6vh;
  font-weight: 600;
}
#wrapperload .elem:nth-child(1){
  animation: myanimation 2s cubic-bezier(0.19, 1, 0.22, 1) 1s both;
}
#wrapperload .elem:nth-child(2){
  animation: myanimation 2s cubic-bezier(0.19, 1, 0.22, 1) 2.5s both;
}
/* #wrapperload .elem:nth-child(3){
  animation: myanimation 2s cubic-bezier(0.19, 1, 0.22, 1) 4s both;
} */
@keyframes myanimation{
  to{
    margin-top: -100px;
  }
}
@keyframes anim2{
  to{
      transform: translateY(-100%);
  }
}

.container{
  max-width: 1200px;
  width: 70%;
  margin: auto;
}


.navbar input[type='checkbox'],
.navbar .hamburger-lines{
  display: none;
}

.navbar{
  /* box-shadow: 0px 5px 10px 0px #aaa;  */
  /* x y blur spread color */
  position: fixed;
  width: 100%;
  background-color: rgb(255, 255, 255);
  color: #000;
  opacity: 0.80;
  z-index: 999;
}

.navbar-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
.menu-items{
  order:2;
  display: flex;
}
.logo{
  order: 1;
  font-size: 2rem;
  color: rgb(6, 32, 84);
}
.menu-items li{
  list-style: none;
  font-size: 1.2rem;
  margin-left: 2.5rem;
}

.navbar a{
  color: #444;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.4s ease-in-out;
}
.navbar a:hover{
  color: teal;
}





#showcase{
  padding-bottom: 15rem;
  background-image: linear-gradient(to right, #2b5876 , #4e4376);
  /* height: 60vh; */
} 
.showcase-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  height: 100%;
}

.lamp-container{
  height: 30vh;
  box-sizing: border-box;
  max-width: 2000px;
  width: 70%;
  /* margin: auto; */
}
.lamp-container .lamp{
  top: 0;
  margin-left: 22%;
  height: 135%;
}
.lamp-container .light{
  margin-left: -50.9vh;
  margin-bottom: -46vh;
  height: 154%;
  max-width: 800px;
  opacity: 0;
  transition: opacity 0.5s;
}

.lamp-heading{
  margin-left: 55vw;
  margin-right: 5vw;
  font-size: 4rem;
  color: tan;
}
button{
  background-color: #efefef;
  border-radius: 20vh;
  width: 25vh;
  height: 9.2vh;
  cursor: pointer;
  outline: 0;
  border: 0;
  transition: background-color 0.5s;
  margin-left: 55vw;
  margin-top: 5vh;
}
button span{
  background-color: rgb(94, 91, 91);
  display: block;
  border-radius: 50%;
  height: 8vh;
  width: 8vh;
  outline: 0;
  border: 0;
  margin-left: 1vh;
  transition: background-color 0.5s, margin-left 0.5s;
}
.active{
  background-color: rgb(230, 179, 10);
}
.active span{
  background: #fff;
  /* margin-left: 54px; */
  margin-left: 15.7vh;
}
.lamp-container .on{
  opacity: 1;
}

.about{
  padding: 10rem 0;
  background-color: rgb(248, 227, 239);
  background-image: linear-gradient(to right, #dd5e89 , #f7bb97);
  height: 40rem;
  box-sizing: border-box;
}
.about-wrapper{
  display: flex;
  justify-content:center;
  box-sizing: border-box;
  height: 100%;
  margin: auto;
  width: 45%;
  max-width: 1200px;
}
.about-text{
  height: 100%;
  /* border: 2px solid rgb(23, 26, 25); */
  margin-right: 18rem;
  display: flex;
  flex-direction: column;
  width: 80%;
  max-width: 1200px;
  justify-content: center;
  transform: translateX(-150%);
  animation: about-text-animate 1s ease-in-out forwards;
}
@keyframes about-text-animate{
  100%{
    transform: translateX(0);
  }
}
.about-text h2{
  font-size: 2rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.about-text button a:link{
  color: white
}
.about-text button a:visited {
  color: white;
}
.about-text .about-button{
  margin: 0;
  margin-top: 2rem;
  background-color: rgb(0, 0, 0);
  border-radius: 19vh;
  width: 19vh;
  height: 6.199999999999999vh;
  cursor: pointer;
  outline: 0;
  border: 0;
  transition: background-color 1s;
  transition: color 0.5s;
}
.about-text .about-button:hover{
  background-color: rgb(97, 4, 4);
  color: #efefef;
}
.about-text p{
  margin-top: 2rem;
  width: 30rem;
  font-weight: 500;
  font-size: 1.12rem;
}
.about-img{
  transform: translateX(150%);
  animation: about-img-animate 1s ease-in-out forwards;
}
@keyframes about-img-animate{
  100%{
    transform: translateX(0);
  }
}
.about-img img{
  height: 110%;
  width: auto;
}

/* .contact{
  height: 70vh;
  background: rgb(31, 30, 30);
} */
.contact-content{
  padding: 8vh 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-image: url('./quote-motivational-digital-art-typography-wallpaper-preview.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 80%;

}
.contact form{
  background-color: white;
  border-radius: 1%;
  outline: none;
  border: none;
  max-width: 55rem;
  width: 40%;
  margin: auto;
  /* margin-left: 14rem; */
  margin-left: 10%;
  position: relative;
  height: 105%;
  box-sizing: border-box;
  padding: 2rem;
  
}
/* .contact form > *{
  width: 100%;
  padding: 0.5rem;
  outline: none;
  border: 0.5px solid white;
  box-sizing: border-box;
} */
form div{
  /* margin: 1rem 0; */
  margin-bottom: 1.7rem;
  /* height: 25%; */
}
form .contact-div{
  /* padding-bottom: 3rem; */
  height: 15%;
}
form label{
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  /* padding-bottom: 1rem; */
} 
form input,textarea{
  /* padding: 10px 0; */
  width: 100%;
  box-sizing: border-box;
  outline: none;
  resize: none;
  border: none;
  border-bottom: 1px solid #d3d3d3;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 0;
}
.contact form h1{
  font-size: 2rem;
  color: tomato;
}
input[type='text']:focus, textarea:focus {
  border-bottom: 1px solid red;
  /* color: #444;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.4s ease-in-out; */
}
.center{
  width: 60%;
  margin: auto;
}
input[type='submit']{
  margin-top: 1.2rem;
  background-color: wheat;
  padding: 0.5rem;
  color: #444;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.4s ease-in-out;
  border-radius: 19vh;
  cursor: pointer;
}
input[type='submit']:hover{
  background-color: teal;
  color: whitesmoke;
}
.error{
  color: red;
  font-weight: 500;
}
.success{
  color: green;
  width: 40%;
  margin: auto;
}

.quote{
  background-color: rgb(6, 17, 38);
  background-image: linear-gradient(to right,#141e30, #243b55);
  height: 35vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.quote-div h1{
  color: #ffffff;
  font-size: 2.4rem;
}

.profile-links{
  background-color: #ffb600;
}
.links-heading{
  color: black;
  padding-top: 5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  letter-spacing: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-links .links-button{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 7rem 0;
}
.links-button .link-btn{
  background-color: white;
  margin: 0;
  width: 11vw;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  outline: none;
  font-weight: 600;
}
.link-btn a{
  text-decoration: none;
  color: #000;
}
.links-button .link-btn:hover{
  /* background-color: rgb(220, 220, 220); */
  /* background-color: #011e37; */
  background-image: linear-gradient(to right,#141e30, #243b55);
  color: white;
  
}





/* .links{
  height: 60vh;
  background-color: rgb(8, 49, 45);
  background-image: linear-gradient(to right, #ff512f, #dd2476);
}
.links-div{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7rem;
}
.links-div a{
  padding: 5rem;
  font-size: 2rem;
}
.links-div a img{
  height: 15vh;
  width: 7vw;
  border-radius: 2rem;
} */

.projects{
  /* height: 80vh; */
  background-color: rgb(0, 0, 0);
  box-sizing: border-box;
  
}
.project-heading{
  padding-top: 7rem;
  font-family: 'Poppins', sans-serif;
  color: wheat;
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.projects-list{
  display: flex;
  flex-direction: column;

}

.projects-list .project1{
  background-color: white;
  height: 40vh;
  width: 70vw;
  margin: 4rem auto;
  display: block;
  outline: none;
  border-radius: 5px;
  /* margin-top: 8rem; */

}
.inner-project1{
  font-family: 'Poppins', sans-serif;
  width: 93%;
  height: 85%;
  background-color: rgb(228, 228, 228);
  margin: auto;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.inner-project1 img{
  height: 100%;
  width: 25vw;
  border-radius: 5px 0 0 5px;
}
.inner-project1 .project-text{
  margin-top: 1rem;
  margin-left: 2vw;
  width: 36vw;
}
.inner-project1 .project-text h1{
  padding: 0;
  color: rgba(107, 55, 9, 0.6);
  margin-bottom: 1rem;
}
.inner-project1 .project-text p{
  font-weight: 500;
  font-size: 1rem;
}
.inner-project1 .project-text button{

  margin: 1rem 0;
  font-weight: 500;
  font-size: 1.4rem;
  height: 3rem;
  width: 9vw;
  outline: none;
  border-radius: 15px;
}
.project-text a{
  text-decoration: none;
  color: whitesmoke;
}
.inner-project1 .project-text .live-project{
  /* background-color: green; */
  background-image: linear-gradient(to right,#000428 , #004e92);
  color: whitesmoke;
}


.inner-project1 .project-text .code-project{
  margin-left: 1rem;
  /* background-color: rgb(151, 1, 121); */
  background-image: linear-gradient(to right, #cc2b5e , #753a88);
  color: whitesmoke;
}
/* .projects .projects-div{
  background-color: black;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
} */
.projects h1{
  color: white;
  font-size: 2rem;
  padding: 1rem 0;
}
.projects .list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80%;
  color: white;
  width: 100%;
  padding: 0 4vw;
}
.projects .list ul{
  width: 15vw;
  height: 100%;
}
.projects .list ul img{
  height: 80%;
  width: 15vw;
  border-radius: 1rem;
}
.projects .list ul a{
  height: 20%;
  width: 15vw;
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
}



.contact{
  box-sizing: border-box;
  width: 100vw;
  margin: 0;
  background-color: #93063e;
  padding: 5vh 0;
  height: 30vh;
}
.contact-background1{
  width: 70vw;
  margin: 0 auto;
  height: 20vh;
  background-color: #f7bb97;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
.contact-heading{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
.contact-details{
  width: 29%;
  margin: 0 auto;
}
.copyright{
  font-size: 1.5rem;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .contact-background2{
  height: 140%;
  width: 40vw;
  background-color: whitesmoke;
  margin: 0 auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} */