* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: "Bakerie Smooth";
  src: url("./font/BakerieSmooth-Regular.ttf") format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Bakerie Smooth";
  src: url("./font/BakerieSmooth-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Bakerie Smooth";
  src: url("./font/BakerieSmooth-Black.ttf") format("truetype");
  font-weight: 900;
}

@font-face {
  font-family: "Aller";
  src: url("./font/Aller_Rg.ttf") format("truetype");
}

@font-face {
  font-family: "Billabong";
  src: url("./font/FontsFree-Net-Billabong.ttf") format("truetype");
}
@font-face {
  font-family: "Papyrus";
  src: url("./font/papyrus.ttf") format("truetype");
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  background-color: white;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.nav-logo-name {
  display: flex;
  align-items: center;
  justify-content: start;
  width: 9.23vw;
  margin-left: 1.67vw;
  gap: 5px;
}
.logoName {
  display: flex;
  align-items: center;
  justify-content: center;
}
#logo-space {
  font-size: 2.2vw;
  color: rgb(105, 104, 104);
  font-weight: 300;
  margin-top: 5px;
  font-family: "Billabong";
}
.nav-logo-name .wow {
  font-size: 2.2vw;
  color: #3b3b3b;
  font-weight: 300;
  margin-top: 5px;
  font-family: "Billabong";
}
.nav-logo-name img {
  width: 1.77vw;
}
.nav-contact {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1.25vw;
}
.nav-contact img {
  width: 1.3vw;
}
.nav-contact-info {
  gap: 0.57vw;
  display: flex;
  align-items: center;
  justify-content: end;
}
.nav-contact-info a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-contact .mob {
  font-size: 1.3vw;
  color: #626262;
  font-weight: 400;
  font-family: "PT Sans";
}
.nav-menu {
  display: flex;
  align-items: center;
  width: 5vw;
  padding: 0.3vw;
  justify-content: center;
  gap: 0.52vw;
  border: 0.1vh solid #77777734;
  cursor: pointer;
  margin-right: 1.72vw;
}

.nav-menu img {
  width: 1.51vw;
}

.nav-menu p {
  font-size: 0.78vw;
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  color: #626262;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7vw;
}
.hero p {
  font-size: 1.1vw;
  color: #858585;
  font-weight: 700;
  font-family: "Bakerie Smooth";
  text-align: center;
  margin-bottom: 0.7vw;
}
.hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  margin-bottom: 0.7vw;
}
.hero-title h1 {
  font-size: 2.5vw;
  color: #343434;
  font-weight: 700;
  font-family: "Caveat";
  margin-bottom: 3px;
  text-align: center;
}
.star {
  position: absolute;
  top: -10%;
  right: -10%;
}
.star img {
  width: 2.34vw;
}
.hero-subTitle p {
  font-size: 1.4vw; /* Scales with viewport width */
  color: #fef9f9;
  font-weight: bold;
  font-family: "Bakerie Smooth";
  white-space: nowrap; /* Prevent line break */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis;
  margin-bottom: 0;
}
.hero-subTitle {
  background-image: url("./assets/ColourfulBackround.png");
  background-size: cover;
  background-position: center;
  width: 12.69vw;
  display: flex;
  background-size: cover;
  align-items: center;
  justify-content: center;
  padding: 0.1vw;
}
.cover-img {
  width: 92.82vw;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 7.69vh;
}
.cover-img img {
  width: 100%;
  display: block;
}

