/* Global reset for images (if not already applied) */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive Emergency Screen */
.emergency {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  /* Instead of a fixed height, allow content to define height */
  height: auto;
  overflow: hidden;
  width: 100%;
  max-width: 360px;  /* original design width */
  margin: 0 auto;
  box-sizing: border-box;
}

/* The main background group */
.emergency .overlap-group6 {
  position: relative;
  width: 100%;
  max-width: 360px;
  /* Instead of a fixed 815px, let it scale with content if possible */
  height: auto;
  margin-top: -1px;
}

/* Top group container */
.emergency .group {
  position: relative;
  width: 100%;
  max-width: 360px;
  /* Use min-height to ensure a minimum space (128px as before) */
  min-height: 128px;
}

/* The green search bar component */
.emergency .component-4-26 {
  align-items: center;
  background-color: var(--green-vogue);
  border-radius: 10px;
  display: flex;
  height: 48px;
  position: absolute;
  top: 12px;
  left: 16px;
  /* Use fluid width with a minimum value */
  width: 100%;
  max-width: 328px;
  padding: 0 10px;
}

/* A small overlay element */
.emergency .overlap-group-1 {
  position: relative;
  width: 16px;
  height: 12px;
  margin-left: 4.86px;
}

/* The “athens-1” element (a line, perhaps) */
.emergency .athens-1 {
  position: absolute;
  top: 11px;
  left: 4px;
  width: 9px;
  height: 1px;
}

/* The “we-serve-1” icon/image */
.emergency .we-serve-1 {
  width: 26px;
  height: 3px;
  margin: 2px 0 0 0;
  object-fit: cover;
}

/* A vertical flex column */
.emergency .flex-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 25px;
  width: 51px;
  margin-bottom: 1.74px;
}

/* A flex group with a gap */
.emergency .group-182717 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  min-width: 43px;
  padding: 0;
}

/* Star icon */
.emergency .icon-feather-star {
  width: 7px;
  height: 7px;
  margin-top: 0;
  object-fit: cover;
}

/* A pill‐shaped group element with background */
.emergency .group-182713 {
  display: flex;
  align-items: flex-end;
  background-color: var(--husk);
  border-radius: 100px;
  height: 34px;
  margin-left: 34px;
  min-width: 154px;
  padding: 3.7px 15px;
}

/* A fixed‑size group (for example, a container for text or icons) */
.emergency .group-182662 {
  display: flex;
  width: 123px;
  height: 26px;
}

/* Another flex group that expands */
.emergency .group-182714 {
  display: flex;
  flex: 1;
  min-width: 123.3px;
  align-items: flex-start;
}

/* An inner container with fixed dimensions */
.emergency .overlap-group1 {
  position: relative;
  width: 123px;
  height: 26px;
  margin-top: 0;
}

/* A container for a small icon or path */
.emergency .path-container {
  position: relative;
  width: 15px;
  height: 15px;
  margin-top: -0.75px;
}

/* “App” text positioned absolutely */
.emergency .app {
  position: absolute;
  top: 7px;
  left: 0;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}

/* A close icon – its margins may be adjusted in other CSS */
.emergency .close-icon {
  margin-left: 13px;
  margin-top: 0.73px;
}

/* The search icon (positioned absolutely) */
.emergency .search-icon {
  position: absolute;
  top: 88px;
  left: 281px;
  width: 24px;
  height: 24px;
  object-fit: cover;
}

/* Another overlapping container (reuse the same dimensions as before) */
.emergency .overlap-group {
  position: relative;
  width: 44px;
  height: 32px;
  margin-left: 0.15px;
}

/* Reusing “athens” but now without positioning (if needed, add positioning as required) */
.emergency .athens {
  width: 24px;
  height: 4px;
  /* You can add positioning if needed */
  /* For example: position: relative; or absolute; as required */
}

/* “arch” – similar to athens */
.emergency .arch {
  width: 44px;
  height: 32px;
}

