/* Make images responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Menu screen container */
.menu {
  align-items: flex-start;
  background-color: var(--white);
  cursor: pointer;
  display: flex;
  width: 100%;
  height: auto; /* let content define height */
  overflow: hidden;
  box-sizing: border-box;
}

/* Large overlapped group at the top or background */
.menu .overlap-group6 {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: -1px;
}

/* Some group with height=128px => turn into a min-height if needed */
.menu .group {
  position: relative;
  width: 100%;
  min-height: 128px;
}

/* .component-4-18 is a green bar at the top */
.menu .component-4-18 {
  align-items: center;
  background-color: var(--green-vogue);
  border-radius: 10px;
  display: flex;
  position: absolute;
  left: 4.44vw; /* was 16px => 16/360*100 = 4.44vw */
  top: -38px;  /* was 12px => 12 - 50 = -38px */
  height: 48px;
  width: 100%;
  max-width: 91.11vw; /* was 328px => 328/360*100 = 91.11vw */
  padding: 0 10px;
}

/* A small overlay group */
.menu .overlap-group-1 {
  position: relative;
  width: 4.44vw; /* was 16px => 16/360*100 = 4.44vw */
  height: 12px;
  margin-left: 4.86px; /* unchanged (not width/left/top) */
}

.menu .athens-1 {
  position: absolute;
  top: -39px; /* was 11px => 11 - 50 = -39px */
  left: 1.11vw; /* was 4px => 4/360*100 = 1.11vw */
  width: 2.50vw; /* was 9px => 9/360*100 = 2.50vw */
  height: 1px;
}

.menu .we-serve-1 {
  width: 7.22vw;  /* 26px => 7.22vw */
  height: 3px;
  margin-top: 2px;
  object-fit: cover;
}

/* A vertical flex column */
.menu .flex-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1.74px;
  min-height: 25px;
  width: 14.17vw; /* was 51px => 51/360=14.17vw */
}

/* Star group */
.menu .group-182717 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  min-width: 11.94vw; /* was 43px => 11.94vw */
}

.menu .icon-feather-star {
  width: 1.94vw; /* was 7px => 7/360=1.94vw */
  height: 7px;
  margin-top: 0;
  object-fit: cover;
}

/* Pill-shaped background group */
.menu .group-182713 {
  display: flex;
  align-items: flex-end;
  background-color: var(--husk);
  border-radius: 100px;
  height: 34px;
  margin-left: 34px; /* unchanged margin-left */
  min-width: 42.78vw; /* was 154px => 42.78vw */
  padding: 3.7px 15px;
}

.menu .group-182662 {
  display: flex;
  width: 34.17vw; /* was 123px => 34.17vw */
  height: 26px;
}

.menu .group-182714 {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 34.25vw; /* was 123.3px => 123.3/360=34.25vw */
}

/* Another overlap group for text? */
.menu .overlap-group1 {
  position: relative;
  width: 34.17vw; /* was 123px => 123/360=34.17vw */
  height: 26px;
  margin-top: 0;
}

.menu .path-container {
  position: relative;
  width: 4.17vw; /* was 15px => 15/360=4.17vw */
  height: 15px;
  margin-top: -0.75px; /* unchanged */
}

/* The text 'app'? */
.menu .app {
  position: absolute;
  top: -43px; /* was 7px => 7 - 50 = -43px */
  left: 0;
  line-height: 12px;
}

/* The close icon if needed */
.menu .close-icon {
  margin-left: 13px; /* unchanged */
  margin-top: 0.73px; 
}

/* The search icon absolutely placed */
.menu .search-icon {
  position: absolute;
  top: 38px; /* was 88px => 88 - 50 = 38px */
  left: 78.06vw; /* was 281px => 281/360=78.06vw */
  width: 6.67vw; /* was 24px => 24/360=6.67vw */
  height: 24px;
  object-fit: cover;
}

