* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  border: none;
  outline: none;
  scroll-behavior: smooth;
}

:root {
  --bg-color: rgb(0, 30, 42);
  --second-bg-color: #063c63;
  --text-color: rgb(230, 236, 235);
  --main-color: rgb(16, 122, 167);
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}
body {
  background: var(--bg-color);
  color: var(--text-color);
}

.header {
  position: fixed;
  /* background:var(--bg-color); */
  
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 9%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* box-sizing: border-box; */
  z-index: 100;
  transition: .3s;
 
}

.header.sticky{
  background: var(--bg-color);
}

.logo {
  font-size: 2.5rem;
  color: var(--text-color);
  font-weight: 600;
}

.navbar a {
  font-size: 1.7rem;
  color: var(--text-color);
  font-weight: 500;
  margin-left: 3.5rem;
  transition: 0.3s;
}

/* .header .container{
  margin-left: 100px;;
} */

.navbar a:hover,
.navbar a.active {
  color: var(--main-color);
}

#menu-icon {
  font-size: 3.6rem;
  color: var(--text-color);
  cursor: pointer;
  display: none;
}
section {
  min-height: 100vh;
  padding: 10rem 9% 2rem;
  /* margin-left: 100px; */
}
.home {
  display: flex;
  align-items: center;
  /* padding: 2%; */
  padding: 0.9%;
  background: var(--second-bg-color); 
  background:url('./my-photo-original.jpg') no-repeat;
   background-size:cover;
  background-position: center; 
 
 
  

  
}
.home-content {
  max-width: 60rem;
  z-index: 99;
  /* margin-left:100px; */
  /* background: var(--second-bg-color); */
}

.home-content h1 {
  font-size: 5.6rem;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.3;
  margin-left: 40px;

}

.home-content h1 span{
  color:var(--text-color);
}

.home-content .text-animate {
  position: relative;
  width: 32.8rem;
  margin-left: 40px;

}

.home-content #element{
    font-size: 3.2rem;
    font-weight: 700;
    color:transparent;
    -webkit-text-stroke:.7px var(--main-color);
    text-wrap:nowrap;
}

.home-content .text-animate h3{
  font-size: 3.2rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 0.7px var(--main-color);
  /* text-wrap: nowrap; */
  background-image: linear-gradient(var(--main-color));
  background-repeat:no-repeat;
  /* -webkit-background-clip : text; */
  background-position: 0 0;

}

.home-content p {
  font-size: 1.6rem;
  margin: 2rem 0 4rem;
  margin-left: 40px;
  /* align-items: center;
  justify-content: center; */
}

.btn-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 34.5rem;
  height: 5rem;
  margin-left:120px;
  /* align-items: center; */
  /* justify-content: center; */

}

.btn-box .btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 15rem;
  height: 100%;
  /* background: var(--main-color); */
  border: 0.2rem solid var(--main-color);
  border-radius: 0.8rem;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: var(--main-color);
  z-index: 1;
  overflow: hidden;
  transition: .5s;
  margin-top: 30px;
}
.btn-box .btn:nth-child(1) {
  background: var(--bg-color);
  /* color: var(--main-color); */
}

.btn-box .btn:nth-child(1):hover{
  color: var(--bg-color);

}
.btn-box .btn:nth-child(1)::before {
  background: var(--bg-color);

}
.btn-box .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background:var(--bg-color);
  
  z-index: -1;
  transition: .5s;
}
.btn-box .btn:hover::before {
  width: 100%;
 
}

.btn-box .btn:hover{
  color:var(--bg-color);
}

.typed-cursor {
  font-size: 4em;
}

.home-sci{
  position: absolute;
  bottom:4rem;
  width:170px;
  display: flex;
  justify-content: space-between;
  margin-left:100px;
  /* align-items: center; */

}

.home-sci a{
  position:relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:40px;
  height:40px;
  background:var(--bg-color);
  border:.2rem solid var(--main-color);
  border-radius: 50%;
  font-size:20px ;
  color:var(--main-color);
  z-index: 1;
  /* overflow: hidden; */
  transition: .5s;
}


.home-sci a::before{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height:100%;
  z-index: -1;
  /* color:var(--bg-color); */
  background-color: var(--main-color);
  border-radius: 50%;



}

.home-sci a:hover::before{
  width:100%;

}

.home-sci a:hover{
  color:var(--bg-color);
}


