/* CSS RESET*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   display: block;
}

body {
   line-height: 1;
}

ol,
ul {
   list-style: none;
}

blockquote,
q {
   quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
   content: "";
   content: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/*General Styles*/

html {
   font-family: "Lato", sans-serif;
}

header {
   position: fixed;
   top: 0;
   box-sizing: border-box;
   background-color: #ffffff;
   color: rgb(255, 255, 255);
   width: 100%;
   margin: 0 auto;
   z-index: 1000;
}

.navbar-container {
   display: grid;
   grid-template-columns: auto 1fr;
   background-color: #ffffff;
   height: 8vh;
   width: 100%;
   border-bottom: 1px solid #0ead63;
   border-top: 1px solid #0ead63;
   border-left: 1px solid #0ead63;
   border-right: 1px solid #0ead63;
}

.nav_mobile {
   visibility: hidden;
   display: none;
}

.logo {
   grid-row: span 2;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-left: 10vh;
   padding-right: 10vh;
}

.logo img {
   width: 30vh;
}

.topbar {
   display: flex;
   align-items: center;
   padding: 5px;
   background-color: #0ead63;
   justify-content: center;
}

.flag-icons {
   display: flex;
   gap: 10px;
}

.flag-icons img {
   width: 3vh;
   height: 2vh;
}

.contact-info {
   display: flex;
   align-items: center;
   gap: 40px;
}

.contact-infonm a {
   color: #474646;
   font-size: 15px;
   text-decoration: none;
   font-weight: bold;
   background: white;
   padding: 2vh;
}

i {
   margin-right: 0px;
}

.contact-infoac a:hover {
   background-color: white;
   color: #474646;
}

.bottombar {
   display: flex;
   align-items: center;
   background-color: #0ead63;
   justify-content: center;
   padding: 20px 40px;
}

.nav-links {
   display: flex;
   flex-grow: 1;
   justify-content: space-evenly;
}

.nav-links a {
   color: #ffffff;
   text-decoration: none;
   cursor: pointer;
   font-size: 17px;
   font-weight: bolder;
   transition: background-color 0.3s ease, color 0.4s ease;
   padding: 10px 20px;
   border-radius: 5px;
}

.nav-links a:hover {
   background-color: #ffffff;
   color: #0ead63;
   border-radius:1px;
}

.dropdown {
   position: relative;
   display: inline-block;
   border-radius: 0px;
}

.dropdown-toggle {
   cursor: pointer;
   padding: 10px;
   text-decoration: none;
   color: #333;
}

.dropdown-menu {
   z-index: 10000;
   margin-top: 5px;
   display: none;
   position: absolute;
   background-color: white;
   box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
   width: 150px;
   height: 80px;
}

.dropdown-menu a {
   color: #474646;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   font-size: 10px;
}

.dropdown-menu a:hover {
   background-color: #0ead63;
   color: #ffffff;
}

/*Desktop Media Queries*/

/* Desktop screens (lg) (min-width: 1140px) */