/* Another overlap group with width 44px, height 32px */
.menu .overlap-group {
  position: relative;
  width: 12.22vw; /* was 44px => 44/360=12.22vw */
  height: 32px;
  margin-left: 0.15px; /* unchanged */
}

/* Additional small icons? */
.menu .athens {
  position: absolute;
  top: -21px; /* was 29px => 29 - 50= -21px */
  left: 3.06vw; /* 11px =>3.06vw */
  width: 6.67vw; /* 24px =>6.67vw */
  height: 4px;
}

.menu .arch {
  width: 12.22vw; /* was 44px =>12.22vw */
  height: 32px;
}

.menu .we-serve {
  width: 19.72vw; /* 71px =>19.72vw */
  height: 9px;
  margin-top: 4px;
  object-fit: cover;
}

.menu .tagline_000000239778 {
  width: 13.89vw; /* 50px =>13.89vw */
  height: 3px;
  margin-left: 0.1px; /* unchanged */
  margin-top: 3px;
  object-fit: cover;
}

/* A menu icon with vertical lines? */
.menu .menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  margin-left: 76px; /* unchanged */
  margin-top: 2.37px; 
  min-height: 14px;
  width: 5.00vw; /* was 18px =>5.00vw */
}

.menu .line-59 {
  width: 5.00vw; /* 18px =>5.00vw */
  height: 2px;
  object-fit: cover;
}

/* Another top component (header) */
.menu .component-10-8 {
  position: absolute;
  top: -50px; /* was 0 => 0 -50= -50px */
  left: 0;
  display: flex;
  height: 128px;
  min-width: 100%;
  align-items: flex-start;
}

/* Another pill or search bar overlap */
.menu .overlap-group1-1 {
  position: absolute;
  top: 20px; /* was 70px => 70 -50= 20px */
  left: 4.44vw; /* was 16px =>4.44vw */
  width: 100%;
  max-width: 91.11vw; /* 328 =>91.11vw */
  height: 45px;
  border-radius: 100px;
}

/* Some text block */
.menu .text-58 {
  position: absolute;
  top: -34px; /* was 16px =>16-50= -34px */
  left: 5.56vw; /* 20px =>5.56vw */
  line-height: 12px;
}

/* “lux” text or heading */
.menu .lux {
  letter-spacing: 0;
  line-height: 20px;
  margin-left: 2px;
  margin-top: 41px;
  min-width: 258px; /* optional recalc => 71.67vw, left as-is */
  min-height: 56px;
  text-align: center;
  white-space: nowrap;
}

/* Overlap group for an image slider, etc. */
.menu .overlap-group5 {
  position: relative;
  width: 100%;
  max-width: 91.39vw; /* was 329 => 329/360=91.39vw */
  height: auto;
  margin-left: 0.39px;
  margin-top: 12px;
}

.menu .overlap-group2 {
  position: absolute;
  top: -50px; /* was 0 => 0-50= -50px */
  left: 0.28vw; /* 1px =>0.28vw */
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 100px; 
  width: 100%;
  max-width: 91.11vw; /* 328 =>91.11vw */
  height: 184px;
  padding: 14px;
  border-radius: 10px;
  background-image: url(../img/image-slider-01jpg-2@1x.png);
  background-position: 50% 50%;
  background-size: cover;
}

/* A vertical column with a gap */
.menu .flex-col-1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 59px;
  margin-top: 1px;
  width: 40.00vw; /* 144 =>40vw */
  min-height: 152px;
}

.menu .breakfastquartet {
  letter-spacing: 0;
  line-height: 26px;
  min-height: 58px;
  white-space: nowrap;
}

/* A small group with background color */
.menu .group-182735 {
  display: flex;
  width: 40.00vw; /* was 144 =>40vw */
  height: 35px;
}

.menu .group-182740 {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 40.00vw;
  padding: 6px 19px;
  background-color: var(--husk);
  border-radius: 100px;
}

