@keyframes slideDownFadeIn {
  0% {
      top: -100px;
  }

  to {
      top: 0;
  }
}

@keyframes registerSlideIn {
  0% {
      opacity: 0;
      margin-right: -20%;
      position: relative;
      z-index: 11;
  }

  to {
      opacity: 1;
      margin-right: 0;
      position: relative;
      z-index: 11;
  }
}

@keyframes fadeInNavItems {
  0% {
      opacity: 0;
      margin-left: -20px;
  }

  to {
      opacity: 1;
      margin-left: 20px;
  }
}

@keyframes slideUpFadeForm {
  0% {
      opacity: 0;
      transform: translateY(20%);
  }

  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes slideUpFadeApp {
  0% {
      opacity: 0;
      transform: translateY(50px);
  }

  to {
      opacity: 1;
      transform: translateY(-15%);
  }
}

@keyframes slideUpHeading {
  0% {
      opacity: 0;
      transform: translateY(50px);
  }

  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes growTabsHorizontal {
  0% {
      opacity: 0;
      transform: scaleX(0);
  }

  to {
      opacity: 1;
      transform: scaleX(1);
  }
}

@keyframes slideUpOptions {
  0% {
      opacity: 0;
      transform: translateY(30px);
  }

  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes slideUpFadeIn {
  0% {
      opacity: 0;
      transform: translateY(50px);
  }

  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes growFromCenter {
  0% {
      opacity: 0;
      transform: scale(.5);
  }

  to {
      opacity: 1;
      transform: scale(.9);
  }
}

@keyframes slideFromRight {
  0% {
      transform: translateX(100%);
      opacity: 0;
  }

  to {
      transform: translateX(0);
      opacity: 1;
  }
}

@keyframes slideFromLeft {
  0% {
      transform: translateX(-100%);
      opacity: 0;
  }

  to {
      transform: translateX(0);
      opacity: 1
  }
}

@keyframes fadeInFromLeft {
  0% {
      opacity: 0;
      transform: translateX(-50px)
  }

  to {
      opacity: 1;
      transform: translateX(0)
  }
}

@keyframes fadeInFromRight {
  0% {
      opacity: 0;
      transform: translateX(50px)
  }

  to {
      opacity: 1;
      transform: translateX(0)
  }
}

@keyframes fadeInRegister {
  0% {
      opacity: 0;
      transform: translateX(20px)
  }

  to {
      opacity: 1;
      transform: translateX(0)
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,section {
  overflow-x: hidden;
}

body {
  font-family: "Lato",sans-serif;
}

section {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.nav-section {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: #fff;
  animation: slideDownFadeIn .8s ease-out forwards;
  box-shadow: 0 1px 4px rgba(0,0,0,.06)
}

.navbar,body {
  width: 100%;
  position: relative;
}

.navbar {
  display: flex;
  padding: .8% 7%;
  justify-content: space-between;
  align-items: center;
}

.navbar * {
  transition: all .3s ease;
}

.navbar-logo {
  transform: translateY(5%);
}

.navbar-options,.navbar-options ul {
  display: flex;
  justify-content: flex-end;
}

.navbar-options {
  position: relative;
  isolation: isolate;
  min-width: auto;
}

.navbar-options ul {
  list-style: none;
  align-items: center;
  gap: 30px;
  margin-right: -10%;
  padding: 0;
}

.navbar-options ul li {
  opacity: 1;
  margin: 0;
}

.navbar a {
  text-decoration: none;
  font-weight: 500;
  color: #222;
  font-size: 1rem;
}

.navbar button:not(.register-btn) {
  font-family: "Lato",Arial,sans-serif;
  color: #e21e5b;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 77px;
  border: .4px solid #e21e5b;
  font-size: 1rem;
  cursor: pointer;
  transition: .3s ease;
}

.navbar button:not(.register-btn):hover {
  background-color: #fff4f7;
  color: #e21e5b
}

.register-btn {
  font-family: "Lato",Arial,sans-serif;
  color: #fff;
  background-color: #e21e5b;
  padding: 10px 20px;
  border-radius: 77px;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all .3s ease-out
}

.register-btn.show {
  opacity: 1;
  visibility: visible;
  max-width: 300px;
  margin-left: -5%;
  overflow: hidden
}

.register-btn:hover {
  background-color: #de0043
}

.hero-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  z-index: 1;
  margin-bottom: -9%;
}

@media screen and (max-width:768px) {
  .hero-section {
      background-image: url(asset/images/hero-section/mobile.webp)!important;
      height: 50vh;
      position: relative;
      overflow: visible;
      margin-bottom: -10%;
      background-size: cover;
      background-position: center
  }
}

.home {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 80px;
  gap: 20px;
  width: 100%
}

.box {
  flex: 1;
  padding: 20px;
}

.app-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden
}

.app-download {
  margin: 45%0 0 10%;
  animation: slideUpFadeApp .8s ease-out forwards;
  will-change: transform,opacity;
  position: relative;
  transform-origin: top center;
  contain: layout paint;
}

.app-download div {
  display: flex;
  gap: 10px;
  margin-top: 20px
}

.download {
  transform: translateY(-10%);
  scale: 0.85;
}

.app-store {
  margin-left: 1%;
}

.form-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px;
  overflow: hidden
}

.register-form {
  width: 55%;
  max-width: 20.625rem;
  background-color: #fff;
  margin: -3% 0 0 26%;
  border-radius: 5%/4%;
  padding: 0.75rem;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  animation: slideUpFadeForm .8s ease-out;
  will-change: transform,opacity;
  position: relative;
  transform-origin: top center
}

.register-form p {
  font-size: 14px;
  color: #555;
  margin-bottom: 17px;
}

.form-group {
  margin-bottom: 3%;
}

.form-group label {
  display: block;
  font-size: .6rem;
  font-weight: 700;
  margin-bottom: 2%;
  color: #444;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8.925px;
  font-size: 0.7rem;
}

.form-group input:focus,.form-group select:focus {
  outline: 0;
  border: 1px solid #e21e5b!important;
  transition: all .2s ease
}

.form-group input:focus-visible,.form-group select:focus-visible {
  outline: 0;
}

.country-code-wrapper select,.form-group select,.form-group select option {
  width: 100%;
  font-family: "Lato",sans-serif;
  font-size: 0.875rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none
}

.form-group select,.form-group select option {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 8.925px;
  text-indent: 5px;
}

.form-group input, .form-group select {
  padding: 0.5rem; /* Reduced from 10px (0.625rem) */
  font-size: 0.65rem; /* Reduced from 0.7rem */
  border-radius: 0.5rem; /* Consistent with design */
}

.phone-input-container {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  width: 100%;
}

.country-code-wrapper {
  position: relative;
  width: 90px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: border .2s ease-in-out;
}

.country-code-wrapper:focus-within,.registration-modal .country-code-wrapper:focus-within {
  border: 1px solid #e21e5b!important;
  box-shadow: none!important;
}

.country-code-wrapper select:focus,.country-code-wrapper select:focus-visible,.registration-modal .country-code-wrapper select:focus,.registration-modal .country-code-wrapper select:focus-visible {
  outline: 0!important;
  border: 0!important;
}

.phone-input {
  flex: 1;
  height: 2.25rem; /* Reduced from 40px (2.5rem) */
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: "Lato",sans-serif;
  font-size: 0.65rem;
  transition: border .2s ease-in-out;
}

.phone-input:focus {
  border: 1px solid #e21e5b!important;
  outline: 0!important;
  box-shadow: none!important;
}

.form-box button {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.9rem;
  font-family: "Lato";
  color: #fff;
  background-color: #e21e5b;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color .3s ease;
}

.registration-error {
  color: red;
  margin-bottom: 10px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  display: none;
}

.input-error {
  border-color: #e21e5b!important;
}

.featured {
  background: 0 0;
  padding: 50px 7%;
  position: relative;
  z-index: 2
}

.why-choose {
  background-color: #fff;
  text-align: center;
  padding: 40px 150px;
  margin-bottom: 60px;
  border-radius: 32px;
  box-shadow: -10px 21px 80px rgba(0,0,0,.06);
  z-index: 3;
  position: relative;
  transition: all .7s ease-out;
  opacity: 0;
  transform: scale(.8);
}

.why-choose.show {
  opacity: 1;
  transform: scale(1);
}

.why-choose h2 {
  font-size: 24px;
  color: #555454;
  letter-spacing: -1.12px;
  margin-bottom: 40px
}

.stats-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 15px;
}

.stat-item img {
  height: 80px
}

.stat-item h3 {
  font-size: 18px;
  color: #222;
  font-weight: 600
}

.featured-section {
  text-align: center;
  padding: 20px 0;
  margin-bottom: 2%
}

.featured-section h2 {
  font-size: 22px;
  color: #222;
  letter-spacing: -.44px;
  margin-bottom: 6%;
  text-align: center;
  line-height: 1.4;
  opacity: 1;
  visibility: visible;
}

.featured-section h2 span {
  display: inline-block;
  opacity: 1;
  transform: none;
  margin-right: .3%;
  visibility: visible;
  transition: all .7s ease-out;
}

.featured-section h2 span.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.featured-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px
}

.featured-logos div {
  height: 60px;
  padding: 14px 20px;
  transform: translateY(30px);
  transition: none
}

.featured-logos.show div {
  opacity: 0;
  transform: translateY(30px)
}

.featured-logos div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.features {
  background: linear-gradient(180deg,#fffcfc 50.01%,#fff 99.99%);
  padding: 4rem 2rem 2rem 10rem
}

.feature,.featured-logos div {
  display: flex;
  align-items: center;
  opacity: 0
}

.feature {
  justify-content: space-between;
  max-width: 90%;
  margin-bottom: 2rem;
  transform: translateY(50px);
  transition: opacity .6s ease-out,transform .6s ease-out;
  visibility: hidden
}

.feature.animate {
  animation: slideUpFadeIn .6s ease-out forwards;
  visibility: visible
}

.feature:nth-child(even) {
  flex-direction: row-reverse
}

.feature-content {
  max-width: 500px
}

.feature-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 8%;
  margin-left: -5%
}

.feature-title,.feature-title span {
  font-family: Lato;
  font-size: 28px;
  font-weight: 700;
  line-height: 143%;
  letter-spacing: -.56px
}

.feature-title {
  color: #555454;
  margin-bottom: 2%
}

.feature-title span {
  color: #e21e5b;
  display: inline
}

.feature-description {
  color: #555454;
  font-family: Lato;
  font-size: 20px;
  font-weight: 400;
  line-height: 33.338px;
  letter-spacing: -.4px
}

.phone-mockup {
  flex-shrink: 0;
  width: 33%;
  position: relative
}

.phone-frame {
  width: 100%;
  height: auto;
  display: block
}

.app-download-section {
  margin-bottom: 4%;
  position: relative;
  contain: paint
}

.app-download-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto
}

.google-app {
  transition: opacity .7s ease-out,transform .7s ease-out;
  opacity: 0;
  transform: scale(.8);
  position: relative;
  z-index: 2
}

.google-app.show {
  opacity: 1
}

.app-download-section h2 {
  margin: 4%0 2%;
  color: #222;
  text-align: center;
  font-family: "Lato",sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 143%;
  letter-spacing: -.48px
}

.download-btns {
  display: flex;
  justify-content: center
}

.download-btns img {
  padding: 10px
}

.testimonial-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 3%0;
  background: #fefefe
}

