.Secondtitle {
  font-size: 5rem;
 font-weight: 800;
  line-height: 1;
  color: #FFF4C4;
  padding-top: 100px; 
}


.about-word{
  position: relative;
  
}

.about-word::after{
  content: "About";
  position: absolute;
  left: 8px;
  top: 8px;
  color: rgba(255, 244, 196, 0.15);
  z-index: -1;
}


.me-word{
  display: inline-block;
  margin-left: 13rem; 
  
  
   position: relative;
  
}

.me-word::before{
  content: "";
  position: absolute;
  left: -12rem;   
  top: 50%;
  transform: translateY(-50%);
  width: 10rem;   
  height: 2px;
  background: #FFF4C4;
  opacity: 0.8;
  
}

.me-word::after{
  content: "Me";
  position: absolute;
  left: 8px;
  top: 8px;
  color: rgba(255, 244, 196, 0.15);
  z-index: -1;
}




.Text {
  font-size: 9rem;
  font-weight: 800;
  line-height: 1;
  color: #FFF4C4;
   position: relative;

}

.subtitle{
  margin-top: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .9rem;
  opacity: .85;
  color: #FFF4C4;
  
}


.hero-name{
  position: relative; 
  width: 100%;
}



.hero-img{
  position: absolute;
  top: 100px;        
  right: 10%;        
  width: 500px;      
  z-index: 2;       
}



.cta{
  display: flex;
  gap: 16px;
  margin-top: 28px;
}


.cta-pill{
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;

  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}


.cta-pill.fill{
  background: #FFF4C4;
  color: #111;
}


.cta-pill.outline{
  border: 1px solid #FFF4C4;
  color: #FFF4C4;
  background: transparent;
}


.cta-pill:hover{
  transform: translateY(-2px);
  opacity: .9;
}


@media (max-width: 576px){
  .cta{
    flex-direction: column;
    align-items: flex-start;
  }
}


.hero-name {
  position: relative;
  width: 100%;
}


.hero-img {
  position: absolute;
  top: 100px;
  right: 10%;
  width: 500px;
  height: auto;
  z-index: 2;
}


.cta {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}



@media (max-width: 992px) {
  
  .Text {
    font-size: clamp(2.8rem, 9vw, 6rem);
  }

  .subtitle {
    font-size: clamp(0.75rem, 2.2vw, 0.95rem);
    letter-spacing: 1.2px;
  }

 
  .hero-img {
    width: min(380px, 60vw);
    right: 4%;
    top: 120px;
  }
}

@media (max-width: 576px) {

  .row.w-100.h-100.p-5.px-5 {
    padding: 1.25rem !important;
  }


  .hero-img {
    position: static;    
    display: block;
    width: min(320px, 90%);
    margin: 16px auto 0; 
  }

  
  .Secondtitle {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    padding-top: 32px;
  }

  
  .me-word {
    margin-left: 3.5rem;
  }

  .me-word::before {
    left: -3.2rem;
    width: 2.6rem;
  }

  
  .cta {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-pill {
    width: 100%;
    justify-content: center;
  }
}