@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");

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html,
body {
  /* width: 100%; */
  height: 100%;
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
  background: #e0e0e0;
  color: #2D2D2D;
  /* overflow-x: hidden; */
}

li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

button{
  border: 1px solid black;
  color: #000;
}

button:hover{
  background-color: #383838;
  color: white;
  transition: background-color 0.3s linear;
}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */



/* Dark Mode classes */
.color{
  color: #D2D5DD;
}
.button{
  border: 1px solid #D2D5DD;
  color: #D2D5DD;
}
.button:hover{ 
  background-color: #D2D5DD;
  transition: background-color 0.3s linear;
}
.dark-mode {
  background-color: #2b3d4f;
  color: #D2D5DD;
}
.dark-menu{
  background-color: #2b3d4f;
  /* color: #D2D5DD; */
}


/* ---------------------         navbar scroll section        ------------------- */
.DarknavScroll {
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10%;
  margin-top: 0.5em;
  border-radius: 40px;
  background-color:#222f3e;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 9999;
  transition: background-color 0.3s ease-out;
}
/*---------------------- dark mode classes for  about section -------------------*/

.about-darkmode {
  padding: 3rem 3rem;
  backdrop-filter: blur(10px);
  background-color: #222f3e;
  border-radius: 25px;
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
 
}



/* --------------------- dark mode classes for projectinfo   ------------------------------ */





.Darkmodal{
  /* border: 5px solid blue; */
  height: 100%;
  
  padding: 1em;
}


.DarkprojectModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  /* border: 1px solid green; */
  height: 100%;
  /* width: 100%; */
  background-color: rgba(0, 0, 0, 0.305);
  backdrop-filter: blur(10px);
  /* display: flex; */
  flex-direction: column;
  justify-content: start;
  align-items: center;
  z-index: 9999;
  /* overflow-x: hidden; */
}








.Darkcross:hover + .Darkcross svg {
  border: none;
  background-color: #383838;
  color: #ffffff;
  transition: all 0.3s linear;
}


.Darkcrossbtn {
  width: 100%;
  /* border: 1px solid red; */
}


.Darkcross {
  margin: 1em 1em;
  padding: 0.5em;
  float: right;
  border: 1px solid #D2D5DD;
  color: #D2D5DD;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border-radius: 50%;
}

.dark-visitbtn {
  padding: 1.3rem 1.5rem;
  background-color: transparent;
  border: 1px solid #D2D5DD;
  color: #D2D5DD;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 2em;
}

.Darkcross svg {
  width: 25px;
}


.DarkprojectInfo {
  background-color: #222f3e;
  height: 100%;
  /* margin: 0em 0em;  */
  /* border: 1px solid red;  */
  border-radius: 20px; 
  margin: 0em 0em; 
  display: flex;
  justify-content: center;
  align-items: center; 
}

.DarkprojectInfo1,
.DarkprojectInfo2 {
  /* border: 1px solid green; */
   width: 50%;
}

.DarkprojectInfo1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2em 2em;
}


.DarkprojectInfo2 {
 /* border: 1px solid red; */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: start;
 padding: 2em 4em;
}




.DarkprojectInfo h2 {
  margin: 0.2em 0;
}

.DarkprojectInfo h2 span {
  font-size: 1.4rem;
  font-weight: 200;
}

.DarkprojectInfo p {
  text-align: justify;
}







/*-------------------------- dark mode buttons class -------------------------*/

.dark-visitbtn {
  padding: 1.3rem 1.5rem;
  background-color: transparent;
  border: 1px solid #D2D5DD;
  color: #D2D5DD;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 2em;
}




.dark-formbtn {
  border: 2px solid #D2D5DD;
  color: #D2D5DD;
  padding: 1.2em 3em;
  border-radius: 30px;
  background-color: transparent;
  cursor: pointer;
  margin: 2em 0;
}

.dark-socialiconbtn {
  border: 2px solid #D2D5DD;
  color: #D2D5DD;
  padding: 1em 1em;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.5em;
}

.dark-socialiconbtn svg {
  width: 30px;
  height: 30px;
  color: #D2D5DD;
}

.dark-resumebtn:hover,
.dark-rightarrowbtn:hover,
.darkhover-btn:hover,
.dark-formbtn:hover,
.dark-visitbtn:hover,
.Darkcross:hover {
  border: none;
  color: #000;
  background-color: #D2D5DD;
  transition: background-color 0.3s linear;
}


/* ---------------------- dark mode contact form classes ----------------------*/

.darkinput,
.darktextarea {
  color: #D2D5DD;
  border: none;
  position: absolute;
  width: 100%;
  height: 40px;
  outline: none;
  padding: 0 1em;
  background-color: transparent;
  font-size: 1rem;
  padding: 1em;
  transition: 0.1s ease;
  border-bottom: 2px solid #D2D5DD;
}

.darktextarea {
  height: 150px;
}

.darkinput:focus,
.darktextarea:focus {
  color: #D2D5DD;
  border: 2px solid #D2D5DD;
}

.darklabel {
  position: absolute;
  margin: 0.4em 2em;
  background-color: transparent;
  transition: 0.2s ease;
}

.darkinput:focus+.darklabel,
.darktextarea:focus+.darklabel,
.darkinput:valid + .darklabel,
.darktextarea:valid +.darklabel {
  margin: 0em 1.6em;
  padding: 0.1em 0;
  color: #D2D5DD;
  height: 30px;
  outline: none;
  background-color: #2b3d4f;
  transform: translate(-15px, -16px) scale(0.88);
}
/*----------------- darkmode for project-card ------------------------------*/

.darkproject-card {
  display: flex;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: space-evenly;
  padding: 0;
  border-bottom: 2px solid #D2D5DD;
  align-items: center;

}

.darkproject-card:hover {
  cursor: pointer;
}

.darkproject-card h3 {
  font-size: 2.1rem;
  font-weight: 200;
  width: 1000px;
}

.darkproject-div {
  position: relative;
}

/* ------------------------------ dark-mode footer section ~ ----------------------------------  */
.footer-darkmode {
  background-color: #222f3e;
  color: #D2D5DD;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}




.nightmodebtn:hover {
  background-color: transparent;
  border: none;
}

/* noramal mode styling */
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.border {
  border: 2px solid #D2D5DD;
  ;
}


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


/* ---------------------------- light mode styling ---------------------------*/

.landing {
  position: relative;
  height: 100vh;
}




.content { 
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  /* border: 3px solid green; */
  width: 100%;
  height: 100%;
  background-color: transparent;
}



nav {
  height: 12vh;
  display: flex;
  justify-content: center;
  align-items: center;   
}



.hamburger-btn {
  background-color: transparent;
  border: none;
  display: none;
  width: 40px;
  height: 40px;
}
.nav-ul li:nth-child(1){
  display: none;
}
.navbarOnScroll {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10%;
  margin-top: 0.5em;
  border-radius: 40px;
  background-color: white;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 9999;
  transition: background-color 0.3s ease-out;
}

/* .navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: 1px solid black;
}
.nav-ul{
  border: 1px solid green;
} */

/*

.Logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3em;
} */

/*  

.nav-heading {
  font-size: 2rem;
}*/
/* .hamburger{
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
} */

/* .nav-menu{
  display: none;
} */
 
/* #hamburger-label:checked ~ .nav-ul{
  display:flex ;
}  */

/* #overlay{
  display: flex;
  border: 1px solid green;
  width: 50px;
  height: 50px;
} */
.nav-menu{
  /* border: 1px solid red; */
  background-color: transparent;
} 
.nav-ul {
  display: flex;
  justify-content: space-between;
} 


 .nav-ul>li {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}

.nav-ul > li > a {
  /* color: #000; */
  font-size: 1.2rem;
}

.nav-ul > li > a:hover {
  text-decoration: underline;
} 

.main {
  height: calc(100vh - 12vh);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* border: 1px solid red; */
}

.intro-text {
  text-align: center;
}

.text {
  /* width: 100%; */
  font-size: 3rem;
  font-weight: 300;
}

.text2 {
  font-size: 4rem;
}

.text3 {
  font-size: 4.5rem;
  font-weight: 500;
}


/* buttons classes */

.nightmodebtn {
  border: none;
  width: 40px;
  background-color: transparent;
  cursor: pointer;
}

.resumebtn {
  padding: 1.3em 1.5em;
  text-align: center;
  border-radius: 30px;
  margin: 1em;
  cursor: pointer;
  background-color: transparent;
  /* border: 1px solid black; */
}

.form-btn {
  padding: 1.2em 3em;
  border-radius: 30px;
  background-color: transparent;
  cursor: pointer;
  /* margin: 2em 0; */
}

.Social-media {
  /* border: 2px solid black; */
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-icon {
  padding: 1em 1em;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.5em;
}

.social-icon svg {
  width: 30px;
  height: 30px;
}



.visit-btn {
  padding: 1.3rem 1.5rem;
  background-color: transparent;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 2em;
}



.project-infobtn:hover,
.visit-btn:hover{
  border: 2px solid #383838;
  background-color: #383838;
  color: white;
  transition: background-color 0.3s linear;
}



/* about */


.about-me {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* border: 1px solid red; */
}

.about-main {
  padding: 3rem 3rem;
  background-color: rgb(54, 54, 54);
  backdrop-filter: blur(10px);
  border-radius: 25px;
  /* gap: 3rem; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-photo {
  /* padding: em 1em; */
  /* border: 2px solid red; */
  border-radius: 3%;
  overflow: hidden;
  padding: 2rem 13rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
}

.about-intro {
  padding: 3em 3em;
  /* border: 2px solid green; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: justify;
  color: white;
}

.about-img {
  width: 300px;
  height: 380px;
  border-radius: 8%;
}

.about-heading {
  font-size: 2rem;
  font-weight: 300;
}

.about-para {
  /* text-align: justify; */
  word-spacing: 0.1rem;
  font-size: 1.2rem;
  font-weight: 200;
  margin-top: 1em;
}

.about-btn {
  padding: 1rem 0.7rem;
  text-align: center;
  border-radius: 10px;
  margin-top: 1rem;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}



/* skills */
.skill {
  height: auto;
  padding: 4rem 0;
  overflow: hidden;
}

.skill-heading {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.skill-heading>h2,
.work-heading>h2 {
  text-align: center;
  font-size: 2rem;
  text-transform: uppercase;
}

.skill-jumbotron {
  overflow: hidden;
  height: 250px;
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.skill-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2.5rem;
  animation: slideRightToLeft 35s linear infinite;
  will-change: transform;
}

.skill-jumbotron:hover .skill-track {
  animation-play-state: paused;
}

@keyframes slideRightToLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.card {
  flex-shrink: 0;
  min-width: 150px;
  max-width: 250px;
  margin: 0;
  height: 150px;
  background: rgb(255, 255, 255);
  transition: all 0.4s;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.305);
  font-size: 30px;
  font-weight: 900;
}

.card:hover {
  border-radius: 15px;
  cursor: pointer;
  transform: scale(1.2);
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.305);
  background: rgb(255, 255, 255);
}

.first-content {
  height: 100%;
  width: 100%;
  transition: all 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  border-radius: 15px;
}

.first-content img {
  height: 50%;
  width: 50%;
}

.card:hover .first-content {
  height: 0px;
  opacity: 0;
}

.second-content {
  height: 0%;
  width: 100%;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  transition: all 0.4s;
  font-size: 0px;
  transform: rotate(90deg) scale(-1);
}

.card:hover .second-content {
  opacity: 1;
  height: 100%;
  font-size: 1.1rem;
  transform: rotate(0deg);
  text-transform: uppercase;
  font-weight: 300;
}

/*------------------------------- work ----------------------------------------*/
.work-div {
  background-image: url("img/services/services-bg.jpg");
  background-position: center;
  background-size: cover;
  padding: 5em;
  margin-top: 3em;
  /* border: 1px solid red; */
  /* text-align: center; */
  display: grid;
  grid-template-columns: repeat(3, 300px);
  grid-template-rows: repeat(2, 430px);
  row-gap: 50px;
  column-gap: 100px;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */

}

.work-heading {
  margin-top: 2em;
}

.work-heading h3 {
  text-align: center;
  font-weight: 300;
}

.work-card {
  /* border: 1px solid white; */
  /* backdrop-filter: blur(5px); */
  /* background-color: white; */
  color: white;
  border-radius: 30px;
  height: 400px;
  width: 290px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
}

.work-card svg {
  color: #dcdcdc;
  width: 50px;
  height: 50px;
  /* border: 1px solid white; */
}

.work-card:hover {
  scale: 1.03;
}

.work-card h2 {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0.5em 0 0 0;
}

.work-card p {
  font-size: 0.8rem;
  text-align: justify;
  padding: 0 1em;
}

.work-card img {
  color: #ffff;
  margin-top: 3em;
  width: 60px;
  height: 60px;
}

/*--------------------------- project section ---------------------------------*/

.project {
  /* border: 1px solid red; */
  height: 100vh;
  margin-top: 15em;
  position: relative;
}


.projectdiv {
  display: flex;
  margin: 0 5em;
  flex-direction: column;
}

.project-heading {
  height: 150px;
}


.project-heading h2 {
  /* border: 1px solid red; */
  font-size: 5rem;
  padding-left: 1em;
  font-weight: 300;
}

.project-card {
  display: flex;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: space-evenly;
  padding: 0;
  border-bottom: 2px solid black;
  align-items: center;
  
}

.project-card:hover {
  cursor: pointer;
}

.project-card h3 {
  font-size: 2.1rem;
  font-weight: 200;
  width: 1000px;
}

.project-div {
  position: relative;
}

.right-arrow {
  cursor: pointer;
  padding: 1.5rem;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}


.hover-btn {
  color: #ffffff;
  border: none;
  background-color: #383838;
  transition: background-color 0.3s linear;
}

.right-arrow svg {
  width: 50px;
}

.modal{
  /* border: 5px solid blue; */
  height: 100%;
  padding: 2em;
  overflow-y: hidden;
}

.project-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  /* border: 1px solid green; */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.305);
  backdrop-filter: blur(10px);
  /* display: flex; */
  flex-direction: column;
  justify-content: start;
  align-items: center;
  z-index: 9999;
}

