.image-12-icon,
.image-20-icon {
  position: absolute;
  margin: 0 !important;
  object-fit: contain;
}
.image-12-icon {
  width: 17.1px;
  height: 15.1px;
  top: 386.2px;
  left: 12.4px;
}
.image-20-icon {
  width: 12.8px;
  height: 12.6px;
  top: 372px;
  right: 16.7px;
}
.header-text-child {
  width: 390px;
  position: relative;
  max-height: 100%;
  display: none;
}
.header-text,
.howdy {
  display: flex;
  justify-content: center;
}
.howdy {
  margin: 0;
  height: 52px;
  flex: 1;
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  align-items: center;
  z-index: 1;
}
.header-text {
  align-self: stretch;
  background: linear-gradient(180deg, #28caca, rgba(126, 120, 166, 0));
  flex-direction: row;
  align-items: flex-end;
  padding: 39px var(--padding-36xl) var(--padding-7xl) 59px;
  text-align: center;
  font-size: 25px;
  color: var(--color-white);
  font-family: var(--font-lato);
}
.weather-warnings-child {
  height: 43px;
  width: 388px;
  position: relative;
  background-color: var(--color-goldenrod);
  border: 2px solid var(--color-red-100);
  box-sizing: border-box;
  display: none;
}
.weather-warnings1 {
  height: 28px;
  flex: 1;
  position: relative;
  font-size: var(--font-size-xl);
  display: flex;
  font-family: var(--font-lato);
  color: var(--color-black);
  text-align: center;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.weather-warnings {
  cursor: pointer;
  border: 2px solid var(--color-red-100);
  padding: var(--padding-3xs) var(--padding-24xl) var(--padding-8xs)
    var(--padding-36xl);
  background-color: var(--color-goldenrod);
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  z-index: 1;
}
.image-7-icon,
.image-8-icon {
  height: 17px;
  width: 15px;
  position: relative;
  object-fit: cover;
}
.image-7-icon {
  height: 10px;
  width: 8px;
}
.image-8-parent {
  width: 87px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.image-5-icon {
  height: 10px;
  width: 8px;
  position: relative;
  object-fit: cover;
}
.logo-frame-child,
.logo-frame-item {
  position: absolute;
  top: 3px;
  left: 2px;
  width: 11px;
  height: 11px;
}
.logo-frame-item {
  top: 0.4px;
  left: 0.4px;
  width: 14.6px;
  height: 15.6px;
  object-fit: contain;
  z-index: 1;
}
.logo-frame {
  height: 16px;
  width: 15px;
  position: relative;
}
.image-5-parent {
  width: 130px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.frame-group,
.frame-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-group {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-12xs);
}
.image-6-icon {
  width: 15px;
  height: 17px;
  position: relative;
  object-fit: cover;
}
.image-6-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base) var(--padding-xs) 0 0;
}
.image-3-icon {
  width: 8px;
  height: 10px;
  position: relative;
  object-fit: cover;
}
.home-img-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-6xs) 0 0;
}
.image-4-icon {
  height: 10px;
  width: 8px;
  position: relative;
  object-fit: cover;
}
.frame-container {
  width: 319px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}
