/* ========================= */
/* :: 1.0 WEB FONTS  */
/* ========================= */
@font-face {
    font-family: 'Futura';
    src:
        url('../fonts/FuturaCondensed.woff2') format('woff2'),
        url('../fonts/FuturaCondensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pistilli';
    src:
        url('../fonts/Pistilli.woff2') format('woff2'),
        url('../fonts/Pistilli.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Black Diamond';
    src:
        url('../fonts/BlackDiamond.woff2') format('woff2'),
        url('../fonts/BlackDiamond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ================================== */
/* :: 2.0 GLOBAL Variable Define CSS  */
/* ================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    /* Google Font */
    --futura: 'Futura', sans-serif;
    --pistilli: 'Pistilli', serif;
    --black-diamond: 'Black Diamond', cursive;

    /* Color Palette */
    --white: #fff;
    --black: #000;
    --light: #f7f3eb;
    --primary: #df8656;
    --primary-dark: #bd7c62;
    --primary-light: #eec0ac;
    --secondary: #708b89;
    --secondary-light: #accac4;
}

/* ========================= */
/* :: 3.0 COMMON CSS */
/* ========================= */
html,
body {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    color: var(--black);
    font-size: 18px;
    font-family: var(--futura);
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.1px;
    background-color: var(--light);
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
section,
.section {
    position: relative;
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}
a,
button {
    outline: none;
    box-shadow: none;
    text-decoration: none;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
button {
    padding: 0;
    border: none;
    background: unset;
}
ol,
ul {
    margin: 0;
    padding: 0;
}
ol li,
ul li {
    list-style: none;
}
img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
}
input,
input:focus,
input:focus-visible,
input:active,
select,
.form-select,
.form-select:focus,
textarea {
    outline: none;
    box-shadow: none;
}
* + address,
* + dl,
* + fieldset,
* + figure,
* + ol,
* + p,
* + pre,
* + ul {
    margin: 0;
    padding: 0;
}

*::-moz-selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}
::-moz-selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}

::selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}

/* =============================== */
/* :: 4.0 Common CSS */
/* =============================== */

/* ===== Typography CSS Start ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--pistilli);
}

.fs-1 {
    font-size: 34px !important;
    letter-spacing: 0.2px;
}
.fs-2 {
    font-size: 30px !important;
    letter-spacing: 0.2px;
}
.fs-common {
    font-size: 20px;
}

.ff-futura {
    font-family: var(--futura);
}
.ff-pistilli {
    font-family: var(--pistilli);
}
.ff-black-diamond {
    font-family: var(--black-diamond);
}
/* ===== Typography CSS End ===== */

/* ===== Color CSS Start ===== */
.text-primary {
    color: var(--primary) !important;
}
.text-secondary {
    color: var(--secondary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}
.bg-secondary {
    background-color: var(--secondary) !important;
}
/* ===== Color CSS End ===== */

/* ===== Button CSS Start ===== */
.btn {
    height: 44px;
    padding: 10px 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    color: var(--white);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.01px;
    background-color: var(--primary);
    border-radius: 100px;
    transition: all 0.3s ease-in-out;
}
.btn:hover {
    color: var(--white);
    background-color: var(--secondary);
}

/* Button Animation */

/* ===== Button CSS End ===== */

/* ===== CSS for Random Componetns/Classes Start ===== */
.transition-common {
    transition: all 0.3s ease-in-out;
}

/* Text Highlighter CSS Start */
.text-highlighter .lineChild {
    display: inline-block !important;
    position: relative;
    z-index: 1;
}
.text-highlighter .lineChild::after {
    content: '';
    position: absolute;
    left: -15px;
    right: -15px;
    bottom: -2px;
    height: 80%;
    background-color: var(--primary);
    border-radius: 100px;
    z-index: -1;
}
/* Text Highlighter CSS End */

/* ===== CSS for Random Componetns/Classes End ===== */

/* =============================== */
/* :: 5.0 Header Area CSS Start */
/* =============================== */
.header--area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    padding: 16px 0;
}
.logo--header {
    margin-left: 8px;
}
.logo--header,
.logo--mobileMenu {
    max-width: 144px;
    width: 100%;
}
.mobile-menu-open,
.mobile-menu-close {
    width: 36px;
    height: 36px;
    padding: 4px;
    font-size: 18px;
    color: var(--white);
    border-radius: 4px;
    background-color: var(--primary);
}
.mobile-menu-close {
    background-color: var(--secondary);
}
.mobile-menu .offcanvas {
    background-color: rgba(112, 139, 137, 0.75);
    backdrop-filter: blur(8px);
}
.nav__item--mobileMenu {
    border-bottom: 1px solid rgba(255, 255, 255, 0.75);
}
.nav__link--mobileMenu {
    padding: 12px 0;
    color: var(--white);
}
.nav__link--mobileMenu:hover {
    color: var(--primary);
}

/* Navigation Menu for Initial Large Device Start*/
.nav__wrapper--header {
    gap: 24px;
}
.nav__link--header {
    color: var(--white);
}
.nav__link--header:hover {
    color: var(--primary-light);
}
.nav__link--header::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: var(--white);
    transition: all 0.3s ease-in-out;
}
.nav__link--header:hover::after {
    left: 0;
    background-color: var(--primary-light);
    width: 100%;
}
/* Navigation Menu for Initial Large Device End*/