.project-info {
  background-color: #dcdcdc;
  height: 100%;
  margin: 0em 0em;
  /* border: 1px solid red; */
  border-radius: 20px;
  /* margin: 1em 2em; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.cross-btn {
  width: 100%;
  /* border: 1px solid red; */
}

.cross {
  margin: 1em 1em;
  padding: 0.5em;
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border-radius: 50%;
}

.cross:hover + .cross svg {
  border: none;
  background-color: #383838;
  color: #ffffff;
  transition: all 0.3s linear;
}

.cross svg {
  width: 25px;
}

.project-info1,
.project-info2 {
  /* border: 1px solid green; */
  width: 50%;
}

.project-info1 {
  /* border: 1px solid red; */
  /* display: none; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2em 2em;
  
}

.project-info2 {
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 3em 4em;
}

.project-info h2 {
  margin: 0.2em 0;
}

.project-info h2 span {
  font-size: 1.4rem;
  font-weight: 200;
}

.project-info p {
  text-align: justify;
}

.img {
  /* display: none; */
  width: 500px;
  height: 400px;
}

/*----------------------------- Contact Form ---------------------------------*/


.contact-heading {
  margin-bottom: 2rem;
  text-align: center;
  /* border: 1px solid   red; */
}

.contact-heading h3,
.contact-heading p {
  margin: 0.1em 0;
  font-size: 1.4rem;
}

.contact-heading h2 {
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight:500;
  text-align: center;
  margin-bottom: 1rem;
}


.contact-form {
  margin-top: 5em;
  height: 100vh;
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* margin-top: 3em; */
}

form {
  /* border: 1px solid green; */
  width: 900px;
  height: max-content;
 
}

.form-row1 {
  /* border: 1px solid red; */
  height: 50px;
}

.form-row2 {
  /* border: 1px solid green; */
  height: 50px;
  margin: 1em 0;
}

.form-row3 {
  /* border: 1px solid blue; */
  height: 50px;
}

.form-row4 {
  padding: 2em 0;
  text-align: center;
}



