@media (max-width:550px) {
    
 
  header 
  {
    background:linear-gradient(90deg, rgb(76, 43, 74), rgb(34, 31, 93));
    opacity: 90%;
  }
  
  #head img {
    width: 100px;
    height: 5%;
  }
  #head
  { 
    position: relative;
    right: 30vw;
  }
  
  #menu {
    gap: 15px;
  }
  
  #menu a {
    color: wheat;
    font-size: 3.5vh;
    display: none;
  }
  
  #menu button {
    border-radius: 9px;
    font-size: 18px;
    margin-right: -1.5vw;
    display: none;
  }
  .burger
  {
    display:flow-root;

  }

  .line
  {
    width: 40px;
    background-color: wheat;
    height: 4px;
    margin: 6px 3vw;
    position: relative;
    bottom: 53px;
    left: 32vw;
  }
 
 
  #menu.active a,
  #menu.active button {
    display: block;
  }

  #qt {
    padding: 5% 1%;
  }
  
  #qt h1 {
    margin-bottom: 1vh;
    font-size: 4vw;
    font-weight: 500;

  }
  
  #qt h2 {
    margin-bottom: 1vh;
    font-size: 4vw;
    font-weight: 500;
  }
  #qt h3{
      margin-bottom: 1vh;
      font-size: 3.5vw;
    font-weight: 500;
  } 

  #offer{
    padding: 20px 20px;
    background:linear-gradient(135deg, #407585, #b35fa9);

  }
  #offer h1 {
    font-size: 10vw;
    margin-bottom: 30px;
    margin-top: 15px;
  }
 
  .service-box {
    width: 88vw;
    padding: 30px;
  }
  
  
  .service-box img {
    max-height: 130px;
    object-fit: cover;
    margin-bottom: 10px;
  }
  
  .service-box h5 {
    font-size: 7vw;
  }
  
  .service-box p {
    font-size: 6vw;
  }
  .hero-container {
    position: relative;
    background: linear-gradient(135deg, #1f172b, #234651, #110c32);
    padding: 20px 20px;
  }
    .cta, .hero-container a {
      position: relative;
      z-index: 20;
    }
    .wave, .circle, .hero::before, .hero::after {
      pointer-events: none;
    }
    

}


@media(max-width:900px){
  .hero{flex-direction:column;padding:1.5rem;}
  .hero-image{width:100%;height:260px;margin-bottom:1.5rem;transform:rotate(0deg);}
  .hero-content{text-align:center;align-items:center;}
  .features{grid-template-columns:1fr;}
  .cta{align-self:center;}
}
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  header {
    flex-direction: column;
    text-align: center;
  }

  #menu {
    flex-direction: column;
    gap: 10px;
  }

  #qt h1, #qt h2, #qt h3 {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .services {
    flex-direction: column;
  }

  .service-box {
    width: 90%;
  }

  #logo img {
    width: 150px;
  }

  marquee {
    font-size: 16px;
  }
}

@media (max-width: 800px) {
  
  #nme
  {
    font-size: 20px;
  }
  
  .developer-bar {
    color: #8ee5ff;
    padding: 8px 10px;
  }
.developer-left {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 15px;
}

.developer-left img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1.5px;
  border: 4px solid transparent;
}
.developer-right img {
  width: 30px;
  height: 30px;
}

}

@media (max-width: 550px) {
  
  #nme
  {
    font-size: 20px;
  }
  .developer-bar {
    color: #8ee5ff;
    padding: 2px 4px;
    
    flex-wrap: wrap;
    border-top: 1px solid #444;
  }
  .developer-bar {
    text-align: center;
    margin-top: 25px;
    border-top: 3px solid #161515;
    padding-top: 15px;
    padding-bottom: 20px;
  }
  
  .developer-left {
    display: flex;
    align-items: left;
    font-size: 20px;
  }
  
  
  .developer-left img {
    width: 70px;
    height: 70px;
    border: 2px;
    border: 2px solid transparent;
    margin-right: 4vw;
  }
  .developer-right a {
    margin-left: 10px;
    display: inline-block;
  }
  
  .developer-right img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease, filter 0.3s ease;
    position: relative;
    left: 15vw;
    bottom: 15px;
    padding: 5px;
  }
  
}