.frame-parent,
.home-page-inner {
  display: flex;
  justify-content: flex-start;
}
.frame-parent {
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.home-page-inner {
  align-self: stretch;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 var(--padding-4xl) 0 var(--padding-16xl);
}
.image-24-icon {
  height: 12.6px;
  width: 12.8px;
  position: absolute;
  margin: 0 !important;
  right: 13.2px;
  bottom: -0.6px;
  object-fit: contain;
}
.city-info-frame,
.frame-child {
  position: absolute;
  top: -0.3px;
  left: -0.5px;
  width: 15.5px;
  height: 15.5px;
  object-fit: contain;
}
.city-info-frame {
  top: 1.1px;
  left: 1.5px;
  width: 11.4px;
  height: 12px;
  z-index: 1;
}
.star-parent {
  height: 16px;
  width: 16px;
  position: absolute;
  margin: 0 !important;
  right: -1px;
  bottom: 134px;
}
.chat-bot-icon {
  position: absolute;
  top: 2.6px;
  left: 1.6px;
  width: 11px;
  height: 11px;
}
.traffic-warning-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 14.6px;
  height: 15.6px;
  object-fit: contain;
  z-index: 1;
}
.logo-frame1 {
  height: 16px;
  width: 15px;
  position: absolute;
  margin: 0 !important;
  top: -8px;
  right: 44px;
}
.image-9-icon {
  height: 8px;
  width: 10px;
  bottom: 59.9px;
  left: 2.1px;
  object-fit: contain;
}
.image-11-icon,
.image-9-icon,
.rectangle-shape {
  position: absolute;
  margin: 0 !important;
}
.rectangle-shape {
  height: 100%;
  width: calc(100% - 4px);
  top: 0;
  right: 4px;
  bottom: 0;
  left: 0;
  border-radius: var(--br-xl);
  background: linear-gradient(
    139.51deg,
    rgba(232, 232, 232, 0.24),
    rgba(142, 202, 205, 0.32)
  );
  backdrop-filter: blur(40px);
  border: 1px solid var(--color-gray-400);
  box-sizing: border-box;
  mix-blend-mode: normal;
  z-index: 2;
}
.image-11-icon {
  height: 8px;
  width: 10px;
  bottom: 40px;
  left: -3.8px;
  object-fit: contain;
}
.snow-angel-box {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--br-xl);
  background: linear-gradient(
    139.51deg,
    rgba(72, 152, 225, 0.24),
    rgba(50, 213, 224, 0.6)
  );
  backdrop-filter: blur(40px);
  border: 1px solid var(--color-gray-400);
  box-sizing: border-box;
  width: 137px;
  height: 133px;
  display: none;
  mix-blend-mode: normal;
}
.image-2-icon {
  position: absolute;
  top: 9px;
  left: 18px;
  width: 102px;
  height: 93px;
  object-fit: cover;
  cursor: pointer;
  z-index: 4;
}
.snow-angel-matching {
  position: absolute;
  top: 101px;
  left: 14px;
  text-decoration: underline;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 26px;
  z-index: 5;
}
.star-frame {
  height: 133px;
  flex: 1;
  position: relative;
  border-radius: var(--br-xl);
  background: linear-gradient(
    139.51deg,
    rgba(72, 152, 225, 0.24),
    rgba(50, 213, 224, 0.6)
  );
  backdrop-filter: blur(40px);
  border: 1px solid var(--color-gray-400);
  box-sizing: border-box;
  z-index: 3;
}
.weather-warnings-frame {
  width: 137px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
}
.weather-text1 {
  width: calc(100% - 4px);
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 4px;
  border-radius: var(--br-xl);
  background: linear-gradient(
    139.51deg,
    rgba(72, 152, 225, 0.24),
    rgba(50, 213, 224, 0.6)
  );
  backdrop-filter: blur(40px);
  border: 1px solid var(--color-gray-400);
  box-sizing: border-box;
  mix-blend-mode: normal;
  cursor: pointer;
  z-index: 3;
}
.star-group-frame-child,
.star-group-frame-item {
  position: absolute;
  top: 2px;
  left: 1.8px;
  width: 11.1px;
  height: 11.1px;
  object-fit: contain;
}
.star-group-frame-item {
  top: 0.4px;
  left: -0.2px;
  width: 15.6px;
  height: 14.6px;
  z-index: 1;
}
.star-group-frame {
  height: 15px;
  width: 16px;
  position: absolute;
  margin: 0 !important;
  bottom: 33px;
  left: 0;
}
.image-25-icon {
  height: 88px;
  width: 89px;
  position: relative;
  object-fit: cover;
  z-index: 4;
}
.star-frame1,
.traffic-frame {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.star-frame1 {
  align-items: center;
  padding: 0 0 0 var(--padding-3xl);
  position: relative;
}
.traffic-frame {
  align-items: flex-start;
  padding: 0;
}
.weather {
  height: 26px;
  flex: 1;
  position: relative;
  text-decoration: underline;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}
.city-logo,
.city-news-frame,
.rectangle-frame {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.city-news-frame {
  align-self: stretch;
  flex-direction: row;
  padding: 0 var(--padding-smi);
}
.city-logo,
.rectangle-frame {
  flex-direction: column;
}
.rectangle-frame {
  align-self: stretch;
  padding: var(--padding-2xs) var(--padding-4xs) var(--padding-8xs) 0;
  position: relative;
  gap: var(--gap-10xs);
}
.city-logo {
  flex: 1;
  gap: 15px;
  min-width: 92px;
}
.traffic-box {
  width: 137px;
  height: 133px;
  position: relative;
  border-radius: var(--br-xl);
  background: linear-gradient(
    139.51deg,
    rgba(72, 152, 225, 0.24),
    rgba(50, 213, 224, 0.6)
  );
  backdrop-filter: blur(40px);
  border: 1px solid var(--color-gray-400);
  box-sizing: border-box;
  display: none;
  mix-blend-mode: normal;
}
.image-1-icon {
  height: 83px;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
  cursor: pointer;
  z-index: 4;
}
.star-star-frame {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-10xs);
}
.traffic {
  flex: 1;
  position: relative;
  text-decoration: underline;
  cursor: pointer;
  z-index: 4;
}
.rectangle-frame1,
.traffic-box-parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs) 0 0;
}
.traffic-box-parent {
  border-radius: var(--br-xl);
  background: linear-gradient(
    139.51deg,
    rgba(72, 152, 225, 0.24),
    rgba(50, 213, 224, 0.6)
  );
  backdrop-filter: blur(40px);
  border: 1px solid var(--color-gray-400);
  flex-direction: column;
  align-items: center;
  padding: var(--padding-xs) var(--padding-2xs) var(--padding-4xs)
    var(--padding-sm);
  gap: 12px;
  z-index: 3;
}
.empty-star-icon,
.frame-item {
  position: absolute;
  top: -0.5px;
  left: 0;
  width: 15.5px;
  height: 15.5px;
  object-fit: contain;
}
.empty-star-icon {
  top: 1px;
  left: 1.9px;
  width: 11.4px;
  height: 12px;
  z-index: 1;
}
.image-23,
.star-group {
  position: absolute;
  top: 114px;
  left: 24px;
  width: 16px;
  height: 16px;
}
.image-23 {
  margin: 0;
  top: 1.9px;
  left: 94.6px;
  width: 22.7px;
  height: 22.5px;
}
.ellipse-shape-child {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--br-xl);
  background: linear-gradient(
    139.51deg,
    rgba(72, 152, 225, 0.24),
    rgba(50, 213, 224, 0.6)
  );
  backdrop-filter: blur(40px);
  border: 1px solid var(--color-gray-400);
  box-sizing: border-box;
  width: 137px;
  height: 133px;
  mix-blend-mode: normal;
  cursor: pointer;
  z-index: 3;
}
.ellipse-frame,
.image-19-icon {
  position: absolute;
  margin: 0 !important;
}
.ellipse-frame {
  height: 94px;
  width: 94px;
  top: 39px;
  right: -123px;
  border-radius: 50%;
  background: linear-gradient(131.31deg, rgba(0, 241, 255, 0.3), #399197);
  transform: rotate(180deg);
  transform-origin: 0 0;
  z-index: 1;
}
.image-19-icon {
  width: 12.8px;
  height: 12.6px;
  right: 30.7px;
  bottom: 5.9px;
  object-fit: contain;
}
.talk-to-us {
  margin: 0;
}
.ai-chat-bot {
  margin: 0;
  font-size: 14px;
}
.talk-to-us-container {
  position: relative;
}
.image-rectangle-frame {
  flex: 1;
  background: linear-gradient(
    180deg,
    rgba(164, 210, 243, 0.63),
    rgba(9, 149, 250, 0.63) 23.5%
  );
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: var(--padding-xl) var(--padding-12xs) var(--padding-2xl);
  position: relative;
  cursor: pointer;
  z-index: 4;
}
.ellipse-shape1 {
  position: absolute;
  top: 31px;
  left: 16px;
  width: 109px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.ellipse-shape {
  align-self: stretch;
  height: 133px;
  position: relative;
  font-size: var(--font-size-xl);
  color: var(--color-white);
}
.frame-div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 11px;
  min-width: 89px;
}
.city-info-frame1,
.weather-warnings-text {
  flex: 1;
  display: flex;
  flex-direction: row;
  position: relative;
}
.city-info-frame1 {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-16xl) var(--padding-2xl) var(--padding-24xl)
    var(--padding-12xl);
  gap: 13px;
}
.weather-warnings-text {
  align-items: center;
  justify-content: center;
}
.frame-with-warning,
.star-pair-a,
.star-pair-b {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.frame-with-warning {
  flex: 1;
  align-items: flex-end;
  padding: var(--padding-5xs) var(--padding-7xl) 0 0;
  position: relative;
}
.star-pair-a,
.star-pair-b {
  align-items: flex-start;
}
.star-pair-b {
  flex: 1;
  position: relative;
}
.star-pair-a {
  align-self: stretch;
  padding: 0 var(--padding-12xs) 0 var(--padding-8xl);
}
.image-13-icon {
  width: 17.1px;
  height: 15.1px;
  position: absolute;
  margin: 0 !important;
  bottom: 186px;
  left: 70.4px;
  object-fit: contain;
}
.star-group-frame3,
.star-group-frame4 {
  position: absolute;
  top: 1.9px;
  left: 2px;
  width: 11.1px;
  height: 11.1px;
  object-fit: contain;
}
.star-group-frame4 {
  top: 0.3px;
  left: 0;
  width: 15.6px;
  height: 14.6px;
  z-index: 1;
}
.star-group-frame2 {
  width: 16px;
  height: 15px;
  position: relative;
}
.star-group-frame1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
}
.star-group-frame6,
.star-group-frame7 {
  position: absolute;
  top: 1.6px;
  left: 2px;
  width: 11.1px;
  height: 11.1px;
  object-fit: contain;
}
.star-group-frame7 {
  top: 0;
  left: 0;
  width: 15.6px;
  height: 14.6px;
  z-index: 1;
}
.star-group-frame5 {
  height: 15px;
  width: 16px;
  position: relative;
}
.image-21-icon,
.image-22-icon {
  position: absolute;
  margin: 0 !important;
  object-fit: contain;
}
.image-21-icon {
  height: 12.6px;
  width: 12.8px;
  top: -13.6px;
  left: 156px;
}
.image-22-icon {
  height: 22.5px;
  width: 22.7px;
  top: -14.7px;
  right: 123.9px;
}
.image-containers {
  width: 346px;
  height: 29px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 var(--padding-xl) var(--padding-2xs) 0;
  box-sizing: border-box;
  position: relative;
}
.image-10-icon {
  width: 10px;
  height: 8px;
  position: absolute;
  margin: 0 !important;
  bottom: 114.1px;
  left: 70.8px;
  object-fit: contain;
}
.image-16-icon {
  height: 10.1px;
  width: 8.1px;
  position: relative;
  object-fit: contain;
}
.city-description-text,
.frame-inner {
  position: absolute;
  top: 2.4px;
  left: 1px;
  width: 11.1px;
  height: 11.1px;
  object-fit: contain;
}
.frame-inner {
  top: -0.1px;
  left: -0.5px;
  width: 14.6px;
  height: 15.6px;
  z-index: 1;
}
.city-description-text-parent {
  height: 16px;
  width: 15px;
  position: absolute;
  margin: 0 !important;
  bottom: -10px;
  left: 91.9px;
}
.image-18-icon {
  height: 17.2px;
  width: 15.2px;
  position: absolute;
  margin: 0 !important;
  right: 83.7px;
  bottom: 4.8px;
  object-fit: contain;
}
.frame-parent3,
.news-city-of {
  flex: 1;
  display: flex;
  position: relative;
}
.news-city-of {
  margin: 0;
  height: 37px;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  align-items: center;
  justify-content: center;
}
.frame-parent3 {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.image-15-icon {
  position: absolute;
  top: 48px;
  left: 50.2px;
  width: 8.1px;
  height: 10.1px;
  object-fit: contain;
}
.image-15-wrapper {
  height: 100px;
  width: 100px;
  position: absolute;
  margin: 0 !important;
  right: -19.9px;
  bottom: -30px;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}
.frame-parent2 {
  align-self: stretch;
  background: linear-gradient(
    180deg,
    #2c4469,
    rgba(85, 78, 107, 0.95) 5.5%,
    rgba(248, 26, 26, 0.76)
  );
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-6xs) var(--padding-3xs) var(--padding-5xs)
    var(--padding-4xs);
  position: relative;
  z-index: 2;
}
.image-17-icon {
  width: 15.2px;
  height: 17.2px;
  position: relative;
  object-fit: contain;
}
.image-17-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-6xs) 0 0;
}
.image-14-icon {
  height: 10.1px;
  width: 8.1px;
  position: relative;
  object-fit: contain;
}
.frame-parent4 {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
.frame-parent1,
.frame-wrapper1 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-wrapper1 {
  width: 178px;
  flex-direction: row;
  padding: 0 var(--padding-xs);
  box-sizing: border-box;
}
.frame-parent1 {
  flex: 1;
  flex-direction: column;
  gap: 17px;
  min-width: 220px;
}
.image-16-parent,
.news-container-frame {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.image-16-parent {
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.news-container-frame {
  width: 377px;
  align-items: flex-start;
  padding: 0 var(--padding-xs);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--font-size-xl);
  color: var(--color-white);
  font-family: var(--font-lato);
}
.city-text-icon,
.frame-news-icon {
  position: absolute;
  top: 2px;
  left: 1.9px;
  width: 11.1px;
  height: 11.1px;
  object-fit: contain;
}
.frame-news-icon {
  top: -0.5px;
  left: 0.4px;
  width: 14.6px;
  height: 15.6px;
  z-index: 1;
}
.city-text-parent {
  width: 15px;
  height: 16px;
  position: absolute;
  margin: 0 !important;
  right: 95px;
  bottom: -1px;
}
.weather-text {
  flex: 1;
  flex-direction: column;
  padding: 0 0 var(--padding-base);
  position: relative;
  gap: 34px;
}
.home-page,
.star-container,
.weather-text {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.star-container {
  align-self: stretch;
  flex-direction: row;
  padding: 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-darkslategray);
  font-family: var(--font-lato);
}
.home-page {
  width: 100%;
  position: relative;
  background-color: var(--color-gray-100);
  overflow: hidden;
  flex-direction: column;
  padding: 0 0 var(--padding-21xl);
  box-sizing: border-box;
}