.section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 143%;
  letter-spacing: -1.12px;
  color: #555454;
  margin-bottom: 50px;
  padding: 0 20px
}

.highlight {
  color: #e21e5b
}

.testimonial-swiper {
  width: 100%;
  margin: 0 auto;
  position: relative
}

.swiper-wrapper {
  display: flex;
  align-items: stretch
}

.swiper-slide {
  height: auto;
  display: flex
}

.testimonial-card {
  width: 80%;
  display: flex;
  background: #fff;
  border-radius: 48px;
  overflow: hidden;
  position: relative;
  border: 9px solid #fff;
  box-shadow: 0 18px 40px rgba(173,13,66,.1);
  margin: 1%auto 5%;
  transform: scale(.9);
  transition: all .3s ease;
  will-change: transform
}

.google-app.show,.swiper-slide-active .testimonial-card {
  transform: scale(1)
}

.testimonial-content {
  flex: 1;
  padding: 40px;
  background: radial-gradient(124.09% 100.8%at 42.82% 18.71%,#fffafb 0,#ffedf0 100%);
  border-radius: 35px 0 0 35px;
  position: relative
}

.couple-name,.footer-column h3 {
  color: #e21e5b;
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 24px
}

.testimonial-text {
  margin-bottom: 20px
}

.testimonial-quote,.testimonial-text {
  color: #6f3c46;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: -.8px
}

.testimonial-image {
  flex: 1;
  overflow: hidden;
  border-radius: 0 35px 35px 0
}

.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 5px
}