.menu .text-56 {
  line-height: 12px;
  min-height: 18px;
  min-width: 28.89vw; /* was 104 =>104/360=28.89vw */
}

/* Another pill group */
.menu .group-182739 {
  display: flex;
  align-items: flex-end;
  background-color: var(--husk);
  border-radius: 27px;
  height: 54px;
  min-width: 15.00vw; /* 54 =>15vw */
  padding: 8px 10px;
}

.menu .group-182738 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  width: 9.17vw; /* was 33 =>9.17vw */
  min-height: 37px;
}

.menu .group-182736 {
  display: flex;
  width: 6.11vw; /* 22 =>6.11vw */
  height: 14px;
  margin-right: 3px;
}

.menu .text-57 {
  width: 6.11vw; /* 22 =>6.11vw */
  height: 16px;
  line-height: 10px;
}

.menu .price {
  letter-spacing: 0;
  line-height: 18px;
  min-height: 26px;
  min-width: 9.17vw; /* was 33 =>9.17vw */
  white-space: nowrap;
}

/* Possibly a small “component” row */
.menu .component-9-16 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 1px;
  margin-top: 11px;
  min-width: 21.94vw; /* 79 =>21.94vw */
}

/* The dark blue overlay background. Instead of fixed 812 x 360, make fluid */
.menu .rectangle-175075 {
  position: fixed;
  top: -50px; /* was 0 => 0 - 50= -50px */
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--blue-whale);
  opacity: 0.8;
  z-index: 100;
  display:none;
}

/* A big white rectangle. Instead of 762px high, we can make it auto if content changes */
.menu .rectangle-175074 {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 85vh;
  background-color: var(--white);
  border-radius: 30px 30px 0 0;
  z-index: 110;
  bottom: -85vh;
  transition: all 0.7s linear;
  overflow:none;
  overflow-y:auto;
}

.menu .close-button {
  position: absolute;
  top: 20px; /* was 12 =>12-50= -38px */
  right: 32px; /* unchanged right */
}

