:root {
    --primaryColor: #214D3A;
    --siteBgColor: #F7F6F2;
    --headTextColor: #1E1E1E;
    --bodyTextColor: #5A5A5A;
    --lightBgColor: #DCEBE4;
    --whiteBgColor: #F7F6F2;
    --accentColor: #CCBBAE;
}

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

::-webkit-scrollbar-track {
    background: var(--siteBgColor);
}

::-webkit-scrollbar-thumb {
    background: var(--primaryColor);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--headTextColor);
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primaryColor) var(--siteBgColor);
}

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    background-color: var(--siteBgColor);
    font-size: 18px;
    line-height: 1.5;
}

.sectionHeading {
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 2.66rem;
    line-height: 1.3em;
    color: var(--headTextColor);
    margin: 0;
}

.sectionSubHeading {
    font-family: "Sora", sans-serif;
    font-weight: 300;
    font-size: 1.22rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0;
}

.siteHeader {
    background: var(--siteBgColor);
    padding: 0.5rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: transform 0.4s ease-in-out, background 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    overflow: hidden;
}

.siteHeader.header-hidden {
    transform: translateY(-100%);
}

.siteHeader .siteLogo {
    width: 18rem;
}

.siteHeader .siteBtn {
    transform: translateY(200%);
    transition: transform 0.4s ease-in-out;
}

.siteHeader.button-visible .siteBtn {
    transform: translateY(0);
}

.siteBtn,
.siteBtn:hover,
.siteBtn:active,
.siteBtn:focus {
    display: inline-flex;
    align-items: center;
    gap: 0.66rem;
    padding: 0.66rem 1.11rem;
    border-radius: 2rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    border: 2px solid var(--primaryColor);
    background: var(--primaryColor);
    color: var(--whiteBgColor);
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

.siteBtn:hover {
    transform: translateY(-5px);
}

.siteBtn img {
    width: 1.33rem;
    height: 1.44rem;
    object-fit: contain;
    transition: filter 0.3s ease;
    filter: brightness(0) invert(1);
}

.siteBtn span {
    display: inline-block;
}

.siteBtn.footerBtn {
    color: white;
    border: none;
    padding: 0;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

.siteBtn.footerBtn img {
    filter: brightness(0) invert(1);
}

.siteBtn.footerBtn:hover {
    color: white;
    transform: none !important;
}

.siteBtn.footerBtn:hover img {
    filter: brightness(0) invert(1);
}

.siteBanner {
    background: url(../images/revyve-site-image-01.png);
    background: url(../images/revyve-site-image-01.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 11rem 0;
}

.siteBanner-content {
    width: 100%;
    max-width: 39rem;
}

.siteBanner-content h1 {
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 2.66rem;
    line-height: 1.2em;
    color: var(--primaryColor);
    margin-bottom: 0.88rem;
}

.siteBanner-content h6 {
    font-family: "Sora", sans-serif;
    font-weight: 400;
    font-size: 1.66rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin-bottom: 2.66rem;
}

.siteSection {
    padding: 8rem 0;
}

.sectionContent_1 {
    width: 100%;
    max-width: 59.77rem;
    margin: 0 auto;
    gap: 2.5rem;
}

.sectionContent_1_left {
    width: 100%;
    max-width: 31.75rem;
}

.sectionContent_1_right {
    width: 10%;
    flex-grow: 1;
}

.sectionContent_1_right h5 {
    font-size: 1.5rem;
    line-height: 1.7em;
    color: var(--headTextColor);
    font-weight: 400;
    font-family: 'Sora', sans-serif;
}

.sectionContent_1_right img {
    width: 9rem;
}

.sectionContent_2 {
    background: var(--lightBgColor);
    border-radius: 1.11rem;
    padding: 4.44rem 0 0;
}

.primaryText {
    color: var(--primaryColor);
}

.sectionContent_2_content {
    padding: 4.44rem;
    display: flex;
    gap: 2.66rem;
}

.sectionContent_2 img {
    width: 90%;
    max-width: 32.444rem;
}

.sectionContent_2_content_left {
    background: var(--whiteBgColor);
    padding: 2.66rem;
    border-radius: 1.11rem;
}

.sectionContent_2_content_left h6 {
    font-size: 1.22rem;
    font-weight: 300;
    line-height: 1.5;
}

.sectionContent_2_content ul {
    font-size: 1.6rem;
    font-weight: 400;
     font-family: "Sora", sans-serif;
}  

.sectionContent_2_content ul li {
    position: relative;
    z-index: 1;
    padding-left: 2rem;
}

.sectionContent_2_content ul li::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.66rem;
    height: 1.66rem;
    background: url(../icons/tick.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    transform: translateY(20%);
}

.sectionContent_3 {
    gap: 4.44rem;
}

.processCard {
    width: 16.66rem;
    padding-right: 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.processCard img {
    width: 100%;
    border-radius: 3.555rem;
    margin-bottom: 1rem;
}

.processCard p {
    font-size: 1.11rem;
}

.processCard h4 {
    font-size: 2.66rem;
    font-weight: 600;
    line-height: 0;
    background: var(--accentColor);
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    border: 0.4rem solid var(--siteBgColor);
}

.sectionContent_3_content {
    background: var(--lightBgColor);
    padding: 2.66rem;
    border-radius: 1.11rem;
}

.sectionContent_3_content  h3 {
    font-size: 1.66rem;
    color: var(--primaryColor);
    font-weight: 400;
    font-family: "Sora", sans-serif;
}

.sectionContent_3_content p {
    font-size: 1.22rem;
}

.sectionContent_4 {
    width: 100%;
    max-width: 50rem;
    margin: 0 auto;
}

.sectionContent_4_content {
    max-width: 13.55rem;
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
}

.sectionContent_4_content img {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 4.44rem;
    height: 4.44rem;
    transform: translateY(-5%);
}

.testimonialWrap {
    background: white;
    border-radius: 1.11rem;
    padding: 2.66rem;
    width: 100%;
    max-width: 60rem;
    margin: 4.44rem auto 0;
}

.testimonialWrap  h3 {
    font-size: 1.388rem;
    font-weight: 600;
    font-family: "Sora", sans-serif;
}

.ratingWrap img {
    width: 1.22rem;
}

.siteSection_5 {
    background: url(../images/revyve-site-image-09.png);
    background: url(../images/revyve-site-image-09.webp);
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
}

.siteSection_5_content {
    gap: 6.88rem;
}

.siteSection_5_content picture {
    width: 1%;
    display: inline-block;
    flex-grow: 1;
    max-height: 100%;
}

.siteSection_5_content img {
    width: 100%;
    border-radius: 1.11rem;
    height: 100%;
    object-fit: cover;
}

.siteSection_5_content_left {
    width: 100%;
    max-width: 31rem;
}

.siteSection_5_content_left h5 {
    font-size: 1.55rem;
    font-weight: 400;
    font-family: "Sora", sans-serif;
    padding-right: 18%;
}

.siteSection_6 {
    width: 100%;
    margin: 0 auto;
    max-width: 50rem;
}

#faqAccordion .accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(30, 30, 30, 0.15);
}

#faqAccordion .accordion-button {
    background: transparent !important;
    color: var(--headTextColor);
    font-size: 1.55rem; 
    font-family: "Sora", sans-serif;
    font-weight: 500;
    padding: 1.5rem 0;
    box-shadow: none !important;
}

#faqAccordion .accordion-button:not(.collapsed) {
    border-bottom: 0;
}

#faqAccordion .accordion-button::after {
    background-image: url(../icons/arrow.png);
    background-size: contain;
    width: 2.22rem;
    height: 2.22rem;
    transform: rotate(180deg); 
    background-color: transparent;
    transition: transform 0.3s ease;
}

