:root{
    --teal:#00818A;
    --orange:#F37835;
    --white:#FFFFFF;
    --text-dark:#1a1a1a;
    --text-muted:#6b6b6b;
    --border:#e5e5e5;
    --accent: var(--teal);
    --bg:#ffffff;
    --font-display: 'Orbitron', sans-serif;
    --font-nav: "Plus Jakarta Sans", sans-serif;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{
    font-family: var(--font-nav);
    background:#f7f7f7;
  }

  .site-header{
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    /* position: sticky; */
    /* top: 0;
    z-index: 100; */
  }

  .navbar{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    gap: 24px;
  }

  /* Logo */
  .logo{
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--teal);
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
  }
  .navbar img{
        width: 120px;
    }

  /* Search bar */
  .search-bar{
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 10px 14px;
    background: #E9E9E9;
    border: 1px solid #dbdbdb;
  }
  .search-bar:hover{
  border: 1px solid #898989;
  }
  .search-bar:focus-within{
  border: 1px solid #898989;
  }
  .search-bar input{
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: var(--font-nav);
    font-size: 16px;
    color: var(--text-dark);
  }
  .search-bar svg{
    flex-shrink: 0;
    margin-right: 16px;
    color: var(--teal);
  }

  /* Nav menu */
  .nav-menu{
    display: flex;
    list-style: none;
    gap: 28px;
    flex-shrink: 0;
  }
  .nav-menu a{
    color: #191919;
    box-sizing: border-box;
    height: 100%;
    padding: 0 calc(-1 * (-1 * 2px - 4px));
    cursor: pointer;
    align-items: center;
    font-size: 17px;
    font-weight: 400;
    text-decoration: none;
    transition: color .25s ease-in-out;
    display: flex;
    position: relative;
  }
  .nav-menu a:hover,
  .nav-menu a:focus-visible{
    color: var(--orange);
  }
  .nav-menu a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 0;
    height: 2px;
    background: var(--orange); 
    transition: all .3s ease;
    transform: translateX(-50%);
}
/* Hover */
.nav-menu a:hover::after {
    width: 100%;
}