/* Lines at specific top positions - might need to adjust for smaller screens if overlapped */
.menu .line-603,
.menu .line-604,
.menu .line-663,
.menu .line-605,
.menu .line-606 {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.menu .line-603 {
  top: 211px; /* was 261 =>261-50=211px */
}
.menu .line-604 {
  top: 338px; /* was 388 =>338 */
}
.menu .line-663 {
  top: 404px; /* was 454 =>404 */
}
.menu .line-605 {
  top: 471px; /* was 521 =>471 */
}
.menu .line-606 {
  top: 538px; /* was 588 =>538 */
}

/* Additional text blocks */
.menu .text-59 {
  position: absolute;
  top: 363px; /* was 413 =>363 */
  left: 4.44vw; /* was 16 =>4.44vw */
  line-height: 18px;
}

.menu .luxury {
  position: absolute;
  top: 430px; /* was 480 =>430 */
  left: 4.44vw; 
  letter-spacing: 0;
  line-height: 18px;
  white-space: nowrap;
}

.menu .text-60 {
  position: absolute;
  top: 496px; /* was 546 =>496 */
  left: 4.44vw; 
  line-height: 18px;
}

.menu .text-61 {
  position: absolute;
  top: 296px; /* was 346 =>296 */
  left: 4.44vw; 
  line-height: 18px;
}

/* Arrows at specific positions for menu items? */
.menu .arrow-menu {
  position: absolute;
  top: 298px; /* was 348 =>298 */
  left: 93.89vw; /* 338 =>93.89vw */
  width: 1.94vw; /* 7 =>1.94vw */
  height: 13px;
}

.menu .path-63207 {
  position: absolute;
  top: 365px; /* was 415 =>365 */
  left: 93.89vw; 
  width: 1.94vw; 
  height: 13px;
  object-fit: cover;
}
.menu .path-63208 {
  position: absolute;
  top: 432px; /* was 482 =>432 */
  left: 93.89vw; 
  width: 1.94vw; 
  height: 13px;
  object-fit: cover;
}
.menu .path-63208-1 {
  position: absolute;
  top: 498px; /* was 548 =>498 */
  left: 93.89vw; 
  width: 1.94vw; 
  height: 13px;
  object-fit: cover;
}

/* A container row with text and arrow? */
.menu .group-182854 {
  position: absolute;
  top: 560px; /* was 610 =>560 */
  left: 4.44vw; /*16 =>4.44 */
  display: flex;
  justify-content: space-between;
  width: 91.11vw; 
  height: 24px;
}

.menu .text-62 {
  margin-top: 3px;
  margin-bottom: -5px;
  width: 51.11vw; /* was 184 =>184/360=51.11vw */
  line-height: 18px;
}

.menu .path-63208-2 {
  margin-top: 5px;
  margin-bottom: 6.3px;
  margin-right: -1.1px;
  object-fit: cover;
  width: 2.06vw; /* was 7.41 =>7.41/360=2.06vw */
}

/* Some rectangles with 98px height - might want to keep or adjust */
.menu .rectangle-175088 {
  position: absolute;
  top: 155px; /* was 205 =>155 */
  left: 4.44vw; /*16 =>4.44vw */
  width: 43.89vw; /*158 =>43.89vw */
  height: 98px;
  background-color: var(--concrete);
  border: 1px solid;
  border-radius: 20px;
}

.menu .text-63 {
  position: absolute;
  top: 224px; /* was 274 =>224 */
  left: 15.00vw; /*54 =>15vw */
  line-height: 14px;
}

/* Some icon at top=216 =>166, left=70 =>19.44vw */
.menu .metakinisi {
  position: absolute;
  top: 166px; /* was 216 =>166 */
  left: 19.44vw; /*70 =>19.44vw */
  width: 13.89vw; /*50 =>13.89vw */
  height: 50px;
  object-fit: cover;
}

/* Another rectangle at left=186 =>51.67vw => width=158=>43.89vw, top=95 =>45 */
.menu .rectangle-175088-1 {
  position: absolute;
  top: 45px; /* was 95 =>45 */
  left: 51.67vw; /*186 =>51.67vw */
  width: 43.89vw; /*158 =>43.89vw */
  height: 98px;
  background-color: var(--concrete);
  border: 1px solid;
  border-radius: 20px;
}

.menu .text-64 {
  position: absolute;
  top: 114px; /* was164 =>114 */
  left: 62.78vw; /*226 =>62.78vw */
  line-height: 14px;
}

.menu .hotel {
  position: absolute;
  top: 56px; /* was106 =>56 */
  left: 66.67vw; /*240 =>66.67vw */
  width: 13.89vw; /*50 =>13.89vw */
  height: 50px;
  object-fit: cover;
}

.menu .rectangle-175088-2 {
  position: absolute;
  top: 45px; /* was 95 =>45 */
  left: 4.44vw; 
  width: 43.89vw; 
  height: 98px;
  background-color: var(--concrete);
  border: 1px solid;
  border-radius: 20px;
}

.menu .wifi {
  position: absolute;
  top: 114px; /* was164 =>114 */
  left: 11.94vw; /*43 =>11.94vw */
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.menu .wifi-1 {
  position: absolute;
  top: 57px; /* was107 =>57 */
  left: 19.44vw; /*70 =>19.44vw */
  width: 13.89vw; /*50 =>13.89vw */
  height: 50px;
  object-fit: cover;
}

/* A big rectangle at bottom? */
.menu .rectangle-175069 {
  position: absolute;
  top: 603px; /* was653 =>603 */
  left: 0;
  width: 100%;
  height: auto;
  background-color: var(--concrete);
}

/* Another pill shape at top=677 =>627 */
.menu .rectangle-175064 {
  position: absolute;
  top: 627px; /* was677 =>627 */
  left: 4.44vw; 
  width: 100%;
  max-width: 91.11vw;
  height: 52px;
  background-color: var(--husk);
  border-radius: 100px;
}

.menu .download {
  position: absolute;
  top: 636px; /* was686 =>636 */
  left: 61.94vw; /*223 =>61.94vw */
  width: 9.44vw; /*34 =>9.44vw */
  height: 34px;
  object-fit: cover;
}

.menu .app-1 {
  position: absolute;
  top: 646px; /*696 =>646 */
  left: 28.61vw; /*103 =>28.61vw */
  line-height: 14px;
}

/* Another pill with border at top=747 =>697 */
.menu .rectangle-175064-1 {
  position: absolute;
  top: 697px; /*747 =>697 */
  left: 44.72vw; /*161 =>44.72vw */
  width: 50.83vw; /*183 =>50.83vw */
  height: 48px;
  border: 1px solid var(--green-vogue);
  border-radius: 100px;
}

.menu .group-182662-1 {
  position: absolute;
  top: 712px; /* was762 =>712 */
  left: 52.22vw; /*188 =>52.22vw */
  display: flex;
  width: 17.50vw; /*63 =>17.50vw */
  height: 19px;
}

.menu .language {
  width: 17.50vw; 
  height: 21px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.menu .arrow {
  position: absolute;
  top: 709px; /* was759 =>709 */
  left: 84.17vw; /*303 =>84.17vw */
  width: 6.94vw; /*25 =>6.94vw */
  height: 25px;
}

.menu .icon-ionic-ios-arrow-down {
  position: absolute;
  top: 717px; /* was767 =>717 */
  left: 85.56vw; /*308 =>85.56vw */
  width: 3.89vw; /*14 =>3.89vw */
  height: 8px;
  object-fit: cover;
}

/* Social icons at bottom? */
.menu .fb {
  position: absolute;
  top: 701px; /* was751 =>701 */
  left: 4.72vw; /*17 =>4.72vw */
  width: 11.11vw; /*40 =>11.11vw */
  height: 40px;
  object-fit: cover;
}

.menu .insta {
  position: absolute;
  top: 701px; /*751 =>701 */
  left: 18.06vw; /*65 =>18.06vw */
  width: 11.11vw; 
  height: 40px;
  object-fit: cover;
}

.menu .linkedin {
  position: absolute;
  top: 701px; /*751 =>701 */
  left: 31.11vw; /*112 =>31.11vw */
  width: 11.11vw;
  height: 40px;
  object-fit: cover;
}

/* Another rectangle at left=186=>51.67vw => width=158=>43.89vw, top=205=>155 */
.menu .rectangle-175088-3 {
  position: absolute;
  top: 155px; /* was205 =>155 */
  left: 51.67vw; 
  width: 43.89vw; 
  height: 98px;
  background-color: var(--concrete);
  border: 1px solid;
  border-radius: 20px;
}

.menu .text-65 {
  position: absolute;
  top: 224px; /* was274 =>224 */
  left: 61.94vw; /*223 =>61.94vw */
  line-height: 14px;
}

.menu .contact {
  position: absolute;
  top: 166px; /* was216 =>166 */
  left: 66.67vw; /*240=>66.67vw */
  width: 13.89vw; /*50=>13.89vw */
  height: 50px;
  object-fit: cover;
}

.menu .app-2 {
  position: absolute;
  letter-spacing: 0;
  white-space: nowrap;
}

.menu .arrow-1 {
  position: absolute;
  object-fit: cover;
}

/* Another rectangle style */
.menu .rectangle-175088-4 {
  position: absolute;
  background-color: var(--concrete);
  border: 1px solid;
  border-radius: 20px;
  width: 43.89vw; /* was158 =>43.89vw */
  height: 98px;
}

/* Some additional text with letter-spacing=0 */
.menu .text {
  letter-spacing: 0;
  white-space: nowrap;
}