.input-name,
.input-mobile,
.input-email,
.input-msg {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.input-name {
  margin-right: 2em;
}

input,
textarea
 {
  font-family: "poppins";
  border: none;
  position: absolute;
  width: 100%;
  height: 40px;
  outline: none;
  padding: 0 1em;
  background-color: transparent;
  font-size: 1rem;
  padding: 1em;
  transition: 0.1s ease;
  border-bottom: 2px solid black;
}

textarea ,.form-row3{
  height: 150px; 
}

input:focus,
textarea:focus
 {
  color: black;
  border: 2px solid black;
}

label {
  position: absolute;
  margin: 0.4em 2em;
  background-color: transparent;
  transition: 0.2s ease;
}




input:focus+label,
textarea:focus+label,
input:valid + label,
textarea:valid +label
{
  margin: 0em 1.6em;
  padding: 0.1em 0;
  color: black;
  height: 30px;
  outline: none;
  background-color: #dcdcdc;
  transform: translate(-15px, -16px) scale(0.88);
  
}

/*--------------------------- footer bar --------------------------------------*/
.main-footer {
  margin-top: 12em;
  display: flex;
  flex-direction: column;
}

.main-footer1 {
  overflow: hidden;
  /* margin: 0;
  padding: 0; */
  height: 100px;
}

.main-footer2 {
  background-color: #292929;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.footer {
  /* border: 1px solid red; */
  overflow-x: hidden;
  display: flex;
  color: #fff;
  justify-content: center;
  align-items: center;
  padding: 3rem 0;
}
.footer-link{
 color: white;
}

.footer-div1,
.footer-div2,
.footer-div3 {
  width: 33%;
}

.footer-div1 p {
  text-align: justify;
  /* padding: 5rem; */
}

.footer-div2 {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

.footer-div2 li {
  text-align: center;
  font-size: 1.1rem;
  cursor: pointer;
  font-weight: 300;
}

.footer-div2 li:hover {
  border-bottom: 1px solid #fff;
}

.footer-div2 button {
  padding: 1rem 1rem;
  margin-top: 2rem;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
}

.footer-div2 button:hover {
  background-color: #fff;
  color: black;
  transition: 0.3s linear;
}

.footer-div2 button:active {
  background-color: transparent;
  color: #fff;
  transition: none;
}

.footer-name,
.footer-mobile,
.footer-email {
  font-size: 1.2rem;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.3em 0;
}

.footer-name svg,
.footer-mobile svg,
.footer-email svg {
  text-align: center;
  width: 20px;
  height: 20px;
  margin: 0em 0.3em;
}

.footer-div3 {
  /* border: 1px solid red; */
  height: 15em;
  display: flex;
  justify-content: start;
  padding: 1rem 0rem;
  align-items: center;
  flex-direction: column;
}


.footer-ending {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.footer-ending .social-icon {
  background-color: #b0b0b0;
  color: #121212;
}



#copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0em 0em 1em 0em;
  font-size: 1.1rem;
  color: white;
}

#footer-svgpath1 {
  animation: path1 5s linear infinite;
}


.footer-socialIcon {
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes path1 {
  0% {
    d: path("M0 33L10.5 32.2C21 31.3 42 29.7 62.8 28.5C83.7 27.3 104.3 26.7 125.2 30C146 33.3 167 40.7 187.8 41.3C208.7 42 229.3 36 250.2 34.7C271 33.3 292 36.7 313 36.2C334 35.7 355 31.3 375.8 29.5C396.7 27.7 417.3 28.3 438.2 27C459 25.7 480 22.3 500.8 21C521.7 19.7 542.3 20.3 563.2 25C584 29.7 605 38.3 626 39.3C647 40.3 668 33.7 688.8 28.8C709.7 24 730.3 21 751.2 24.2C772 27.3 793 36.7 814 37.7C835 38.7 856 31.3 876.8 30.3C897.7 29.3 918.3 34.7 939.2 37C960 39.3 981 38.7 1001.8 38C1022.7 37.3 1043.3 36.7 1064.2 33.2C1085 29.7 1106 23.3 1127 23.7C1148 24 1169 31 1189.8 34.5C1210.7 38 1231.3 38 1252.2 35C1273 32 1294 26 1314.8 22.3C1335.7 18.7 1356.3 17.3 1377.2 18.5C1398 19.7 1419 23.3 1429.5 25.2L1440 27L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z");
  }

  50% {
    d: path("M0 48L10.5 45.8C21 43.7 42 39.3 62.8 38C83.7 36.7 104.3 38.3 125.2 41.3C146 44.3 167 48.7 187.8 48.5C208.7 48.3 229.3 43.7 250.2 41.3C271 39 292 39 313 40.5C334 42 355 45 375.8 44.3C396.7 43.7 417.3 39.3 438.2 38.5C459 37.7 480 40.3 500.8 44C521.7 47.7 542.3 52.3 563.2 51.2C584 50 605 43 626 39.8C647 36.7 668 37.3 688.8 38.7C709.7 40 730.3 42 751.2 42.8C772 43.7 793 43.3 814 43.2C835 43 856 43 876.8 41.3C897.7 39.7 918.3 36.3 939.2 37.3C960 38.3 981 43.7 1001.8 43.5C1022.7 43.3 1043.3 37.7 1064.2 34.7C1085 31.7 1106 31.3 1127 34.2C1148 37 1169 43 1189.8 44.8C1210.7 46.7 1231.3 44.3 1252.2 42.8C1273 41.3 1294 40.7 1314.8 43C1335.7 45.3 1356.3 50.7 1377.2 49.5C1398 48.3 1419 40.7 1429.5 36.8L1440 33L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z");
  }

  100% {
    d: path("M0 33L10.5 32.2C21 31.3 42 29.7 62.8 28.5C83.7 27.3 104.3 26.7 125.2 30C146 33.3 167 40.7 187.8 41.3C208.7 42 229.3 36 250.2 34.7C271 33.3 292 36.7 313 36.2C334 35.7 355 31.3 375.8 29.5C396.7 27.7 417.3 28.3 438.2 27C459 25.7 480 22.3 500.8 21C521.7 19.7 542.3 20.3 563.2 25C584 29.7 605 38.3 626 39.3C647 40.3 668 33.7 688.8 28.8C709.7 24 730.3 21 751.2 24.2C772 27.3 793 36.7 814 37.7C835 38.7 856 31.3 876.8 30.3C897.7 29.3 918.3 34.7 939.2 37C960 39.3 981 38.7 1001.8 38C1022.7 37.3 1043.3 36.7 1064.2 33.2C1085 29.7 1106 23.3 1127 23.7C1148 24 1169 31 1189.8 34.5C1210.7 38 1231.3 38 1252.2 35C1273 32 1294 26 1314.8 22.3C1335.7 18.7 1356.3 17.3 1377.2 18.5C1398 19.7 1419 23.3 1429.5 25.2L1440 27L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z");
  }
}


#footer-svgpath2 {
  animation: path2 5s linear infinite;
}

@keyframes path2 {
  0% {
    d: path("M0 48L10.5 45.8C21 43.7 42 39.3 62.8 38C83.7 36.7 104.3 38.3 125.2 41.3C146 44.3 167 48.7 187.8 48.5C208.7 48.3 229.3 43.7 250.2 41.3C271 39 292 39 313 40.5C334 42 355 45 375.8 44.3C396.7 43.7 417.3 39.3 438.2 38.5C459 37.7 480 40.3 500.8 44C521.7 47.7 542.3 52.3 563.2 51.2C584 50 605 43 626 39.8C647 36.7 668 37.3 688.8 38.7C709.7 40 730.3 42 751.2 42.8C772 43.7 793 43.3 814 43.2C835 43 856 43 876.8 41.3C897.7 39.7 918.3 36.3 939.2 37.3C960 38.3 981 43.7 1001.8 43.5C1022.7 43.3 1043.3 37.7 1064.2 34.7C1085 31.7 1106 31.3 1127 34.2C1148 37 1169 43 1189.8 44.8C1210.7 46.7 1231.3 44.3 1252.2 42.8C1273 41.3 1294 40.7 1314.8 43C1335.7 45.3 1356.3 50.7 1377.2 49.5C1398 48.3 1419 40.7 1429.5 36.8L1440 33L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z");
  }

  50% {
    d: path("M0 33L10.5 32.2C21 31.3 42 29.7 62.8 28.5C83.7 27.3 104.3 26.7 125.2 30C146 33.3 167 40.7 187.8 41.3C208.7 42 229.3 36 250.2 34.7C271 33.3 292 36.7 313 36.2C334 35.7 355 31.3 375.8 29.5C396.7 27.7 417.3 28.3 438.2 27C459 25.7 480 22.3 500.8 21C521.7 19.7 542.3 20.3 563.2 25C584 29.7 605 38.3 626 39.3C647 40.3 668 33.7 688.8 28.8C709.7 24 730.3 21 751.2 24.2C772 27.3 793 36.7 814 37.7C835 38.7 856 31.3 876.8 30.3C897.7 29.3 918.3 34.7 939.2 37C960 39.3 981 38.7 1001.8 38C1022.7 37.3 1043.3 36.7 1064.2 33.2C1085 29.7 1106 23.3 1127 23.7C1148 24 1169 31 1189.8 34.5C1210.7 38 1231.3 38 1252.2 35C1273 32 1294 26 1314.8 22.3C1335.7 18.7 1356.3 17.3 1377.2 18.5C1398 19.7 1419 23.3 1429.5 25.2L1440 27L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z")
  }

  100% {
    d: path("M0 48L10.5 45.8C21 43.7 42 39.3 62.8 38C83.7 36.7 104.3 38.3 125.2 41.3C146 44.3 167 48.7 187.8 48.5C208.7 48.3 229.3 43.7 250.2 41.3C271 39 292 39 313 40.5C334 42 355 45 375.8 44.3C396.7 43.7 417.3 39.3 438.2 38.5C459 37.7 480 40.3 500.8 44C521.7 47.7 542.3 52.3 563.2 51.2C584 50 605 43 626 39.8C647 36.7 668 37.3 688.8 38.7C709.7 40 730.3 42 751.2 42.8C772 43.7 793 43.3 814 43.2C835 43 856 43 876.8 41.3C897.7 39.7 918.3 36.3 939.2 37.3C960 38.3 981 43.7 1001.8 43.5C1022.7 43.3 1043.3 37.7 1064.2 34.7C1085 31.7 1106 31.3 1127 34.2C1148 37 1169 43 1189.8 44.8C1210.7 46.7 1231.3 44.3 1252.2 42.8C1273 41.3 1294 40.7 1314.8 43C1335.7 45.3 1356.3 50.7 1377.2 49.5C1398 48.3 1419 40.7 1429.5 36.8L1440 33L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z")
  }
}

#footer-svgpath3 {
  animation: path3 5s linear infinite;
}

@keyframes path3 {
  0% {
    d: path("M0 51L10.5 51.3C21 51.7 42 52.3 62.8 52.3C83.7 52.3 104.3 51.7 125.2 51C146 50.3 167 49.7 187.8 49.5C208.7 49.3 229.3 49.7 250.2 52.3C271 55 292 60 313 63.2C334 66.3 355 67.7 375.8 66.2C396.7 64.7 417.3 60.3 438.2 58.7C459 57 480 58 500.8 59.2C521.7 60.3 542.3 61.7 563.2 60.5C584 59.3 605 55.7 626 53C647 50.3 668 48.7 688.8 48.7C709.7 48.7 730.3 50.3 751.2 51C772 51.7 793 51.3 814 52.8C835 54.3 856 57.7 876.8 58.5C897.7 59.3 918.3 57.7 939.2 56.3C960 55 981 54 1001.8 54.7C1022.7 55.3 1043.3 57.7 1064.2 59.8C1085 62 1106 64 1127 63.8C1148 63.7 1169 61.3 1189.8 61C1210.7 60.7 1231.3 62.3 1252.2 60.3C1273 58.3 1294 52.7 1314.8 51.5C1335.7 50.3 1356.3 53.7 1377.2 55.7C1398 57.7 1419 58.3 1429.5 58.7L1440 59L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z");
  }

  50% {
    d: path("M0 48L10.5 45.8C21 43.7 42 39.3 62.8 38C83.7 36.7 104.3 38.3 125.2 41.3C146 44.3 167 48.7 187.8 48.5C208.7 48.3 229.3 43.7 250.2 41.3C271 39 292 39 313 40.5C334 42 355 45 375.8 44.3C396.7 43.7 417.3 39.3 438.2 38.5C459 37.7 480 40.3 500.8 44C521.7 47.7 542.3 52.3 563.2 51.2C584 50 605 43 626 39.8C647 36.7 668 37.3 688.8 38.7C709.7 40 730.3 42 751.2 42.8C772 43.7 793 43.3 814 43.2C835 43 856 43 876.8 41.3C897.7 39.7 918.3 36.3 939.2 37.3C960 38.3 981 43.7 1001.8 43.5C1022.7 43.3 1043.3 37.7 1064.2 34.7C1085 31.7 1106 31.3 1127 34.2C1148 37 1169 43 1189.8 44.8C1210.7 46.7 1231.3 44.3 1252.2 42.8C1273 41.3 1294 40.7 1314.8 43C1335.7 45.3 1356.3 50.7 1377.2 49.5C1398 48.3 1419 40.7 1429.5 36.8L1440 33L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z")
  }

  100% {
    d: path("M0 51L10.5 51.3C21 51.7 42 52.3 62.8 52.3C83.7 52.3 104.3 51.7 125.2 51C146 50.3 167 49.7 187.8 49.5C208.7 49.3 229.3 49.7 250.2 52.3C271 55 292 60 313 63.2C334 66.3 355 67.7 375.8 66.2C396.7 64.7 417.3 60.3 438.2 58.7C459 57 480 58 500.8 59.2C521.7 60.3 542.3 61.7 563.2 60.5C584 59.3 605 55.7 626 53C647 50.3 668 48.7 688.8 48.7C709.7 48.7 730.3 50.3 751.2 51C772 51.7 793 51.3 814 52.8C835 54.3 856 57.7 876.8 58.5C897.7 59.3 918.3 57.7 939.2 56.3C960 55 981 54 1001.8 54.7C1022.7 55.3 1043.3 57.7 1064.2 59.8C1085 62 1106 64 1127 63.8C1148 63.7 1169 61.3 1189.8 61C1210.7 60.7 1231.3 62.3 1252.2 60.3C1273 58.3 1294 52.7 1314.8 51.5C1335.7 50.3 1356.3 53.7 1377.2 55.7C1398 57.7 1419 58.3 1429.5 58.7L1440 59L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z")
  }
}

#footer-svgpath4 {
  animation: path4 5s linear infinite;
}

