/* ================= GLOBAL ================= */

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(circle at top left, #1c3d52, #0b1c26 60%);
  color: #fff;
}

.container {
  width: 90%;
  max-width: 1300px;
  margin: auto;
}

/* ================= HEADER ================= */

#header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  z-index: 999;
  background: rgba(35,84,112,0.6);
  backdrop-filter: blur(15px);
  transition: 0.4s ease;
}

#header.scrolled {
  background: #0b1c26;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Header layout */
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
}

/* Desktop menu */
.nav ul{
  display:flex;
  gap:0px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav ul li a{
  color:#fff;
  font-weight:500;
  text-decoration:none;
  transition:0.3s;
}

.nav ul li a:hover{
  color:#9ad1ff;
}

.nav{
  transition:0.3s ease;
}

/* Logo */
.logo img{
  /*height:60px;*/
  width:auto;
}

/* Hamburger (hidden on desktop) */
.hamburger{
  display:none;
  font-size:28px;
  color:#fff;
  cursor:pointer;
}

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

@media (max-width:767px){

  #header{
    height:70px;
  }

  .logo img{
    height:45px;
  }

  /* show hamburger */
  .hamburger{
    display:block;
    position:absolute;
    right:20px;
    top:20px;
    z-index:2000;
  }

  /* mobile menu */
  .nav{
    position:fixed;
    top:70px;
    left:0;
    width:100%;
    height:100vh;
    background:#0b1c26;
    display:none;
    padding-top:40px;
    z-index:1500;
  }

  .nav ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:25px;
  }

  .nav ul li a{
    font-size:20px;
  }

  .nav.active{
    display:flex;
    justify-content:flex-start;
  }

}

/* ================= HAMBURGER ================= */

.hamburger{
  display:none;
  font-size:28px;
  color:#fff;
  cursor:pointer;
}

/* ================= SWIPER ================= */

.swiper {
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  position: relative;
}

.swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  /*background: linear-gradient(to right, rgba(11,28,38,0.9), rgba(11,28,38,0.5));*/
}

/* Desktop Banner */

.slide1 {
  background: url('../../image/DesktopBanner-1.jpg') center center / cover no-repeat;
}

.slide2 {
  background: url('../../image/DesktopBanner-2.png') center center / cover no-repeat;
}

/* ================= HERO ================= */

.hero-content {
  position: absolute;
  top: 42%;
  left: 8%;
  transform: translateY(-50%);
  max-width: 600px;
  z-index: 2;
}

.hero-content p{
  margin-top:15px;
  line-height:1.6;
}

.hero-content h1 {
  font-size: 50px;
  font-weight: 700;
  line-height:1.25;
  padding-bottom:10px;
  background: linear-gradient(90deg, #ffffff, #9ad1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

.btn-primary {
  padding: 14px 35px;
  background: #235470;
  border-radius: 40px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s;
  box-shadow: 0 10px 25px rgba(35,84,112,0.4);
}

.btn-primary:hover {
  background: #1b3f55;
  transform: translateY(-4px);
}

/* ================= SWIPER ARROWS ================= */

.swiper-button-prev,
.swiper-button-next {
  width: 45px;
  height: 45px;
  top: 65%;
  transform: translateY(-50%);
}

.swiper-button-prev { left: 8px; }
.swiper-button-next { right: 8px; }

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 18px;
  font-weight: bold;
}

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

@media (max-width:767px){

  #header{
    height:70px;
  }

  .logo img{
    height:45px;
  }

  .hamburger{
    display:block;
    position:absolute;
    right:20px;
    top:6px;
    z-index:1001;
  }

  .nav{
    position:fixed;
    top:70px;
    left:0;
    width:100%;
    background:#0b1c26;
    padding:20px 0;
    display:none;
    z-index:1000;
  }

  .nav ul{
    display:block;
    text-align:center;
  }

  .nav ul li{
    margin:15px 0;
  }

  .nav ul li a{
    font-size:18px;
  }

  .nav.active{
    display:block;
  }

  .swiper{
    height:92vh;
  }

  .slide1{
    background: url('../../image/MobileBanner1.png') center top / cover no-repeat;
  }

  .slide2{
    background: url('../../image/MobileBanner2.png') center top / cover no-repeat;
  }

  .swiper-button-prev,
  .swiper-button-next{
    top:70%;
  }

  .swiper-button-prev{ left:5px; }
  .swiper-button-next{ right:5px; }

  .hero-content{
    top:38%;
    left:5%;
    right:5%;
  }

  .hero-content h1{
    font-size:28px;
    line-height:1.3;
  }

  .hero-content p{
    font-size:14px;
  }

}