@font-face {
    font-family: 'LEMONMILK-Bold';
    src: url('/fonts/LEMONMILK-Bold.otf') format('truetype');
    /* font-weight: normal;
    font-style: normal; */
}
@font-face {
    font-family: 'Rubik-Bold';
    src: url('/fonts/Rubik-Bold.ttf') format('truetype');
    /* font-weight: normal;
    font-style: normal; */
}
@font-face {
    font-family: 'Rubik-Regular';
    src: url('/fonts/Rubik-Regular.ttf') format('truetype');
    /* font-weight: normal;
    font-style: normal; */
}


.lemonmilk-bold-font{
    font-family: 'LEMONMILK-Bold';
}
.rubik-bold-font{
    font-family: 'Rubik-Bold';
}
.rubik-regular-font{
    font-family: 'Rubik-Regular';
}



:root {
    /* --blue-dark:   #0b5aa8; */
    --blue:        #1478c8;
    --blue-mid:    #3ea9dd;
    --blue-light:  #7fd0ee;
    --blue-pale:   #eaf6fc;
    --blue-pale-2: #dcf0fa;
    --orange:      #f5a623;
    --white:       #ffffff;
    --eeeeee:       #eeeeee;
    --text:        #2b2b2b;
    --text-soft:   #4a5a68;

    --blue-dark: #0a2a6b;
    --blue-primary: #0d6efd;
    --blue-accent: #1e8fe1;
    --blue-light: #eaf4fd;
    --blue-pale: #cfe8fb;
    --white: #ffffff;
    --text-dark: #14213d;
    --text-muted: #4a5568;
    --radius-lg: 32px;
    --color-d2ad25: #d2ad25;

    --font-display: 'Poppins', sans-serif;
    --font-body:    'Nunito', sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: var(--text);
    overflow-x: hidden;

    background: url('../../../images/bk.jpg') center/cover no-repeat fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;

}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

img { max-width: 100%;}

a { text-decoration: none; color: inherit; }

ul { list-style: none; margin: 0; padding: 0; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section { position: relative; padding: 80px 0; }

h1, h2, h3, h4 {
    font-family: 'LEMONMILK-Bold';
    margin: 0;
    direction: ltr;
}
p{
    direction: ltr;
}
/* ============ HEADER ============ */
.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    background:rgb(0 86 179 / 67%);
}

.site-header__inner {
    /* max-width: 1300px; */
    margin: 0 auto;
    padding: 16px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header__logo img { height: 42px; }
.site-header.scrolled {
    background-color: #1e88d6; /* Dark background on scroll */
    /* padding: 12px 40px;        Slightly shrink height for a polished effect */
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); */
}
.site-nav {
    font-family: 'Rubik-Regular';
}
.site-nav ul {
    display: flex;
    list-style: none;
    gap: 34px;
    margin: 0;
    padding: 0;
}

.site-nav ul li a {
    color: var(--eeeeee);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    transition: color .2s ease;
}

.site-nav a:hover,
.site-nav a.is-active { color: var(--color-d2ad25);font-weight:bold; }

.site-header__lang {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
}

.site-header__lang img { width: 20px; height: auto; border-radius: 2px; }

/* Language Selector */
.site-header__lang {
    /* margin-left: auto; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 6px 12px;

    /* background: rgba(255, 255, 255, 0.12); */
    /* backdrop-filter: blur(8px); */
    /* -webkit-backdrop-filter: blur(8px); */

    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    /* border-radius: 30px; */

    color: #fff;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: all .3s ease;
}

.site-header__lang:hover {
    /* background: rgba(255, 255, 255, 0.22); */
    transform: translateY(-1px);
}

.site-header__lang img {
    width: 30px !important;
    /* height: 16px; */
    /* object-fit: cover; */
    border-radius: 3px;
    /* border: 1px solid rgba(255,255,255,.3); */
}

.site-header__lang span {
    line-height: 1;
    letter-spacing: .5px;
}
.site-header__lang-dropdown {
    order: 3;
  position: relative;
  display: inline-block;
}

/* Selected button style */
.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0px;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.lang-btn img,
.lang-option img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
}

.dropdown-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
}
/* Rotate arrow when menu is open */
.site-header__lang-dropdown.open .dropdown-arrow {
  transform: rotate(0deg);
}

/* Dropdown Options List */
/* Dropdown Options List */
.lang-menu {
  display: none;
  position: absolute;
  top: 100%;

  /* Position to the RIGHT edge of the container */
  right: 0;
  left: auto; /* Reset left positioning */

  margin-top: 6px;
  padding: 6px 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  min-width: 100px;
  z-index: 1000;
}

.site-header__lang-dropdown.open .lang-menu {
  display: block;
}

/* Single Option Style */
.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 14px;
}

.lang-option:hover {
  background-color: #f5f5f5;
}

.lang-option.active {
  font-weight: bold;
  color: #007bff;
}