@keyframes path4 {
  0% {
    d: path("M0 60L10.5 61C21 62 42 64 62.8 64.3C83.7 64.7 104.3 63.3 125.2 64.7C146 66 167 70 187.8 72.8C208.7 75.7 229.3 77.3 250.2 75.7C271 74 292 69 313 68.5C334 68 355 72 375.8 71.8C396.7 71.7 417.3 67.3 438.2 67C459 66.7 480 70.3 500.8 72.8C521.7 75.3 542.3 76.7 563.2 75C584 73.3 605 68.7 626 66.2C647 63.7 668 63.3 688.8 64.3C709.7 65.3 730.3 67.7 751.2 68.5C772 69.3 793 68.7 814 69.2C835 69.7 856 71.3 876.8 72.7C897.7 74 918.3 75 939.2 76C960 77 981 78 1001.8 78.3C1022.7 78.7 1043.3 78.3 1064.2 77.3C1085 76.3 1106 74.7 1127 74.2C1148 73.7 1169 74.3 1189.8 75.2C1210.7 76 1231.3 77 1252.2 76.8C1273 76.7 1294 75.3 1314.8 72.8C1335.7 70.3 1356.3 66.7 1377.2 64.7C1398 62.7 1419 62.3 1429.5 62.2L1440 62L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z");
  }

  50% {
    d: path("M0 51L10.5 51.3C21 51.7 42 52.3 62.8 52.3C83.7 52.3 104.3 51.7 125.2 51C146 50.3 167 49.7 187.8 49.5C208.7 49.3 229.3 49.7 250.2 52.3C271 55 292 60 313 63.2C334 66.3 355 67.7 375.8 66.2C396.7 64.7 417.3 60.3 438.2 58.7C459 57 480 58 500.8 59.2C521.7 60.3 542.3 61.7 563.2 60.5C584 59.3 605 55.7 626 53C647 50.3 668 48.7 688.8 48.7C709.7 48.7 730.3 50.3 751.2 51C772 51.7 793 51.3 814 52.8C835 54.3 856 57.7 876.8 58.5C897.7 59.3 918.3 57.7 939.2 56.3C960 55 981 54 1001.8 54.7C1022.7 55.3 1043.3 57.7 1064.2 59.8C1085 62 1106 64 1127 63.8C1148 63.7 1169 61.3 1189.8 61C1210.7 60.7 1231.3 62.3 1252.2 60.3C1273 58.3 1294 52.7 1314.8 51.5C1335.7 50.3 1356.3 53.7 1377.2 55.7C1398 57.7 1419 58.3 1429.5 58.7L1440 59L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z")
  }

  100% {
    d: path("M0 60L10.5 61C21 62 42 64 62.8 64.3C83.7 64.7 104.3 63.3 125.2 64.7C146 66 167 70 187.8 72.8C208.7 75.7 229.3 77.3 250.2 75.7C271 74 292 69 313 68.5C334 68 355 72 375.8 71.8C396.7 71.7 417.3 67.3 438.2 67C459 66.7 480 70.3 500.8 72.8C521.7 75.3 542.3 76.7 563.2 75C584 73.3 605 68.7 626 66.2C647 63.7 668 63.3 688.8 64.3C709.7 65.3 730.3 67.7 751.2 68.5C772 69.3 793 68.7 814 69.2C835 69.7 856 71.3 876.8 72.7C897.7 74 918.3 75 939.2 76C960 77 981 78 1001.8 78.3C1022.7 78.7 1043.3 78.3 1064.2 77.3C1085 76.3 1106 74.7 1127 74.2C1148 73.7 1169 74.3 1189.8 75.2C1210.7 76 1231.3 77 1252.2 76.8C1273 76.7 1294 75.3 1314.8 72.8C1335.7 70.3 1356.3 66.7 1377.2 64.7C1398 62.7 1419 62.3 1429.5 62.2L1440 62L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z")
  }
}

#footer-svgpath5 {
  animation: path5 5s linear infinite;
}

@keyframes path5 {
  0% {
    d: path("M0 74L10.5 74.2C21 74.3 42 74.7 62.8 76.2C83.7 77.7 104.3 80.3 125.2 80.7C146 81 167 79 187.8 78C208.7 77 229.3 77 250.2 78.5C271 80 292 83 313 83C334 83 355 80 375.8 78.2C396.7 76.3 417.3 75.7 438.2 76.3C459 77 480 79 500.8 80.2C521.7 81.3 542.3 81.7 563.2 82.2C584 82.7 605 83.3 626 82.2C647 81 668 78 688.8 78.5C709.7 79 730.3 83 751.2 85.2C772 87.3 793 87.7 814 86.3C835 85 856 82 876.8 81.3C897.7 80.7 918.3 82.3 939.2 81.8C960 81.3 981 78.7 1001.8 78C1022.7 77.3 1043.3 78.7 1064.2 78.5C1085 78.3 1106 76.7 1127 77.3C1148 78 1169 81 1189.8 80.8C1210.7 80.7 1231.3 77.3 1252.2 76.2C1273 75 1294 76 1314.8 78.5C1335.7 81 1356.3 85 1377.2 85.5C1398 86 1419 83 1429.5 81.5L1440 80L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z");
  }

  50% {
    d: path("M0 60L10.5 61C21 62 42 64 62.8 64.3C83.7 64.7 104.3 63.3 125.2 64.7C146 66 167 70 187.8 72.8C208.7 75.7 229.3 77.3 250.2 75.7C271 74 292 69 313 68.5C334 68 355 72 375.8 71.8C396.7 71.7 417.3 67.3 438.2 67C459 66.7 480 70.3 500.8 72.8C521.7 75.3 542.3 76.7 563.2 75C584 73.3 605 68.7 626 66.2C647 63.7 668 63.3 688.8 64.3C709.7 65.3 730.3 67.7 751.2 68.5C772 69.3 793 68.7 814 69.2C835 69.7 856 71.3 876.8 72.7C897.7 74 918.3 75 939.2 76C960 77 981 78 1001.8 78.3C1022.7 78.7 1043.3 78.3 1064.2 77.3C1085 76.3 1106 74.7 1127 74.2C1148 73.7 1169 74.3 1189.8 75.2C1210.7 76 1231.3 77 1252.2 76.8C1273 76.7 1294 75.3 1314.8 72.8C1335.7 70.3 1356.3 66.7 1377.2 64.7C1398 62.7 1419 62.3 1429.5 62.2L1440 62L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z")
  }

  100% {
    d: path("M0 74L10.5 74.2C21 74.3 42 74.7 62.8 76.2C83.7 77.7 104.3 80.3 125.2 80.7C146 81 167 79 187.8 78C208.7 77 229.3 77 250.2 78.5C271 80 292 83 313 83C334 83 355 80 375.8 78.2C396.7 76.3 417.3 75.7 438.2 76.3C459 77 480 79 500.8 80.2C521.7 81.3 542.3 81.7 563.2 82.2C584 82.7 605 83.3 626 82.2C647 81 668 78 688.8 78.5C709.7 79 730.3 83 751.2 85.2C772 87.3 793 87.7 814 86.3C835 85 856 82 876.8 81.3C897.7 80.7 918.3 82.3 939.2 81.8C960 81.3 981 78.7 1001.8 78C1022.7 77.3 1043.3 78.7 1064.2 78.5C1085 78.3 1106 76.7 1127 77.3C1148 78 1169 81 1189.8 80.8C1210.7 80.7 1231.3 77.3 1252.2 76.2C1273 75 1294 76 1314.8 78.5C1335.7 81 1356.3 85 1377.2 85.5C1398 86 1419 83 1429.5 81.5L1440 80L1440 101L1429.5 101C1419 101 1398 101 1377.2 101C1356.3 101 1335.7 101 1314.8 101C1294 101 1273 101 1252.2 101C1231.3 101 1210.7 101 1189.8 101C1169 101 1148 101 1127 101C1106 101 1085 101 1064.2 101C1043.3 101 1022.7 101 1001.8 101C981 101 960 101 939.2 101C918.3 101 897.7 101 876.8 101C856 101 835 101 814 101C793 101 772 101 751.2 101C730.3 101 709.7 101 688.8 101C668 101 647 101 626 101C605 101 584 101 563.2 101C542.3 101 521.7 101 500.8 101C480 101 459 101 438.2 101C417.3 101 396.7 101 375.8 101C355 101 334 101 313 101C292 101 271 101 250.2 101C229.3 101 208.7 101 187.8 101C167 101 146 101 125.2 101C104.3 101 83.7 101 62.8 101C42 101 21 101 10.5 101L0 101Z")
  }
}

@media screen and (min-width:900px) and (max-width:1024px) {
  .nav-ul>li {
    width: 90px;
  }
  .nav-ul>li>a {
    font-size: 1rem;
  }
  .nav-ul>li>a:hover {
    text-decoration: underline;
  }
  .main {
    /* border: 1px solid red; */
    justify-content: center;
    align-items: center;
    margin-top: 0em;
  }
  .intro-text {
    text-align: center;
  }
  .text {
    font-size: 2rem;
    font-weight: 300;
  }
  .text2 {
    font-size: 3rem;
  }
  .text3 {
    font-size: 3.8rem;
    font-weight: 500;
  }
  /* buttons classes */
  .nightmodebtn {
    width: 30px;
  }
  .resumebtn {
    padding: 1em 1em;
  }
  .form-btn {
    padding: 1.2em 3em;
    border-radius: 30px;
    background-color: transparent;
    cursor: pointer;
    /* margin: 2em 0; */
  }
  .social-icon svg {
    width: 20px;
    height: 20px;
  }
  .visit-btn,.dark-visitbtn {
    padding: 1rem 1rem;
  }
  /* about */
  
  .about-main ,.about-darkmode{
    padding: 2rem 2rem;
    margin: 1rem 5rem;
  }
  .about-photo {
    padding: 2rem 10rem;
    /* border-radius: 25px; */
  }
  .about-heading {
    font-size: 1.5rem;
    font-weight: 300;
  }
  .about-intro {
    padding: 3em 2em;
  }
  .about-para {
    word-spacing: 0.1rem;
    font-size: 1rem;
    font-weight: 200;
    margin-top: 1em;
  }

  /* skills */


  .card {
    height: 140px;
  }


  /*------------------------------- work ----------------------------------------*/
  .work-div {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    grid-template-rows: repeat(2, 380px);
  }
  .work-card { 
    height: 300px;
    width: 210px;
    }
  .work-card h2 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0.5em 0 0 0;
  }
  .work-card p {
    font-size: 0.8rem;
    text-align: justify;
    padding: 0 0;
  }

  /*--------------------------- project section ---------------------------------*/
  .contact {
    margin-top: 5em;
  }
  .project-heading h2 {
    font-size: 4rem;
  }
  .project-card h3 {
    font-size: 2rem;
  }
  .right-arrow {
    padding: 1rem;
  }

  .modal{
    /* border: 5px solid blue; */
    height: 100%;
    width: 100%;
    padding: 2em;
  }
  
  


  .project-info , .DarkprojectInfo {
    /* background-color: #dcdcdc; */
    height: 100%;
    margin: 0em 0em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  
  
  
  
  .project-info1 , .DarkprojectInfo1 {
    padding: 2em 2em;
  }
  
  .project-info2, .DarkprojectInfo2 {
    padding: 2em 2em;
  }
  .img {
   /* display: none; */
    width: 450px;
    height: 400px;
  }
  
  
  /* .project-info,.DarkprojectInfo {
    height: 500px;
    width: 1000px;
  }
  .project-info2,.DarkprojectInfo2 {
    padding: 2em 2em;
  }
  .project-info h2 ,.DarkprojectInfo h2{
    font-size: 1.4rem;
    margin: 0.2em 0;
  }
  .project-info h2 span,.DarkprojectInfo h2 span {
    font-size: 1.2rem;
    font-weight: 200;
  }
  .project-info p ,.DarkprojectInfo p{
    font-size: 0.8rem;
    text-align: justify;
  }
  .project-info1 {
   /* border: 1px solid white; */
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .img {
    width: 400px;
    height: 300px;
  } */ 
  .skill-heading {
    margin-bottom: 2rem;
  }
  .skill-heading h3,
  .skill-heading p {
    font-size: 1rem;
  }
  .skill-heading h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  form{
    width: 700px;
  }
  .main-footer1 {
    height: 60px;
  }
  .footer {
    padding: 3rem 2rem;
  }
  .footer-div1 h1 {
    text-align: center;
    font-size: 1.5rem;
  }
  .footer-div2 button {
    padding: 0.8rem 0.8rem;
    margin-top: 5.5rem;
  }
  .footer-div3 {
    height: 15em;
    padding: 0rem 0rem;
  }

}