@media (min-width: 1140px) {
   .navbar-container {
      visibility: visible;
      width: 100%;
   }

   .nav-mobile {
      visibility: hidden;
      display: none;
   }

   .logo {
      padding-left: 3vw;
      padding-right: 3vw;
   }

   .logo img {
      width: 23vh;
      height: 5vh;
   }

   .topbar {
      display: flex;
      align-items: center;
      padding: 5px;
      background-color: #ffffff;
      justify-content: center;
   }

   .flag-icons {
      display: flex;
      gap: 10px;
   }

   .flag-icons img {
      width: 3vh;
      height: 2vh;
   }

   .contact-info {
      display: flex;
      align-items: center;
      gap: 20px;
   }

   .contact-infonm a {
      color: #474646;
      font-size: 15px;
      text-decoration: none;
      font-weight: bold;
      background: transparent;
      padding: 0.7vh
   }


   .bottombar {
      padding: 10px 40px;

   }

   .nav-links a {
      font-size: 15px;
      padding: 4px 20px;
      border-radius: 5px;
   }

   .nav-links a:hover {
      border-radius: 3px;
   }

   .dropdown-toggle {
      padding: 5px;
   }

   .dropdown-menu {
      z-index: 10000;
      margin-top: 10px;
      display: none;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
      width: 130px;
      height: 198px;
   }

   .nav-links .dropdown-menu a {
      color: #474646;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      font-size: 13px;
   }

   .dropdown-menu a:hover {
      background-color: #0ead63;
      color: #ffffff;
      border-radius: 0px;
   }

   .dropdown-menu-small {
      z-index: 10000;
      margin-top: 10px;
      display: none;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
      width: 130px;
      height: 73px;
   }

   .nav-links .dropdown-menu-small a {
      color: #474646;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      font-size: 13px;
   }

   .dropdown-menu-small a:hover {
      background-color: #0ead63;
      color: #ffffff;
      border-radius: 0px;
   }


}

@media (max-width: 1139px) and (min-width: 800px) {
   .navbar-container {
      visibility: visible;
      width: 100%;
   }

   .nav-mobile {
      visibility: hidden;
      display: none;
   }

   .logo {
      padding-left: 3vw;
      padding-right: 3vw;
   }

   .logo img {
      width: 23vh;
      height: 5vh;
   }

   .topbar {
      display: flex;
      align-items: center;
      padding: 5px;
      background-color: #ffffff;
      justify-content: center;
   }

   .flag-icons {
      display: flex;
      gap: 10px;
   }

   .flag-icons img {
      width: 3vh;
      height: 2vh;
   }

   .contact-info {
      display: flex;
      align-items: center;
      gap: 20px;
   }

   .contact-infonm a {
      color: #474646;
      font-size: 15px;
      text-decoration: none;
      font-weight: bold;
      background: transparent;
      padding: 0.7vh
   }


   .bottombar {
      padding: 10px 40px;

   }

   .nav-links a {
      font-size: 12px;
      padding: 2px 10px;
      border-radius: 5px;
   }

   .nav-links a:hover {
      border-radius: 3px;
   }

   .dropdown-toggle {
      padding: 5px;
   }

   .dropdown-menu {
      z-index: 10000;
      margin-top: 10px;
      display: none;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
      width: 120px;
      height: 170px;
   }

   .nav-links .dropdown-menu a {
      color: #474646;
      padding: 10px 15px;
      text-decoration: none;
      display: block;
      font-size: 10px;
   }

   .dropdown-menu a:hover {
      background-color: #0ead63;
      color: #ffffff;
      border-radius: 0px;
   }

   .dropdown-menu-small {
      z-index: 10000;
      margin-top: 10px;
      display: none;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
      width: 95px;
      height: 67px;
   }

   .nav-links .dropdown-menu-small a {
      color: #474646;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      font-size: 10px;
   }

   .dropdown-menu-small a:hover {
      background-color: #0ead63;
      color: #ffffff;
      border-radius: 0px;
   }

}


