* {
      box-sizing: border-box;
  }

  html,
  body {
      margin: 0;
      scroll-behavior: smooth;

  }

  body {
      margin: 0;
      background-color: #0d1224;
      overflow: hidden;
  }

  /* -------------   loader   ------------ */


  .liquid-loader {
      position: fixed;
      background-color: black;
      width: 100vw;
      height: 100vh;
      justify-content: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 20px;
      font-family: system-ui, sans-serif;
      z-index: 9999;
  }

  .loader-track {
      position: relative;
      width: 180px;
      height: 32px;
      background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
      border-radius: 16px;
      overflow: hidden;
      box-shadow:
          inset 0 2px 4px rgba(0, 0, 0, 0.6),
          0 1px 3px rgba(255, 255, 255, 0.1);
  }

  .liquid-fill {
      position: absolute;
      top: 2px;
      left: 2px;
      height: calc(100% - 4px);
      background: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899, #f59e0b);
      border-radius: 14px;
      animation:
          fillProgress 4s ease-out infinite,
          colorShift 3s linear infinite;
      box-shadow:
          0 0 12px rgba(124, 58, 237, 0.4),
          inset 0 1px 2px rgba(255, 255, 255, 0.2);
  }

  .loading-text {
      color: white;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 1px;
      animation: textGlow 1s ease-in-out infinite;
  }

  .dot {
      margin-left: 3px;
      animation: blink 1s infinite;
  }

  .dot:nth-of-type(1) {
      animation-delay: 0s;
  }

  .dot:nth-of-type(2) {
      animation-delay: 0.3s;
  }

  .dot:nth-of-type(3) {
      animation-delay: 0.4s;
  }

  @keyframes fillProgress {
      0% {
          width: 4px;
      }

      25% {
          width: 25%;
      }

      50% {
          width: 50%;
      }

      75% {
          width: 75%;
      }

      100% {
          width: calc(100% - 4px);
      }
  }

  @keyframes colorShift {
      0% {
          filter: hue-rotate(0deg) brightness(1);
      }

      33% {
          filter: hue-rotate(120deg) brightness(1.1);
      }

      66% {
          filter: hue-rotate(240deg) brightness(0.9);
      }

      100% {
          filter: hue-rotate(360deg) brightness(1);
      }
  }

  @keyframes textGlow {

      0%,
      100% {
          opacity: 0.7;
          text-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
      }

      50% {
          opacity: 1;
          text-shadow: 0 0 16px rgba(139, 92, 246, 0.6);
      }
  }

  @keyframes blink {

      0%,
      50% {
          opacity: 1;
      }

      51%,
      100% {
          opacity: 0;
      }
  }



  /* ----------  loager - end  -------------- */


  nav {
      display: flex;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.1);
      position: sticky;
      top: 0;
      backdrop-filter: blur(32px);
      z-index: 99;
      max-width: 1200px;
      margin: auto;
      border-radius: 0px 0px 10px 10px;
  }

  .name {
      /* border: 0.1px solid black; */
      /* margin: auto; */
      color: #16F2B3;
      place-content: center;
      font-family: 'Gi    ll Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      font-size: 1.4rem;
      margin-left: 25px;

  }

  .name h2 {
      margin-top: 10px;
      /* margin-left: 10px; */
  }

  ul {
      display: flex;
      gap: 20px;
      margin-right: 25px;
      /* border: 0.5px solid black; */
  }

  li {
      color: white;
      list-style: none;
      margin-top: 8px;
      font-size: 1rem;
      cursor: pointer;
  }

  li a {
      text-decoration: none;
      color: white;
  }

  li a:hover {
      text-decoration: none;
      color: white;
  }

  #home {
      height: auto;
      width: auto;
      display: flex;
      /* border: 1px solid white; */
      justify-content: center;
      max-width: 1200px;
      margin: auto;
      background-color: #0d1224;
      padding-bottom: 20px;

  }

  .home_col1 {
      color: white;
      /* height: 200px; */
      width: 52%;
      /* border: 1px solid white; */
      padding: 80px 0px 0px 60px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .namecolor {
      color: #EE37A1
  }

  .home_col1 h1 {
      font-size: 2.6rem;
      margin: 0px 0px 0px 0px;
      line-height: 54px;
      letter-spacing: -2px;
  }

  .home_col2 {
      height: 400px;
      width: 40%;
      /* position: absolute; */
      /* border: 1px solid white; */
      padding-top: 50px;
  }

  .console {
      height: auto;
      width: 25rem;
      border: 1px solid #334087;
      margin: auto;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
  }

  .top_con {
      height: 50px;
      width: auto;
      border: 1px solid #334087;
      align-items: center;
      display: flex;
      padding-left: 20px;
      gap: 10px;
      border-radius: 15px 15px 0px 0px;
  }

  .midone {
      background: url(https://abusaid.netlify.app/hero.svg);
      display: flex;
      background-size: cover;
      background-position: center;

  }

  .main_con {
      color: white;
      padding: 21px 0px 0px 20px;
  }

  #red,
  #yellow,
  #green {
      height: 10px;
      width: 10px;
      border-radius: 50%;
  }

  .line2,
  .line3,
  .line4 {
      margin-left: 30px;
  }

  .line5 {
      margin-left: 60px;
  }

  .line6 {
      margin-left: 80px;
  }

  .qcb {
      color: rgba(128, 127, 127, 0.966);
      letter-spacing: 3px;
  }

  .color {
      color: yellow;
  }

  .org {
      color: #EE37A1;
  }

  .main_con span {
      letter-spacing: 1px;
  }

  #about {
      height: 50%;
      width: 100%;
      background-color: #0d1224;
  }

  .connect_me {
      margin: 40px 20px;
  }

  .connect_me img {
      height: 35px;
      margin-left: 10px;
      cursor: pointer;
  }

  .buttons {
      height: 50px;
      width: auto;
      /* border: 1px solid white; */
      display: flex;
      align-items: center;
      /* justify-content: center; */
      gap: 20px;
      padding-left: 20px;

  }

  .buttons button {
      height: 42px;
      width: 150px;
      font-size: 12px;

      border: none;
      font-weight: 600;
      background-color: transparent;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.4px solid transparent;
      border-radius: 20px;
      /* border-image: linear-gradient(45deg, #ff4d4d, #4d79ff) 1; */
      background:
          linear-gradient(#020a28, #020a28) padding-box,
          /* inner background */
          linear-gradient(45deg, #ff4d4d, #4d79ff) border-box;
      cursor: pointer;
  }

  #resume {
      background:
          linear-gradient(#EE37A1, #8E32F2) padding-box,
          /* inner background */
          linear-gradient(20deg, #ff4d4d, #4d79ff) border-box;
  }

  #about {
      height: 300px;
      width: auto;
      max-width: 1200px;
      /* border: 1px solid white; */
      display: flex;
      gap: 20px;
      align-items: center;
      justify-content: center;
      margin: auto;
      margin-top: 40px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .about_con {
      height: 200px;
      width: 60%;
      /* border: 1px solid white; */
      color: white;
  }

  .about_con h3 {
      color: rgb(0, 236, 165);
      font-size: 1.6rem;
      margin: 10px 0px 0px 0px;
      text-transform: uppercase;
      letter-spacing: 2.1px;
  }

  .about_con p {
      font-size: 1.2rem;
      letter-spacing: 1px;
  }

  .my_img {
      height: 200px;
      width: 30%;
      /* border: 1px solid white; */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
  }

  .my_img img {
      height: 200px;
      width: auto;

  }

  .iconB {
      font-size: 0.9rem;
      letter-spacing: 1.6px;
      height: 40px;
      width: 100px;
      border: 1px solid rgb(0, 54, 171);
      transform: rotate(90deg);
      color: white;
      place-content: center;
      text-transform: uppercase;
      padding-left: 10px;
      border-radius: 10px;
      background-color: #1818757a;
  }

  .cover hr {
      transform: rotate(90deg);
      margin-top: 70px;
      width: 70px;
      color: #1818757a;
      border: 1.5px solid #1818757a;
  }


  /* skills */
  .skills {

      height: auto;
      width: 100%;
      max-width: 1200px;
      margin: auto;
      margin: 30px auto 30px auto;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .skill {
      letter-spacing: -3px;
      font-size: 2.4rem;
      height: 110px;
      font-weight: 900;
      width: 100%;
      color: white;
      margin: auto;
      background-color: 0d1224;
      display: flex;
      align-items: center;
      padding-left: 30px;
      overflow: hidden;
      position: relative;
  }

  .skills hr {
      border: 0.1px solid white;
      /* height: 0.7px; */

      margin: 0px;
  }

  .skill img {
      height: 65px;
      display: none;
      top: 0;
      left: 0;
      /* transform: translate(-50%, -50%); */
      position: absolute;
      pointer-events: none;
  }

  .skills h5,
  #projects h5,
  .contact h5 {
      /* padding-left: 30px; */
      color: #1be0ad;
      font-size: large;
      letter-spacing: 2px;
      width: 120px;
      border: 1px solid rgb(0, 54, 171);
      margin: 0px auto 30px auto;
      align-items: center;
      display: flex;
      justify-content: center;
      padding: 5px;
      border-radius: 10px;
      background-color: #1818757a;

  }

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

  #projects {
      margin: auto;
      margin-top: 4rem;
      /* height: 500px;    */
      max-width: 1200px;
      width: auto;

  }

  .pro_con {
      /* height: 100px; */
      padding: 50px 0px;
      width: 80%;
      margin: auto;
      /* border: 1px solid white; */
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 50px;
      flex-wrap: wrap
  }

  .project {
      position: relative;
      height: 15rem;
      width: 20rem;
      /* border: 1px solid red; */
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff14;
      cursor: pointer;
  }

  .link_icon {
      filter: brightness(0) invert(1);
      opacity: 0;
      display: none;
      transition: opacity 0.2 ease;

  }

  .project img {
      height: 17rem;
      width: 15rem;
      object-fit: contain;
  }

  .project a {
      position: absolute;
  }

  .project div {
      position: absolute;
      transform: translate(-30px, -13px);
  }

  .contact {
      /* height: 500px; */
      /* border: 1px solid white; */
      margin: auto;
      max-width: 1200px;

  }

  .contact_box,
  .direct_con {
      /* height: 20rem; */
      width: 40%;
      border: 1px solid transparent;
      background: linear-gradient(45deg, #030303fc, #485b5d57);
      border-radius: 20px;
      background-color: #3b405212;
  }

  .inner_cont {
      perspective: 1000px;
      display: flex;
      justify-content: center;
      gap: 50px;
      margin-top: 5rem;
  }

  input {
      padding-left: 20px;
      height: 48px;
      border: none;
      border-radius: 15px;
      background-color: #3a3939;
      color: white;
  }

  form {
      gap: 10px;
      display: grid;
      padding: 37px;
  }

  input::placeholder,
  textarea::placeholder {
      color: rgba(255, 255, 255, 0.614);
  }

  textarea {
      resize: none;
      /* overflow: scroll; */
      height: 4.3rem;
      padding: 15px;
      border-radius: 15px;
      background-color: #3a3939;
      border: none;
      color: white;
  }

  .submit {
      height: 40px;
      width: 99%;
      border-radius: 10px;
      margin: auto;
      background-color: #474444;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bolder;
      letter-spacing: 1.2px;
      cursor: pointer;
      transition: all 0.4s ease;
  }

  .submit:hover {
      background-color: #09976fb6;
  }

  .line_fir {
      display: flex;
      align-items: center;
      padding-left: 40px;
      margin-top: 40px;
      gap: 20px;
  }

  .line_fir h3 {
      font-size: 2rem;
      color: white;
      line-height: 15px;
  }

  .line_em {
      padding-left: 34px;
      font-size: 15px;
      color: white;
      letter-spacing: 1.2px;
  }

  .line_fir img {
      height: 30px;
      width: 30px;
      filter: brightness(0) invert(1);
  }

  .direct_con h1 {
      color: white;
      padding-left: 40px;
      margin-top: 30px;
  }

  .contact_boxes {
      justify-content: center;
      display: grid;
      /* grid-template-columb: repeat(2, 1fr); */
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      margin: 30px auto;
      width: 80%;
      /* border: 1px solid white; */
  }

  .contact_boxi {
      height: 55px;
      width: 98px;
      border: 1px solid #2950dbf5;
      padding: 8px 0px;
      display: flex;
      justify-content: center;
      border-radius: 10px;
      cursor: pointer;
  }

  .contact_boxi img {
      height: 30px;
  }

  /* ------   footer  ------ */

  footer {
      height: 50px;
      width: 80%;
      margin: auto;
      /* border: 1px solid white; */
      margin: 50px auto -0px auto;
      border-radius: 10px 10px 0px 0px;
      max-width: 1200px;
      color: white;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(32px);
      position: relative;
      bottom: 0;
  }



  /* footer img{
            height: 10x;
            width:10px
        } */
  button img {
      height: 20px;
      width: 20px;
      margin-left: 8px;
      filter: brightness(0) invert(1);
  }







  @media (max-width:1000px) {
      .console {
          width: 20rem;
      }

      .home_col1 {
          padding: 0px;
      }
  }

  @media (max-width:600px) {

      .line_em {
          margin-top: 10px;
      }

      .home_col1 {
          /* min-width: 22rem; */
          min-width: 19rem;
          padding: 30px 0px 0px 10px;
          margin: auto;
      }

      .home_col2 {
          width: auto;
          margin: auto;
          padding: 0px;
          margin-top: 20px;
      }

      .home_col1 h1 {
          font-size: 2rem;
          line-height: 40px;
      }

      .home,
      .midone {
          flex-direction: column-reverse;
          /* margin-top: 20px; */
          gap: 20px;
          /* border: 1px solid white ; */
      }

      #home {
          height: auto;
      }

      .midone {
          /* margin-top: 50px; */
          padding-top: 20px;
      }

      .console {
          height: auto;
          width: 22rem;
      }

      .top_con {
          height: 40px;
      }

      .main_col {
          font-size: 13px;
      }

      .buttons {
          padding-left: 0px;
      }

      #about {
          flex-direction: column-reverse;
          height: auto;
      }

      .about_con {
          width: 76%;
      }


      .cover {
          display: none;
      }

      .about_con p {
          width: 80vw;
      }

      .skill {
          font-size: 2rem;
      }

      .skills {

          margin-top: 6rem;
      }

      .inner_cont {
          flex-direction: column;
          align-items: center;
          gap: 25px;

      }

      .contact_box,
      .direct_con {
          width: 80%;
          transform-style: preserve-3d;
          will-change: transform;
      }

      .line_fir {
          margin-top: 25px;
      }

      form {
          gap: 2px;
      }

      .submit {
          margin: 0px auto 20px auto;
      }

      footer {
          height: 30px;
      }

  }