.section-03 {
  margin-top: 10.93vh;
  padding: 2.8vh 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: rgba(252, 238, 216, 255);
  width: 34.9vw;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

.section-03 .main {
  font-size: 1.7vw; /* Adjusts font size based on viewport width */
  color: #444343;
  font-weight: 700;
  font-family: "PT Sans";
  white-space: nowrap; /* Ensures text stays in one line */
  overflow: hidden;
  text-overflow: ellipsis; /* Adds ellipsis if the text overflows */
}

.section-03 .save {
  font-size: 1.5vw; /* Adjusts font size based on viewport width */
  text-decoration: underline;
  color: #616163;
  font-weight: bold;
  font-family: "Bakerie Smooth";
  white-space: nowrap; /* Ensures text stays in one line */
  overflow: hidden;
  text-overflow: ellipsis; /* Adds ellipsis if the text overflows */
  text-underline-position: under;
}

.section-04 {
  margin-top: 15.28vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}
#right-line {
  transform: rotate(180deg);
  position: absolute;
  right: 0;
  width: 25.52vw;
}
#left-line {
  position: absolute;
  left: 0;
  width: 25.52vw;
}
.section-04-box p {
  font-size: 1.2vw;
  color: #fffcfc;
  font-family: "Aller";
}

.section-04-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: rgba(29, 211, 143, 255);
  width: 21.88vw; /* 420px of 1920px */
  padding: 1.3vw;
}
.section-05 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5.56vh;
  width: 46.35vw;
  margin-left: auto;
  margin-right: auto;
}
.section-05-box1 {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 1vw;
  width: 46.09vw;
}
.section-05-innerbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6vw;
}
.section-05-innerbox h2 {
  font-size: 2.3vw;
  color: #343434;
  font-weight: 700;
  font-family: "PT Sans";
}
.section-05-innerbox .all-types {
  font-size: 1.2vw;
  text-decoration: underline;
  color: #757575;
  font-weight: 500;
  font-style: italic;
  font-family: "PT Sans";
  text-underline-position: under;
}
.section-05-innerbox p.free-text {
  line-height: 0.8;
  font-size: 1.45vw;
  color: #fffcf9;
  padding: 0.6vw;
  font-family: "Aller";
  background-color: rgba(238, 43, 124, 255);
  border-radius: 0.5vw;  
  /* animation: highlight 1s infinite ease-in-out; */
  transform-origin: center;
  display: inline-block;
}
.section-05-innerbox img {
  width: 1.5vw;
}
@keyframes highlight {
  0%,
  100% {
    background-color: rgba(238, 43, 124, 255);
    transform: scale(1);
  }
  50% {
    background-color: #ff0066;
    transform: scale(1.15);
  }
}
#heart-img {
  animation: heartbeat 1.5s infinite ease-in-out;
  transform-origin: center;
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}
.section-05-box2 {
  margin-top: 6.02vh;
  width: 36.46vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.46vh;
  background-color: rgba(242, 242, 242, 255);
}
.section-05-box2 ul {
  list-style: none;
  justify-content: center;
  row-gap: 0.46vh;
  column-gap: 2vw;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding: 1.5%;
  margin: 0;
}
.section-05-box2 ul li {
  display: flex;
  align-items: center;
  gap: 0.25vw; /* or use 0.37vh for vertical alignment */
  font-size: 1.1vw;
  color: #6c6b6b;
  font-weight: 400;
  font-family: "PT Sans";
  text-align: center;
}
.section-05-box2 ul li img {
  width: auto !important;
}
#types-header {
  width: 31.51vw;
  margin-bottom: 9.26vh;
}
.section-06 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  row-gap: 8.8vh;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7vw;
  width: 60.13vw;
}
.section-06-innerbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.8vh;
}
.section-06-innerbox img {
  width: 5.99vw;
}
.section-06-innerbox .main {
  font-size: 1.2vw;
  color: #030303;
  font-weight: 700;
  font-family: "PT Sans";
  text-align: center;
  width: 10.5vw;
}
.section-06-innerbox .desc {
  font-size: 1.08vw;
  color: #5b5b5b;
  font-weight: 400;
  font-family: "PT Sans";
  text-align: center;
  width: 10.7vw;
}
.section-06-innerbox .desc.selected {
  width: 10.9vw;
}
.section-07 {
  width: 93.49vw;
  padding: 3.13vw;
  background-color: rgba(242, 242, 242, 255);
  margin-left: auto;
  margin-right: auto;
  margin-top: 14.35vh;
  /* margin-bottom: 24.07vh; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt-04 {
  padding-top: 12vh !important;
  /* padding-top: 24.07vh !important; */
  margin-top: 0 !important;
}
.section-07-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.78vw;
  background-color: rgba(94, 71, 220, 255);
  width: 22.14vw;
  padding: 1.2vw;
  cursor: pointer;
}
.section-07-contact p {
  font-size: 1.2vw;
  color: #fafbfb;
  font-family: "Aller";
}
.section-07-contact img {
  width: 3.4vw;
  height: 2.78vh;
  transition: transform 0.3s ease-in-out;
  animation: arrow-move 3s infinite ease-in-out;
}
.section-07-contact:hover img {
  transform: translateX(20px);
}
.check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 2vh;
}
.check-icon p {
  font-size: 1.5vw;
  color: #323232;
  font-weight: 400;
  font-style: italic;
  font-family: "PT Sans";
  text-align: center;
}
.check-icon img {
  width: 1.5vw;
}
#types-sizes .types {
  margin-top: 5px;
  font-size: 1.5vw;
  color: #545353;
  font-weight: 400;
  font-style: italic;
  font-family: "PT Sans";
  text-align: center;
  text-underline-position: under;
}
#types-sizes u {
  text-decoration-color: #838383;
}
#types-sizes {
  width: 29.39vw;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(242, 242, 242, 255);
  padding: 2vw 0;
}
#type-contact {
  margin-top: 6.5vw;
}
.five-stars {
  margin-top: 3.24vh;
}
.five-stars img {
  width: 4.43vw;
}
.design-divider {
  margin-top: 13.43vh;
}
.design-divider img {
  width: 25.26vw;
}
.section-08 {
  display: flex;
  align-items: center;
  width: 87.24vw;
  gap: 10vw;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16vw;
}
.section-08-innerbox {
  display: flex;
  flex-direction: column;
  row-gap: 2.4vw;
  align-items: start;
  width: 22.4vw;
  justify-content: start;
  text-align: left;
}
.section-08-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2.4vw;
}
.section-08-innerbox h3 {
  font-size: 1.5vw;
  color: #464646;
  font-weight: 600;
  font-family: "PT Sans";
  justify-self: start;
  text-align: left;
}
.section-08-innerbox p {
  font-size: 1.2vw;
  color: #7f7d7d;
  justify-self: start;
  align-items: center;
  font-family: "PT Sans";
}
.section-08-learn p {
  font-size: 1.2vw;
  color: #5e47dc;
  font-weight: 400;
  font-family: "PT Sans";
}
.section-08-learn {
  display: flex;
  border-top: 3px solid rgba(238, 238, 238, 255);
  justify-content: start;
  gap: 0.78vw;
  width: 22.4vw;
  padding-top: 2.78vh;
}
.section-08-learn img {
  width: 2.08vw;
  transition: transform 0.3s ease-in-out;
}
.section-08-learn:hover img {
  transform: translateX(5px); /* Move image slightly to the right */
}
.section-08-logo {
  align-self: center;
}
.section-08-logo img {
  width: 5.21vw;
  height: 11.11vh;
}
.section-09 {
  margin-left: auto;
  margin-top: 19vw;
  margin-right: auto;
  width: 82.7vw;
}
.section-09 .section-09-header {
  font-size: 1.5vw;
  color: #353536;
  font-weight: 700;
  font-family: "PT Sans";
}
.section-09-innerbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 6.94vh;
}
.section-09-innerbox img {
  cursor: pointer;
  width: 4.69vw;
}
.section-09-testimonial img {
  width: 2.08vw;
}