@media (max-width: 799px) and (min-width: 500px) {
   .navbar-container {
      visibility: visible;
      width: 100%;
   }

   .nav-mobile {
      visibility: hidden;
      display: none;
   }

   .logo {
      padding-left: 3vw;
      padding-right: 3vw;
   }

   .logo img {
      width: 15vh;
      height: 3vh;
   }

   .topbar {
      display: flex;
      align-items: center;
      padding: 5px;
      background-color: #ffffff;
      justify-content: center;
   }

   .flag-icons {
      display: flex;
      gap: 10px;
   }

   .flag-icons img {
      width: 2.5vh;
      height: 3.5vh;
   }

   .contact-info {
      display: flex;
      align-items: center;
      gap: 10px;
   }

   .contact-infonm a {
      color: #474646;
      font-size: 13px;
      text-decoration: none;
      font-weight: bold;
      background: transparent;
      padding: 0.7vh
   }


   .bottombar {
      padding: 10px 20px;
   }

   .nav-links a {
      font-size: 8px;
      padding: 2px 5px;
      border-radius: 5px;
   }

   .nav-links a:hover {
      border-radius: 3px;
   }

   .dropdown-toggle {
      padding: 5px;
   }

   .dropdown-menu {
      z-index: 10000;
      margin-top: 10px;
      display: none;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
      width: 80px;
      height: 142px;
   }

   .nav-links .dropdown-menu a {
      color: #474646;
      padding: 10px 10px;
      text-decoration: none;
      display: block;
      font-size: 7px;
   }

   .dropdown-menu a:hover {
      background-color: #0ead63;
      color: #ffffff;
      border-radius: 0px;
   }

   .dropdown-menu-small {
      z-index: 10000;
      margin-top: 10px;
      display: none;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
      width: 70px;
      height: 60px;
   }

   .nav-links .dropdown-menu-small a {
      color: #474646;
      padding: 12px 10px;
      text-decoration: none;
      display: block;
      font-size: 7px;
   }

   .dropdown-menu-small a:hover {
      background-color: #0ead63;
      color: #ffffff;
      border-radius: 0px;
   }
}

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

@media (max-width: 499px) and (min-width: 400px) {

   /* Hide desktop navbar container */
   .navbar-container {
      display: none;
   }

   /* Mobile header styling */
   .nav-mobile {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ffffff;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      font-family: "Lato", sans-serif;
      border-bottom: 1px solid #0ead63;
      border-top: 1px solid #0ead63;
      border-left: 1px solid #0ead63;
      border-right: 1px solid #0ead63;
   }

   .container-mobile {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
   }

   .mobile-navbar {
      width: 100%;
   }

   /* --- Topbar Layout --- */

   .topbar-mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 10px;
      width: 100%;
      height: 5vh;
   }

   /* Left: Logo */
   .logo-mobile {
      flex: 0 0 auto;
   }

   .logo-mobile img {
      width: 30vw;
      height: 3.5vh;
   }

   /* Center: This container is created via JS */
   .middle-container {
      flex: 0.95;
      display: flex;
      align-items: center;
      justify-content: start;
   }

   .middle-container .flag-icons-mobile {
      margin-right: 10px;
   }

   .middle-container .flag-icons-mobile img {
      width: 5.5vw;
      height: auto;
      margin: 7px;
   }

   .middle-container .contact-infonm a {
      color: #333;
      font-size: 18px;
      text-decoration: none;
      margin: 0 5px;
   }

   .contact-infonm a {
      color: #474646;
      font-size: 17px;
      text-decoration: none;
      font-weight: bold;
      background: transparent;
      padding: .8vh
   }

   /* Right: Hamburger container (created via JS) */
   .hamburger-container {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 5vw;
      margin-left: 5vw;
   }


   /* Hide the native checkbox */
   #hamburger-mobile {
      display: none;
   }

   /* Hamburger label styling */
   .hamburger-container label[for="hamburger-mobile"] {
      display: inline-block;
      width: 5vw;
      height: 2vh;
      position: relative;
      cursor: pointer;
   }

   .hamburger-container label[for="hamburger-mobile"]::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      height: 2.5px;
      background-color: #474646;
      box-shadow: 0 -8px 0 #474646, 0 8px 0 #474646;
   }

   /* --- Mobile Menu (Toggle) --- */
   /* The mobile menu (ul.mobile-links) is now moved below the topbar via JS */
   .mobile-links {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #0ead63;
      max-height: 0;
      /* Hidden by default */
      overflow: hidden;
      transition: max-height 0.4s ease-in-out;
   }

   /* When open (via JS), expand the menu */
   .mobile-links.open {
      max-height: 1000px;
      /* Adjust if your menu is taller */
   }

   .mobile-links li {
      border-top: 1px solid #ddd;
   }

   .mobile-links li a {
      display: block;
      padding: 10px 15px;
      color: #ffffff;
      text-decoration: none;
   }

   .mobile-links li a {
      display: block;
      padding: 10px 15px;
      color: #ffffff;
      text-decoration: none;
   }

   a .link_drop {
      color: #0ead63;
   }

   /* Dropdown toggles (inside mobile-links) */
   .mobile-links li.has-dropdown>a.dropdown-toggle {
      cursor: pointer;
   }

   .mobile-links li.has-dropdown>a.dropdown-toggle:after {
      content: "\25BC";
      float: right;
      margin-left: 5px;
   }

   .mobile-links li.has-dropdown .dropdown {
      display: none;
      flex-direction: column;
      background-color: #0ead63;
   }

   .mobile-links li.has-dropdown:hover .dropdown,
   .mobile-links li.has-dropdown:focus-within .dropdown {
      display: flex;
      background-color: #fff;
      color: #ffffff;
   }

   .mobile-links li.has-dropdown .dropdown a {
      padding: 8px 20px;
   }

   .mobile-links li.has-dropdown .dropdown a:hover {
      background-color: #dbebe3;

   }
}

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