/* Active Menu */
.nav-menu a.active::after {
    width: 100%;
}


  /* Hamburger button - hidden on desktop */
  .hamburger{
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
  }
  .hamburger span{
    display: block;
    width: 24px;
    height: 2px;
    background: var(--teal);
    margin: 5px 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .hamburger.active span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2){
    opacity: 0;
  }
  .hamburger.active span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ===== Responsive: 768px and below ===== */
  @media (max-width: 768px){
    .navbar{
      flex-wrap: wrap;
      padding: 12px 16px;
    }
    .search-bar{
      order: 3;
      max-width: 100%;
      flex-basis: 100%;
    }
    .hamburger{
      display: block;
      order: 2;
    }
    .logo{
      order: 1;
    }
    
    .nav-menu{
      order: 4;
      flex-direction: column;
      width: 100%;
      gap: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .nav-menu.open{
      max-height: 300px;
      margin-top: 12px;
    }
    .nav-menu li{
      padding: 0 0 10px;
    }
    .nav-menu a{
      padding: 12px 4px;
      width: 100%;
    }
  }



 a{
    text-decoration: none;
 }
  .site-footer{
    background: var(--teal);
    color: var(--white);
  }
 
  .footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 24px;
  }
 
  .footer-top{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    padding-bottom: 32px;
  }
 
  /* Brand column */
  .footer-brand{
    flex: 1 1 260px;
    max-width: 320px;
  }
  .footer-logo{
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--white);
    text-decoration: none;
  }
  .footer-brand img{
    width: 150px;
  }
  .footer-brand p{
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
  }
 
  /* Social icons */
  .footer-social{
    display: flex;
    gap: 12px;
    margin-top: 20px;
  }
  .footer-social a{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .footer-social a:hover{
    background: var(--orange);
    border-color: var(--orange);
  }
  .footer-social svg{ width: 16px; height: 16px; }
 
  /* Link columns */
  .footer-col{
    flex: 1 1 140px;
  }
  .footer-col h4{
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 16px;
  }
  .footer-col ul{
    list-style: none;
  }
  .footer-col li{
    margin-bottom: 10px;
  }
  .footer-col a{
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    opacity: 0.9;
    transition: opacity 0.2s ease, color 0.2s ease;
  }
  .footer-col a:hover{
    opacity: 1;
    color: var(--orange);
  }
 
  /* Contact list */
  .footer-contact li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 14px;
  }
  .footer-contact svg{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    /* margin-top: 2px; */
    color: #fff;
  }
  .footer-contact span{
    color: var(--white);
    opacity: 0.9;
    line-height: 1.5;
  }
  .footer-contact a{
    color: var(--white);
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease, color 0.2s ease;
  }
  .footer-contact a:hover{
    opacity: 1;
    color: var(--orange);
  }
 
  /* Newsletter */
  .footer-newsletter{
    flex: 1 1 260px;
    max-width: 320px;
  }
  .footer-newsletter h4{
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color:#000000;
    margin-bottom: 16px;
  }
  .newsletter-form{
    display: flex;
    border: 1.5px solid var(--white);
    border-radius: 8px;
    overflow: hidden;
  }
  .newsletter-form input{
    flex: 1;
    border: none;
    outline: none;
    /* background: transparent; */
    padding: 10px 12px;
    color: var(--white);
    font-family: var(--font-nav);
    font-size: 13px;
  }
  .newsletter-form input::placeholder{
    color: var(--text-muted);
  }
  .newsletter-form button{
    background: var(--orange);
    border: none;
    color: var(--white);
    padding: 0 18px;
    font-family: var(--font-nav);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .newsletter-form button:hover{
    background: #d9601a;
  }
 
  /* Bottom bar */
  .footer-bottom{
    border-top: 1px solid rgba(255,255,255,0.25);
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
  }
  .footer-bottom-links{
    display: flex;
    gap: 20px;
    list-style: none;
  }
  .footer-bottom-links a{
    color: var(--text-muted);
    text-decoration: none;
  }
  .footer-bottom-links a:hover{
    color: var(--orange);
  }
 
  /* Responsive: 768px and below */
  @media (max-width: 768px){
    .footer-top{
      flex-direction: column;
      gap: 32px;
    }
    .footer-brand,
    .footer-newsletter,
    .footer-col{
      max-width: 100%;
    }
    .footer-bottom{
      flex-direction: column;
      text-align: center;
    }
  }




.hero-slider{
position:relative;
width:100%;
height:90vh;
overflow:hidden;
}

.slide{
position:absolute;
width:100%;
height:100%;
opacity:0;
transition:1s;
}

.slide.active{
opacity:1;
z-index:1;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
}

.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
90deg,
rgba(0,0,0,.65),
rgba(0,0,0,.25),
transparent
);
}

.content{
position:absolute;
top:50%;
left:7%;
transform:translateY(-50%);
color:#fff;
max-width:500px;
}

.content h1{
font-size:60px;
font-weight:700;
line-height:1.1;
margin-bottom:20px;
}

.content p{
font-size:28px;
line-height:1.4;
margin-bottom:35px;
}

.btn{
display:inline-block;
padding:16px 40px;
background:#fff;
color:#000;
border-radius:50px;
text-decoration:none;
font-weight:bold;
transition:.3s;
}

.btn:hover{
background:#111;
color:#fff;
}

.prev,
.next{
position:absolute;
top:50%;
transform:translateY(-50%);
width:55px;
height:55px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.35);
color:#fff;
font-size:26px;
cursor:pointer;
z-index:5;
backdrop-filter:blur(10px);
}

.prev{
left:30px;
}

.next{
right:30px;
}

.pagination{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:12px;
z-index:10;
}

.dot{
width:45px;
height:4px;
background:#777;
cursor:pointer;
transition:.3s;
}

.dot.active{
background:#ff6900;
}

@media(max-width:768px){

.hero-slider{
height:80vh;
}

.content{
left:20px;
right:20px;
}

.content h1{
font-size:34px;
}

.content p{
font-size:18px;
}

.prev,
.next{
display:none;
}