.dot {
  width: 48px;
  border-radius: 2px;
  background-color: #ffe5ed;
  cursor: pointer;
  transition: background-color .3s ease
}

.dot.active {
  background-color: #e21e5b
}

.browse-section {
  font-family: "Lato",sans-serif;
  padding: 60px 4%;
  text-align: center;
  background-color: #fff
}

.browse-section h2 {
  font-size: 26px;
  font-weight: 500;
  color: #333;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(50px)
}

.browse-section h2.show {
  animation: slideUpHeading .7s ease-out forwards
}

.browse-tabs,.social-links a {
  display: flex;
  justify-content: center
}

.browse-tabs {
  gap: 20px;
  background: #f9f9f9;
  padding: 8px;
  border-radius: 35px;
  margin-bottom: 40px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  transform: scaleX(0);
  opacity: 0
}

.browse-tabs.show {
  animation: growTabsHorizontal .6s cubic-bezier(.34,.71,.88,1) forwards
}

.tab-item {
  font-family: "Lato",sans-serif;
  padding: 12px 24px;
  border-radius: 42px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: all .3s ease;
  border: 0;
  background: 0 0
}

.tab-item.active {
  background-color: #fff;
  color: #e21e5b;
  box-shadow: 0 7px 20.8px 0 rgba(238,46,85,.14)
}