@media (max-width: 399px) and (min-width: 350px) {

   /* Hide desktop navbar container */
   .navbar-container {
      display: none;
   }

   /* Mobile header styling */
   .nav-mobile {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ffffff;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      font-family: "Lato", sans-serif;
      border-bottom: 1px solid #0ead63;
      border-top: 1px solid #0ead63;
      border-left: 1px solid #0ead63;
      border-right: 1px solid #0ead63;
   }

   .container-mobile {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
   }

   .mobile-navbar {
      width: 100%;
   }

   /* --- Topbar Layout --- */

   .topbar-mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 10px;
      width: 100%;
      height: 5vh;
   }

   /* Left: Logo */
   .logo-mobile {
      flex: 0 0 auto;
   }

   .logo-mobile img {
      width: 30vw;
      height: 3.5vh;
   }

   /* Center: This container is created via JS */
   .middle-container {
      flex: 0.95;
      display: flex;
      align-items: center;
      justify-content: start;
   }

   .middle-container .flag-icons-mobile {
      margin-right: 10px;
   }

   .middle-container .flag-icons-mobile img {
      width: 5.5vw;
      height: auto;
      margin: 7px;
   }

   .middle-container .contact-infonm a {
      color: #333;
      font-size: 18px;
      text-decoration: none;
      margin: 0 5px;
   }

   .contact-infonm a {
      color: #474646;
      font-size: 17px;
      text-decoration: none;
      font-weight: bold;
      background: transparent;
      padding: .8vh
   }

   /* Right: Hamburger container (created via JS) */
   .hamburger-container {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 5vw;
      margin-left: 5vw;
   }


   /* Hide the native checkbox */
   #hamburger-mobile {
      display: none;
   }

   /* Hamburger label styling */
   .hamburger-container label[for="hamburger-mobile"] {
      display: inline-block;
      width: 5vw;
      height: 2vh;
      position: relative;
      cursor: pointer;
   }

   .hamburger-container label[for="hamburger-mobile"]::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      height: 2.5px;
      background-color: #474646;
      box-shadow: 0 -8px 0 #474646, 0 8px 0 #474646;
   }

   /* --- Mobile Menu (Toggle) --- */
   /* The mobile menu (ul.mobile-links) is now moved below the topbar via JS */
   .mobile-links {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #0ead63;
      max-height: 0;
      /* Hidden by default */
      overflow: hidden;
      transition: max-height 0.4s ease-in-out;
   }

   /* When open (via JS), expand the menu */
   .mobile-links.open {
      max-height: 1000px;
      /* Adjust if your menu is taller */
   }

   .mobile-links li {
      border-top: 1px solid #ddd;
   }

   .mobile-links li a {
      display: block;
      padding: 10px 15px;
      color: #ffffff;
      text-decoration: none;
   }

   .mobile-links li a {
      display: block;
      padding: 10px 15px;
      color: #ffffff;
      text-decoration: none;
   }

   a .link_drop {
      color: #0ead63;
   }

   /* Dropdown toggles (inside mobile-links) */
   .mobile-links li.has-dropdown>a.dropdown-toggle {
      cursor: pointer;
   }

   .mobile-links li.has-dropdown>a.dropdown-toggle:after {
      content: "\25BC";
      float: right;
      margin-left: 5px;
   }

   .mobile-links li.has-dropdown .dropdown {
      display: none;
      flex-direction: column;
      background-color: #0ead63;
   }

   .mobile-links li.has-dropdown:hover .dropdown,
   .mobile-links li.has-dropdown:focus-within .dropdown {
      display: flex;
      background-color: #fff;
      color: #ffffff;
   }

   .mobile-links li.has-dropdown .dropdown a {
      padding: 8px 20px;
   }

   .mobile-links li.has-dropdown .dropdown a:hover {
      background-color: #dbebe3;
   }
}