@media screen and (min-width:768px) and (max-width:900px) {
  .nav-ul>li {
    width: 90px;
  }
  .nav-ul>li>a {
    font-size: 1rem;
  }
  .nav-ul>li>a:hover {
    text-decoration: underline;
  }
  .main {
    /* border: 1px solid red; */
    justify-content: center;
    align-items: center;
    margin-top: 0em;
  }
  .intro-text {
    text-align: center;
  }
  .text {
    font-size: 2rem;
    font-weight: 300;
  }
  .text2 {
    font-size: 3rem;
  }
  .text3 {
    font-size: 3.8rem;
    font-weight: 500;
  }
  /* buttons classes */
  .nightmodebtn {
    width: 30px;
  }
  .resumebtn {
    padding: 1em 1em;
  }
  .form-btn {
    padding: 1.2em 3em;
    border-radius: 30px;
    background-color: transparent;
    cursor: pointer;
    /* margin: 2em 0; */
  }
  .social-icon svg {
    width: 20px;
    height: 20px;
  }
  .visit-btn,.dark-visitbtn {
    padding: 1rem 1rem;
  }
  /* about */
  
  .about-main ,.about-darkmode{
    padding: 1rem 0.5rem;
    margin: 1rem 0rem;
  }
  .about-photo {
    padding: 2rem 6rem;
    /* border-radius: 25px; */
  }
  .about-img{
    width: 200px;
    height: 300px;
  }
  .about-heading {
    font-size: 1.5rem;
    font-weight: 300;
  }
  .about-intro {
    padding: 3em 2em;
  }
  .about-para {
    word-spacing: 0.1rem;
    font-size: 1rem;
    font-weight: 200;
    margin-top: 1em;
  }

  /* skills */


  .card {
    height: 140px;
  }


  /*------------------------------- work ----------------------------------------*/
  .work-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(2, 300px); */
  }
  .work-card { 
    width: 70%;
    height: max-content;
    /* height: 200px;
    width: 200px; */
    }
  .work-card h2 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0.5em 0 0 0;
  }
  .work-card p {
    font-size: 0.8rem;
    text-align: justify;
    padding: 0 0;
  }

  /*--------------------------- project section ---------------------------------*/
  .contact {
    margin-top: 5em;
  }
  .project-heading h2 {
    font-size: 4rem;
  }
  .project-card h3 {
    font-size: 2rem;
  }
  .right-arrow {
    padding: 1rem;
  }

  .modal{
    /* border: 5px solid blue; */
    height: 100%;
    width: 100%;
    padding: 2em;
  }
  
  


  .project-info , .DarkprojectInfo {
    /* background-color: #dcdcdc; */
    height: 100%;
    margin: 0em 0em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  
  
  
  
  .project-info1 , .DarkprojectInfo1 {
    padding: 2em 2em;
  }
  
  .project-info2, .DarkprojectInfo2 {
    padding: 2em 2em;
  }
  .img {
   /* display: none; */
    width: 450px;
    height: 400px;
  }
  
  
  /* .project-info,.DarkprojectInfo {
    height: 500px;
    width: 1000px;
  }
  .project-info2,.DarkprojectInfo2 {
    padding: 2em 2em;
  }
  .project-info h2 ,.DarkprojectInfo h2{
    font-size: 1.4rem;
    margin: 0.2em 0;
  }
  .project-info h2 span,.DarkprojectInfo h2 span {
    font-size: 1.2rem;
    font-weight: 200;
  }
  .project-info p ,.DarkprojectInfo p{
    font-size: 0.8rem;
    text-align: justify;
  }
  .project-info1 {
   /* border: 1px solid white; */
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .img {
    width: 400px;
    height: 300px;
  } */ 
  .skill-heading {
    margin-bottom: 2rem;
  }
  .skill-heading h3,
  .skill-heading p {
    font-size: 1rem;
  }
  .skill-heading h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  form{
    width: 700px;
  }
  .main-footer1 {
    height: 50px;
  }
  .footer {
    padding: 3rem 2rem;
  }
  .footer-div1 h1 {
    text-align: center;
    font-size: 1.5rem;
  }
  .footer-div2 button {
    padding: 0.8rem 0.8rem;
    margin-top: 5.5rem;
  }
  .footer-div3 {
    height: 15em;
    padding: 0rem 0rem;
  }

}


@media  screen and (min-width:730px) and (max-width:768px) {
  .nav-ul>li {
    width: 80px;
  }
  
  .main {
   /* border: 1px solid red; */
    justify-content: center;
    align-items: center;
    margin-top: 0em;
  }
  .intro-text {
    text-align: center;
  }
  .text {
    font-size: 2rem;
    font-weight: 300;
  }
  .text2 {
    font-size: 2.5rem;
  }
  .text3 {
    font-size: 2.5rem;
    font-weight: 500;
  }
  /* buttons classes */
  .nightmodebtn {
    width: 30px;
  }
  .resumebtn {
    padding: 1em 1em;
  }
  .form-btn,.dark-formbtn {
    padding: 1em 3em;
    border-radius: 30px;
    background-color: transparent;
    cursor: pointer;
    /* margin: 2em 0; */
  }
  .social-icon svg {
    width: 20px;
    height: 20px;
  }
  .visit-btn,.dark-visitbtn {
    padding: 1rem 1rem;
  }
  /* about */
  
  .about-main ,.about-darkmode{
    padding: 1rem 1rem;
    gap: 2rem;
    margin: 1rem 1rem;
  }
  .about-intro{
  /* border: 1px solid blue; */
  }
  .about-photo {
    /* border: 2px solid red; */
    border-radius: 3%;
    overflow: hidden;
    padding: 2rem 6rem;
    /* text-align: center; */
  }
  
  .about-img {
    /* padding: 1em; */
    width: 250px;
    height: 250px;
    border-radius: 20px;
  }
  .about-para {
    word-spacing: 0.1rem;
    font-size: 0.9rem;
    font-weight: 200;
    margin-top: 1em;
    /* border:1px solid green */
  } 
  /* .about-photo {
    border: 1px solid red;
    padding: 1rem 8rem;
  }
  .about-heading {
    font-size: 1.5rem;
    font-weight: 300;
  }

  /* skills */


  .card {
    height: 130px;
  }


  /*------------------------------- work ----------------------------------------*/
.work-div {
  /* border: 1px solid red; */
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}
.work-card {
  /* border: 1px solid white; */
  /* background-color: white; */
  color: white;
  border-radius: 30px;
  height: max-content;
  width: 490px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
}
  .work-card h2 {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0.5em 0 0 0;
  }
  .work-card p {
    font-size: 0.8rem;
    text-align: justify;
    padding: 0 1em;
  }

  /*--------------------------- project section ---------------------------------*/
  .contact {
    margin-top: 5em;
  }
  .project-heading h2 {
    font-size: 3.5rem;
  }
  .project-card h3 {
    font-size: 2rem;
  }
  .right-arrow {
    padding: 1rem;
  }
  .modal,.Darkmodal{
    /* border: 5px solid blue; */
    padding: 1em;
  }
  
  .project-info2,.DarkprojectInfo2 {
    /* border: 1px solid red; */
    padding: 0.5em 1em;
  }
  .project-info h2 ,.DarkprojectInfo h2{
    font-size: 1.2rem;
    margin: 0.2em 0;
  }
  .project-info h2 span,.DarkprojectInfo h2 span {
    font-size: 1rem;
    font-weight: 200;
  }
  .project-info p ,.DarkprojectInfo p{
    font-size: 0.7rem;
    text-align: justify;
  }
  .project-info1 {
   /* border: 1px solid white; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .img {
    width: 100%;
    height: 300px;
  }
  .contact-heading {
    margin-bottom: 2rem;
  }
  .contact-heading h3,
  .contact-heading p {
    font-size: 1rem;
  }
  .contact-heading h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  form {
    width: 600px;
  }
  
  .main-footer1 {
    height: 40px;
  }
  .footer {
    /* border: 1px solid red; */
    padding: 3rem 3.5rem;
  }
  .footer-div1 h1 {
    text-align: center;
    font-size: 1.5rem;
  }
  .footer-div2 button {
    padding: 0.8rem 0.8rem;
    margin-top: 5.5rem;
  }
  .footer-div3 {
    height: 15em;
    padding: 0rem 0rem;
  }
  .footer-div3 h2{
    font-size: 1rem;
  }
}




