*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}

body{
color: #ededed;
background: url(https://media.istockphoto.com/id/1162940275/photo/abstract-gradient-dark-purple-background-gradient-dark-purple-color-with-black-vignette-using.webp?b=1&s=170667a&w=0&k=20&c=hd1kP3f83gM4CArQmOJ9HLRa8foFZRgAumYupDXXJO4=) ;
background: cover;
height: 500px;
background:#081b29;
overflow-x: hidden;

}



nav{

 display: flex;
 justify-content: space-around;
 align-items: center;
 height: 50px;
 background: #051129;
  

}

.left{
  position: relative;
  font-size: 30px;
  color: pink;
  text-decoration: none;
  font-weight: 600;
  cursor: default;
  opacity: 0;
  animation: slideRight 1s ease forwards;
}


nav ul{
  display: flex;
  justify-content: center;
  list-style: none;
  text-decoration: none;

}
nav ul li a{
   color: #fff;
   list-style: none;
   text-decoration: none;
   font-size:20px;
   font-weight: 500;
   margin: 0px 23px;
  transition: 2s;
  opacity: 0;
  animation: slideTop 0.5s ease forwards;
  animation-delay: calc(0.2s * var(--1));
}

nav ul li a:hover{
  color: pink;
  
  
}





.header{
position: relative;
width: 100%;
justify-content: space-between;
background:#081b29;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
padding:50px 10% 0;

}

.header-content{
  max-width: 600px;
  margin-bottom: 200px;
}
.header-content h3{
  font-size: 32px;
  font-weight: 200;
  opacity: 0;
  animation: slideBottom 1s ease forwards;
  animation-delay: 0.7s;
}



.header-content h1{
  font-size: 54px;
  font-weight: 700;
  margin: -3px 0;
  opacity: 0;
  animation: slideRight 1s ease forwards;
  animation-delay: 1s;
} 

.header-content p{
  font-size:20px;
  opacity: 0;
  animation: slideLeft 1s ease forwards;
  animation-delay: 1s;
  
}

.header-resume a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid pink;
  border-radius: 50%;
  font-size: 20px;
  color: pink; 
  text-decoration: none;
  transition: -5s ease;
  opacity: none;
  animation: slideLeft 2s ease forwards;
  animation-delay: calc(0.2s * var);
  margin: 30px 15px 30px 0;
 
}
.header-resume a:hover{
  background: pink;
  color: black;
  box-shadow: 0 0 20px pink;
  
}

.btn-box{
   display: inline-block;
   margin-top: 40px;
   padding: 12px 28px;
   background: pink;
   border-radius: 40px;
   font-size: 16px;
   color: black;
   letter-spacing: 1px;
   text-decoration: none;
   font-weight: 600;
   opacity: 0;
   animation: slideTop 1s ease forwards;
   animation-delay: 1s;
   box-shadow: 0 0 5px pink,
   0 0 25px pink;
}

.btn-box:hover {
   box-shadow: 0 0 5px pink,
 
0 0 25px pink, 0 0 50px pink,
0 0 100px pink, 0 0 200px pink;
} 
 
/* .rightsection img{
   width: 280px;
   height: 350px;
   margin-bottom: 200px;
  
} */

#rightsection-circle img {
   width: 280px;
   height: 350px;
   margin-bottom: 200px;
   border-radius: 200px;
   border: 8px solid pink;
   box-shadow: 0 0 150px pink;
   animation: floating 2s ease-in-out infinite;
   margin-left: 30px;
   margin-top: 5px;
   border-radius: 50%;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

@keyframes slideRight {
  0%{
   transform: translateX(-100px);
    opacity: 0;
}

100%{
  transform: translateX(0px);
  opacity: 1;
  }
} 

@keyframes slideTop {
  0%{
   transform: translateY(100px);
    opacity: 0;
}

100%{
  transform: translateY(0px);
  opacity: 1;
  }
} 

@keyframes slideBottom {
  0%{
   transform: translateY(-100px);
    opacity: 0;
}

100%{
  transform: translateY(0px);
  opacity: 1;
  }
} 

@keyframes slideLeft {
  0%{
   transform: translateX(100px);
    opacity: 0;
}

100%{
  transform: translateX(0px);
  opacity: 1;
  }
}

.about{
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 1.5rem;
height: 100px;
}
  