@media (max-width:349px) and (min-width:300px) {


   /* Hide desktop navbar container */
   .navbar-container {
      display: none;
   }

   /* Mobile header styling */
   .nav-mobile {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ffffff;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      font-family: "Lato", sans-serif;
      border-bottom: 1px solid #0ead63;
      border-top: 1px solid #0ead63;
      border-left: 1px solid #0ead63;
      border-right: 1px solid #0ead63;
   }

   .container-mobile {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
   }

   .mobile-navbar {
      width: 100%;
   }

   /* --- Topbar Layout --- */

   .topbar-mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 10px;
      width: 100%;
      height: 5vh;
   }

   /* Left: Logo */
   .logo-mobile {
      flex: 0 0 auto;
   }

   .logo-mobile img {
      width: 30vw;
      height: 2.5vh;
   }

   /* Center: This container is created via JS */
   .middle-container {
      flex: 0.95;
      display: flex;
      align-items: center;
      justify-content: start;
   }

   .middle-container .flag-icons-mobile {
      margin-right: 10px;
   }

   .middle-container .flag-icons-mobile img {
      width: 5.8vw;
      height: auto;
      margin: 2px;
   }

   .middle-container .contact-infonm a {
      color: #333;
      font-size: 18px;
      text-decoration: none;
      margin: 0 5px;
   }

   .contact-infonm a {
      color: #474646;
      font-size: 14px;
      text-decoration: none;
      font-weight: bold;
      background: transparent;
      display: flex;
      align-items: center;
      padding: .5vh
   }

   /* Right: Hamburger container (created via JS) */
   .hamburger-container {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 6vw;
      margin-left: 5vw;
   }


   /* Hide the native checkbox */
   #hamburger-mobile {
      display: none;
   }

   /* Hamburger label styling */
   .hamburger-container label[for="hamburger-mobile"] {
      display: inline-block;
      width: 6vw;
      height: 2vh;
      position: relative;
      cursor: pointer;
   }

   .hamburger-container label[for="hamburger-mobile"]::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      height: 2px;
      background-color: #474646;
      box-shadow: 0 -8px 0 #474646, 0 8px 0 #474646;
   }

   /* --- Mobile Menu (Toggle) --- */
   /* The mobile menu (ul.mobile-links) is now moved below the topbar via JS */
   .mobile-links {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #fff;
      max-height: 0;
      /* Hidden by default */
      overflow: hidden;
      transition: max-height 0.4s ease-in-out;
   }

   /* When open (via JS), expand the menu */
   .mobile-links.open {
      max-height: 1000px;
      /* Adjust if your menu is taller */
   }

   .mobile-links li {
      border-top: 1px solid #ddd;
   }

   .mobile-links li a {
      display: block;
      padding: 10px 15px;
      color: #333;
      text-decoration: none;
   }

   /* Dropdown toggles (inside mobile-links) */
   .mobile-links li.has-dropdown>a.dropdown-toggle {
      cursor: pointer;
   }

   .mobile-links li.has-dropdown>a.dropdown-toggle:after {
      content: "\25BC";
      float: right;
      margin-left: 5px;
   }

   .mobile-links li.has-dropdown .dropdown {
      display: none;
      flex-direction: column;
      background-color: #f9f9f9;
   }

   .mobile-links li.has-dropdown:hover .dropdown,
   .mobile-links li.has-dropdown:focus-within .dropdown {
      display: flex;
   }

   .mobile-links li.has-dropdown .dropdown a {
      padding: 8px 20px;
   }

   .mobile-links li.has-dropdown .dropdown a:hover {
      background-color: #dbebe3;
   }
}