.section-09-testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3vw 2.22vw;
  width: 32vw;
  height: 23vw;
  overflow-y: auto;
  flex: 1 1 0;
  position: static;
  color: black;
  background-color: rgb(243, 243, 243);
  box-sizing: border-box;
}

.text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:5px;
}
.comma {
  position: absolute;
  top: -10px;
}

.testimonial-group {
  display: flex;
  flex-direction: row;
  gap: 60px;
  width: 100%;
  justify-content: center;
  align-items: stretch;
}

.section-09-testimonial p {
  font-size: 1.2vw;
  color: #7f7e7e;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  font-weight: 400;
  font-family: "PT Sans";
}
.section-09-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-09-author img {
  width: 4.43vw;
}
.section-09-author p {
  font-size: 1.3vw;
  font-weight: 400;
  font-family: "PT Sans";
}
.section-10 {
  margin-top: 18.98vh;
  display: flex;
  width: 51.43vw;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}
.section-10-innerbox {
  display: flex;
  flex-direction: column;
  gap: 3.7vh;
  justify-content: center;
  align-items: center;
}
.section-10-innerbox img {
  width: 3.13vw;
  height: 6.94vh;
}
.section-10-innerbox .taglines {
  font-size: 2.1vw;
  color: #0a0a0a;
  font-weight: 700;
  font-family: "PT Sans";
}
.section-10-tagline {
  width: 33.65vw;
}
#tagline-first {
  text-align: left;
}
#tagline-second {
  text-align: right;
}