@media  screen and (min-width:630px) and (max-width:730px) {
  /* .navbar{
    margin:0 1em;
  } */
  .nav-ul>li {
    width: 80px;
  }
  
  .main {
   /* border: 1px solid red; */
    justify-content: center;
    align-items: center;
    margin-top: 0em;
  }
  .intro-text {
    text-align: center;
  }
  .text {
    font-size: 2rem;
    font-weight: 300;
  }
  .text2 {
    font-size: 2.5rem;
  }
  .text3 {
    font-size: 2.5rem;
    font-weight: 500;
  }
  /* buttons classes */
  .nightmodebtn {
    width: 30px;
  }
  .resumebtn {
    padding: 1em 1em;
  }
  .form-btn,.dark-formbtn {
    padding: 1em 3em;
    border-radius: 30px;
    background-color: transparent;
    cursor: pointer;
    /* margin: 2em 0; */
  }
  .social-icon svg {
    width: 20px;
    height: 20px;
  }
  .visit-btn,.dark-visitbtn {
    padding: 1rem 1rem;
  }
  /* about */
  
  .about-main,.about-darkmode {
    padding: 0.5rem 0.5rem;
    /* gap:1rem; */
    margin: 1rem 1em;
  }
  .about-intro{
    padding: 2rem 2rem;
  /* border: 1px solid blue; */
  }
  .about-photo {
    /* border: 2px solid red; */
    border-radius: 3%;
    overflow: hidden;
    padding: 2rem 6rem;
    /* text-align: center; */
  }
  
  .about-img {
    width: 200px;
    height: 300px;
    border-radius: 20px;
  }
  .about-para {
    word-spacing: 0.1rem;
    font-size: 0.9rem;
    font-weight: 200;
    margin-top: 1em;
    /* border:1px solid green */
  } 
  /* .about-photo {
    border: 1px solid red;
    padding: 1rem 8rem;
  }
  .about-heading {
    font-size: 1.5rem;
    font-weight: 300;
  }

  /* skills */


  .card {
    height: 130px;
  }


  /*------------------------------- work ----------------------------------------*/
.work-div {
  /* border: 1px solid red; */
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}
.work-card {
  /* border: 1px solid white; */
  /* background-color: white; */
  color: white;
  border-radius: 30px;
  height: max-content;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
}
  .work-card h2 {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0.5em 0 0 0;
  }
  .work-card p {
    font-size: 0.8rem;
    text-align: justify;
    padding: 0 1em;
  }

  /*--------------------------- project section ---------------------------------*/
  .contact {
    margin-top: 5em;
  }
  .project-heading h2 {
    font-size: 3.5rem;
  }
  .project-card h3 {
    font-size: 2rem;
  }
  .right-arrow {
    padding: 1rem;
  }
  .modal,.Darkmodal{
    /* border: 5px solid blue; */
    padding: 1em;
  }
  
  .project-info2,.DarkprojectInfo2 {
    /* border: 1px solid red; */
    padding: 0.5em 1em;
  }
  .project-info h2 ,.DarkprojectInfo h2{
    font-size: 1.2rem;
    margin: 0.2em 0;
  }
  .project-info h2 span,.DarkprojectInfo h2 span {
    font-size: 1rem;
    font-weight: 200;
  }
  .project-info p ,.DarkprojectInfo p{
    font-size: 0.7rem;
    text-align: justify;
  }
  .project-info1 {
   /* border: 1px solid white; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .img {
    width: 100%;
    height: 300px;
  }
  .contact-heading {
    margin-bottom: 2rem;
  }
  .contact-heading h3,
  .contact-heading p {
    font-size: 1rem;
  }
  .contact-heading h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  form {
    width: 600px;
  }
  
  .main-footer1 {
    height: 40px;
  }
  .footer {
    /* border: 1px solid red; */
    padding: 3rem 3.5rem;
  }
  .footer-div1 h1 {
    text-align: center;
    font-size: 1.5rem;
  }
  .footer-div2 button {
    padding: 0.8rem 0.8rem;
    margin-top: 5.5rem;
  }
  .footer-div3 {
    height: 15em;
    padding: 0rem 0rem;
  }
  .footer-div3 h2{
    font-size: 1rem;
  }
}

@media  screen and (min-width:525px) and (max-width:630px) {
  
  
  
  
  /* .navbar{
    margin:0 1em;
  } */
  .nav-ul>li {
    width: 80px;
  }
  
  .main {
   /* border: 1px solid red; */
    justify-content: center;
    align-items: center;
    margin-top: 0em;
  }
  .intro-text {
    text-align: center;
  }
  .text {
    font-size: 2rem;
    font-weight: 300;
  }
  .text2 {
    font-size: 2.5rem;
  }
  .text3 {
    font-size: 2.5rem;
    font-weight: 500;
  }
  /* buttons classes */
  .nightmodebtn {
    width: 30px;
  }
  .resumebtn {
    padding: 1em 1em;
  }
  .form-btn,.dark-formbtn {
    padding: 1em 3em;
    border-radius: 30px;
    background-color: transparent;
    cursor: pointer;
    /* margin: 2em 0; */
  }
  .social-icon svg {
    width: 20px;
    height: 20px;
  }
  .visit-btn,.dark-visitbtn {
    padding: 1rem 1rem;
  }
  /* about */
  /* about */
  .about-me {
    height: max-content;
    /* border: 1px solid red; */
  }
  
  .about-main,.about-darkmode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0em 0em;
    margin:1em;
      
  }
  

  .about-photo {
    padding: 2em 0.5em;
     /* text-align: center; */
  }
  .about-intro {
   /* border: 1px solid green; */
    padding: 1em;
    
  }
  
  .about-img {
    width: 350px;
    height: 350px;
    border-radius: 8%;
  }

  .about-para {
    word-spacing: 0.1rem;
    font-size: 1rem;
  } 

  /* .about-photo {
    border: 1px solid red;
    padding: 1rem 8rem;
  }
  .about-heading {
    font-size: 1.5rem;
    font-weight: 300;
  }

  /* skills */


  .card {
    height: 130px;
  }


  /*------------------------------- work ----------------------------------------*/
.work-div {
  /* border: 1px solid red; */
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}
.work-card {
  /* border: 1px solid white; */
  /* background-color: white; */
  color: white;
  border-radius: 30px;
  height: max-content;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
}
  .work-card h2 {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0.5em 0 0 0;
  }
  .work-card p {
    font-size: 0.8rem;
    text-align: justify;
    padding: 0 1em;
  }

  /*--------------------------- project section ---------------------------------*/
  .contact {
    margin-top: 5em;
  }
  .project-heading h2 {
    font-size: 3.5rem;
  }
  .project-card h3 {
    font-size: 1.5rem;
  }
  .right-arrow {
    padding: 1rem;
  }
  .modal,.Darkmodal{
    /* border: 5px solid blue; */
    height: 100%;
    width: 100%;
    padding: 0.7em;
  }
  
  .project-info , .DarkprojectInfo {
    /* background-color: #dcdcdc; */
    height: 100%;
    margin: 0em 0em;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  
  .project-info1,
    .project-info2 ,.DarkprojectInfo2,.DarkprojectInfo1{
      /* border: 1px solid green; */
      width: 100%;
      height: 50%;
    }
  
    .DarkprojectInfo h2 {
      margin: 0.2em 0;
    }
    
    .DarkprojectInfo h2 span {
      font-size: 1.4rem;
      font-weight: 200;
    }
    
    .DarkprojectInfo p {
      text-align: justify;
    }
    

  .project-info2,.DarkprojectInfo2 {
  /* border: 2px solid green;   */
  padding:0 1em;
  }
  .project-info h2 ,.DarkprojectInfo h2{
    font-size: 1.2em;
    margin: 0;
  }
  .project-info h2 span,.DarkprojectInfo h2 span {
    font-size: 1rem;
    font-weight: 200;
  }
  .project-info p ,.DarkprojectInfo p{
    font-size: 0.8rem;
    text-align: justify;
  }
  .project-info1 {
    padding: 0 0em;
  }
  .img {
    width: 300px;
    height: 200px;
  }
  .contact-heading {
    margin-bottom: 2rem;
  }
  .contact-heading h3,
  .contact-heading p {
    font-size: 1rem;
  }
  .contact-heading h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  form {
    width: 500px;
  }
  
  .main-footer1 {
    height: 35px;
  }
  .footer {
    display: flex;
    flex-direction: column;
    padding:0;
  }
  .footer-div1,
.footer-div2,
.footer-div3 {
  width: 100%;
  height: 100%;
  padding: 2em;   
}

  .footer-div1 h1 {
    text-align: center;
    font-size: 1.9rem;
    font-weight: 400;
  }
  .footer-div1 p {
   font-weight: 200;
  }
  .footer-div2 button {
    padding: 0.8rem 0.8rem;
    margin-top: 1rem;
  }
  .footer-div3 {
    padding: 0rem 0rem;
  }
  .footer-div3 h2{
    font-size: 1rem;
  }
 
}

@media  screen and (min-width:425px) and (max-width:530px){
  nav{  
    justify-content: start;
  }
  .hamburger-btn{
    display: flex;
    margin-left: 3em;
  }
  
  .nav-ul li:nth-child(1){
    display: flex; 
  }

  .cancel{
    display: flex;
    background-color: transparent;
    border: none;
  }
  
  .nav-menu {
    /* border: 1px solid green; */
    position: fixed;
    top: 0%;
    left: -100%;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #292929;
    z-index: 9999;
    transition: left 0.5s linear;
  }
  .dark-menu{
    position: fixed;
    top: 0%;
    left: -100%;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #222f3e;
    z-index: 9999;
    transition: left 0.5s linear;
  }
  .nav-ul{
    display: flex;
    flex-direction: column;
  }

  .nav-ul li:nth-child(1){
    height: 5.9em;
    justify-content: end;
    /* align-items: end; */
  }

  .nav-ul li{
    /* border: 1px solid blue; */
    width: 100%;
    height: 3em;
  }

  .nav-ul li a,.nightmodebtn{
    color: white;
  }
  
  /* .navbar{
    margin:0 1em;
  } */
  
  
  .main {
   /* border: 1px solid red; */
    justify-content: center;
    align-items: center;
    margin-top: 0em;
  }
  .intro-text {
    text-align: center;
  }
  .text {
    font-size: 2rem;
    font-weight: 300;
  }
  .text2 {
    font-size: 2.5rem;
  }
  .text3 {
    font-size: 2.5rem;
    font-weight: 500;
  }
  /* buttons classes */
  .nightmodebtn {
    width: 30px;
  }
  .resumebtn {
    padding: 1em 1em;
  }
  .form-btn,.dark-formbtn {
    padding: 1em 3em;
    border-radius: 30px;
    background-color: transparent;
    cursor: pointer;
    /* margin: 2em 0; */
  }
  .social-icon svg {
    width: 20px;
    height: 20px;
  }
  .visit-btn,.dark-visitbtn {
    padding: 0.8rem 1rem;
  }
  /* about */
  /* about */
  .about-me {
    height: max-content;
    /* border: 1px solid red; */
  }
  
  .about-main,.about-darkmode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0em 0em;
    margin:1em;
      
  }
  

  .about-photo {
    padding: 2em 0.5em;
     /* text-align: center; */
  }
  .about-intro {
   /* border: 1px solid green; */
    padding: 1em;
    
  }
  
  .about-img {
    width: 300px;
    height: 300px;
    border-radius: 8%;
  }

  .about-para {
    word-spacing: 0.1rem;
    font-size: 1rem;
  } 

  /* .about-photo {
    border: 1px solid red;
    padding: 1rem 8rem;
  }
  .about-heading {
    font-size: 1.5rem;
    font-weight: 300;
  }

  /* skills */


  .card {
    height: 130px;
  }


  /*------------------------------- work ----------------------------------------*/
