@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
   text-decoration: none;
   scroll-behavior: smooth;
   scroll-padding-top: 2rem;
   font-family: "Poppins", sans-serif;
 }
 .home-text h1{
  animation: aa 1.5s linear infinite;
 }
 @keyframes aa {
  0%,100%{
    transform:  translateY(0px);
  }
  50%{
    transform:translateY(-3px);

  }
  
 }
 .bar{
	width: 30px;
	height: 2px;
	margin-top: 5px;
	border-radius: 15px;
	background-color:var(--text-color);
	transition: .5s all ease-in-out;
}
.second{
	width: 15px;
	margin-left: 7px;
}
.first{
	background-color: var(--main-color);

}
.bottom{
	background-color: var(--main-color);

}
.active .second{
	transform: translateX(1000px);
}
.active .first{
	transform: translateY(7px) rotateZ(42deg);
}
.active .bottom{
	transform: translateY(-7px) rotateZ(-42deg);
}

 :root {
   --main-color: #7b8ba0;
   --bg-color: rgb(0, 0, 0);
   --text-color: #ffffff;
   --hover: hsl(260, 2%, 37%);
   --big-font: 3.2rem;
   --medium-font: 1.8rem;
   --p-font: 0.941rem;
 }
 .heading li{
  text-align: center;
 }

 section {
   padding: 50px 10%;
 }

 body.active {
   --text-color: #fff;
   --bg-color: #0f0c27;
 }

 body {
   background: var(--bg-color);
   color: var(--text-color);
 }

 *::selection {
   color: var(--bg-color);
   background: var(--main-color);
 }

 .heading {
   text-align: center;
 }

 .heading h2 {
   font-size: 30px;
 }

 .heading span {
   font-size: var(--p-font);
   color: rgb(2, 166, 70);
 }

 header {
   position: fixed;
   width: 100%;
   top: 0;
   right: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--bg-color);
   padding: 13px 10%;
   transition: 0.2s;
   box-shadow: -3px -3px 7px #ffffff73,
     2px 2px 5px rgba(94, 104, 121, 0.288);
 }

 header.shadow {
   box-shadow: 0 0 4px rgb(14 55 54 / 15%);
 }

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

 .logo span {
   font-size: 1.61rem;
   font-weight: 600;
   color: rgb(152, 131, 135);
 }

 .navbar {
   display: flex;
 }

 .navbar a {
   font-size: 1rem;
   padding: 10px 20px;
   color: var(--text-color);
   font-weight: 500;
 }

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

 #menu-icon {
   font-size: 24px;
   cursor: pointer;
   z-index: 10001;
   display: none;
 }

 #darkmode {
   font-size: 22px;
   cursor: pointer;
 }

 .home {
   position: relative;
   width: 100%;
   min-height: 100vh;
   display: grid;
   grid-template-columns: 0.2fr 1fr 1fr;
   align-items: center;
   gap: 1rem;
 }

 .home-img {
   order: 3;
 }

 .home-img img {
   width: 100%;
 }

 .home-text span {
   font-size: var(--medium-font);
   font-weight: 500;
 }

 .home-text h1 {
   font-size: var(--big-font);
 }

 .home-text h2 {
   font-size: 1.1rem;
   font-weight: 400;
 }

 .home-text p {
   font-size: var(--p-font);
   font-weight: 400;
   margin: 0.7rem 0 1rem;
 }

 .social {
   display: flex;
   flex-direction: column;
 }

 .social a {
   margin-bottom: 1rem;
   font-size: 22px;
   color: var(--text-color);
 }

 .social a:hover {
   color: var(--hover);
 }

 .btn {
   display: inline-block;
   background: var(--main-color);
   color: #fff;
   padding: 0.7rem 1.3rem;
   border-radius: 0.5rem;
 }

 .btn:hover {
   background: var(--hover);
 }


 .about-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   margin-top: 2rem;
 }

 .about-img img {
   width: 80%;
   border-radius: 0.5rem;
 }

 .about-text p {
   font-size: var(--p-font);
   font-weight: 400;
   text-align: justify;
 }

 .information {
   margin: 1rem 0 1.4rem;
 }

 .information .info-box {
   display: flex;
   align-items: center;
   margin-bottom: 1.4rem;
 }

 .information .info-box .bx {
   font-size: 22px;
 }

 .information .info-box span {
   font-weight: 400;
   margin-left: 1rem;
 }

 .skills-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   gap: 2rem;
   margin-top: 4rem;
 }

 .skills-img img {
   width: 80%;
   padding-left: 4rem;
   object-position: center;
 }

 .bars-box {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 0;
   margin-bottom: 1rem;
 }

 .bars-box h3,
 span {
   font-size: 1.1rem;
   font-weight: 500;
 }

 .light-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 0.5rem;
   background: hsla(259, 42%, 68%, 0.4);
   border-radius: 0.5rem;
 }

 .percent-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 0.5rem;
   background: var(--main-color);
   border-radius: 0.5rem;
 }

 .Bitbucket-bar {
   width: 94%;
 }

 .GKE-bar {
   width: 84%;
 }

 .promethus-bar {
   width: 85%;
 }

 .Gradle-bar {
   width: 80%;
 }
  .Nginx-bar {
   width: 89%;
 }
  .Pipeline-bar {
   width: 94%;
 }
 .Ansible-bar {
   width: 78%;
 }
 .Cloud-bar {
   width: 87%;
 }
 .GitOps-bar {
   width: 97%;
 }
  .AWS-bar {
   width: 84%;
 }




 .services-content {
   display: flex;
   grid-template-columns: repeat(auto-fit, minmax(200px, auto));
   justify-content: center;
   gap: 1rem;
   margin-top: 2rem;
 }

 .services-box {
   padding: 20px;
   width: 260px;
   flex-basis: 50%;
   align-items: center;
   text-align: center;
   border-radius: 0.5rem;
   border-bottom: 2px solid var(--main-color);
   box-shadow: 0 2px 7px rgb(14 55 54 / 15%);
 }

 .services-box:hover {
   background-color: #535d6e;
 }

 .services-box h3 {
   font-size: 1rem;
   font-weight: 600;
   margin: 0.7rem 0 0.4rem;
 }

 .services-box:hover h3 {
   color: #fff;
 }

 .services-box .bx {
   padding-top: 2rem;
   font-size: 54px;
   color: var(--main-color);
 }

 .services-box:hover .bx {
   color: #22cf91;
 }

 .services-box a {
   color: var(--main-color);
   font-size: var(--p-font);
   font-weight: 500;
 }

 .services-box:hover a {
   color: #8b8a8f;
 }
 .contact-form p{
  text-align: center;
 }

 .contact-form {
   display: grid;
   place-items: center;
   margin-top: 2rem;
 }
 .contact-form li{
  margin-top: 5px;

 }
 .contact-form li a{
  color: #000;

 }
 .info-box span a{
  color: #ffffff;
 }
 .contact-form form {
   display: flex;
   flex-direction: column;
   width: 650px;
 }
 .about-text p{
  padding: 10px 0px;
 }
 .about-text a{
  justify-content: center;
  align-items: center;
  display: flex;
  text-align: center;
 }

 .contact-button {
   width: 160px;
   cursor: pointer;
   background: #000000;
   color: #fff;
   justify-content: center;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-left: 35%;
 }

 .contact-button:hover {
   background: var(--hover);
 }

 .footer {
   display: grid;
   place-items: center;
   padding: 20px;
   color: #000;
 }

 .footer h2 {
   font-size: 1.5rem;
   margin-bottom: 1.6rem;
   color: var(--text-color)
 }

 .footer-social a i {
   color: rgb(0, 0, 0);
   font-size: 25px;
   margin-left: 10px;
   text-align: center;
   line-height: 40px;
   background-color: #fff;
   border-radius: 50%;
   width: 40px;
   height: 40px;
 }
 .las a{
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
  padding: 10px;
 }

 .copyright {
   padding: 20px;
   background: var(--main-color);
   text-align: center;
   color: #fff;
 }

 .copyright a {
   color: #22cf91;
 }

 /* For Mobile */
 @media (max-width: 991px) {
   header {
     padding: 18px 4%;
   }

   section {
     padding: 50px 4%;
   }
 }

 @media (max-width: 881px) {
   :root {
     --big-font: 2.7rem;
     --medium-font: 1.4rem;
   }
 }

 @media (max-width: 768px) {
   :root {
     --big-font: 2.4rem;
     --medium-font: 1.2rem;
   }

   header {
     padding: 11px 4%;
   }

   #menu-icon {
     display: initial;
     color: var(--text-color);
   }

   header .navbar {
     position: absolute;
     top: -500px;
     left: 0;
     right: 0;
     display: flex;
     flex-direction: column;
     background: var(--bg-color);
     box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
     transition: 0.2s ease;
     text-align: center;
   }

   .navbar.active {
     top: 100%;
     height: 100vh;
   }

   .navbar a {
     padding: 1.5rem;
     display: block;
     background: var(--bg-color);
   }

   #darkmode {
     position: absolute;
     top: 1.4rem;
     right: 2rem;
   }

   .scroll-down {
     display: none;
   }

   .home {
     grid-template-columns: 0.5fr 3fr;
   }

   .home-text {
     grid-column: 1/3;
     padding-left: 1.4rem;
   }

   .home-img {
     order: initial;
   }

   .about-container {
     grid-template-columns: 1fr;
   }

   .about-img {
     display: flex;
     justify-content: center;
   }

   .skills-container {
     grid-template-columns: 1fr;
   }

   .skills-img img {
     padding-left: 0;
   }

   .skills-img {
     padding-top: 2rem;
     display: flex;
     justify-content: center;
   }

   .contact-form form {
     width: 300px;
   }

   .contact-button {
     margin-left: 25%;
   }
   .services-content{
    display: flex;
    flex-wrap: wrap;
   }
   .services-box{
    flex-basis: 100%;
   }
   .home-text h1{
    font-size: 27px;

   }
   .logo{
    font-size: 15px;
   }
   .logo span{
    font-size: 15px;

   }
   .home{
    display: flex;
   }
 }

 @media (max-width: 340px) {
   :root {
     --big-font: 1.7rem;
     --medium-font: 1.1rem;
   }

   .home-text span {
     font-size: 1rem;
   }

   .home-text h2 {
     font-size: 0.9rem;
     font-weight: 500;
   }

   .information .info-box span {
     font-size: 1rem;
   }

   .contact-form form {
     width: 300px;
   }

   .contact-button {
     margin-left: 25%;
   }
 }