.section-10-goal {
  padding-bottom: 2vw;
  border-bottom: 1px solid #b7b7b7;
}
.section-10-innerbox p {
  font-size: 1.3vw;
  color: #6b6b6b;
  font-family: "Aller";
  text-align: center;
}
.Wow-spacelogo {
  margin-top: 10.19vh;
  margin-bottom: 10.19vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Wow-spacelogo img {
  height: 18.52vh;
}
.footer {
  display: flex;
  flex-direction: column;
  width: 60dvw;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  gap: 3.24vh;
}
.footer-links {
  width: 30vw;
}
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.78vw;
}
.footer-social img {
  width: 2.6vw;
}
.footer-links ul {
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1.8vw;
  row-gap: 0.8vw;
}
.footer-links ul li {
  font-size: 1.2vw;
  color: #484646;
  font-weight: 400;
  font-family: "PT Sans";
}
.footer-links ul li a {
  text-decoration: none;
  color: #484646;
}
.footer-copyright p {
  font-size: 1.2vw;
  color: #656464;
  font-weight: 400;
  font-family: "PT Sans";
  min-height: 1vw;
}
.footer-copyright {
  margin-bottom: 80px;
}
.menu-bar {
  position: absolute;
  visibility: hidden;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  gap: 3.7vh;
  top: 3.2vw;
  right: 10px;
  width: 18.75vw;
  background: #fff;
  padding-left: 1.82vw;
  padding-right: 1.82vw;
  padding-top: 3.24vh;
  padding-bottom: 3.24vh;
  border: 1px solid rgba(234, 234, 234, 255);
}
.active {
  visibility: visible;
}
.menu-bar img {
  margin-left: auto;
  margin-right: auto;
}
.menu-bar ul li {
  list-style: none;
  text-align: left;
  font-size: 1.2vw;
  color: #838181;
  font-weight: 400;
  font-family: "PT Sans";
}
#close-btn {
  align-self: flex-end;
  margin: 0;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  height: 2.31vh;
}
.menu-divider {
  width: 11.18vw;
}
.line-menu {
  width: 100%;
}
.menu-bar ul li a {
  text-decoration: none;
  color: #838181;
}

@keyframes arrow-move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(40%);
  }
  100% {
    transform: translateX(0);
  }
}

.icons > a:first-child {
  animation: big-small 3s infinite ease-in-out;
}
.icons > a:last-child {
  animation: small-big 3s infinite ease-in-out;
}

@keyframes big-small {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes small-big {
  0% {
    transform: scale(1.15);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.free-text {
  animation: heartbeat2 2s infinite ease-in-out;
}

@keyframes heartbeat2 {
  0%,
  100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}