/* “we-serve” image/icon */
.emergency .we-serve {
  width: 71px;
  height: 9px;
  margin-top: 4px;
  object-fit: cover;
}

/* A small tagline image/icon */
.emergency .tagline_000000239778 {
  width: 50px;
  height: 3px;
  margin-top: 3px;
  margin-left: 0.1px;
  object-fit: cover;
}

/* A menu icon with vertical flex layout */
.emergency .menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  margin-top: 2.37px;
  margin-left: 76px;
  min-height: 14px;
  width: 18px;
}

/* A simple line element */
.emergency .line-59 {
  width: 18px;
  height: 2px;
  object-fit: cover;
}

/* A component that spans the top 128px */
.emergency .component-10-13 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 128px;
  min-width: 100%;
  max-width: 360px;
  align-items: flex-start;
}

/* A rounded container element */
.emergency .overlap-group1-1 {
  position: absolute;
  top: 70px;
  left: 16px;
  width: 100%;
  max-width: 328px;
  height: 45px;
  border-radius: 100px;
}

/* Some text styling – ensure the font-size/line-height are set as needed */
.emergency .text-286 {
  position: absolute;
  top: 16px;
  left: 20px;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}

/* “lux” element – note the margin-top is increased here */
.emergency .lux {
  margin-left: 2px;
  margin-top: 41px;
  min-width: 258px;
  min-height: 56px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
  line-height: 20px;
}

/* A large overlapping container (such as an image slider) */
.emergency .overlap-group5 {
  position: relative;
  width: 100%;
  max-width: 329px;
  height: auto;
  margin-left: 0.39px;
  margin-top: 12px;
}

/* An overlapping group that shows a background image with a gap */
.emergency .overlap-group2 {
  position: absolute;
  top: 0;
  left: 1px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 100px; /* Consider reducing gap if needed on small screens */
  width: 100%;
  max-width: 328px;
  height: 184px;
  padding: 14px;
  background-image: url(../img/image-slider-01jpg-2@1x.png);
  background-position: 50% 50%;
  background-size: cover;
}

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

/* “breakfastquartet” text/icon */
.emergency .breakfastquartet {
  letter-spacing: 0;
  line-height: 26px;
  min-height: 58px;
  white-space: nowrap;
}

/* A group that is 144px wide and 35px high */
.emergency .group-182735 {
  display: flex;
  width: 144px;
  height: 35px;
}

/* A pill group with background */
.emergency .group-182740 {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 144px;
  padding: 6px 19px;
  background-color: var(--husk);
  border-radius: 100px;
}

/* Some small text styling */
.emergency .text-284 {
  letter-spacing: 0;
  line-height: 12px;
  min-height: 18px;
  min-width: 104px;
  white-space: nowrap;
}

/* Another group element with a background color */
.emergency .group-182739 {
  display: flex;
  align-items: flex-end;
  background-color: var(--husk);
  border-radius: 27px;
  height: 54px;
  min-width: 54px;
  padding: 8px 10px;
}

/* A vertical flex group */
.emergency .group-182738 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  width: 33px;
  min-height: 37px;
}

/* A small group with fixed dimensions */
.emergency .group-182736 {
  display: flex;
  width: 22px;
  height: 14px;
  margin-right: 3px;
}

/* A small text block */
.emergency .text-285 {
  width: 22px;
  height: 16px;
  letter-spacing: 0;
  line-height: 10px;
  white-space: nowrap;
}

/* Price text styling */
.emergency .price {
  letter-spacing: 0;
  line-height: 18px;
  min-height: 26px;
  min-width: 33px;
  white-space: nowrap;
}

/* A component with a gap */
.emergency .component-9-25 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 1px;
  margin-top: 11px;
  min-width: 79px;
}

/* The dark blue overlay background – use fluid width */
.emergency .rectangle-175075 {
  position: fixed;
  
  left: 0;
  width: 100vw;
  
  
  background-color: var(--blue-whale);
  opacity: 0.8;
  height:100vh;
  bottom:0;
  z-index: 100;
  display:none;
}

