@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;
                                    }
                                   
                                    :root {
                                      --main-color: #033a80;
                                      --bg-color: #fff;
                                      --text-color: #0f0c27;
                                      --hover: hsl(260, 100%, 51%);
                                      --big-font: 3.2rem;
                                      --medium-font: 1.8rem;
                                      --p-font: 0.941rem;
                                    }
                                   
                                    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: crimson;
                                    }
                                   
                                    .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(260, 100%, 44%, 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;
                                    }
                                   
                                    .html-bar {
                                      width: 94%;
                                    }
                                   
                                    .css-bar {
                                      width: 84%;
                                    }
                                   
                                    .js-bar {
                                      width: 74%;
                                    }
                                   
                                    .react-bar {
                                      width: 80%;
                                    }
                                   
                                    .services-content {
                                      display: grid;
                                      grid-template-columns: repeat(auto-fit, minmax(200px, auto));
                                      justify-content: center;
                                      gap: 1rem;
                                      margin-top: 2rem;
                                    }
                                   
                                    .services-box {
                                      padding: 20px;
                                      width: 260px;
                                      display: flex;
                                      flex-direction: column;
                                      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: #02225a;
                                    }
                                   
                                    .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 {
                                      display: grid;
                                      place-items: center;
                                      margin-top: 2rem;
                                    }
                                   
                                    .contact-form form {
                                      display: flex;
                                      flex-direction: column;
                                      width: 650px;
                                    }
                                   
                                    form input,
                                    textarea {
                                      padding: 15px;
                                      border-radius: 0.5rem;
                                      width: 100%;
                                      border: none;
                                      outline: none;
                                      background: hsla(260, 100%, 44%, 0.1);
                                      margin-bottom: 1rem;
                                      color: var(--text-color);
                                    }
                                   
                                    form input::placeholder,
                                    textarea::placeholder {
                                      color: var(--text-color);
                                    }
                                   
                                    form textarea {
                                      resize: none;
                                      height: 200px;
                                    }
                                   
                                    .contact-button {
                                      width: 160px;
                                      cursor: pointer;
                                      background: #2768d9;
                                      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(10, 26, 208);
                                      font-size: 25px;
                                      margin-left: 10px;
                                      text-align: center;
                                      line-height: 40px;
                                      background-color: #fff;
                                      border-radius: 50%;
                                      width: 40px;
                                      height: 40px;
                                    }
                                   
                                    .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%;
                                
                                      }
                                   p {
                                     margin: 10px;
                                   }
                                      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%;
                                      }
                                   
                                      .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;
                                        height: 230;
                                        width:230;
                                        
                                      }
                                   
                                      .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;
                                      }
                                      .about-text p {
                                            font-size: var(--p-font);
                                              font-weight: 400;
                                              text-align: center;
                                      }
                                   
                                      .contact-button {
                                        margin-left: 25%;
                                      }
                                    }
                                   
                                    @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%;
                                      }
                                  
                                      
                                    }