@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

@media (max-width: 299px) and (min-width: 260px) {


   /* Hide desktop navbar container */
   .navbar-container {
      display: none;
   }

   /* Mobile header styling */
   .nav-mobile {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ffffff;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      font-family: "Lato", sans-serif;
      border-bottom: 1px solid #0ead63;
      border-top: 1px solid #0ead63;
      border-left: 1px solid #0ead63;
      border-right: 1px solid #0ead63;
   }

   .container-mobile {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
   }

   .mobile-navbar {
      width: 100%;
   }

   /* --- Topbar Layout --- */

   .topbar-mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 10px;
      width: 100%;
      height: 5vh;
   }

   /* Left: Logo */
   .logo-mobile {
      flex: 0 0 auto;
   }

   .logo-mobile img {
      width: 28vw;
      height: 2.2vh;
   }

   /* Center: This container is created via JS */
   .middle-container {
      flex: 0.95;
      display: flex;
      align-items: center;
      justify-content: start;
   }

   .middle-container .flag-icons-mobile {
      margin-right: 10px;
   }

   .middle-container .flag-icons-mobile img {
      width: 5.8vw;
      height: auto;
      margin: 2px;
   }

   .middle-container .contact-infonm a {
      color: #333;
      font-size: 18px;
      text-decoration: none;
      margin: 0 5px;
   }

   .contact-infonm a {
      color: #474646;
      font-size: 14px;
      text-decoration: none;
      font-weight: bold;
      background: transparent;
      display: flex;
      align-items: center;
      padding: .5vh
   }

   /* Right: Hamburger container (created via JS) */
   .hamburger-container {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 6vw;
      margin-left: 5vw;
   }


   /* Hide the native checkbox */
   #hamburger-mobile {
      display: none;
   }

   /* Hamburger label styling */
   .hamburger-container label[for="hamburger-mobile"] {
      display: inline-block;
      width: 6vw;
      height: 2vh;
      position: relative;
      cursor: pointer;
   }

   .hamburger-container label[for="hamburger-mobile"]::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      height: 2px;
      background-color: #474646;
      box-shadow: 0 -8px 0 #474646, 0 8px 0 #474646;
   }

   /* --- Mobile Menu (Toggle) --- */
   /* The mobile menu (ul.mobile-links) is now moved below the topbar via JS */
   .mobile-links {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #fff;
      max-height: 0;
      /* Hidden by default */
      overflow: hidden;
      transition: max-height 0.4s ease-in-out;
   }

   /* When open (via JS), expand the menu */
   .mobile-links.open {
      max-height: 1000px;
      /* Adjust if your menu is taller */
   }

   .mobile-links li {
      border-top: 1px solid #ddd;
   }

   .mobile-links li a {
      display: block;
      padding: 10px 15px;
      color: #333;
      text-decoration: none;
   }

   /* Dropdown toggles (inside mobile-links) */
   .mobile-links li.has-dropdown>a.dropdown-toggle {
      cursor: pointer;
   }

   .mobile-links li.has-dropdown>a.dropdown-toggle:after {
      content: "\25BC";
      float: right;
      margin-left: 5px;
   }

   .mobile-links li.has-dropdown .dropdown {
      display: none;
      flex-direction: column;
      background-color: #f9f9f9;
   }

   .mobile-links li.has-dropdown:hover .dropdown,
   .mobile-links li.has-dropdown:focus-within .dropdown {
      display: flex;
   }

   .mobile-links li.has-dropdown .dropdown a {
      padding: 8px 20px;
   }

   .mobile-links li.has-dropdown .dropdown a:hover {
      background-color: #dbebe3;
   }
}

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

