.intro{
    /* background: linear-gradient( rgb(0, 0, 0),#ff6600); */
    height: 95vh;
    position: relative;
}
.intro .nav-menu{
    position: fixed;
    top: 13%;
    right: 10;
    height: 70vh;
    width: 5em;
    /* background-color: var(--main-color); */

}
 
/* intriducing myself */
.home-introduction{
    display: flex;
    justify-content: space-evenly;

}
.elogio-main-img{
   position: relative;
   left: 4vw;
}
.greeting-img{
    width:  30rem;
    height: 100vh;
    object-fit: contain;
    margin-top: 4em;
    z-index: 100;
 }
 .shape{
   position: absolute;
   top: 20%;
   left: 60vw;
   width: 400px;
   height: 400px;
   background-color: var(--secondary-color);
   border-radius: 50%;
   transform: translate(-20%, -15%) rotate(30deg);
   z-index: -1;
   opacity: 90%;
   box-shadow: 0 4px 10px var(--secondary-color);
}
 .shape1{
   position: absolute;
    top: 20%;
   left: 60vw;
   width: 400px;
   height: 400px;  
   background: rgba(255, 255, 255, 0.1); /* semi-transparent */
      backdrop-filter: blur(3px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   border-radius: 50%;
   transform: translate(-20%, -15%) rotate(30deg);
   z-index:-1;
   opacity: 90%;
}

.hastag-color{
   color: var(--secondary-color);
}

 .introduction{
    transform: translateY( 25ch);
 }
 .greeting{
   position: relative;
    color: var(--primary-color);
    font-size:  2.5rem;
 }
 .greet{
   color: var(--secondary-color);
   font-size: 1.6rem !important;
    font-weight: 400;
 }
 .animated-text{
  position: relative;
 }
 .animated-text h1{
    font-size: 3rem;
 }
 .introduction h4{
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 500;
 }
   .word {
      /* color: var(--secondary-color);
      font-weight: bold;
      animation: fadeInOut 2s infinite; */
      color: var(--secondary-color);
  font-weight: bold;
  animation: fadeInOut 3s infinite;
  display: inline-block;
  width: 8ch; /* Reserve space for up to 8 characters */
  text-align: left; /* Or center if you prefer */
    }

    @keyframes fadeInOut {
      0%, 20% { opacity: 0; transform: translateY(10px); }
      30%, 70% { opacity: 1; transform: translateY(0); }
      80%, 100% { opacity: 0; transform: translateY(-10px); }
    }

 .contatc{
    margin-top: 30px;
 }
 
 .home-btn{
   margin-top:3em !important;
 }

 .header-contact {
  position: relative;
  cursor: pointer;
 }


 /* Blobs */
    .blob {
      position: absolute;
      border-radius: 50%;
      /* opacity:; */
      /* filter: blur(100px); */
      /* mix-blend-mode: screen; */
      animation: moveBlob 30s infinite linear alternate;
      z-index: -1;
    }

    .blob1 {
      width: 40px;
      height: 40px;
      background: var(--secondary-color);
      top: 50%;
      left: 10%;
      animation-delay: 0s;
       z-index: -1;
         mix-blend-mode: screen;
    }

    .blob2 {
      width: 30px;
      height: 30px;
      background: var(  --secondary-color);
      top: 40%;
      left: 50%;
      animation-delay: 5s;
    }

    .blob3 {
      width: 100px;
      height: 100px;
      background: var(--secondary2-color);
      top: 50%;
      left: 20%;
      animation-delay: 2s;
    }

    @keyframes moveBlob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      25% {
        transform: translate(50px, -80px) scale(1.1);
      }
      50% {
        transform: translate(-100px, 60px) scale(1.05);
      }
      75% {
        transform: translate(10px, -40px) scale(1.15);
      }
      100% {
        transform: translate(-50px, 100px) scale(1);
      }
    }


 
























@media (max-width: 920px) {
   .intro{
      background: linear-gradient(200deg, rgba(0, 0, 0, 0.6), #fe4c06), url("../Imgaes/Elogio Main background.png");;
      /* background-image:  */
      background-position:center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      position: relative; 
      top: -4em;
      object-position: 30%;
      height: 80vh !important;
      
   }
   .shape, .shape1, .greeting-img{
   display: none;
}
.introduction{
   transform: translateY( 25ch);
   position: relative;
   margin-left: 1.5em;
 }
 .animated-text{
  position: relative;
 }
 .introduction h4{
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 400;
    max-width: 30ch;
    margin-top: 1em;
 }
   .word {
      /* color: var(--secondary-color);
      font-weight: bold;
      animation: fadeInOut 2s infinite; */
      color: var(--main-color)
    }
 .background-heading{
  display: none; 
}
.greeting{
    font-size:  2rem;
}
.greeting,  .introduction h4{
    color: var(--main-color);
 }
 .greeting .greet{
   color: var(--main-color);
    font-size: 1.2rem;
    font-weight: 600;
 }
  .header-contact{
    position: relative;
    top: -2 em;
    padding: 0.9rem 0.2rem;
    margin-left: -0.5em !important; 
    }
      .header-contact-me{
        font-size: 1.2rem;
      background: var(--main-color);
      color: var(--secondary-color);
      transition: background 0.3s;
      }

    .header-contact-me:hover{
      background: var(--color12);
    }

 /* Blobs */
    .blob {
      position: absolute;
      border-radius: 50%;
      opacity: 20%;
      filter: blur(2px);  
      mix-blend-mode: screen;
      animation: moveBlob 30s infinite linear alternate;
      z-index: -1;
    }

    .blob1 {
      width: 40px;
      height: 40px;
      background: var(--secondary-color);
      top: 50%;
      left: 10%;
      animation-delay: 0s;
       z-index: -1;
         mix-blend-mode: screen;
    }

    .blob2 {
      width: 30px;
      height: 30px;
      background: var(  --secondary-color);
      top: 40%;
      left: 50%;
      animation-delay: 6s;
    }

    .blob3 {
      width: 100px;
      height: 100px;
      background: var(--secondary2-color);
      top: 50%;
      left: 20%;
      animation-delay: 3s;
    }

}