.about-img img{
padding-bottom: 0%;
width: 250px;
height: 250px;
/* border-radius: 300px; */
margin-left: 190px;
border: 5px solid #081b29;
box-shadow: 0 0 21px pink;
/* animation: floating 2s ease-in-out infinite; */
}
 

.sub-title{
   padding-bottom: 5%;
   max-width: 630px;
   height: auto;
   width: 100%;
   border-radius: 8px;
  text-align: center;
  font-size: 60px;
 
  margin-left: 300px;
  
  }

.about-text h2{
    font-size: 60px;
}

.sub-title  span{
  color: pink;
}

.about-text h4{
   font-size: 20px;
   font-weight: 600;
   color: #fff;
   line-height: 1.7;
   margin: 15px 0 30px;

 }

.about-text p{
   color: aliceblue;
   font-size: 20px;
   line-height: 1.4;
   margin-bottom: 4rem;
   margin-right: 60px;
}
.sub-title1{
  text-align: center;
  font-size: 60px;
  padding-top:400px;
  margin-right: 80px;
}

.sub-title1 span{
 color: pink;
} 

section{
   display: flex;
   flex-wrap: wrap;

  }

.container1{
  width: 600px;
  height: 230px;
  padding: 75px 90px;
  margin-left: 190px;


}

.wrapper{
  display: inline-flex;
  
   
}