.sticky-header.sticky-active {
    position: fixed;
    top: -100px; /* Start off-screen when sticky-active is first applied */
    left: 0;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}

.sticky-header.sticky-active.show {
    top: 0; /* Slide down smoothly to 0 */
}
/* =============================== */
/* :: 5.0 Header Area CSS End */
/* =============================== */

/* =============================== */
/* :: 6.0 Hero Section CSS Start */
/* =============================== */
.hero__wrapper {
    width: 100%;
    min-height: 400px;
}
.hero__bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.hero__content {
    max-width: 1024px;
}
.hero__subtitle {
    font-size: 24px;
    letter-spacing: 0.2px;
}
.hero__subtitle__two {
    font-size: 20px;
}
.hero__top {
    padding: 24px 0;
}
.hero__top__li::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -13px;
    width: 100%;
    height: 2px;
    background-color: var(--primary);
}
.hero__top__li:last-child::after {
    display: none;
}
/* =============================== */
/* :: 6.0 Hero Section CSS End */
/* =============================== */

/* =============================== */
/* :: 7.0 About Section CSS Start */
/* =============================== */
.about__wrapper {
    padding: 32px 0;
}
.about__video__popup {
    max-width: 480px;
    aspect-ratio: 1 / 0.6;
    margin: 0 auto;
}
.about__video__popup::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    left: -15px;
    top: -15px;
    background-color: var(--primary);
    z-index: -1;
}
.play-video {
    width: 40px;
    height: 40px;
    color: var(--white);
}
.play-video svg {
    width: 100%;
    height: 100%;
}
.about__heading {
    font-size: 22px;
}
.about__content__item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 372px;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background-color: var(--primary);
}
.about__content__item:last-child::after {
    display: none;
}
.cta {
    padding: 16px 0 24px;
}
.cta__wrapper {
    max-width: 796px;
}

/* MailChimp Code CSS Start */
.cta__mailchimp #mc_embed_signup_scroll {
    height: auto;
}
.cta__mailchimp #mc_embed_signup form {
    margin: 0 !important;
}
.cta__mailchimp #mc_embed_signup .mc-field-group {
    width: auto;
    min-height: 44px;
    height: 44px;
    border: none;
    padding-bottom: 0;
    position: relative;
}
.cta__mailchimp #mc_embed_signup .mc-field-group label {
    display: none;
}
.cta__mailchimp #mc_embed_signup .mc-field-group input {
    width: 100%;
    height: 100%;
    padding: 8px 20px;
    border: none;
    text-indent: 0;
    display: inline-flex;
    align-items: center;
}
.cta__mailchimp #mc_embed_signup .mc-field-group input::placeholder {
    color: var(--black);
}
.cta__mailchimp .mc-field-submit {
    height: 44px;
}
.cta__mailchimp #mc_embed_signup .button {
    height: 100%;
    color: var(--white);
    font-size: 18px;
    font-weight: 400;
    padding: 7px 20px 9px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    background-color: var(--secondary);
}
.contact--section .cta__mailchimp #mc_embed_signup .button {
    background-color: var(--primary);
    color: var(--black);
}
.cta__mailchimp #mc_embed_signup .button:hover {
    background-color: var(--secondary-light);
}
.cta__mailchimp
    #mc_embed_signup
    #mc-embedded-subscribe-form
    input.mce_inline_error,
