 <style>
    body, html {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', sans-serif;
    }

    .slider-section {
      position: relative;
      height: 400px;
      overflow: hidden;
    }

    .slider-backgrounds {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 500%;
      display: flex;
      animation: slideImages 20s infinite;
      z-index: 0;
    }

    .slider-backgrounds img {
      width: 20%;
      height: 100%;
      object-fit: cover;
    }

    @keyframes slideImages {
      0% { transform: translateX(0); }
      20% { transform: translateX(0); }
      25% { transform: translateX(-20%); }
      45% { transform: translateX(-20%); }
      50% { transform: translateX(-40%); }
      70% { transform: translateX(-40%); }
      75% { transform: translateX(-60%); }
      95% { transform: translateX(-60%); }
      100% { transform: translateX(0); }
    }

    .slider-overlay {
      position: relative;
      z-index: 1;
      height: 100%;
      width: 100%;
      background: rgba(0, 31, 63, 0.7);
      color: white;
      padding: 30px 20px 0 120px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .typewriter h1 {
      font-size: 40px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      border-right: .15em solid white;
      width: 0;
      max-width: 32ch;
      animation: typing 3s steps(32, end) forwards;
      margin: 0;
    }

    @keyframes typing {
      from { width: 0; border-right: .15em solid white; }
      to   { width: 32ch; border-right: none; }
    }

    .light-divider {
      width: 220px;
      height: 2px;
      background: linear-gradient(to right, #00bfff, transparent);
      border: none;
      margin: 15px 0;
    }

    .sub-texts {
      background: rgba(255,255,255,0.07);
      padding: 15px 20px;
      border-left: 4px solid #00bfff;
      border-radius: 10px;
      max-width: 600px;
      backdrop-filter: blur(4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .sub-texts p {
      font-size: 17px;
      margin: 8px 0;
      opacity: 0;
      transform: translateY(20px) scale(0.95);
      animation: fadeInUpScale 0.8s forwards;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sub-texts p:nth-child(1) { animation-delay: 3.2s; }
    .sub-texts p:nth-child(2) { animation-delay: 3.5s; }
    .sub-texts p:nth-child(3) { animation-delay: 3.8s; }
    .sub-texts p:nth-child(4) { animation-delay: 4.1s; }

    @keyframes fadeInUpScale {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .button-section {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 10px;
      margin-top: 30px;
      padding-bottom: 10px;
    }

    .button-section::-webkit-scrollbar {
      display: none;
    }

    .button-box {
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: 14px;
      padding: 8px 12px;
      border-radius: 20px;
      background: white;
      color: #001f3f;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
    }

    .button-box i {
      margin-right: 6px;
    }

    .button-box a {
      color: inherit;
      text-decoration: none;
      font-weight: 500;
    }

    .button-box span {
      margin-left: 6px;
    }

    @media (max-width: 768px) {
      .slider-overlay {
        padding-left: 20px;
      }

      .typewriter h1 {
        font-size: 26px;
      }

      .sub-texts p {
        font-size: 15px;
      }

      .button-box {
        font-size: 13px;
        padding: 6px 10px;
      }
    }

    @media (max-width: 400px) {
      .typewriter h1 {
        font-size: 22px;
      }

      .sub-texts p {
        font-size: 13.5px;
      }

      .button-box {
        font-size: 12px;
        padding: 5px 8px;
      }
    }
  </style>