@media screen and (max-width: 768px) {
  .tagline h2 {
    font-size: 1.5rem;
  }

  .tagline h5 {
    font-size: 1rem;
    padding: 0 15px;
  }
}

@media screen and (max-width: 480px) {
  .tagline h2 {
    font-size: 1.2rem;
  }

  .tagline h5 {
    font-size: 0.9rem;
  }
}






@media screen and (max-width: 768px) {
    .scroll-line {
      left: 5px;
      width: 1.5px; 
    }
  }
  @media screen and (max-width: 480px) {
    .scroll-line {
      left: 10px; 
      width: 1px; 
    }
  }
  
  @media screen and (max-width: 768px) {
    .why {
  
      padding: 15px; 
    }
  }
  
  @media (max-width: 768px) {
    .card_1 {
      width: 90%;
      margin: 10px auto; 
    }
  
    .card_1 img {
      max-width: 60px;
    }
  
    .card_1-title {
      font-size: 1.1rem;
    }
  
    .card_1-text {
      font-size: 0.9rem;
    }
  }
  

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  
@media screen and (max-width: 480px) {
  

  .outline {
      width: 100%; 
  }
}
@media screen and (max-width: 768px) {
  .holographic-card {
    width: 90%; 
    max-width: 350px;
    min-height: 220px; 
    padding: 25px 20px 55px;
    margin: 15px; 
    flex-direction: column;
    justify-content: center; 

  }

  .holographic-card h5 {
    font-size: 1.2rem;
    margin: 10px 0;
  }

  .holographic-card p {
    font-size: 0.9rem;
    margin: 10px 0;
  }
}



@media screen and (max-width: 480px) {
  .holographic-card {
    margin-left:75px;

  }

 
}










@media (max-width: 768px) {
  .animated-text {
      font-size: 2rem; 
  }
}

@media (max-width: 480px) {
  .animated-text {
      font-size: 1.5rem;
      text-align: center; 
      line-height: 1.3;
  }
}

@media screen and (max-width: 768px) { 
  .nav {
    width: 90%;
    max-width: 360px; 
    transform: translateX(-50%); 
  }

  .container1 {
    flex-direction: row; 
    justify-content: center;
    gap: 10px;
  }
}

@media screen and (max-width: 480px) { 
  .nav {
    width: 95%;
    max-width: 323px;
    left: 50%;
    transform: translateX(-50%);
  }

  .container1 {
    flex-wrap: wrap; 
    justify-content: center;
    padding: 0.4rem;
  }

  .btn {
    padding: 0.5rem 1rem; 
    font-size: 12px; 
  }
}
@media screen and (max-width: 768px) { 
  .button2 {
    --fs-size: 1.5rem; 
    letter-spacing: 2px; 
  }
}

@media screen and (max-width: 480px) { 
  .button2 {
    --fs-size: 1.2rem; 
    letter-spacing: 1px;
  }

  .hover-text {
    --border-right: 3px; 
    transition: 1s; 
  }
}






@media screen and (max-width: 768px) { 
  .button3 {
    --fs-size: 1.5rem;
    letter-spacing: 2px; 
  }
}

@media screen and (max-width: 480px) { 
  .button3 {
    --fs-size: 1rem; 
    letter-spacing: 1px;
  }

  .hover-text {
    --border-right: 3px; 
    transition: 1s; 
  }
}



@media screen and (max-width: 768px) {
  .button4 {
    --fs-size: 1rem;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 480px) { 
  .button4 {
    --fs-size: 0.8rem;
    letter-spacing: 1px;
  }
}




@media screen and (max-width: 768px) {
  .button5 {
    --fs-size: 1.5rem;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 480px) { 
  .button5 {
    --fs-size: 1rem;
    letter-spacing: 1px;
  }
}



@media screen and (max-width: 768px) and (min-width: 480px) {
  .nav {
    width: 90%; 
    height: 50px;
    top: -80px;
  }

  .nav.show {
    top: 3rem;
  }

 
  .outline {
    width: 100%;
    height: 100%;
  }

  .rect {
    stroke-dasharray: 5 15; 
  }
}


.outline {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  pointer-events: none;
}

.rect {
  stroke-dasharray: 0 0 8 30 8 30;
  stroke-dashoffset: 5;
  transition: stroke-dashoffset 0.5s ease-in-out;
  stroke: rgba(32, 120, 235, 0.7);
  stroke-width: 3;
  fill: none;
  rx: 10px;
}

.container1:hover .outline .rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 0 10 40 10 40;
  transition: stroke-dashoffset 1.5s ease-in-out;
}





@media screen and (min-width: 768px) and (max-width: 1650px) {
  .scroll-line {
      left:30px;
  }
}




 

@media (min-width: 982px) {
  .drive {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; 
  }
  
  .card_1 {
    width: calc(45% - 20px); 
    max-width: 32%;
  }
  }