@media (max-width: 259px) {


   /* Hide desktop navbar container */
   .navbar-container {
      display: none;
   }

   /* Mobile header styling */
   .nav-mobile {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ffffff;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      font-family: "Lato", sans-serif;
      border-bottom: 1px solid #0ead63;
      border-top: 1px solid #0ead63;
      border-left: 1px solid #0ead63;
      border-right: 1px solid #0ead63;
   }

   .container-mobile {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
   }

   .mobile-navbar {
      width: 100%;
   }

   /* --- Topbar Layout --- */

   .topbar-mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 10px;
      width: 100%;
      height: 5vh;
   }

   .flag-circular {
      width: 24px;
      height: 24px;
   }

   /* Left: Logo */
   .logo-mobile {
      flex: 0 0 auto;
   }

   .logo-mobile img {
      width: 25vw;
      height: 15px;
   }

   /* Center: This container is created via JS */
   .middle-container {
      flex: 0.95;
      display: flex;
      align-items: center;
      justify-content: start;
   }

   .middle-container .flag-icons-mobile {
      margin-right: 10px;
   }

   .middle-container .flag-icons-mobile img {
      width: 5.8vw;
      height: auto;
      margin: 2px;
   }

   .middle-container .contact-infonm a {
      color: #333;
      font-size: 12px;
      text-decoration: none;
      margin: 0 5px;
   }

   .contact-infonm a {
      color: #474646;
      font-size: 13px;
      text-decoration: none;
      font-weight: bold;
      background: transparent;
      display: flex;
      align-items: center;
      padding: .4vh
   }

   /* Right: Hamburger container (created via JS) */
   .hamburger-container {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 6vw;
      margin-left: 5vw;
   }


   /* Hide the native checkbox */
   #hamburger-mobile {
      display: none;
   }

   /* Hamburger label styling */
   .hamburger-container label[for="hamburger-mobile"] {
      display: inline-block;
      width: 5vw;
      height: 1vh;
      position: relative;
      cursor: pointer;
   }

   .hamburger-container label[for="hamburger-mobile"]::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      height: 2px;
      background-color: #474646;
      box-shadow: 0 -8px 0 #474646, 0 8px 0 #474646;
   }

   /* --- Mobile Menu (Toggle) --- */
   /* The mobile menu (ul.mobile-links) is now moved below the topbar via JS */
   .mobile-links {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #fff;
      max-height: 0;
      /* Hidden by default */
      overflow: hidden;
      transition: max-height 0.4s ease-in-out;
   }

   /* When open (via JS), expand the menu */
   .mobile-links.open {
      max-height: 1000px;
      /* Adjust if your menu is taller */
   }

   .mobile-links li {
      border-top: 1px solid #ddd;
   }

   .mobile-links li a {
      display: block;
      padding: 10px 15px;
      color: #333;
      text-decoration: none;
   }

   /* Dropdown toggles (inside mobile-links) */
   .mobile-links li.has-dropdown>a.dropdown-toggle {
      cursor: pointer;
   }

   .mobile-links li.has-dropdown>a.dropdown-toggle:after {
      content: "\25BC";
      float: right;
      margin-left: 5px;
   }

   .mobile-links li.has-dropdown .dropdown {
      display: none;
      flex-direction: column;
      background-color: #f9f9f9;
   }

   .mobile-links li.has-dropdown:hover .dropdown,
   .mobile-links li.has-dropdown:focus-within .dropdown {
      display: flex;
   }

   .mobile-links li.has-dropdown .dropdown a {
      padding: 8px 20px;
   }

   .mobile-links li.has-dropdown .dropdown a:hover {
      background-color: #dbebe3;
   }
}