/* .home img{
  border-radius: 50%;
  border-radius: 30px 30px;
  overflow: hidden; 
   shape-outside: circle(50%);
    display: flex;
  position:absolute;
  top:0;
  right:0;
  width:45%;
  height:100%;
  background: transparent; */
  /* border: 2px solid nav(--main-color); */
  /* transition: 3s; 



}  */
.home-imgHover{
  position:absolute;
  top:0;
  right:0;
  /* width:60%; */
  height:100%;
  background: transparent;
  /* border: 2px solid var(--bg-color); */
  transition: 3s;
  /* padding: 50px 50px; */
/* border-radius: 50%; */


}
.home-imgHover:hover{
  position:absolute;
  top:0;
  right:0;
  width:45%;
  height:100%;
  
  background: var(--bg-color);
  
  /* border: 2px solid var(--bg-color); */

}

/* .about{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  gap:2rem;
  background: var(--bg-color);
  padding-bottom: 6rem;
  /* text-align: center; */


/* }  */

.about {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  background: var(--second-bg-color);
  padding-bottom: 6rem;
  text-align: center;
  min-height: 100vh; /* This ensures the section takes up at least the height of the viewport */

}


.heading{
  font-size:5rem ;
  margin-bottom:3rem;
  text-align: center;

}

span {
  color:var(--bg-color);
}

.about-img{
  position: relative;
  width:25rem;
  height:25rem;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items: center;



}
.about-img img{
  width: 90%; 
  height:90%;
  border-radius: 50%; 
  object-fit: cover;
  border:.2rem solid rgb(0, 86, 92);



}

.about-img .circle-spin{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(0);
  width:100%;
  height:100%;
  border-radius: 50%;
  border-top: .2rem solid var(--main-color);
  border-bottom: 0.2rem solid var(--main-color);
  border-left: 0.2rem solid var(--bg-color);
  border-right: 0.2rem solid var(--bg-color);

}

.about-content{
  text-align: center;
}

.about-content h3{
  font-size: 2.6rem;

}

.about-content p{
  font-size: 1.6rem;
  margin:2rem 0 3rem;
}

.btn-box.btns{
  /* display: inline-block;
  width:15rem; */
  /* align-items: center; */
  display: block; /* Change display to block */
  margin: 0rem auto; /* Set horizontal margin to auto */
  width: 15rem;

}

.btn-box.btns::before{
  background: var(--second-bg-color);
}
.education{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: auto;
  padding-bottom: 5rem;
  /* text-align: center; */

}

.education .education-row{
  display: flex;
  flex-wrap:wrap;
  gap:5rem;
  
}
.education-row .education-column{
  flex: 1 1 40rem;

}

.education-column .title{
  font-size: 2.5rem;

  margin:0 0 1.5rem 2rem;
}

.education-column .education-box{
  border-left:.2rem solid var(--main-color);
}

.education-box .education-content{
  position: relative;
  padding-left:2rem;

}

.education-box .education-content::before{
  content:'';
  position: absolute;
  top:0;
  width:2rem;
  height:2rem;
  background: var(--main-color);
  border-radius: 50%;
  left:-1.1rem;
}


.education-content .content{
  position: relative;
  padding:1.5rem;
  border:.2rem solid var(--main-color);
  border-radius:.6rem;
  border-bottom:2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  box-shadow: #1c82cb;
  

}

.education-content .content::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:100%;
  background: var(--main-color);
  z-index: -1;
  transition: .5s;

}

.education-content .content:hover::before{
  width:100%;


}


.education-content .content .year{
  font-size: 1.5rem;
  color:var(--main-color);
  padding-bottom:.5rem;
}

.education-content .content .year i{
  padding-right:.5rem ;
}

.education-content h3{
  font-size: 2rem;
}

.education-content .content p{
  font-size: 1.6rem;

}


.skills{
  min-height:auto;
  padding-bottom: 7rem;
  background: var(--second-bg-color);
  /* text-align: center; */
}

.skills .skills-row{
  display:flex;
  flex-wrap:wrap;
  gap:5rem;
}

.skills .skills-columns{
  flex:1 1 40rem;

}
.skills-columns .title{
  font-size:2.5rem ;
  margin:0 0 1.5rem;

}

.skills-box .skills-content{
  position:relative;
  border:.2rem solid var(--main-color);
  border-radius: .6rem;
  padding:.5rem 1.5rem;
  z-index:1;
  overflow: hidden;


}

.education span{
  color: var(--main-color);
}