.options-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 60px;
  overflow: hidden
}

.options-group {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 20px;
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s ease-out,transform .5s ease-out
}

.options-group.active {
  display: flex
}

.options-group.show {
  opacity: 1;
  transform: translateY(0)
}

.option-item {
  color: #666;
  font-size: 16px;
  text-decoration: none;
  padding: 0 8px
}

.footer-column ul li a:hover,.option-item:hover {
  color: #e21e5b
}

.divider {
  color: #ddd;
  font-size: 16px
}

.footer {
  background-color: #fff4f6;
  padding: 60px 7% 40px;
  font-family: "Lato",sans-serif
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 145px;
  margin-bottom: 40px
}

.footer-column h3 {
  color: #dd1252;
  font-size: 16px;
  font-weight: 700
}

.footer-column p {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 34px
}

.footer-column ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0
}

.footer-column ul li {
  margin: 0 0 16px;
  width: 100%
}

.footer-column ul li a {
  color: #52525b;
  font-weight: 400;
  line-height: 124%;
  text-decoration: none;
  font-size: 16px;
  transition: color .3s ease
}

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 8%
}

.social-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  transition: background-color .3s ease
}

.social-links img {
  width: 30px;
  height: 30px
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid #eee
}

.disclaimer {
  margin-bottom: 8px
}

.copyright,.disclaimer {
  color: #6a6a6e;
  font-size: 14px
}

.mobile-app-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #d81351;
  padding: 16px 18px;
  box-shadow: 0-2px 10px rgba(0,0,0,.1);
  z-index: 1000;
  box-sizing: border-box;
  border-top: 1px solid #eee
}

.mobile-app-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%
}

.banner-text {
  color: #fff;
  font-family: Lato;
  font-size: 14px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: -.14px;
  margin-left: 0
}

.mobile-app-banner .google-play-btn {
  height: 40px;
  margin-right: 0
}

.mobile-app-banner .google-play-btn img {
  height: 100%;
  width: auto
}