@media (max-width: 220px) {

   /* Hide desktop navbar container */
   .navbar-container {
      display: none;
   }

   /* Mobile header styling */
   .nav-mobile {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ffffff;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      font-family: "Lato", sans-serif;
      border-bottom: 1px solid #0ead63;
      border-top: 1px solid #0ead63;
      border-left: 1px solid #0ead63;
      border-right: 1px solid #0ead63;
   }

   .container-mobile {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
   }

   .mobile-navbar {
      width: 100%;
   }

   /* --- Topbar Layout --- */

   .topbar-mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 10px;
      width: 100%;
      height: 5vh;
   }

   .flag-circular {
      width: 14px;
      height: 14px;
   }

   /* Left: Logo */
   .logo-mobile {
      flex: 0 0 auto;
   }

   .logo-mobile img {
      width: 25vw;
      height: 15px;
   }

   /* Center: This container is created via JS */
   .middle-container {
      flex: 0.95;
      display: flex;
      align-items: center;
      justify-content: start;
   }

   .middle-container .flag-icons-mobile {
      margin-right: 10px;
   }

   .middle-container .flag-icons-mobile img {
      width: 5.8vw;
      height: auto;
      margin: 2px;
   }

   .middle-container .contact-infonm a {
      color: #333;
      font-size: 12px;
      text-decoration: none;
      margin: 0 5px;
   }

   .contact-infonm a {
      color: #474646;
      font-size: 8px;
      text-decoration: none;
      font-weight: bold;
      background: transparent;
      display: flex;
      align-items: center;
      padding: .4vh
   }

   /* Right: Hamburger container (created via JS) */
   .hamburger-container {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 6vw;
      margin-left: 5vw;
   }


   /* Hide the native checkbox */
   #hamburger-mobile {
      display: none;
   }

   /* Hamburger label styling */
   .hamburger-container label[for="hamburger-mobile"] {
      display: inline-block;
      width: 5vw;
      height: 1vh;
      position: relative;
      cursor: pointer;
   }

   .hamburger-container label[for="hamburger-mobile"]::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      height: 2px;
      background-color: #474646;
      box-shadow: 0 -8px 0 #474646, 0 8px 0 #474646;
   }

   /* --- Mobile Menu (Toggle) --- */
   /* The mobile menu (ul.mobile-links) is now moved below the topbar via JS */
   .mobile-links {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #fff;
      max-height: 0;
      /* Hidden by default */
      overflow: hidden;
      transition: max-height 0.4s ease-in-out;
   }

   /* When open (via JS), expand the menu */
   .mobile-links.open {
      max-height: 1000px;
      /* Adjust if your menu is taller */
   }

   .mobile-links li {
      border-top: 1px solid #ddd;
   }

   .mobile-links li a {
      display: block;
      padding: 10px 15px;
      color: #333;
      text-decoration: none;
   }

   /* Dropdown toggles (inside mobile-links) */
   .mobile-links li.has-dropdown>a.dropdown-toggle {
      cursor: pointer;
   }

   .mobile-links li.has-dropdown>a.dropdown-toggle:after {
      content: "\25BC";
      float: right;
      margin-left: 5px;
   }

   .mobile-links li.has-dropdown .dropdown {
      display: none;
      flex-direction: column;
      background-color: #f9f9f9;
   }

   .mobile-links li.has-dropdown:hover .dropdown,
   .mobile-links li.has-dropdown:focus-within .dropdown {
      display: flex;
   }

   .mobile-links li.has-dropdown .dropdown a {
      padding: 8px 20px;
   }

   .mobile-links li.has-dropdown .dropdown a:hover {
      background-color: #dbebe3;
   }
}