@import url('https://fonts.googleapis.com/css2?family=Jomhuria&family=Kalam&family=Lato:wght@100;300;400;700;900&display=swap');

    html,
    body {
      height: 100%;
    }

    body {
      font-family: 'Lato', sans-serif;
      display: flex;
      flex-direction: column;
      color: white;
    }

    .main {
      flex: 1 0 auto;
    }

    .text-primary {
      color: #03A3F4;
    }

    .logo-title {
      font-size: 2.5rem;
      font-weight: 400;
      font-family: 'Jomhuria', serif;
      line-height: 1;
    }

    .logo-subtitle {
      font-size: 0.9rem;
      letter-spacing: 0.15em;
    }

    .bg-primary-custom {
      background: rgba(7, 19, 32, 1);
    }

    .banner-subtitle {
      font-size: 1.25rem;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-align: center;
    }

    .banner-title {
      font-size: 2.5rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-align: center;
    }

    .btn-custom {
      border-radius: 5px;
      color: white;
      background: linear-gradient(to left, #0374F4 50%, white 50%) right;
      background-size: 200%;
      transition: .5s ease-out;
      border: 1px solid transparent;
    }

    .btn-custom:hover {
      border: 1px solid #03A3F4;
      color: black;
      background-position: left;
    }

    .hero-section {
      position: relative;
      height: 100vh;
      background: url('/assets/img/banner-bg.gif') center center / cover no-repeat;
      max-height: 768px;
    }

    .hero-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(117.34deg, rgba(4, 20, 25, 0.76) 16%, rgba(4, 20, 25, 0.16) 99.87%);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    @media (max-width: 768px) {
      .banner-title {
        font-size: 1.8rem;
      }

      .logo-title {
        font-size: 2rem;
      }

      .logo-subtitle {
        font-size: 0.75rem;
      }
    }