.skills-box .skills-content::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:100%;
  background: var(--second-bg-color);
  z-index:-1;
  transition:.5s;

}


.skills-box .skills-content:hover::before{
  width:100%;


}
.skills-content .progress{
  padding: 1rem 0;
}

.skills-content .progress h3{
  font-size: 1.7rem;
  display:flex;
  justify-content: space-between;
}

.skills-content .progress h3 span{
  color:var(--text-color);
}

.skills-content .progress .bar{
  height:2.5rem;
  border-radius: .6rem;
  border: .2rem solid var(--main-color);
  padding:.5rem;
  margin:1rem 0;

}

.skills-content .progress .bar span{
  display: block;
  height:100%;
  border-radius:.3rem ;
  background:var(--main-color);
}


/* .skills-columns:nth-child(1) */
.skills-columns:nth-child(1) .skills-content .progress:nth-child(1) .bar span{
  width:90%;
}
.skills-columns:nth-child(1) .skills-content .progress:nth-child(2) .bar span{
  width:80%;
}
.skills-columns:nth-child(1) .skills-content .progress:nth-child(3) .bar span{
  width:70%;
}
.skills-columns:nth-child(1) .skills-content .progress:nth-child(4) .bar span{
  width:70%;
}
.skills-columns:nth-child(1) .skills-content .progress:nth-child(5) .bar span{
  width:70%;
}
.skills-columns:nth-child(1) .skills-content .progress:nth-child(6) .bar span{
  width:70%;
}
.skills-columns:nth-child(2) .skills-content .progress:nth-child(1) .bar span{
  width:90%;
}
.skills-columns:nth-child(2) .skills-content .progress:nth-child(2) .bar span{
  width:90%;
}
.skills-columns:nth-child(2) .skills-content .progress:nth-child(3) .bar span{
  width:80%;
}
.skills-columns:nth-child(2) .skills-content .progress:nth-child(4) .bar span{
  width:80%;
}
.skills-columns:nth-child(2) .skills-content .progress:nth-child(5) .bar span{
  width:80%;
}


.contact{
  min-height:auto;
  padding-bottom:7rem;


}

.contact form{
  max-width:70rem;
  margin:0 auto;
  text-align: center;

}
.contact form .input-box{
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}

.contact form .input-box .input-field{
  position: relative;
  width:49%;
  margin:.8rem 0;
}
.contact form .input-box .input-field input,
.contact form .textarea-field textarea{
  width:100%;
  height:100%;
  padding:1.5rem;
  font-size:1.6rem;
  color:var(--text-color);
  background: transparent;
  border-radius:.6rem;
  border:.2rem solid var(--main-color);




}



.contact form .input-box .input-field input::placeholder,
.contact form .textarea-field textarea::placeholder{
  color:var(--text-color);


}

.contact form .focus{
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:100%;
  background: var(--second-bg-color);
  border-radius: .6rem;
  z-index:-1;
  transition: .5s;

}



.contact form .input-box .input-field input:focus~.focus,
.contact form .input-box .input-field input:valid~.focus,
.contact form .textarea-field textarea:focus~.focus,
.contact form .textarea-field textarea:valid~.focus
{
  width:100%;



}


.contact form .textarea-field{
  position:relative ;
  margin :.8rem 0 2.7rem;
  display: flex;

}

.contact form .textarea-field textarea{
  resize:none;



}

.contact form .btn-box.btns .btn{
  cursor:pointer;


}

.footer{
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding:1.5rem 7%;
  background: var(--second-bg-color);
}

.footer-text p{
  font-size:2rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: 200;

}

.footer-iconTop a{
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .8rem;
  background: var(--main-color);
  border: .2rem solid var(--main-color);
  border-radius: .6rem;
  /* color:var(--bg-color); */
  z-index: 1;
  overflow: hidden;


}


.footer-iconTop a::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:100%;
  background:var(--second-bg-color);
  z-index:-1;
  transition:.5s;


}

.footer-iconTop a:hover::before{
  width:100%;
}

.footer-iconTop a i{
  font-size: 2.6rem;
  color:var(--bg-color);
  transition: .5s;


}

.footer-iconTop a :hover i{
  color:var(--main-color);
}


.footer .footer-text span{
  color: red;
  font-size: large;
}

/* BREAKPOINT */
@media (max-width: 1200px) {
  html{
    font-size:55%;

  }


}


