@font-face {
  font-family: SF-Pro-Rounded;
  src: url(../fonts/SF-Pro-Rounded-Regular.ttf) format ("truetype");
  src: local("SF-Pro-Rounded"),
    url(../fonts/SF-Pro-Rounded-Regular.ttf) format("truetype");
}

@font-face {
  font-family: RNS Sanz;
  src: url(../fonts/RNSSanz-Normal.otf) format ("opentype");
  src: local("RNS Sanz"), url(../fonts/RNSSanz-Normal.otf);
}

body {
  --bs-body-font-family: RNS Sanz;
  color: #333345;
}

.header-mobile {
  height: 160px;
}

.bg {
  background-image: url(../images/cloud-bg-mobile.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.wn-icon {
  width: 50px;
  height: auto;
}

.mobile-heading {
  font-size: 1.0625rem;
  letter-spacing: 0.231px;
  line-height: 1.5rem;
  --bs-body-font-family: SF-Pro-Rounded;
}

.star-rating-mobile {
  width: 200px;
}

.hero {
  background: var(--hero-gradient);
  height: calc(100vh - 160px);
  overflow: clip;
  overflow-clip-margin: 0px;
}

.hero h2 {
  font-size: 2.0625rem;
  font-style: normal;
  line-height: 130%;
  letter-spacing: -0.5px;
}

@media screen and (max-width: 350px) {
  .hero h2 {
    font-size: 1.6rem;
    top: 5%;
  }
}

.hero-img {
  width:100%;
  height:100%;
  object-fit: contain;
  overflow: hidden;
}

.play-store {
  height: 40px;
  width: auto;
}

@media (max-width: 300px) {
  .play-store {
    height: 32px;
  }
}

.weather {
  width: 80%;
}

.stay {
  font-size: 2rem;
  line-height: 122%;
  width: 85%;
}

.prepared {
  font-size: 1.25rem;
  line-height: 135%;
}

.cloud-2 {
  background-image: url(../images/cloud2.png);
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 166.25%;
  padding-bottom: 100%;
}

.card1-container {
  top: 55%;
}

.card1 {
  width: 90%;
  aspect-ratio: 0.7761;
  background: linear-gradient(160.17deg, #d8dfe4 5.98%, #58606f 95.38%), #f5f7fa;
  box-shadow: 0px 1.99707px 5.99122px rgba(0, 0, 0, 0.08);
  border-radius: 14.98px;
  overflow: hidden;
}

.card1 h3 {
  font-size: 1rem;
  line-height: 118.75%;
  width: 85%;
}

@media only screen and (max-width: 350px) {
  .card1 h3 {
    font-size: 0.8rem;
  }
}

@media only screen and (min-width: 550px) {
  .card1 h3 {
    font-size: 1.5rem;
  }
}

.card1 .card1-img {
  border: inherit;
}

.card2 {
  width: 90%;
  aspect-ratio: 0.7761;
  background: linear-gradient(160.17deg, #D8DFE4 5.98%, #58606F 95.38%), #FEFDF9;
  border-radius: 7.35971px;
}

.card2 h3 {
  font-size: 1rem;
  line-height: 118.75%;
  width: 85%;
}

@media only screen and (max-width: 350px) {
  .card2 h3 {
    font-size: 0.8rem;
  }
}

@media only screen and (min-width: 550px) {
  .card2 h3 {
    font-size: 1.5rem;
  }
}

.card3 {
  width: 90%;
  aspect-ratio: 1.3806;
  background-image: linear-gradient(
      180deg,
      rgba(251, 251, 251, 0.1) 0%,
      #bcccd9 41.02%
    ),
    url(../images/card3-bg.png);
  box-shadow: 0px 0.981295px 2.94389px rgba(0, 0, 0, 0.08);
  background-size: contain;
  border-radius: 7.36px;
}

.card3 h3 {
  font-size: 1rem;
  line-height: 140%;
  width: 85%;
}

@media only screen and (max-width: 350px) {
  .card3 h3 {
    font-size: 0.8rem;
  }
}

@media only screen and (min-width: 550px) {
  .card3 h3 {
    font-size: 1.5rem;
  }
}

.card3 img {
  width: 88%;
}

.footer-mobile {
  background: linear-gradient(168.43deg, #ffffff -6.6%, #fbfbfb 97.89%);
}

.footer-mobile a {
  text-decoration: none;
  color: #333345;
  font-size: 0.75rem;
  line-height: 200%;
  display: block;
}

/* DESKTOP */

.header-desktop {
  background-color: #ffffff;
  height: 80px;
}

.header-container-desktop {
  width: 70%;
}

.wn-icon-desktop-container {
  line-height: 20px;
}

.wn-icon-desktop {
  width: 20px;
  height: auto;
}

.desktop-heading {
  font-size: 0.75rem;
  line-height: 100%;
}

.star-rating {
  width: 175px;
}

.play-store-desktop {
  height: 32px;
}

@media only screen and (min-width: 1200px) {
  .play-store-desktop {
    height: 40px;
  }
}

.hero-desktop {
  height: calc(100vh - 80px);
  overflow: clip;
  overflow-clip-margin: 0px;
}

.hero-icon-desktop {
  height: 50px;
  width: auto;
}

.icon-title {
  font-size: 1.2rem;
  line-height: 114%;
  font-weight: 900;
}

.hero-heading {
  font-size: 2rem;
  line-height: 120%;
  font-weight: 900;
}

.hero-text {
  font-size: 0.8rem;
  line-height: 140%;
  color: #5b5b5b;
  width: 95%;
}

@media only screen and (min-width: 1200px) {
  .hero-text {
    font-size: 1rem;
  }
}

.hero-play-store-button {
  height: 30px;
  width: auto;
}

.hero-img-desktop {
    width:100%;
    height:100%;
    object-fit: contain;
    overflow: hidden;
}

.never-desktop {
  font-size: 2rem;
  line-height: 120%;
  font-weight: 900;
}

.accurate-desktop {
  font-size: 0.8rem;
  line-height: 140%;
  color: #5b5b5b;
}

@media only screen and (min-width: 1200px) {
  .accurate-desktop {
    font-size: 1rem;
  }
}

.phone-desktop {
  max-width: 100%;
  height: auto;
}

.card1-desktop {
  aspect-ratio: 0.7761;
  width: 48%;
  height: auto;
  background: linear-gradient(160.17deg, #d8dfe4 5.98%, #58606f 95.38%);
  border-radius: 30px;
}

.card1-desktop h3 {
  font-size: 1.2rem;
  line-height: 125%;
}

@media only screen and (max-width: 1200px) {
  .card1-desktop h3 {
    font-size: 1rem;
  }
}

.card1-desktop p {
  font-size: 0.8rem;
  color: #5b5b5b;
}

.card1-desktop .card1-desktop-img {
  border: inherit;
  border-radius: 30px;
}

.card2-desktop {
  aspect-ratio: 0.7761;
  width: 48%;
  background: linear-gradient(160.17deg, #d8dfe4 5.98%, #58606f 95.38%);
  border-radius: 30px;
}

.card2-desktop h3 {
  font-size: 1.2rem;
  line-height: 125%;
  z-index: 100;
}

@media only screen and (max-width: 1200px) {
  .card2-desktop h3 {
    font-size: 1rem;
  }
}

.card3-desktop {
  aspect-ratio: 1.5795;
  width: 100%;
  height: auto;
  background-image: url(../images/card3-bg.png),
    linear-gradient(169.59deg, #d7dde3 7.76%, #5b6372 55.2%);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 30px;
}

.card3-desktop h3 {
  width: 37.5%;
  color: #000000;
  font-size: 1.2rem;
  line-height: 121%;
  z-index: 100;
}

@media only screen and (max-width: 1200px) {
  .card3-desktop h3 {
    font-size: 1rem;
  }
}

.footer-desktop {
  background-color: #ffffff;
  color: #1d1d1f;
}

.footer-desktop a {
  color: #1d1d1f;
  font-size: 0.75rem;
}

.support {
  color: #1d1d1f;
}

.support a {
  color: #4589EF;
}