/* A white container with rounded top corners */
.emergency .rectangle-175074 {
  position: fixed;
  
  left: 0;
  width: 100vw;
  
  height: 50vh;
  background-color: var(--white);
  border-radius: 30px 30px 0 0;
  bottom:-50vh;
  overflow-x:hidden;
  overflow-y: auto;
  z-index:110;
  transition: all 0.7s linear;
  /* Original fixed height was 363px; adjust as needed */
}

/* The close button – positioned absolutely */
.emergency .close-button {
  position: absolute;
  top: 21px;
  right:32px;
  /* Dimensions can be added if needed */
}

/* A button-like component with border */
.emergency .component-29-3 {
  position: absolute;
  top: 320px;
  left: calc(50% - 117px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  height: 51px;
  min-width: 234px;
  padding: 15px 83px;
  border: 1px solid var(--green-vogue);
  border-radius: 100px;
}

/* A small group */
.emergency .group-183001 {
  display: flex;
  width: 66px;
  height: 19px;
}

/* Some text styling */
.emergency .text-287 {
  width: 66px;
  height: 21px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

/* “sos” text styling */
.emergency .sos {
  position: absolute;
  top: 107px;
 
  width: 100%;
  
  text-align: center;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

/* Another text block */
.emergency .text-288 {
  position: absolute;
  top: 147px;
  padding-right:32px;
  padding-left:32px;
  width: 100vw;
 
  text-align: center;
  letter-spacing: 0;
  line-height: 20px;
  
  font-size:1.2rem;
}

/* A rounded button (green background) */
.emergency .rectangle-175131 {
  position: absolute;
  top: 242px;
  left: calc(50% - 117px);
  width: 234px;
  height: 51px;
  background-color: var(--green-vogue);
  border-radius: 100px;
}

/* Another small group */
.emergency .group-183001-1 {
  position: absolute;
  top: 255px;
  left: 132px;
  display: flex;
  width: 142px;
  height: 19px;
}

/* Text inside that group */
.emergency .text-289 {
  flex: 1;
  width: 142px;
  letter-spacing: 0;
  line-height: 14px;
  margin-top: 2.5px;
  margin-right: -2px;
  margin-bottom: -4.5px;
  white-space: nowrap;
}

/* A telephone icon */
.emergency .tel_icon {
  position: absolute;
  top: 251px;
  left: 95px;
  width: 34px;
  height: 34px;
  object-fit: cover;
}

/* An emergency icon */
.emergency .emergency_icon {
  position: absolute;
  top: 25px;
  left: calc(50% - 37px);
  width: 74px;
  height: 74px;
  object-fit: cover;
}

/* Component-9-25 and following sections remain similar.
   (You can convert fixed widths into 100% with max-width constraints as done above.)
*/

/* For the horizontal background overlay and container groups, use fluid widths */
.emergency .rectangle-175074,
.emergency .rectangle-175075 {
  /* Already handled above */
}

/* Continue converting fixed widths in subsequent components to fluid values.
   For example, if an element was defined with width: 360px, replace it with:
     width: 100%; max-width: 360px;
   Similarly, adjust heights if needed.
*/

/* For the remaining elements, here are sample conversions: */

.emergency .component-29-3,
.emergency .group-183001,
.emergency .text-287,
.emergency .sos,
.emergency .text-288,
.emergency .rectangle-175131,
.emergency .group-183001-1,
.emergency .text-289,
.emergency .tel_icon,
.emergency .emergency_icon {
  /* Retain their existing properties if they represent fixed-size icons or buttons.
    If desired, you can wrap these in a container that is fluid.
  */
}

/* If you have additional groups (like group-182717, group-182713, etc.) that need to scale,
   you can wrap them in a container with:
     width: 100%;
     max-width: (original width);
   and use relative or percentage-based margins/paddings.
*/

/* Finally, for the horizontal scroll container at the end: */
.emergency .scroll-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 100%;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
}