/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ----------------- Root variables ----------------- */
:root {
  --background-color: #ffffff;  
  --default-color: #212529;
  --heading-color: #32353a;
  --accent-color: #1e5a9a;
  --contrast-color: #ffffff;

  --nav-color: #3a3939;
  --nav-hover-color: #36a2d5;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #3a3939;
  --nav-dropdown-hover-color: #36a2d5;

  --bg-white: #ffffff;
  --bg-light-gray: #f3f3f3;
  --bg-pink: #36a2d5;
  --bg-blue-gray: #577186;
  --bg-dark-cyan: #00393c;
  --bg-dark-cyan-2: #00383c;
  --bg-dark-gray: #1c1c1c;
  --bg-black-translucent: #000000b3;

  --text-white: #ffffff;
  --text-gray: #999999;
  --text-blue: #337ab7;
  --text-pink: #36a2d5;
  --text-blue-gray: #577186;
  --text-cyan: #00393c;
  --text-cyan-dark: #073238;
  --text-black: #000000;

  --fill-pink-translucent: #36a2d5;
  --fill-cyan: #00393c;
  --fill-black: #000000;
  --accent-btn: #36a2d5;

  --border-pink: #36a2d5;
  --border-blue-gray: #577186;
  --border-cyan: #00393c;

  --contrast-bg-1: #00393c;
  --contrast-bg-2: #ffffff;

  --font-primary: 'Reddit Sans', sans-serif;
  --font-secondary: "Open Sans", sans-serif;
  --font-tertiary: "Inter", sans-serif;
}

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

html, body {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font-secondary), 'Segoe UI', sans-serif;
  background-color: #fffefe;
  padding-top: 60px; /* space for pre-header + header */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary), 'Segoe UI', sans-serif !important;
}
ul{
  margin: 0;
  padding: 0;
}

/* ----------------- Pre-header ----------------- */
.pre-header {
  background-color: #09656a;
  color: var(--text-white);
  font-weight: 500;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  z-index: 10000;
  padding-inline: 3rem;
}

.pre-header a {
  color: var(--bg-light-gray);
  text-decoration: none;
  font-size: 17px;
  padding: 10px;
  transition: all 0.3s ease-in;
}

.pre-header a:hover {
  background-color: #119197;
  color: #fff;
}

.pre-header .dropdown {
  position: relative;
  margin-left: 15px;
  z-index: 10001;
}

.pre-header .dropdown-menu {
  display: none;
  position: absolute;
  top: 135%;
  left: 0;
  min-width: 180px;
  background-color: #fbfbfb;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.pre-header .dropdown-menu li a {
  display: block;
  padding: 8px 16px;
  color: #020202;
  text-decoration: none;
  transition: color 0.3s ease;
}

.pre-header .dropdown-menu li a:hover {
  color: #00aaff;
  background: transparent;
}

.pre-header .dropdown:hover .dropdown-menu {
  display: block;
}

/* ----------------- Header ----------------- */
.header {
  /* background-color: var(--bg-light-gray); */
  background-color: white;
  color: var(--default-color);
  padding: 1rem 3rem;
  position: fixed;
  top: 45px; /* below pre-header */
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: all 0.3s ease;
}

.header .navbar-brand {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;
  color: var(--accent-btn);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.header .navbar-brand .logo-icon {
  font-weight: 600;
  font-size: 24px;
  color: var(--accent-color);
  margin-right: 5px;
}

.header .navmenu ul {
  display: flex;
  list-style: none;
  gap: 2rem;

}

.header .navmenu ul li a {
  text-decoration: none;
  font-size: 17px;
  color: var(--nav-color);
  font-family: var(--font-primary);
  font-weight: 500;
  transition: color 0.3s ease;
}


.header .navmenu ul li a:hover {
  color: var(--nav-hover-color);
  text-decoration: underline;
}

.navmenu .dropdown ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--nav-dropdown-background-color);
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 9999;
}

.navmenu .dropdown:hover ul {
  display: block;
}

/* ----------------- Mobile ----------------- */
@media (max-width: 992px) {
  .header {
    padding: 0.8rem 1rem;
  }

  .header .navmenu ul {
    flex-direction: column;
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    gap: 1.5rem;
    background-color: var(--bg-dark-cyan);
    position: absolute;
    top: 75px;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2rem;
    z-index: 9998;    
    transform: translateY(-50%);    
  }

  .header .navmenu ul.active  {
    /* display: flex; */
     width: 100%;
    height: calc(100vh - 90px);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
   transition:opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  }

  .pre-header {
    justify-content: center;
    padding-inline: 1rem;
  }

  .header .navmenu ul li a {
    font-size: 1.2rem;
    color: #fff;
  }

  .header .navmenu .dropdown ul {
    background-color: rgba(255,255,255,0.95);
  }
}

/* ----------------- Misc ----------------- */
.scrolled .header {
  box-shadow: 0 0 30px 10px rgba(0,0,0,0.1);
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile dropdown fix */
@media (max-width: 992px) {
  .navmenu .dropdown ul {
    display: none; /* hidden by default on mobile */
    position: static;
    background-color: rgba(255,255,255,0.95);
    padding-left: 1rem;
    margin-top: 0.5rem;
  }

  .navmenu .dropdown.active > ul {
    display: block; /* show when active */
  }

  .navmenu .dropdown-toggle i {
    transition: transform 0.3s;
  }

  .navmenu .dropdown.active > a i {
    transform: rotate(180deg);
  }
}
.mobile-nav-active{
  display: flex ! important;
  transform: translateX(0) ! important;
  transition: all 0.3s ease-in-out;
}
.navbar-logo {
  height: 60px;
  width: auto;
}
.navbar-log {
  height: 60px;
  border-radius: 5px;
   
}
/* Tablet */
@media (max-width: 1024px) {
  .navbar-logo {
    height: 50px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .navbar-logo {
    height: 40px;
  }
}