/* ==============================
       RESET
    ============================== */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: auto;
      scrollbar-width: none;
    }
    html::-webkit-scrollbar {
    display: none;
}

    body {
      font-family: Arial, sans-serif;
      background: #003366;
      color: #ffffff;
      overflow-x: hidden;
      -ms-overflow-style: none;
      overscroll-behavior: none;
    }
    body::-webkit-scrollbar {
    display: none;
}


    /* ==============================
       PARALLAX SECTION
    ============================== */

    .parallax {
      position: relative;

      height: 100vh;
      min-height: 600px;

      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      /*
        Desktop parallax effect
      */
      background-attachment: fixed;

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

      overflow: hidden;
    }


/* ==============================
   OPENING LOGO
============================== */

.opening-logo {
  width: clamp(150px, 18vw, 235px);
  height: auto;

  display: block;

  margin: 0 auto 25px;

  opacity: 0;

  animation: logoFadeIn 4s ease forwards;

  filter:
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}


/* Logo fade-in animation */

@keyframes logoFadeIn {

  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

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

}

    /* ==============================
       BACKGROUND IMAGES
    ============================== */

    .bg1 {
      background-image: url("assets/images/regional-office.png");
    }

    .bg2 {
      background-image: url("assets/images/photo11.jpg");
    }

    .bg3 {
      background-image: url("assets/images/slide1.jpg");
    }

    .bg4 {
      background-image: url("assets/images/bground4.jpg");
    }


    /* ==============================
       DARK OVERLAY
       IMPORTANT:
       z-index keeps it behind text
    ============================== */

    .parallax::before {
      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          rgba(0, 0, 0, 0.55),
          rgba(0, 0, 0, 0.35)
        );

      z-index: 1;
    }


    /* ==============================
       PARALLAX CONTENT
    ============================== */

    .parallax-content {

      position: relative;

      z-index: 2;

      text-align: center;

      width: 90%;
      max-width: 1100px;

      padding: 30px;

      animation: fadeUp 2.5s ease forwards;
    }


    .parallax-content .small-title {

      font-size: clamp(14px, 1.5vw, 22px);

      letter-spacing: 4px;

      text-transform: uppercase;

      color: #ffffff;

      margin-bottom: 15px;

      opacity: 0.9;
    }


   .parallax-content h1 {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto 20px;

    text-align: center;

    font-size: clamp(28px, 4vw, 40px);
    white-space: nowrap;

    line-height: 1.1;

    color: #FFD700;

    font-weight: 900;

    margin-left: 0px;

    text-shadow:
        0 3px 10px rgba(0,0,0,0.8),
        0 0 25px rgba(255,215,0,0.25);
}


    .parallax-content p {

      font-size: clamp(20px, 3vw, 35px);

      line-height: 1.2;

      color: #ffffff;

      max-width: 800px;

      margin: auto;

      text-shadow:
        0 2px 5px rgba(0,0,0,0.8);
    }


    /* ==============================
       GOLD LINE
    ============================== */

    .gold-line {

      width: 100px;

      height: 4px;

      background: #FFD700;

      margin: 20px auto;

      border-radius: 10px;

      box-shadow:
        0 0 12px rgba(255,215,0,0.6);

      animation: lineGrow 1.5s ease forwards;
    }


    /* ==============================
   CONTENT OVER IMAGE
============================== */

section.content {

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;

  padding: 20px 10px;

  background: transparent;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;

  color: #ffffff;

  z-index: 3;
}


/* ==============================
   CONTENT DARK OVERLAY
============================== */

section.content::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.35)
    );

  z-index: -1;
}


section.content h2 {

  position: relative;

  font-size: clamp(28px, 4vw, 45px);

  color: #FFD700;

  margin-bottom: 20px;

  text-shadow:
    0 2px 5px rgba(0,0,0,0.8);

}


section.content p {

  position: relative;

  max-width: 900px;

  margin: 0 auto;

  font-size: 18px;

  line-height: 1.8;

  color: #ffffff;

  text-shadow:
    0 2px 5px rgba(0,0,0,0.8);

}

    /* ==============================
       BUTTON
    ============================== */

    .gold-button {

      display: inline-block;
      letter-spacing: 2px;

      margin-top: 30px;

      padding: 14px 32px;

      background: #FFD700;

      color: #003366;

      text-decoration: none;

      font-weight: bold;

      border-radius: 5px;

      transition:
        0.3s ease;

      box-shadow:
        0 5px 20px rgba(0,0,0,0.3);
    }


    .gold-button:hover {

      background: #003366;

      color: #FFD700;

      border: 1px solid #FFD700;

      transform: translateY(-3px);

      box-shadow:
        0 8px 25px rgba(0,0,0,0.4);
    }


    /* ==============================
       FOOTER
    ============================== */

    footer {

      text-align: center;

      padding: 20px 10px;

      background: #001a33;

      color: #ffffff;

      border-top: 1px solid rgba(255,215,0,0.3);
    }


    footer span {

      color: #FFD700;
    }


    /* ==============================
       ANIMATIONS
    ============================== */

    @keyframes fadeUp {

      from {

        opacity: 0;

        transform:
          translateY(40px);
      }

      to {

        opacity: 1;

        transform:
          translateY(0);
      }
    }


    @keyframes lineGrow {

      from {

        width: 0;

        opacity: 0;
      }

      to {

        width: 100px;

        opacity: 1;
      }
    }


    /* ==============================
       MOBILE
    ============================== */

    @media (max-width: 768px) {

      .parallax {

        /*
          Fixed backgrounds are unreliable
          on many mobile browsers.
        */

        background-attachment: scroll;

        min-height: 550px;
      }


      .parallax-content {

        padding: 20px;
      }


      .parallax-content h1 {
        
         white-space: normal;

        font-size: clamp(24px, 7vw, 36px);

        line-height: 1.15;

        width: 100%;
      }


      .parallax-content .small-title {

        letter-spacing: 2px;

        font-size: 13px;
      }


      section.content {

        padding: 70px 20px;
      }
    }


    /* ==============================
       SMALL PHONES
    ============================== */

    @media (max-width: 480px) {

      .parallax {

        min-height: 500px;
      }


      .parallax-content h1 {
        white-space: normal;
        font-size: 32px;
      }


      .parallax-content p {

        font-size: 15px;
      }

    }
   