@media screen and (max-width:768px) {
  .navbar {
      padding: 8px 10px;
      height: 65px;
      display: flex;
      align-items: center
  }

  .navbar-logo img {
      max-width: 300px;
      display: block
  }

  .navbar-options ul {
      gap: 10px
  }

  .register-btn {
      opacity: 1;
      visibility: visible;
      max-width: 200px;
      transform: translateX(0);
      padding: 10px 20px;
      border: .4px solid #e21e5b;
      margin: 0 10px;
      transition: none
  }


  .hero-section {
      background-image: url(asset/images/hero-section/mobile.webp);
      height: 50vh;
      position: relative;
      overflow: visible;
      margin-bottom: -10%
  }

  .home {
      padding-top: 60px;
      height: 100%
  }

  .app-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      z-index: 2
  }

  .app-download {
      padding: 0 20px;
      text-align: left;
      transform: none;
      margin: 55%0 0
  }

  .app-download p {
      color: #fff;
      font-family: Lato;
      font-size: 26px;
      font-weight: 700;
      line-height: 143%;
      letter-spacing: -.48px;
      margin: 0;
      text-shadow: 2px 2px 4px rgba(0,0,0,.3)
  }

  .download .app-store,.download .google-play,.form-box,.stat-item h3 br {
      display: none
  }

  .featured {
      background: 0 0;
      padding: 0 20px;
      position: relative;
      z-index: 2;
      margin-top: -1%;
      overflow: hidden
  }

  .why-choose {
      padding: 25px 20px;
      margin-bottom: 40px;
      border-radius: 24px;
      width: 100%;
      box-sizing: border-box
  }

  .why-choose h2 {
      color: #555454;
      text-align: center;
      font-size: 17.558px;
      font-weight: 700;
      margin-bottom: 10px
  }

  .stat-item,.stats-container {
      display: flex;
      align-items: center;
      width: 100%
  }

  .stats-container {
      margin: 0 auto;
      flex-direction: column;
      justify-content: center;
      gap: 5%;
      padding: 0 10px;
      box-sizing: border-box
  }

  .stat-item {
      text-align: left;
      gap: 2%;
      max-width: 300px
  }

  .stat-item img {
      height: 70px;
      margin-top: 6%;
      flex-shrink: 0
  }

  .stat-item h3 {
      margin-left: 10px;
      color: #000;
      font-size: 14px;
      font-weight: 500;
      line-height: 147%
  }

  .stat-item:last-child {
      margin-bottom: -2%
  }

  .featured-section {
      padding: 20px 0
  }

  .featured-section h2 {
      color: #222;
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      line-height: 100%;
      letter-spacing: -1px
  }

  .featured-logos {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 0;
      padding: 0 1.25rem;
      margin-top: 2rem
  }

  .featured-logos div:nth-child(1) {
      grid-column: 1/-1;
      justify-self: center;
      width: auto
  }

  .featured-logos div:nth-child(2) {
      justify-self: center;
      width: 120%
  }

  .featured-logos div:nth-child(3),.featured-logos div:nth-child(4),.featured-logos div:nth-child(5) {
      justify-self: center;
      width: auto
  }

  .featured-logos div:nth-child(6),.featured-logos div:nth-child(7),.featured-logos div:nth-child(8) {
      grid-column: 1/-1;
      justify-self: center;
      width: auto;
      margin-top: -.5rem
  }

  .featured-logos div img {
      width: 100%;
      height: 100%;
      object-fit: contain
  }

  .mobile-app-banner {
      display: flex
  }

  body {
      padding-bottom: 64px
  }

  .features {
      padding: 1rem;
      gap: 60px
  }

  .feature,.feature:nth-child(even) {
      flex-direction: column;
      text-align: center;
      gap: 2rem;
      margin-left: 5%;
      transform: translateX(-50px)
  }

  .feature:nth-child(even) {
      transform: translateX(50px)
  }

  .feature-content {
      max-width: 100%;
      order: 1
  }

  .feature-icon {
      margin: 0 0 12% 34%
  }

  .phone-mockup {
      width: 100%;
      margin: -10% 9%0 0;
      order: 2
  }

  .phone-mockup img {
      width: 110%
  }

  .feature-title {
      padding: 0 5%;
      font-size: 125%
  }

  .feature-title span {
      font-size: 100%
  }

  .feature-description {
      font-size: 100%;
      padding: .5rem 1.5rem
  }

  .feature.animate-left {
      animation: fadeInFromLeft .6s ease-out forwards;
      visibility: visible
  }

  .feature.animate-right {
      animation: fadeInFromRight .6s ease-out forwards;
      visibility: visible
  }

  .app-download-wrapper {
      margin-bottom: 7%
  }

  .app-download-section h2 {
      font-size: 22px;
      margin: 6%0 3%
  }

  .download-btns img {
      max-width: 160px
  }

  .testimonial-section {
      margin-bottom: 5%
  }

  .section-title {
      font-size: 22px;
      padding: 5px 20px
  }

  .testimonial-carousel {
      margin-top: -5%
  }

  .testimonial-card {
      flex-direction: column;
      border-radius: 24px;
      border-width: 5px;
      margin-bottom: 12%;
      height: auto;
      min-height: 500px
  }

  .testimonial-content {
      font-family: "Lato",sans-serif;
      text-align: center;
      padding: 30px;
      border-radius: 0;
      order: 2
  }

  .testimonial-content h3 {
      font-size: 20px;
      padding-bottom: 0
  }

  .testimonial-quote,.testimonial-text {
      color: #6f3c46;
      margin-top: -5%;
      font-size: 15px
  }

  .testimonial-image {
      width: 100%;
      height: 300px!important;
      min-height: 300px!important;
      max-height: 300px!important;
      order: 1;
      border-radius: 16px 16px 0 0;
      overflow: hidden
  }

  .carousel-dots {
      margin-top: -3%
  }

  .browse-section {
      padding: 30px 4%
  }

  .browse-section h2 {
      font-size: 22px;
      margin-bottom: 25px
  }

  .browse-tabs {
      padding: 6px;
      gap: 8px;
      background: 0 0
  }

  .tab-item {
      padding: 8px 16px;
      font-size: 14px
  }

  .options-group {
      gap: 10px
  }

  .option-item {
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 20px;
      text-align: center
  }
}