.work-div {
  /* border: 1px solid red; */
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}
.work-card {
  /* border: 1px solid white; */
  /* background-color: white; */
  color: white;
  border-radius: 30px;
  height: max-content;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
}
  .work-card h2 {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0.5em 0 0 0;
  }
  .work-card p {
    font-size: 0.8rem;
    text-align: justify;
    padding: 0 1em;
  }

  /*--------------------------- project section ---------------------------------*/
  .contact {
    margin-top: 5em;
  }
  .project-heading h2 {
    font-size: 3.5rem;
  }
  .project-card h3,.darkproject-card h3 {
    font-size: 1.5rem;
  }
  .right-arrow {
    padding: 1rem;
  }
  .modal,.Darkmodal{
    /* border: 5px solid blue; */
    height: 100%;
    width: 100%;
    padding: 0.7em;
  }
  
  .project-info , .DarkprojectInfo {
    /* background-color: #dcdcdc; */
    height: 100%;
    margin: 0em 0em;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  
  .project-info1,
    .project-info2 ,.DarkprojectInfo2,.DarkprojectInfo1{
      /* border: 1px solid green; */
      width: 100%;
      height: 50%;
    }
  
    .DarkprojectInfo h2 {
      margin: 0.2em 0;
    }
    
    .DarkprojectInfo h2 span {
      font-size: 1rem;
      font-weight: 200;
    }
    
    .DarkprojectInfo p {
      text-align: justify;
    }
    

  .project-info2,.DarkprojectInfo2 {
  /* border: 2px solid green;   */
  padding:0 1em;
  }
  .project-info h2 ,.DarkprojectInfo h2{
    font-size: 1em;
    margin: 0;
  }
  .project-info h2 span,.DarkprojectInfo h2 span {
    font-size: 0.8rem;
    font-weight: 200;
  }
  .project-info p ,.DarkprojectInfo p{
    font-size: 0.6rem;
    text-align: justify;
  }
  .project-info1 {
    padding: 0 0em;
  }
  .img {
    width: 300px;
    height: 200px;
  }
  .contact-heading {
    margin-bottom: 2rem;
  }
  .contact-heading h3,
  .contact-heading p {
    font-size: 1rem;
  }
  .contact-heading h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  form {
    width: 400px;
  }
  
  .main-footer1 {
    height: 33px;
  }
  .footer {
    display: flex;
    flex-direction: column;
    padding:0;
  }
  .footer-div1,
.footer-div2,
.footer-div3 {
  width: 100%;
  height: 100%;
  padding: 2em;   
}

  .footer-div1 h1 {
    text-align: center;
    font-size: 1.9rem;
    font-weight: 400;
  }
  .footer-div1 p {
   font-weight: 200;
  }
  .footer-div2 button {
    padding: 0.8rem 0.8rem;
    margin-top: 1rem;
  }
  .footer-div3 {
    padding: 0rem 0rem;
  }
  .footer-div3 h2{
    font-size: 1rem;
  }
 
}



@media screen and (min-width:376px) and (max-width:426px){
  nav{  
    justify-content: start;
  }
  .hamburger-btn{
    display: flex;
    margin-left: 3em;
  }
  
  .nav-ul li:nth-child(1){
    display: flex; 
  }

  .cancel{
    display: flex;
    background-color: transparent;
    border: none;
  }
  
  .nav-menu {
    /* border: 1px solid green; */
    position: fixed;
    top: 0%;
    left: -100%;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #292929;
    z-index: 9999;
    transition: left 0.5s linear;
  }
  .dark-menu{
    position: fixed;
    top: 0%;
    left: -100%;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #222f3e;
    z-index: 9999;
    transition: left 0.5s linear;
  }
  .nav-ul{
    display: flex;
    flex-direction: column;
  }

  .nav-ul li:nth-child(1){
    height: 5.9em;
    justify-content: end;
    /* align-items: end; */
  }

  .nav-ul li{
    /* border: 1px solid blue; */
    width: 100%;
    height: 3em;
  }

  .nav-ul li a,.nightmodebtn{
    color: white;
  }
  /* .nav-ul.open {
    left: 0; 
  } */
   
  /* #overlay{
    position: fixed;
    top: 0%;
    left: 0%;
  } */
  /* .nav-ul{
    position: fixed;
    justify-content: start;
    top: 0;
    left: -100%;
    flex-direction: column;
    width: 70%;
    height: 100%;
    background-color: #292929;
    transition: all 0.5s linear;
    z-index: 9999;
  } */

  /* #hamburger-label:checked ~ #overlay{
    position: fixed;
    top: -1%;
    left: 50%;
    background-color: transparent;
    width: 50%;
    height: 100%;
    z-index: 9998;
  } */

  /* .nav-menu{
    position: fixed;
    top: 0%;
    left: 0%;
    display: flex;
    flex-direction: column;
  } */


  
  
  
  /* #hamburger-label:checked ~ .nav-ul{
    left: 0%;
  } */

  /* label{
    color: white;
  } */

 /* nav{
  border: 1px solid black;
 }
/* 
 
 .hamburger #path1 {
  transition: all 1s ease;
  transform: rotate(0deg) translate(0px,0px);
 }

 .hamburger #path2 {
  opacity: 1;  
  transition: all 1.1s linear;
}

.hamburger #path3 {
  transition: all 1s ease;
  transform: rotate(0deg) translate(0px,0px);
 }

 .hamburger.active #path1 {
  transition: all 1s ease;
  transform: rotate(45deg) translate(5px,-7px);
 }

 .hamburger.active #path2 {
  opacity: 0;  
  transition: all 0s linear;
 }
.hamburger.active #path3 {
  transition: all 1s ease;
  transform: rotate(-45deg) translate(-11px,-1.5px);
 }
 */

/* .nav-menu{
  border: 1px solid red;
  width: 50%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  background-color: white;
} 
.nav-ul{
  width: 100%;
  height: 100%;
  left: 0em;
  border: 1px solid green;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
  .nav-ul>li {
    border: 1px solid red;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .nav-ul>li>a {
    font-size: 1.2rem;
  }
  
  .nav-ul>li>a:hover {
    text-decoration: underline;
  } */ 
  

  .main {
    justify-content: center;
    align-items: center;
    margin-top: 0em;
   
  }
  .intro-text {
    text-align: center}
  .text {
    font-size: 2rem;
    font-weight: 300;
  }
  .text2 {
    font-size: 2.5rem;
  }
  .text3 {
    font-size: 2.5rem;
    font-weight: 500;
  }





  /* buttons classes */
  .nightmodebtn {
    width: 30px;
  }
  .resumebtn {
    padding: 1em 1em;
  }
  .form-btn {
    padding: 1.2em 3em;
    border-radius: 30px;
    background-color: transparent;
    cursor: pointer;
    margin: 2em 0;
  }
  .social-icon svg {
    width: 20px;
    height: 20px;
  }
  
  
  .visit-btn , .dark-visitbtn {
    margin-top: 1em;
    padding: 0.6rem 0.9rem;
  }

  /* about */
  .about-me {
    height: max-content;
    /* border: 1px solid red; */
  }
  
  .about-main,.about-darkmode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0em 0em;
    margin:1em;
      
  }
  

  .about-photo {
    padding: 2em 0.5em;
     /* text-align: center; */
  }
  .about-intro {
   /* border: 1px solid green; */
    padding: 1em;
    
  }
  
  .about-img {
    width: 250px;
    height: 250px;
    border-radius: 8%;
  }

  .about-para {
    word-spacing: 0.1rem;
    font-size: 1rem;
  } 

  /* skills */
 /* .skill,.work-card,.project{

 } */

  .card {
    height: 130px;
  }


  /*------------------------------- work ----------------------------------------*/

  .work-div {
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}

.work-card { 
  width: 250px;
}

.work-card h2 {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0.5em 0 0 0;
}
.work-card p {
    font-size: 0.8rem;
    text-align: justify;
    padding: 0 1em;
}

  /*--------------------------- project section ---------------------------------*/
 
  .projectdiv { 
    margin: 0 1.5em;
  }
  
  .project-heading h2,
  .contact-heading h2 {
    font-size: 4rem;
    padding-left: 0.3em;
    font-weight: 300;
  }
  .project-card h3,.darkproject-card h3 {
    font-size: 1.5rem;
  }
  .right-arrow ,.dark-rightarrowbtn{
    padding: 0.8rem;
  }


  .modal,.Darkmodal{
    /* border: 5px solid blue; */
    height: 100%;
    width: 100%;
    padding: 0.7em;
  }
  
  .project-info , .DarkprojectInfo {
    /* background-color: #dcdcdc; */
    height: 100%;
    margin: 0em 0em;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  
  .project-info1,
    .project-info2 ,.DarkprojectInfo2,.DarkprojectInfo1{
      /* border: 1px solid green; */
      width: 100%;
      height: 50%;
    }
  
    .DarkprojectInfo h2 {
      margin: 0.2em 0;
    }
    
    .DarkprojectInfo h2 span {
      font-size: 1.4rem;
      font-weight: 200;
    }
    
    .DarkprojectInfo p {
      text-align: justify;
    }
    

  .project-info2,.DarkprojectInfo2 {
  /* border: 2px solid green;   */
  padding:0 1em;
  }
  .project-info h2 ,.DarkprojectInfo h2{
    font-size: 1em;
    margin: 0;
  }
  .project-info h2 span,.DarkprojectInfo h2 span {
    font-size: 0.8rem;
    font-weight: 200;
  }
  .project-info p ,.DarkprojectInfo p{
    font-size: 0.55rem;
    text-align: justify;
  }
  .project-info1 {
    padding: 0 0em;
  }
  .img {
    width: 300px;
    height: 200px;
  }
  .contact-heading {
    margin-bottom: 2rem;
    padding: 1em;
    /* border: 1px solid red; */
  }
  .contact-heading h3,
  .contact-heading p {
    font-size: 1rem;
  }
  .contact-heading h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  form {
  
    width: 300px;
  }
  .main-footer1 {
    height: 25px;
  }
  .footer {
    display: flex;
    flex-direction: column;
    padding:0;
  }
  .footer-div1,
.footer-div2,
.footer-div3 {
  width: 100%;
  height: 100%;
  padding: 2em;   
}

  .footer-div1 h1 {
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
  }
  .footer-div1 p {
   font-weight: 200;
  }
  .footer-div2 button {
    padding: 0.8rem 0.8rem;
    margin-top: 1rem;
  }
  .footer-div3 {
    padding: 0rem 0rem;
  }
  .footer-div3 h2{
    font-size: 1rem;
  }
 
}