@media (max-width:991px) {
  .header{
    padding:2rem 4%;


  }

  section{
    padding:10rem 4% 2rem;

  }

  .home{
    padding:0 4%;

  }

  .footer{
    padding:2rem 4%;
  }



}

@media (max-width:768px) {
  .header{
    background: var(--bg-color);
  }

  #menu-icon{
    display:block;

  }

  .navbar{
    position: absolute;
    top:100%;
    left:-100%;
    width:100%;
    padding:1rem 4%;
    background: var(--main-color);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.2);
    transition:.25s ease;
    transition-delay: .25s;
    z-index: 1;


  }

  .navbar .active-nav{
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: var(--bg-color);
    border-top: .1rem solid rgba(0,0,0,.2);
    z-index: -1;
    transition: .25s ease;
    transition-delay: 0s;
  }

  .navbar.active .active-nav{
    left:0;
    transition-delay: .25s;
  }
.navbar a{
  display: block;
  font-size: 2rem;
  margin:3rem 0;
  transform: translateX(-20rem);
  transition: .25s ease;
  transition-delay: 0s;

}

.navbar.active a{
  transform: translateX(0);
  transition-delay: .25s;


}



}

.navbar.active{
  transition-delay:.25s;
  left:0;

}

.home-imgHover{
  pointer-events:none ;
  background: var(--bg-color);
  opacity:.6;
}

@media (max-width:520px){
  html{
    font-size: 50%;

  }
  .home-content h1{
    display: flex;
    flex-direction: column;


  }

  .home-sci{
    width:160px;
  }

  .home-sci a{
    width: 38px;
    height: 38px;
  }
}

@media screen and (max-width:462px){
  .home{
    background: url('./my-photo.jpg') no-repeat;
    background-size: cover;
    background-position: center; 
    visibility: visible;
   
    
  }
  .home-content h1{
    font-size: 5.2rem;
    color:var(--main-color);
    margin-top: -30px;

  }

  .home-content p{
    margin: 0;
    display: flex;
    word-wrap: break-word;

  }

  

 
  

 

  .education{
    padding:10rem 4% 5rem 5%;
  }

  .contact form  .input-box .input-field{
    width:100%;
  }

  .footer{
    flex-direction: column-reverse;
  }

  .footer p{
    margin-top:2rem;
    text-align: center;
  }
}


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

  body{
    overflow-x: hidden;
   }
  .home{
    background: url('./my-photo\(1\).jpg') no-repeat;
    background-attachment: fixed;

    background-size: cover;
    align-items: center;
    /* justify-content: center; */
 
   
  }
  /* .home-content h1{
    display: flex;
    flex-direction: column;


  } */
  /* .home-content p{
    display: flex;
    flex-direction: column;


  }

  .home .home-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  

  } */


  /* .home-content p { */
    /* max-width: 100%; Set a maximum width */
    /* word-wrap: break-word; Enable word wrapping */
    /* display: flex;
    flex-direction: column;
  } */

  /* .home-content p{
    margin-top: 100px;
    display: flex;
    font-size: 4rem;
    word-wrap: break-word;

  } */



  .about{
    background-size: cover;
    background-attachment: fixed;
    background: var(--main-color);
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */

  }



  
}

@media screen and (max-width:300px){
   body{
    overflow-x: hidden;
   }
  .home{
    /* background: url('./my-photo.jpg') no-repeat; */
background: url('./resize-1.jpg');

    background-attachment: fixed;
    background-size: cover;
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
    
  }
/* 
  .home .home-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  

  } */


  /* .home-content p { */
    /* max-width: 100%; /* Set a maximum width */
    /* word-wrap: break-word; Enable word wrapping */ */
    /* display: flex;
    flex-direction: column;
  } */


  .about {
    background-size: cover;
    background-attachment: fixed;
    background: var(--main-color);
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
  }

 

 



}

@media screen and (max-width:200px){
  body{
    overflow-x: hidden;
   }
   .home{

    background-size: cover;
    padding: 0; /* Remove any padding */
    margin-left: 0; /* Remove any margin */
    background-position: left center; /* Add this line */
  }
}
@media screen and (max-width:100px){
  body{
    overflow-x: hidden;
   }
   .home{
    background: url('./resize-1.jpg');

    background-size: cover;
    padding: 0; /* Remove any padding */
    margin-left: 0; /* Remove any margin */
    /* background-position: left center; Add this line */
    align-items: center;
    justify-content: center;
  }
}