html, body {
      margin: 0; padding: 0; height: 100%; width: 100vw;
    }
    * {
        font-family: 'Outfit', sans-serif;
    }
    .responsive-video {
      width: 100%;
      height: auto;
      max-width: 650px; 
      display: block;
    }
    .title_txt
    {
      color: #782016 !important;
    }
    img.flag_side
    {
      width: 22vw !important;
    }
    body {
      background-image: url('../../assets/images/background_image.png'); /* path to your image */
      background-repeat: no-repeat;       /* prevents repeating the image */
      background-size: cover;             /* stretches image to cover the entire body */
      background-position: center center; /* centers the image */
    }
    .logo-area {
      position: absolute; top: 35px; left: 35px;
      width: 140px; height: 140px; z-index: 20;
    }
    .logo-img { width: 100%; height: 100%; object-fit: contain; }
    .flag-section {
      position: absolute; 
      left: 50vw;
      top: 55vh;
      transform: translate(-50%,-55%);
      z-index: 10; width: 350px; height: 270px;
      display: flex; align-items: center; justify-content: center;
    }
    .flag-img {
      width: 100%; height: auto; object-fit: contain;
      filter: drop-shadow(0px 6px 30px rgba(160,110,20,0.08));
    }
    .sidebar-menu {
      position: absolute;
      right: 0;
      top: 200px;
      width: 52px;
      min-height: 200px;
      text-align: right;
      font-family: 'Segoe UI', Arial, sans-serif;
      z-index: 30;
      border-radius: 24px 0 0 24px;
      box-shadow: -3px 0 22px 0 rgba(170,160,130,0.03);
      overflow: hidden;
      cursor: pointer;

      /* Smooth Animation */
      transition: width 1.2s cubic-bezier(.48,1.66,.58,.88);
    }

    .sidebar-menu.expanded {
      width: 180px;
      box-shadow: -8px 0 26px -5px #ccc2b516;
    }
    .sidebar-menu ul {
      list-style: none;
      margin: 40px 0 0 0;
      padding: 0 24px 0 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.8s; /* SLOW MOTION HERE */
    }
    .sidebar-menu.expanded ul {
      opacity: 1;
      pointer-events: auto;
      transition: opacity 0.8s 0.32s;
    }
    .sidebar-menu li {
      margin-bottom: 32px;
      font-size: 24px;
      color: #35322a;
      font-weight: normal;
      letter-spacing: .5px;
    }
    /*.sidebar-menu li.active {
      color: #fa7101;
      font-weight: bold;
    }*/

    .sidebar-menu li.green.active {
        color: green;
        font-weight: bold;
        font-size: 30px;
      }

      .sidebar-menu li.orange.active {
        color: orange;
        font-weight: bold;
        font-size: 30px;
      }

    .arrow-circle {      
      width: 36px;
      height: 36px;
      background: #393836;
      border-radius: 50%;
      /*display: flex;*/
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px;
      margin: 200px 0 0 0px;
      transition: transform 0.3s;
      position: revert;
      left: 0vw;
      right: 1vw;
      position: absolute;
    }
    .sidebar-menu.expanded .arrow-circle {
      transform: rotate(180deg);
    }

  .flag-section {
    width: 100vw;   /* full viewport width */
    height: 75vh;  /* full viewport height */
    overflow: hidden; /* hide extra parts if aspect doesn’t match */
  }

  .flag-section img {
    /*width: 100%;*/
    height: 100%;
    object-fit: cover; /* crop to fill screen */
  }


  #sidebarMenu {
    width: 50px; /* collapsed width */
    transition: width 0.3s;
  }

  #sidebarMenu.expanded {
    width: 200px; /* expanded width */
  }