@media  screen and (min-width:321px) and (max-width:376px) {
  
  nav{  
    justify-content: start;
  }
  .hamburger-btn{
    display: flex;
    margin-left: 3em;
  }
  
  .nav-ul li:nth-child(1){
    display: flex; 
  }

  .cancel{
    display: flex;
    background-color: transparent;
    border: none;
  }
  
  .nav-menu {
    /* border: 1px solid green; */
    position: fixed;
    top: 0%;
    left: -100%;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #292929;
    z-index: 9999;
    transition: left 0.5s linear;
  }
  .dark-menu{
    position: fixed;
    top: 0%;
    left: -100%;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #222f3e;
    z-index: 9999;
    transition: left 0.5s linear;
  }
  .nav-ul{
    display: flex;
    flex-direction: column;
  }
  
  .nav-ul li:nth-child(1){
    height: 5.9em;
    justify-content: end;
    /* align-items: end; */
  }

  .nav-ul li{
    /* border: 1px solid blue; */
    width: 100%;
    height: 3em;
  }

  .nav-ul li a,.nightmodebtn{
    color: white;
  }
    .main {
      justify-content: center;
      align-items: center;
      margin-top: 0em;
    }
    .intro-text {
      text-align: center}
    .text {
      font-size: 2rem;
      font-weight: 300;
    }
    .text2 {
      font-size: 2.5rem;
    }
    .text3 {
      font-size: 2.5rem;
      font-weight: 500;
    }
  
    /* buttons classes */
    .nightmodebtn {
      width: 30px;
    }
    .resumebtn {
      padding: 1em 1em;
    }
    .form-btn {
      padding: 1.2em 3em;
      border-radius: 30px;
      background-color: transparent;
      cursor: pointer;
      margin: 2em 0;
    }
    .social-icon svg {
      width: 20px;
      height: 20px;
    }
    
    
    .visit-btn , .dark-visitbtn {
      margin-top: 1em;
      padding: 0.5rem 0.9rem;
    }
  
    /* about */
    .about-me {
      height: max-content;
      /* border: 1px solid red; */
    }

    .about-main,.about-darkmode {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0;
      padding: 0em 0em;
      margin:1em;    
    }
  
    .about-photo {
      padding: 2em 0.5em;
       /* text-align: center; */
    }
    .about-intro {
     /* border: 1px solid green; */
      padding: 1em;
      
    }
    
    .about-img {
      width: 250px;
      height: 250px;
      border-radius: 8%;
    }
  
    .about-para {
      word-spacing: 0.1rem;
      font-size: 1rem;
    } 
  
    /* skills */
  
  
    .card {
      height: 130px;
    }
  
  
    /*------------------------------- work ----------------------------------------*/
    .work-div {
      /* text-align: center; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* border: 1px solid red; */
    }
    
    .work-card { 
      width: 220px;
    }
    
    .work-card h2 {
        font-size: 1rem;
        font-weight: 500;
        margin: 0.5em 0 0 0;
    }
    .work-card p {
        font-size: 0.8rem;
        text-align: justify;
        padding: 0 1em;
    }
  
    /*--------------------------- project section ---------------------------------*/
   
    .projectdiv {
      /* background-color: black; */
      margin: 0 1.5em;
    }
    
    .project-heading h2,
    .contact-heading h2 {
      font-size: 4rem;
      padding-left: 0.3em;
      font-weight: 300;
    }
    .project-card h3,.darkproject-card h3 {
      font-size: 1.5rem;
    }
    .right-arrow {
      padding: 0.8rem;
    }
  
  
    .modal,.Darkmodal{
      /* border: 5px solid blue; */
      height: 100%;
      width: 100%;
      padding: 0.3em;
    }
 
    .Darkcross:hover + .Darkcross svg {
      border: none;
      background-color: #383838;
      color: #ffffff;
      transition: all 0.3s linear;
    }
    
    
    .Darkcrossbtn {
      width: 100%;
      /* border: 1px solid red; */
    }
    
    
    .Darkcross {
      margin: 1em 1em;
    }

    .project-info , .DarkprojectInfo {
      /* background-color: #dcdcdc; */
      height: 100%;
      margin: 0em 0em;
      padding: 0;
      display: flex;
    flex-direction: column;
    }
    
    .project-info1,
    .project-info2 ,.DarkprojectInfo2,.DarkprojectInfo1{
      /* border: 1px solid green; */
      width: 100%;
      height: 50%;
    }
    
  
    .project-info2,.DarkprojectInfo2 {
    /* border: 2px solid green;  */
    padding:0 2em;
  
    }

    .project-info h2 ,.DarkprojectInfo h2{
      font-size: 0.8rem;
       margin: 0em 0;
    }
    .project-info h2 span,.DarkprojectInfo h2 span {
      font-size: 0.8rem;
      font-weight: 200;
    }
    .project-info p ,.DarkprojectInfo p{
      font-size: 0.55rem;
      text-align: justify;
    }
    .project-info1 {
      padding: 0 0em;
    }
    .img {
      width: 300px;
      height: 200px;
    }
    .contact-heading {
      margin-bottom: 2rem;
      padding: 1em;
      /* border: 1px solid red; */
    }
    .contact-heading h3,
    .contact-heading p {
      font-size: 1rem;
    }
    .contact-heading h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    form {
      width: 300px;
    }
    .main-footer1 {
      /* border: 1px solid red; */
      height: 25px;
    }
    .footer {
      display: flex;
      flex-direction: column;
      padding:0;
    }
    .footer-div1,
  .footer-div2,
  .footer-div3 {
    width: 100%;
    height: 100%;
    padding: 2em;   
  }
  
    .footer-div1 h1 {
      text-align: center;
      font-size: 2rem;
      font-weight: 400;
    }
    .footer-div1 p {
     font-weight: 200;
    }
    .footer-div2 button {
      padding: 0.8rem 0.8rem;
      margin-top: 1rem;
    }
    .footer-div3 {
      padding: 0rem 0rem;
    }
    .footer-div3 h2{
      font-size: 1rem;
    }
   
   
}



@media  screen and  (max-width:321px) {
  
  nav{  
    justify-content: start;
  }
  .navbar{
    /* border: 1px solid red; */
  }

  .hamburger-btn{
    display: flex;
    margin-left: 3em;
  }
  
  .nav-ul li:nth-child(1){
    display: flex; 
  }

  .cancel{
    display: flex;
    background-color: transparent;
    border: none;
  }
  
  .nav-menu {
    /* border: 1px solid green; */
    position: fixed;
    top: 0%;
    left: -100%;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #292929;
    z-index: 9999;
    transition: left 0.5s linear;
  }
  .dark-menu{
    position: fixed;
    top: 0%;
    left: -100%;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #222f3e;
    z-index: 9999;
    transition: left 0.5s linear;
  }
  .nav-ul{
    display: flex;
    flex-direction: column;
  }
  
  .nav-ul li:nth-child(1){
    height: 5.9em;
    justify-content: end;
    /* align-items: end; */
  }

  .nav-ul li{
    /* border: 1px solid blue; */
    width: 100%;
    height: 3em;
  }

  .nav-ul li a,.nightmodebtn{
    color: white;
  }

    .main {
      justify-content: center;
      align-items: center;
      margin-top: 0em;
    }
    .intro-text {
      text-align: center}
    .text {
      font-size: 2rem;
      font-weight: 300;
    }
    .text2 {
      font-size: 2.5rem;
    }
    .text3 {
      font-size: 2.5rem;
      font-weight: 500;
    }
  
    /* buttons classes */
    .nightmodebtn {
      width: 30px;
    }
    .resumebtn {
      padding: 1em 1em;
    }
    .form-btn {
      padding: 1.2em 3em;
      border-radius: 30px;
      background-color: transparent;
      cursor: pointer;
      margin: 2em 0;
    }
    .social-icon svg {
      width: 20px;
      height: 20px;
    }
    
    
    .visit-btn , .dark-visitbtn {
      margin-top: 1em;
      padding: 0.5rem 0.9rem;
    }
  
    /* about */
    .about-me {
      height: max-content;
      /* border: 1px solid red; */
    }
    
    .about-main,.about-darkmode {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0;
      padding: 0em 0em;
      margin:1em;
    }
  
    .about-photo {
      padding: 2em 0.5em;
       /* text-align: center; */
    }
    .about-intro {
     /* border: 1px solid green; */
      padding: 1em;
      
    }
    
    .about-img {
      width: 250px;
      height: 250px;
      border-radius: 8%;
    }
  
    .about-para {
      word-spacing: 0.1rem;
      font-size: 1rem;
    } 
  
    /* skills */
  
  
    .card {
      height: 130px;
    }
  
  
    /*------------------------------- work ----------------------------------------*/
  
    .work-div {
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid red; */
  }
  
  .work-card {
    /* border: 2px solid red; */
    width: 210px;
  }
    .work-card h2 {
      font-size: 1rem;
      font-weight: 500;
      margin: 0.5em 0 0 0;
    }
    .work-card p {
      font-size: 0.8rem;
      text-align: justify;
      padding: 0 1em;
    }
  
    /*--------------------------- project section ---------------------------------*/
   
    .projectdiv {
      /* background-color: black; */
  
   
      margin: 0 1.5em;
   
    }
    
    .project-heading h2,
    .contact-heading h2 {
      font-size: 4rem;
      padding-left: 0.3em;
      font-weight: 300;
    }
    .project-card h3,.darkproject-card h3 {
      font-size: 1.5rem;
    }
    .right-arrow {
      padding: 0.8rem;
    }
  
    
    
    .Darkcross {
      margin: 1em 1em;
    }
  
    .modal,.Darkmodal{
      /* border: 5px solid blue; */
      height: 100%;
      width: 100%;
      padding: 0.2em;
    }
    
    .project-info , .DarkprojectInfo {
      /* background-color: #dcdcdc; */
      height: 100%;
      margin: 0em 0em;
      padding: 0;
      display: flex;
    flex-direction: column;
    }

    .project-info1,
    .project-info2 ,.DarkprojectInfo2,.DarkprojectInfo1{
      /* border: 1px solid green; */
      width: 100%;
      height: 50%;
    }
    
  
    .project-info2,.DarkprojectInfo2 {
    /* border: 2px solid green;   */
    padding:0 2em;
  
    }
    .project-info h2 ,.DarkprojectInfo h2{
      font-size: 0.8rem;
       margin: 0em 0;
    }
    .project-info h2 span,.DarkprojectInfo h2 span {
      font-size: 0.8rem;
      font-weight: 200;
    }
    .project-info p ,.DarkprojectInfo p{
      font-size: 0.45rem;
      text-align: justify;
    }
    .project-info1 {
      padding: 0 0em;
    }
    .img {
      width: 250px;
      height: 200px;
    }
    .contact-heading {
      margin-bottom: 2rem;
      padding: 1em;
      /* border: 1px solid red; */
    }
    .contact-heading h3,
    .contact-heading p {
      font-size: 1rem;
    }
    .contact-heading h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    form {
      width: 300px;
    }
    .main-footer1 {
      /* border: 1px solid red; */
      height: 20px;
    }
    .footer {
      display: flex;
      flex-direction: column;
      padding:0;
    }
    .footer-div1,
  .footer-div2,
  .footer-div3 {
    width: 100%;
    height: 100%;
    padding: 2em;   
  }
  
    .footer-div1 h1 {
      text-align: center;
      font-size: 2rem;
      font-weight: 400;
    }
    .footer-div1 p {
     font-weight: 200;
    }
    .footer-div2 button {
      padding: 0.8rem 0.8rem;
      margin-top: 1rem;
    }
    .footer-div3 {
      padding: 0rem 0rem;
    }
    .footer-div3 h2{
      font-size: 1rem;
    }
   
   
}