@media screen and (max-width:480px) {
  .navbar {
      padding: 16px
  }

  .navbar-options ul li:nth-child(1),.navbar-options ul li:nth-child(2),.navbar-options ul li:nth-child(3) {
      display: none
  }

  .navbar-logo img {
      max-width: 120px
  }

  .register-btn {
      margin-left: 2px!important;
      opacity: 1!important;
      animation: none!important;
      transform: none!important;
      position: static!important
  }

  .hero-section {
      background-image: url(asset/images/hero-section/mobile.webp);
      height: 50vh;
      position: relative;
      overflow: visible;
      margin-bottom: -10%
  }

  .app-download-section h2 {
      font-size: 20px
  }

  .testimonial-image {
      width: 100%;
      height: 300px!important;
      min-height: 200px!important;
      max-height: 200px!important;
      order: 1;
      border-radius: 16px 16px 0 0;
      overflow: hidden
  }

  .mobile-logo-container img {
      height: 18px;
      margin: 0 20px
  }

  .mobile-logo-scroll::after,.mobile-logo-scroll::before {
      width: 30px
  }

  .banner-text {
      font-size: 14px
  }

  .mobile-app-banner .app-store-btn,.mobile-app-banner .google-play-btn {
      height: 36px;
      width: auto
  }

  .mobile-app-banner .app-store-btn img,.mobile-app-banner .google-play-btn img {
      height: 100%;
      width: auto
  }

  .browse-section {
      padding: 30px 4%
  }

  .browse-section h2 {
      font-size: 22px;
      margin-bottom: 25px
  }

  .browse-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
      background: 0 0;
      padding: 4px;
      max-width: 400px;
      margin: 0 auto 7%
  }

  .tab-item:nth-child(1),.tab-item:nth-child(2) {
      flex: 0 1 calc(30% - 2px);
      min-width: 120px;
      margin-bottom: 4px
  }

  .tab-item:nth-child(3),.tab-item:nth-child(4),.tab-item:nth-child(5) {
      flex: 0 1 calc(10% - 3px);
      min-width: 90px
  }

  .tab-item {
      padding: 10px 14px;
      font-size: 14px;
      white-space: nowrap;
      border-radius: 42px
  }

  .tab-item.active {
      color: #e21e5b;
      box-shadow: 0 7px 20.8px 0 rgba(238,46,85,.14)
  }

  .options-group {
      gap: 10px;
      padding: 0 10px
  }

  .option-item {
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 20px;
      text-align: center
  }
}

@media screen and (max-width:768px) {
  .footer {
      background-color: #fff3f6;
      padding: 40px 20px;
      font-family: "Lato",sans-serif
  }

  .footer-content {
      margin: 0 5%;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 32px
  }

  .footer-column:first-child {
      grid-column: 1/-1
  }

  .footer-column:nth-child(4) {
      grid-column: 1/-1
  }

  .footer h3 {
      color: #d81351;
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase
  }

  .footer p {
      color: #666;
      font-family: Lato;
      font-size: 14px;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: -.14px
  }

  .social-links {
      display: none
  }

  .footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0
  }

  .footer h3,.footer-column ul li {
      margin-bottom: 16px
  }

  .footer-column ul li a {
      font-size: 16px;
      line-height: 1.4
  }

  .footer-bottom {
      text-align: center;
      padding-top: 32px;
      margin-top: 32px;
      border-top: 1px solid #eee;
      grid-column: 1/-1
  }

  .disclaimer {
      margin: 0 7% 5%
  }

  .copyright,.disclaimer {
      color: #666;
      text-align: center;
      font-family: Lato;
      font-size: 12px;
      line-height: 26px
  }
}

@media screen and (max-width:480px) {
  .footer {
      padding: 24px 16px
  }

  .footer p,.footer-column ul li a {
      font-size: 14px
  }

  .copyright,.disclaimer {
      font-size: 12px
  }
}