/* ==================================
   FINAL PARALLAX ANIMATION
================================== */

.final-content {
  opacity: 0;
}


/* ==================================
   LOGO
================================== */

.final-logo {

  width: clamp(180px, 18vw, 220px);

  height: auto;

  margin: 0 auto 25px;

  display: block;

  opacity: 0;



  filter:
    drop-shadow(0 5px 15px rgba(0,0,0,0.7));

}


/* ==================================
   SMALL TITLE
================================== */

.final-small-title {

  opacity: 0;

  transform: translateY(20px);

}


/* ==================================
   MAIN TITLE
================================== */

.final-title {

  opacity: 0;

  transform:
    translateY(40px)
    scale(0.95);

}


/* ==================================
   GOLD LINE
================================== */

.final-line {

  width: 0;

  opacity: 0;

}


/* ==================================
   DESCRIPTION
================================== */

.final-description {

  opacity: 0;

  transform: translateY(25px);

}


/* ==================================
   BUTTON
================================== */

.final-button {

  opacity: 0;

  transform:
    translateY(30px);

}


/* ==================================
   WHEN SECTION BECOMES VISIBLE
================================== */

.final-content.animate {

  opacity: 1;
}


/* LOGO */

.final-content.animate .final-logo {

  animation:
    finalLogoIn 1.2s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;

}


/* SMALL TITLE */

.final-content.animate .final-small-title {

  animation:
    finalTextIn 0.8s
    ease forwards;

  animation-delay:
    0.6s;

}


/* MAIN TITLE */

.final-content.animate .final-title {

  animation:
    finalTitleIn 1s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;

  animation-delay:
    0.9s;

}


/* GOLD LINE */

.final-content.animate .final-line {

  animation:
    finalLineIn 0.8s
    ease forwards;

  animation-delay:
    1.5s;

}


/* DESCRIPTION */

.final-content.animate .final-description {

  animation:
    finalTextIn 0.8s
    ease forwards;

  animation-delay:
    1.8s;

}


/* BUTTON */

.final-content.animate .final-button {

  animation:
    finalButtonIn 0.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;

  animation-delay:
    2.1s;

}


/* ==================================
   ANIMATIONS
================================== */

@keyframes finalLogoIn {

  0% {

    opacity: 0;

    transform:
      translateY(-40px)
      scale(0.75);

  }

  70% {

    opacity: 1;

    transform:
      translateY(5px)
      scale(1.03);

  }

  100% {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


@keyframes finalTextIn {

  from {

    opacity: 0;

    transform:
      translateY(25px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


@keyframes finalTitleIn {

  from {

    opacity: 0;

    transform:
      translateY(40px)
      scale(0.95);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


@keyframes finalLineIn {

  from {

    width: 0;

    opacity: 0;

  }

  to {

    width: 100px;

    opacity: 1;

  }

}


@keyframes finalButtonIn {

  from {

    opacity: 0;

    transform:
      translateY(30px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}

body {
    overflow-x: hidden;
}
/* ==================================
   FULL SCREEN SCENES
================================== */

.scene {
  position: relative;

  width: 100%;
  height: 100vh;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


/* ==================================
   BACKGROUND INSIDE SCENE
================================== */

.scene .parallax {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;

  min-height: 600px;

  z-index: 1;
}


/* ==================================
   CONTENT OVER BACKGROUND
================================== */

.scene .content {

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  z-index: 3;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 20px;

  background: transparent;

  text-align: center;

  color: #ffffff;
}


/* ==================================
   DARK OVERLAY BEHIND CONTENT
================================== */

.scene .content::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.35)
    );

  z-index: -1;
}


/* ==================================
   CONTENT TITLE
================================== */

.scene .content h2 {

  position: relative;

  font-size: clamp(28px, 4vw, 45px);

  color: #FFD700;

  margin-bottom: 20px;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.8);
}


/* ==================================
   CONTENT DESCRIPTION
================================== */

.scene .content p {

  position: relative;

  max-width: 900px;

  margin: 0 auto;

  font-size: 18px;

  line-height: 1.8;

  color: #ffffff;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.9);
}