.wrapper .icon{
  margin: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.wrapper .icon span{
  position: relative;
  height: 100px;
  width: 100px;
  display: block;
  text-align: center;
  z-index: 2;
  color: black;
  box-shadow: 0 5px 5px pink;
}

.wrapper .icon span img{
  font-size: 25px;
  height: 100px;

}

.wrapper .icon .tooltip{
  position: absolute;
  top: 0px;
  color: black;
  font-size: 20px;
  background: pink;
  padding: 10px 18px;
  border-radius: 25px;
  box-shadow: 0 5px 5px pink;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip{
  opacity: 1;
  pointer-events: auto;
  top: -70px;
  color: black;

}



.wrapper .icon .tooltip:before{
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  color: black;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.sub-title2{
  text-align: center;
  font-size: 60px;
  padding-top:100px;
  margin-right: 80px;
  margin-bottom: 20px;
  
} 

.sub-title2 span{
 color: pink;
} 

.center{
  text-align: center;
}

.project-section {
    display:grid;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #081b29;
}

.box {
   border: 5px solid pink;
   border-radius: 30px;
   box-shadow: 0 0 30px pink;
   height: 30%;
   width: 30%;
   background-color: #081b29;
   padding: 5px 0px 5px;
   margin-top: 25px;
}

.box1-img {
  height: 250px;
  width: 100%;
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
  margin-top: 1rem;
  margin-bottom: 1rem;
 
}

.box-img {
    height: 250px;
    width: 100%;
    background-image: contain;
     background-repeat: no-repeat;
     margin-top: 1rem;
    margin-bottom: 1rem;
    
}

.box-content  {
   margin-left: 1rem;
   margin-right: 1rem;
   align-items: center;
}



.box-content h2{
   font-size: 1.1rem;
   color:#fff;
  /* margin-left: 20rem; */
}

.box-content h2 a{
  margin-left: 9rem;
   font-size: 1.1rem;
   color: pink;
   cursor: pointer;
  
}

.home-cont a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid pink;
  border-radius: 50%;
  font-size: 20px;
  color: pink; 
  text-decoration: none;
  transition: -5s ease;
  opacity: none;
  margin-left: 200px;
  margin-top: 90px;
 
 
}
.home-cont a:hover{
  background: pink;
  color: black;
  box-shadow: 0 0 20px pink;
   
}

.email{
  margin-left: 400px;
  font-size: 25px;
  margin-top: 50px;
  
}
.email a{
  color: pink;
  font-size: 20px;
}

.foot-panel1 {
  justify-content: space-evenly;
  background-color:  #081b29;
  color: #fff;
  height: 300px;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  margin-top: 70px;
}

ul a {
   display: block;
   font-size: 0.85rem;
   margin-top: 10px;
   color: #fff;
}

.foot-panel2 {
  background-color: #081b29;
  color: #fff;
  height: 88px;
  font-size: 0.7rem;
  text-align: center;
  }

.pages {
   padding-top: 25px;
}

.copyright {
   padding-top: 10px;
}

nav .fa-solid{
  display: none;
}

/* -------------------css for small screens-------------------- */



@media only screen and (max-width: 767px) {

  
  .right ul {
    display: none; /* hide horizontal menu */
  }

  .menu-icon {
    display: block;
  }

  .sidemenu.open {
    right: 0;
    display: flex;
  }
 
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: #081b29;
  color: pink;
}

/* Right-side menu styles */
.right ul {
  display: flex;
  gap: 25px;
  list-style: none;
}

.right ul li a {
  color: #081b29;
  text-decoration: none;
  font-size: 3rem;
  font-weight: bold;
}

/* Hamburger icon (hidden by default) */
.menu-icon {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

/* Side menu (hidden by default on mobile) */
.sidemenu {
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 100vh;
  background-color: pink;
  flex-direction: column;
  padding: 40px 20px;
  box-shadow: -2px 0 8px pink;
  transition: right 0.3s ease;
  z-index: 1000;
}

.sidemenu li {
  margin: 20px 0;
}

.close-icon {
  align-self: flex-end;
  font-size: 24px;
  margin-bottom: 30px;
  cursor: pointer;
  color:#081b29;
}
  
  body{
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   margin-left: 150px;
  }
 nav{

 display: flex;
 justify-content: space-around;
 align-items: center;
 height: 200px;
 width: 1200px;
 background: #081b29;
  }

.left{
  position: relative;
  margin-left: 50px;
  font-size: 80px;
  color: pink;
  text-decoration: none;
  font-weight: 600;
  cursor: default;
  opacity: 0;
  animation: slideRight 1s ease forwards;
  
}

nav ul{
  display: none;
  justify-content: center;
  list-style: none;
  text-decoration: none;

}

nav .fa-solid {
  display: block;
  font-size: 80px;
  color: pink;
  margin-left: 300px;
}

nav ul{
  background: #081b29;
  position: fixed;
  top: 0;
  right: -200px;
  width: 200px;
  height: 100vh;
  padding-top:50px;
  z-index: 2;

}

nav ul li{
  display:block;
  margin: 25px;
}

nav ul .fa-solid{
  position: absolute;
  top: 25px;
  left: 25px;
  cursor: pointer;
}


.header{
position: relative;
width: 100%;
justify-content: space-between;
background:#081b29;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
padding:50px 10% 0;
flex-direction: column;

}

.header-content{
  /* column-gap: 10px; */
  
  letter-spacing: 3px;
  text-align: center;
  margin-left: 300px;
  width: 100%;
  margin-bottom: 100px;
}
.header-content h3{
  
  font-size: 52px;
  font-weight: 200;
  opacity: 0;
  animation: slideBottom 1s ease forwards;
  animation-delay: 0.7s;
}



.header-content h1{
  font-size: 60px;
  font-weight: 700;
  margin: -3px 0;
  opacity: 0;
  animation: slideRight 1s ease forwards;
  animation-delay: 1s;
} 

.header-content p{
  font-size:40px;
  opacity: 0;
  animation: slideLeft 1s ease forwards;
  animation-delay: 1s;
  
}

.header-resume a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background: transparent;
  border: 2px solid pink;
  border-radius: 50%;
  font-size: 40px;
  color: pink; 
  text-decoration: none;
  transition: -5s ease;
  opacity: none;
  animation: slideLeft 2s ease forwards;
  animation-delay: calc(0.2s * var);
  margin: 30px 15px 30px 0;
 
}
.header-resume a:hover{
  background: pink;
  color: black;
  box-shadow: 0 0 20px pink;
  
}

.btn-box{
   display: inline-block;
   margin-top: 40px;
   padding: 12px 28px;
   background: pink;
   border-radius: 40px;
   font-size: 40px;
   color: black;
   letter-spacing: 1px;
   text-decoration: none;
   font-weight: 600;
   opacity: 0;
   animation: slideTop 1s ease forwards;
   animation-delay: 1s;
   box-shadow: 0 0 5px pink,
   0 0 25px pink;
}

.btn-box:hover {
   box-shadow: 0 0 5px pink,
 
0 0 25px pink, 0 0 50px pink,
0 0 100px pink, 0 0 200px pink;
} 
 


#rightsection-circle img {
  display:none;
}
 


 

.about{
display: flex;
align-items: center;
gap: 1.5rem;
height: 10px;
width: 100%;
}
  
.about-img img{
padding-bottom: 0%;
width: 500px;
height: 500px;
/* border-radius: 300px; */
margin-left: 250px;
border: 5px solid #081b29;
box-shadow: 0 0 21px pink;
/* animation: floating 2s ease-in-out infinite; */
}
 

.sub-title{
   padding-bottom: 5%;
   max-width: 630px;
   height: auto;
   width: 100%;
   border-radius: 8px;
  text-align: center;
  font-size: 70px;
  margin-left: 300px;
  
  }



.sub-title  span{
  color: pink;
}

.about-text p{
  display:flex;
  text-align: center;
   color: aliceblue;
   font-size: 40px;
   line-height: 1;
   /* margin-bottom: 4rem; */
   margin-left: 30px;
   width: 210%;
}


.sub-title1{
  margin-top: 50rem;
   height: auto;
   width: 100%;
   border-radius: 8px;
  text-align: center;
  font-size: 70px;
  margin-left: 300px;
 
}

.sub-title1 span{
 color: pink;
} 


section{
   display: flex;
   flex-wrap: wrap;

  }

.container1{
  width: 637px;
  height: 230px;
  padding: 75px 90px;
  margin-left: 45px;


}

.wrapper{
  display: inline-flex;
  
   
}

.wrapper .icon{
  margin: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.wrapper .icon span{
  position: relative;
  height: 100px;
  width: 100px;
  display: block;
  text-align: center;
  z-index: 2;
  color: black;
  box-shadow: 0 5px 5px pink;
}

.wrapper .icon span img{
  font-size: 25px;
  height: 100px;

}

.wrapper .icon .tooltip{
  position: absolute;
  top: 0px;
  color: black;
  font-size: 20px;
  background: pink;
  padding: 10px 18px;
  border-radius: 25px;
  box-shadow: 0 5px 5px pink;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip{
  opacity: 1;
  pointer-events: auto;
  top: -70px;
  color: black;

}



.wrapper .icon .tooltip:before{
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  color: black;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.sub-title2{
  height: auto;
   width: 100%;
   border-radius: 8px;
  text-align: center;
  font-size: 70px;
  margin-left: 300px;
} 

.sub-title2 span{
 color: pink;
} 



.project-section {
    display:grid;
   
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #081b29;
}

.box {
   display:grid;
  grid-template-rows: repeat(1, 1fr);
  justify-content: center;
   border: 5px solid pink;
   border-radius: 30px;
   box-shadow: 0 0 30px pink;
   width: 200%;
   height: 100%;
   background-color: #081b29;
   padding: 5px 0px 5px;
   margin-top: 25px;
   margin-left: 7rem;
}

.box1-img {
  height: 600px;
  width: 100%;
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
  margin-top: 1rem;
  margin-bottom: 1rem;
 
}



.box-content  {
   margin-left: 1rem;
   margin-right: 1rem;
   align-items: center;
}



.box-content h2{
   font-size: 2.5rem;
  /* margin-left: 20rem; */
}

.box-content h2 a{
  margin-left: 13rem;
   font-size: 2.5rem;
   color: pink;
   cursor: pointer;
  
}

.home-cont {
  display: flex;
  flex-wrap: nowrap; 
  justify-content: start; 
  align-items: center; 

}

.home-cont a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80px;
  height: 80px;
  background: transparent;
  border: 2px solid pink;
  border-radius: 80%;
  font-size: 50px;
  color: pink; 
  text-decoration: none;
  transition: -5s ease;
  opacity: none;
  margin-left: 150px;
  margin-top: 90px;
 
 
}
.home-cont a:hover{
  background: pink;
  color: black;
  box-shadow: 0 0 20px pink;
   
}

.email{
  font-display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 100px;
  font-size: 45px;
  margin-top: 60px;
  
}
.email a{
  font-display: flex;
  color: pink;
  font-size: 40px;
  margin-left: 100px;
 

}

.foot-panel1 {
 display: none;
}

ul a {
   display: block;
   font-size: 1.85rem;
   margin-top: 10px;
   color: #fff;
   margin-top: 100px;
}

.foot-panel2 {
  
  
  background-color: #081b29;
  color: #fff;
  height: 88px;
  font-size: 2rem;
  
  
  }

.pages {
  display: flex;
  align-items: center;
   padding-top: 35px;
    margin-left: 100%;
    justify-content: space-between;

}

.copyright {
  display: flex;
  font-size: 1.9rem;
   padding-top: 10px;
   margin-left: 110%;
  
}
}