#faqAccordion .accordion-button:not(.collapsed)::after {
    transform: rotate(0deg);
}

#faqAccordion .accordion-body {
    padding: 0 0 1.5rem 0;
    font-size: 1.22rem;
    font-weight: 300;
    color: var(--bodyTextColor);
    opacity: 0.8;
    margin-top: -0.5rem;
}

.productSlide_wrapper {
    border-radius: 1.11rem;
    overflow: hidden;
    position: relative;
}

.fullscreen-btn {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-btn svg {
    width: 2rem;
    height: 2rem;
    fill: white;
}

.productSwiper .swiper-slide {
    aspect-ratio: 750/612;
}

.productSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.4s ease-in-out;
}

.productSwiper .swiper-slide img.changing {
    opacity: 0;
}

.productSwiper .swiper-slide:hover img {
    cursor: zoom-in;
}

/* Custom Arrows */
.productSwiper .swiper-button-next,
.productSwiper .swiper-button-prev {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.productSwiper .swiper-button-next::after,
.productSwiper .swiper-button-prev::after {
    font-size: 2rem;
}

.productSwiper .swiper-button-next:hover,
.productSwiper .swiper-button-prev:hover {
    color: #fff;
    transform: scale(1.1);
}

/* Color Swatches (Dots) */
.color-options {
    padding-left: 1rem;
}

.color-dot {
    width: 1.33rem;
    height: 1.33rem;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-sizing: content-box;
}

.color-dot:hover {
    transform: scale(1.1);
}

.color-dot.active {
    border-color: var(--primaryColor);
    padding: 2px;
    background-clip: content-box;
}

.productSlide_content {
    display: flex;
    flex-direction: column;
    gap: 2.66rem;
    align-items: start;
}

.productSlide_content .sectionSubHeading {
    font-size: 1.61rem;
}

.productSlide_content  ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.productSlide_content  ul li {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.61rem;
    line-height: 0;
    font-weight: 400;
    font-family: "Sora", sans-serif;
    color: var(--bodyTextColor);
}

.productSlide_content  ul li img {
    width: 3.33rem;
}

.siteSection_7 {
    gap: 4.44rem;
}

.productSlide_content {
    width: 100%;
    max-width: 31.11rem;
}

.productSlide_images {
    width: 1%;
    flex-grow: 1;
}

.siteSection_8 h6 {
    font-size: 1.61rem;
    font-weight: 400;
    font-family: "Sora", sans-serif;
    color: var(--bodyTextColor);
    max-width: 50rem;
}

.siteFooter {
    background: var(--primaryColor);
}

.siteFooter p {
    font-size: 1.61rem;
}

.socialLinks {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.socialLinks img {
    width: 1.33rem;
}

.fixed-mobile-cta {
    display: none;
}