/* ================= FOOTER ================= */
.site-footer {
    background: #107ec2;
    color: var(--white);
    padding: 60px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

.footer-logo { height: 50px; margin-bottom: 20px; }

.footer-brand p {
    font-size: 15px;
    opacity: .85;
    margin-bottom: 12px;
}

.footer-col h4 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 20px;
    color: white;
}

.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a {
    font-size: 15px;
    opacity: .85;
    transition: opacity .2s ease;
}
.footer-col ul li a:hover { opacity: 1; }

.social-list li a {
    display: flex;
    align-items: start;
    gap: 10px;
}
.social-list img { width: 18px; height: 18px; }








/* for responsive desing */
/* ===========================
   Responsive Header
=========================== */

/* Large Tablet */
@media (max-width: 1200px) {

    .site-header__inner {
        padding: 15px 25px;
    }

    .site-nav ul {
        gap: 22px;
    }

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

/* Tablet */
@media (max-width: 992px) {

    .site-header__inner {
        padding: 15px 20px;
    }

    .site-header__logo img {
        height: 36px;
    }

    .site-nav ul {
        gap: 16px;
    }

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

    .site-header__lang span {
        display: none;
    }
}

/* Mobile */
@media (max-width: 768px) {

    .site-header__inner {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .site-header__logo {
        width: 100%;
        text-align: center;
    }

    .site-header__logo img {
        height: 34px;
    }

    .site-nav {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav ul {
        flex-wrap: nowrap;
        gap: 20px;
        width: max-content;
        padding-bottom: 4px;
    }

    .site-nav ul li a {
        font-size: 12px;
        white-space: nowrap;
    }

    .site-header__lang {
        width: 20%;
        justify-content: center;
    }

    .site-header__lang span {
        display: inline;
    }
}

/* Small Mobile */
@media (max-width: 576px) {

    .site-header__inner {
        padding: 10px 12px;
    }

    .site-header__logo img {
        height: 30px;
    }

    .site-nav ul {
        gap: 16px;
    }

    .site-nav ul li a {
        font-size: 11px;
        letter-spacing: .2px;
    }

    .site-header__lang img {
        width: 18px;
    }

    .site-header__lang span {
        font-size: 20px;
    }
}

/* Extra Small Mobile */
@media (max-width: 400px) {

    .site-nav ul {
        gap: 14px;
        width:100%;
    }

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

    .site-header__logo img {
        height: 28px;
    }
}
/* ======================================
   Mobile Header Layout
====================================== */

@media (max-width: 768px) {

    .site-header {
        position: fixed;
        top: 0;
        z-index: 999;
    }

    .site-header__inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
        padding: 0 16px;
    }

    /* Hamburger (Left) */
    .navbar-toggle {
        display: flex;
        order: 1;
        width: 42px;
        height: 42px;
        padding: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1002;
    }

    .navbar-toggle span {
        width: 24px;
        height: 2px;
        background: #fff;
        border-radius: 3px;
        transition: .3s;
    }

    /* Logo (Center) */
    .site-header__logo {
        order: 2;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .site-header__logo img {
        height: 38px;
        width: auto;
    }

    /* Language (Right) */
    .site-header__lang {
        order: 3;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        background: transparent;
    }

    .site-header__lang img {
        width: 22px;
        height: auto;
    }

    .site-header__lang span {
        display: inline-block;
        font-size: 13px;
        color: #fff;
    }

    /* Navigation */
    .site-nav {
        position: absolute;
        top: 72px;
        left: 0;
        width: 100%;
        display: none;
        background: rgb(0 86 179 / 67%);
        backdrop-filter: blur(8px);
        box-shadow: 0 10px 25px rgba(0,0,0,.2);
        z-index: 1000;
        height:100vh;
        width:250px;
    }

    .site-nav.active {
        display: block;
    }

    .site-nav ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        width:100%;
    }

    .site-nav li {
        width: 100%;
    }

    .site-nav li a {
        display: block;
        padding: 16px 20px;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,.08);
        font-size: 14px;
    }

    .site-nav li:last-child a {
        border-bottom: none;
    }

    .site-nav li a:hover,
    .site-nav li a.is-active {
        background: rgba(255,255,255,.08);
    }
}

/* Small Mobile */
@media (max-width: 480px) {

    .site-header__inner {
        height: 64px;
        padding: 0 12px;
    }

    .site-header__logo img {
        height: 32px;
    }

    .site-header__lang img {
        width: 18px;
    }

    .site-header__lang span {
        font-size: 12px;
    }

    .site-nav {
        top: 64px;
    }
}

/* ==========================
   Navbar Toggle
========================== */

.navbar-toggle {
    /* display: none; */
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.navbar-toggle span {
    width: 26px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    transition: all .3s ease;
}

/* Animate to X */
.navbar-toggle.active span:nth-child(1) {
    transform: translateY(13px) rotate(45deg);
}

.navbar-toggle.active span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* order display */
.order1{
    order:1;
}
.order2{
    order:2;
}
.order3{
    order:3;
}
.order4{
    order:4;
}
.order5{
    order:5;
}
.order6{
    order:6;
}
.order7{
    order:7;
}
.order7{
    order:8;
}
.order9{
    order:9;
}
.order10{
    order:10;
}
/* --- Default / Mobile (0px and up) --- */
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-first { order: -1; }
.order-last  { order: 999; }


/* margin */
.m-0-auto{
    margin: 0 auto !important;
}

/* z-index */
.z-index-1{
    z-index: 1;
}
/* --- Tablet / Small Screens (min-width: 768px) --- */
@media (min-width: 768px) {
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-first { order: -1; }
  .order-md-last  { order: 999; }
}

/* --- Desktop / Large Screens (min-width: 1024px) --- */
@media (min-width: 1024px) {
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; }
  .order-lg-first { order: -1; }
  .order-lg-last  { order: 999; }
}
HTML Example

/* end order display */

@media (max-width: 768px) {

    .navbar-toggle {
        display: flex;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 70%;
        height: 100vh;
        height: 150dvh;
        background: rgb(0 86 179 / 67%);
        z-index: 999;
    }

    .site-nav.active {
        display: block;
    }

    .site-nav ul {
        flex-direction: column;
        gap: 0;
        width:100%;
    }

    .site-nav ul li {
        width: 100%;
    }

    .site-nav ul li a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

}

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

/* Large Laptop */
@media (max-width: 1200px) {

    .footer-grid {
        gap: 30px;
    }

    .footer-logo {
        height: 45px;
    }
}

/* Tablet */
@media (max-width: 992px) {

    .site-footer {
        padding: 50px 0 25px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        text-align: left;
    }

    .footer-brand p {
        max-width: 500px;
        margin: 0 auto 12px;
    }

    .footer-logo {
        margin: 0 auto 20px;
        display: block;
    }

    .footer-phone {
        justify-content: center;
    }

    .social-list {
        padding: 0;
        margin: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {

    .site-footer {
        padding: 45px 20px 25px;
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-col {
        width: 100%;
    }

    .footer-logo {
        height: 42px;
    }

    .footer-col h4 {
        margin-bottom: 15px;
        font-size: 16px;
    }

    .footer-brand p,
    .footer-col ul li a {
        font-size: 14px;
        line-height: 1.7;
    }

    .footer-phone {
        justify-content: center;
        margin-bottom: 10px;
    }

    .footer-phone i {
        margin-right: 8px;
    }

    .footer-col ul {
        padding: 0;
        margin: 0;
        list-style: none;
        text-align:left;
    }

    .footer-col ul li {
        margin-bottom: 10px;
    }

    .social-list li a {
        justify-content: start;
    }

    .social-list img {
        width: 20px;
        height: 20px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {

    .site-footer {
        padding: 40px 0px;
    }

    .footer-logo {
        height: 36px;
    }

    .footer-col h4 {
        font-size: 15px;
        text-align:left;
    }

    .footer-brand p,
    .footer-col ul li a {
        font-size: 16px;
    }

    .social-list img {
        width: 18px;
        height: 18px;
    }

    .footer-phone {
        font-size: 13px;
    }
}



@keyframes fadeRight {
    from { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(100px);}
    to { opacity: 1; transform: translateY(0);}
}

.fade-right-trigger,
.fade-left-trigger,
.fade-up-trigger {
    opacity: 0;
}

.fade-right-trigger.animate {
    animation: fadeRight 1.2s ease-out forwards;
}

.fade-left-trigger.animate {
    animation: fadeLeft 1.2s ease-out forwards;
}
.fade-up-trigger.animate {
    animation: fadeUp 1.2s ease-out forwards;
}



/* Animation */

@keyframes slideAnimation {
    /* Slide 1 (0%) */
    0%, 7.5% {
        transform: translateX(0%);
    }

    /* Slide 2 (-100%) */
    10%, 17.5% {
        transform: translateX(-100%);
    }

    /* Slide 3 (-200%) */
    20%, 27.5% {
        transform: translateX(-200%);
    }

    /* Slide 4 (-300%) */
    30%, 37.5% {
        transform: translateX(-300%);
    }

    /* Slide 5 (-400%) */
    40%, 47.5% {
        transform: translateX(-400%);
    }

    /* Slide 6 (-500%) */
    50%, 57.5% {
        transform: translateX(-500%);
    }

    /* Slide 7 (-600%) */
    60%, 67.5% {
        transform: translateX(-600%);
    }

    /* Slide 8 (-700%) */
    70%, 77.5% {
        transform: translateX(-700%);
    }

    /* Slide 9 (-800%) */
    80%, 87.5% {
        transform: translateX(-800%);
    }

    /* Slide 10 (-900%) */
    90%, 97.5% {
        transform: translateX(-900%);
    }

    /* Reset to start */
    100% {
        transform: translateX(0%);
    }
}

/* ==========================
   Responsive
========================== */

@media (max-width:992px){

    .slide img{
        height:550px;
    }

}

@media (max-width:768px){

    .slide img{
        height:420px;
    }

}

@media (max-width:576px){

    .slide img{
        height:320px;
    }

}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp 0.6s ease-out forwards;
}