.cta__mailchimp
    #mc_embed_signup
    #mc-embedded-subscribe-form
    input.mce_inline_success {
    border: none;
}
.cta__mailchimp
    #mc_embed_signup
    #mc-embedded-subscribe-form
    div.mce_inline_error,
.cta__mailchimp
    #mc_embed_signup
    #mc-embedded-subscribe-form
    div.mce_inline_success {
    margin-bottom: 0;
    position: absolute;
    left: 0;
    bottom: -24px;
}
/* MailChimp Code CSS End */

/* =============================== */
/* :: 7.0 About Section CSS End */
/* =============================== */

/* =============================== */
/* :: 8.0 Visonary Section CSS Start */
/* =============================== */
.visionary--section {
    padding: 24px 0;
}
.visionary__wrapper {
    max-width: 1336px;
}
.visionary__thumb__box {
    max-width: 480px;
    width: 100%;
    height: auto;
    margin-top: -48px;
}
/* =============================== */
/* :: 8.0 Visonary Section CSS End */
/* =============================== */

/* =============================== */
/* :: 9.0 FAQs Section CSS Start */
/* =============================== */
.faqs--section {
    padding: 24px 0 16px;
}
.faqs__wrapper {
    max-width: 1172px;
}
/* =============================== */
/* :: 9.0 FAQs Section CSS End */
/* =============================== */

/* =============================== */
/* :: 10.0 Contact Section CSS Start */
/* =============================== */
.contact__wrapper {
    min-height: 368px;
}
.contact__wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}
.contact__details__link {
    color: var(--white);
}
.contact__details__link:hover {
    color: var(--primary-light);
}
/* =============================== */
/* :: 10.0 Contact Section CSS End */
/* =============================== */

/* =============================== */
/* :: 11.0 Footer Area CSS Start */
/* =============================== */
.footer--area {
    padding: 24px 0;
}
.social__link,
.nav__link--footer {
    color: var(--primary);
}
.social__link:hover,
.nav__link--footer:hover,
.site-legal__link:hover {
    color: var(--secondary);
}
.site-legal__link {
    color: var(--black);
}
.site-legal__link::after {
    content: '';
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 80%;
    background-color: var(--black);
}
.site-legal__link:last-child::after {
    display: none;
}
/* =============================== */
/* :: 11.0 Footer Area CSS End */
/* =============================== */

/* =============================== */
/* :: 12.0 Legal Page CSS Start */
/* =============================== */
.legal-page {
    padding: 60px 0;
}
.legal-page__wrapper {
    max-width: 960px;
    margin: 0 auto;
}
.legal-page__intro {
    margin: 0 0 24px;
}
.legal-page__section {
    display: flex;
    flex-direction: column;
}
.legal-page__section:not(:first-child) {
    margin-top: 8px;
}
.legal-page__main__title {
    font-size: 26px;
}
.legal-page__title {
    font-size: 20px;
    text-decoration: underline;
    margin: 0 0 16px;
}
.legal-page__subtitle {
    font-size: 18px;
    text-decoration: underline;
    margin: 24px 0 12px;
}
.legal-page__group-title {
    font-size: 16px;
    font-weight: 700;
    text-decoration: underline;
    margin: 16px 0 12px;
}
.legal-page__text {
    margin: 0 0 12px;
}
.legal-page__text:last-child {
    margin-bottom: 0;
}
.legal-page__list {
    margin: 0 0 12px;
    padding-left: 24px;
    list-style: disc;
}
.legal-page__list li {
    margin-bottom: 6px;
}
.legal-page__list li:last-child {
    margin-bottom: 0;
}
.legal-page__link {
    color: inherit;
    text-decoration: underline;
}
.legal-page__link:hover {
    opacity: 0.8;
}
/* =============================== */
/* :: 12.0 Legal Page CSS End */
/* =============================== */