/* Before Start Please check your website using WordPress or Build from Scratch */
/* Please take note WordPress usually have like extra margin been set which sometimes better to remove earlier */

/* Before update css style, try to use inspect to update the front-end then update the css. If the changes don't reflect, try refreshing the page
or try to clear the cache. If still not working, try to check if the css file is linked correctly. */

:root {

}

* {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  background-color: transparent;
}

/* WHy use VW Because better at responsive design */
/* Color depends on your website  */
body {
  line-height: 1.458vw;
  font-size: 1vw;
  /* font-size: 100%; */
}

/* Usually H1 will be the biggest font in the website */
/* h1 font size from px is 110px */
h1 {
  font-size: 5.729vw;
  /* font-size: 570%; */
  font-family: "Poppins", sans-serif;
  color: #F3467A;
}

h2 {
  font-size: 3.125vw;
  /* font-size: 310%; */
  font-family: "Poppins", sans-serif;
  color: #F3467A;
}

h3 {
  font-size: 2.344vw;
  /* font-size: 235%; */
  font-family: "Poppins", sans-serif;
  color: #F3467A;
}

h4 {
  font-size: 1.823vw;
  /* font-size: 182%; */
  font-family: "Poppins", sans-serif;
  color: #F3467A;
}

h5 {
  font-size: 1.354vw;
  /* font-size: 135%; */
  font-family: "Poppins", sans-serif;
  color: #FFA8C1;
}

h6 {
  font-size: 1.25vw;
  /* font-size: 125%; */
  font-family: "Poppins", sans-serif;
  color: #F3467A;
}

p {
    color: #FFA8C1;
    font-family: "Poppins", sans-serif;
}

button {
    border-radius: 999px;
    color: white;
    background-color: #F8C08B;
    width: 200px;
    height: 60px;
    font-size: 20px;
    cursor: pointer;
}

button:hover {
  background-color: #f3a866;
}

img {
  object-fit: contain;
}

svg {
  display: block;
  width: 100%;
}

video {
  width: 100%;
  object-fit: cover;
}

a {
  text-decoration: none;
  color: #FFA8C1;
  /* color: #c23e57; */
}

a:hover {
  text-decoration: none;
  /* color: #c23e57;  */
}

#nav-ul {
    justify-content: space-between;
    align-items: center;
}

#nav-right {
    display: flex;
    gap: 20px;
    margin-right: 80px;
}

ul {
    display: flex;
}

li {
    list-style-type: none;
}

/* Carousel in home page */
.carousel {
    position: relative;
    width: 100%;
    height: 380px;
    margin: 10px auto;
    overflow: hidden;
    background-color: #fff6f8;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 40px 100px;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    color: #ff93b3;
    font-size: 42px;
    font-weight: 300;
    cursor: pointer;
}

.carousel-button:hover {
    color: #ff4f86;
}

.carousel-button.prev {
    left: 40px;
}

.carousel-button.next {
    right: 40px;
}

.carousel-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid #ff93b3;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
}

.carousel-dot.active {
    background-color: #ff93b3;
}

@media (max-width: 768px) {
    .carousel {
        height: 300px;
    }

    .carousel-slide img {
        padding: 40px 60px;
    }

    .carousel-button.prev {
        left: 10px;
    }

    .carousel-button.next {
        right: 10px;
    }
}

#home-text1, #home-text2 {
    margin: 110px;
}

#home-description2 {
    display: block;
}

#home-description2 li {
    list-style-type: disc;
}

#home-description2 li::marker {
    color: #FFA8C1;
}

/* number grid */
.number-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 38px;
    justify-content: center;
    margin: 40px auto;
}

.number-box {
    width: 20vw;
    height: 115px;
    background-color: #DCA48C;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 26px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 30px;
    font-weight: 700;
    
}

@media (max-width: 768px) {
    .number-grid {
        gap: 16px;
        padding: 20px;
    }

    .number-box {
        width: calc(50% - 8px);
        height: 100px;
    }
}

@media (max-width: 480px) {
    .number-box {
        width: 100%;
    }
}

/* bear question */
.bear-question-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 30px;
}

.bear-image {
    width:  45%;
    max-width: 430px;
}

.bear-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.bear-question-content {
    width: 50%;
    max-width: 520px;
    text-align: center;
}

.speech-bubble {
    position: relative;
    width: 100%;
    padding: 18px 30px;
    margin-bottom: 65px;
    background-color: #ff9fbe;
    border-radius: 999px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 23px;
    font-weight: 400;
}

/* Speech bubble triangle */
.speech-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 28px solid #ff9fbe;
}

.answer-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 40px;
}

.answer-button {
    width: 190px;
    height: 115px;
    border: none;
    border-radius: 27px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 29px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease;
}

.yes-button {
    background-color: #ff9fbe;
    box-shadow: 0 5px 14px rgba(255, 126, 169, 0.35);
}

.no-button {
    background-color: #ffcbdc;
}

.answer-button:hover {
    transform: translateY(-4px);
}

.yes-button:hover {
    background-color: #ff7fa8;
}

.no-button:hover {
    background-color: #f7afc6;
}

.answer-button.selected {
    outline: 4px solid rgba(255, 127, 168, 0.25);
    transform: scale(1.04);
}

#answer-message {
    min-height: 36px;
    margin-top: 48px;
    color: #ff7fa8;
    font-family: "Poppins", sans-serif;
    font-size: 23px;
}

/* faq section */
.faq-section {
    width: calc(100% - 120px);
    margin: 60px auto;
    font-family: "Poppins", sans-serif;
}

.faq-item {
    border-bottom: 1px solid #ffc4d5;
}

.faq-question {
    width: 100%;
    height: auto;
    padding: 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #f3467a;
    font-family: "Poppins", sans-serif;
    font-size: 23px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.faq-question:hover {
    background: transparent;
    color: #e8326a;
}

.faq-icon {
    margin-left: 30px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease,
                opacity 0.3s ease,
                padding 0.4s ease;
}

.faq-answer p {
    margin: 0 0 22px;
    color: #ff9cba;
    font-size: 14px;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding-bottom: 8px;
    opacity: 1;
}

/* know more */
#know-more {
    width: 80vw;
    height: 200px;
    background-color: #DCA38C;
    margin: 50px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#know-more h1 {
    color: white;
}

/* Scrollbar width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Scrollbar background */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Scrollbar handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* Scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}