* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'expose', sans-serif;
}

a {
    display: inline-block;
    text-decoration: none;
}

.wrapper {
    overflow-x: hidden;
}

:root {
    --primary: #414651;
    --secondary-brown: #A3321F;
    --title: #080A0D;
    --black: #000000;
    --white: #FFFFFF;
}

ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

.container {
    max-width: 1440px;
    padding: 0 15px;
    margin: 0 auto;
}


p {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
    font-weight: 400;
    color: var(--primary);
    padding: 0;
    margin: 0;
}

.p-100 {
    padding: 100px 0;
}

.p-75 {
    padding: 75px 0;
}

.p-50 {
    padding: 50px 0;
}

.web-title,
.join-content-row {
    margin-bottom: 50px;
}

.web-title h6 {
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--secondary-brown);
}

.web-title h2 {
    font-size: clamp(1.375rem, 1.15rem + 1.125vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--title);
}

.btn {
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    padding: 11px 18px;
    height: 40px;
    border: 1px solid var(--primary);
    transition: all 0.5s ease-in-out;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: max-content;
}

.btn-outline-primary {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}

.btn-outline-primary:hover {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

.btn-primary {
    background: linear-gradient(90deg, #22434E 0%, #396777 100%);
    color: var(--white);
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.dark-btn:hover {
    background: transparent;
    color: white;
    border-color: var(--white);

}

/* Navigation Styles */
.header {
    background: transparent;
    padding: 20px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.navbar {
    background: rgba(0, 0, 0, 0.3);
    /* backdrop-filter: blur(20px); */
    /* -webkit-backdrop-filter: blur(20px); */
    border-radius: 30px;
    padding: 15px 30px;
    width: 100%;
    border: 0.75px solid rgba(255, 255, 255, 0.1);
}


.navbar-brand img {
    width: 100px;
    height: 47px;
}

.navbar-nav {
    gap: 20px;
}

.header .navbar-nav .nav-link {
    color: var(--white);
    font-size: 14px;
    font-weight: 400;
    transition: all 0.5s ease-in-out;
    padding: 0;
}

.navbar-nav .nav-link:hover {
    color: var(--white) !important;
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-cta .btn {
    font-size: 12px;
}

button.navbar-toggler {
    background-color: var(--white);
    padding: 10px 18px;
}

button.navbar-toggler i {
    color: var(--primary);
    font-size: 20px;
}

.header .offcanvas {
    background: linear-gradient(90deg, #22434E 0%, #396777 100%);
}

.header .btn-close {
    --bs-btn-close-bg: unset;
    opacity: 1;
}

.header .btn-close {
    color: var(--primary);
    font-size: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-cta-container .btn svg path {
    transition: all 0.5s ease-in-out;
}

.hero-cta-container .btn:nth-child(2):hover svg path {
    fill: var(--primary);
}


/* Hero Section */
.hero-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    aspect-ratio: 1439 / 675;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/banner-img.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.hero-content h1 {
    font-size: clamp(1.625rem, 1.325rem + 1.5vw, 3.125rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 24px;
}

.hero-content p {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    font-weight: 400;
    color: var(--white);
    margin-bottom: 0px;
}

.community-badge {
    display: inline-block;
    background: #A3321F80;
    backdrop-filter: blur(18.512134552001953px);
    -webkit-backdrop-filter: blur(18.512134552001953px);
    color: var(--white);
    padding: 5px 18px;
    border-radius: 7px;
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    font-weight: 400;
    margin-top: 20px;
}

.hero-cta-container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 100px;
    padding: 0 3%;
}

.hero-cta-container .btn span {flex: 1 1 100%;text-align: left;padding-left: 25px;gap: 0 !important; font-style: italic;}

.hero-cta-container .btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    height: auto;
}

/* About Section */
.about-section {
    background: var(--white);
}

.about-content p,
.about-mission h3 {
    max-width: 1110px;
    margin: 0 auto;
}

.about-mission h3 {
    font-size: clamp(1.125rem, 0.95rem + 0.875vw, 2rem);
    font-weight: 500;
    color: var(--title);
    margin-bottom: 50px;
}

/* About Cards */
.about-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.about-card-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 475/389;
    object-fit: cover;
}

.about-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    display: flex;
    align-items: flex-end;
    max-width: 450px;
}

.about-card-content h4 {
    color: var(--white);
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
    font-weight: 700;
}

/* About Footer */
.about-footer {
    background: #FDF4F2;
    border-radius: 16px;
    padding: 16px 22px;
    text-align: center;
    max-width: 1157px;
    margin: 0 auto;
    margin-top: 24px;
}

.about-footer-text,
.feed-goal {
    color: var(--primary);
    font-size: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
    font-weight: 400;
    margin: 0;
}

.about-footer-text strong {
    font-weight: 700;
    color: var(--primary);
}


/* Feed Others First Section */
.feed-section {
    background: var(--white);
}

.feed-content {
    position: relative;
    z-index: 9999;
}

.map-container {
    position: relative;
    margin-top: -130px;
}

.map-container::before {
    position: absolute;
    top: 0;
    background: linear-gradient(180deg, #FFFFFF 3.67%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 300px;
    content: "";
    pointer-events: none;
}

.map-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1380 / 490;
    object-fit: cover;
    border-radius: 16px;
}

.feed-goal {
    font-weight: 700;
    margin: 30px 0px;
}

/* For Businesses Section */
.businesses-section {
    background: var(--white);
}

/* Plan Items */
.plan-item {
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.plan-title {
    color: var(--secondary-brown);
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
    font-weight: 700;
}

.plan-description {
    font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
    max-width: 638px;
}

.btn-business-cta {
    margin-top: 40px;
}


/* Laptop Mockup */

.laptop-image {
    aspect-ratio: 720 / 624;
    object-fit: contain;
    width: 100%;
    height: auto;
}

/* * Why Join Section */
.why-join-section {
    background: var(--white);
}

/* Feature Cards */
.feature-card {
    background: #FAFAFA;
    border-radius: 16px;
    padding: 30px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    transition: all 0.5s ease-in-out;
    border: 1px solid #E9EAEB;
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.feature-icon svg {
    width: 46px;
    height: 46px;
}

.feature-title {
    color: var(--title);
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
    font-weight: 700;
}

.feature-description {
    max-width: 310px;
}

.why-join-disclaimer {
    color: #717680;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
    margin-bottom: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
}

/* For Diners Section */

/* Mockup Container */
.diners-mockup-container {
    position: relative;
}

.phone-mockup {
    position: relative;
    z-index: 2;
    max-width: 315px;
    height: auto;
    margin: 0 auto;
}

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

/* Feature Callouts */
.diners-mockup-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 794px;
    z-index: -1;
}

.feature-callout {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border-radius: 16px;
    max-width: 100%;
    z-index: 3;
    border: 1px solid;
    transition: all 0.5s ease;
    cursor: pointer;
}

.feature-callout:hover {
    transform: translateY(-4px);
}

.callout-icon {
    flex-shrink: 0;
}

.callout-text {
    color: var(--title);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

/* Callout Positions */
.callout-1 {
    top: 90px;
    left: 210px;
    width: 400px;
}

.callout-2 {
    bottom: 200px;
    left: 215px;
    width: 350px;
}

.callout-3 {
    top: 200px;
    right: 115px;
    width: 460px;
}

.callout-4 {
    bottom: 70px;
    right: 165px;
    width: 411px;
}

/* Launch Offer */
.launch-offer {
    background-color: #F8FBFC;
    padding: 30px;
    border-radius: 16px;
    margin-top: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);
}

.launch-offer-icon img {
    width: 41px;
    height: auto;
}

.launch-offer-icon h4 {
    color: var(--title);
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
    font-weight: 700;
}

.launch-description {
    margin-top: clamp(0.625rem, 0.55rem + 0.375vw, 1rem);
    margin-bottom: clamp(1rem, 0.825rem + 0.875vw, 1.875rem);
}

/* Food Trails Section */
.food-trails-section {
    background: var(--white);
}

.completion-icon img {
    width: 24px;
    height: 24px;
}

.completion-instruction-title {
    font-size: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
    font-weight: 700;
    color: var(--title);
}

.trails-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 30PX;
    margin-bottom: 40px;
}

.trails-benefit-item svg {
    margin-top: 8px;
}

.trails-benefit-item {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
    color: var(--title);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* VIP Black Card Section */
.vip-section {
    background: var(--white);
}

/* VIP Card Container */
.vip-card-container {
    position: relative;
}

.vip-card-main {
    position: relative;
    z-index: 2;
    max-width: 578px;
    height: auto;
    margin: 0 auto;
}

.vip-card-image {
    width: 100%;
    height: auto;
}

/* VIP Callouts */
.vip-callout {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #F4F4F6;
    padding: 16px;
    border-radius: 16px;
    max-width: 100%;
    z-index: 3;
    border: 1px solid #DEDEDE;
    transition: all 0.5s ease;
    cursor: pointer;
}

.vip-callout:hover {
    transform: translateY(-4px);
}

.vip-callout-icon {
    flex-shrink: 0;
}

.vip-callout-text {
    color: var(--title);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

/* VIP Callout Positions */
.vip-callout-1 {
    top: 120px;
    left: 150px;
}

.vip-callout-2 {
    top: 120px;
    right: 170px;
    max-width: 398px;
}

.vip-callout-3 {
    bottom: 75px;
    left: 90px;
}

.vip-callout-4 {
    bottom: 50px;
    right: 120px;
    max-width: 404px;
}

.btn-vip-cta {
    margin-top: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);
}

.btn-vip-cta .btn {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-vip-cta .btn:hover {
    background: linear-gradient(90deg, #22434E 0%, #396777 100%);
    color: var(--white);
}

/* Join Our Team Section */
.join-team-section {
    position: relative;
    background-image: url('../images/join-team-bg.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.join-team-content h6,
.join-team-content h2,
.join-team-content p {
    color: var(--white);
}

/* Team Role Cards */
.team-role-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
}

.team-role-image {
    aspect-ratio: 276 / 276;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-role-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 24px 24px;
    display: flex;
    align-items: flex-end;
}

.team-role-title {
    color: var(--white);
    font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
    font-weight: 700;
    line-height: 1.4;
}

.join-team-footer {
    color: var(--white);
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
    font-weight: 500;
    line-height: 1.4;
    margin-top: clamp(1.125rem, 0.9rem + 1.125vw, 2.25rem);
}


/* Added FAQ Section Styles */
/* FAQ Section */
.faq-section {
    background: var(--white);
}

.faq-icon {
    flex-shrink: 0;
}

.faq-category {
    margin-bottom: 48px;
}

.faq-category:last-child {
    margin-bottom: 0;
}

.faq-category-title {
    color: var(--primary);
    font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
    font-weight: 700;
    margin-bottom: 16px;
}

/* Custom Accordion Styles */
.faq-section .accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-bg: transparent;
}

.faq-section .accordion-item {
    background: #F8FBFC;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 0;
}

.faq-section .accordion-item:first-of-type {
    border-radius: 12px;
}

.faq-section .accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-header {
    margin-bottom: 0;
}

.accordion-button {
    background: transparent;
    color: var(--primary);
    font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
    font-weight: 500;
    padding: 24px 16px;
    border: none;
    box-shadow: none;
    position: relative;
}

.accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--primary);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-button::after {
    content: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6953 4.89868V24.4932" stroke="%232B5462" stroke-width="1.83698" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.89844 14.6958H24.4929" stroke="%232B5462" stroke-width="1.83698" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-image: none;
    width: 30px;
    height: 30px;
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
    content: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.7454 14.8472L4.94922 14.8472" stroke="%23A3321F" stroke-width="1.8559" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transform: rotate(0deg);
}

.accordion-body {
    padding: 0 24px 24px 16px;
    color: var(--primary);
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    font-weight: 400;
    line-height: 1.7;
}

/* App Download Section */
.app-download-section {
    background-repeat: no-repeat;
    background-position: left center;
    aspect-ratio: 1440 / 492;
    position: relative;
    background-size: contain;
}

.app-download-content {
    padding-top: 80px;
}

.app-download-section::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-40%);
    left: 0;
    width: 100%;
    height: 75%;
    background-color: #F5F5F5;
    z-index: -1;
    border-radius: 18px;
}

.app-download-title {
    font-size: clamp(1.625rem, 1.3rem + 1.625vw, 3.25rem);
    font-weight: 700;
    color: var(--title);
}

.app-download-title span {
    color: var(--secondary-brown);
}

.app-download-description {
    font-size: clamp(0.875rem, 0.775rem + 0.5vw, 1.375rem);
    margin: clamp(1rem, 0.825rem + 0.875vw, 1.875rem) 0;
    max-width: 600px;
}

/* Footer Section */
.footer-section {
    background: #FAFAFA;
    padding: 66px 0 0;
    margin-top: 50px;
}

.footer-logo-image {
    width: 131px;
    height: auto;
}

.footer-tagline {
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    font-weight: 400;
    color: var(--primary);
    line-height: 1.6;
    max-width: 270px;
    margin-top: 30px;
}


.footer-title {
    font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
}

.footer-links,
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a,
.footer-contact li span a {
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    font-weight: 400;
    color: var(--title);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #A3321F;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    font-weight: 400;
    color: var(--title);
}


.footer-social {
    display: flex;
    gap: 16px;
}


.footer-divider {
    border: none;
    border-top: 1px solid #080A0D;
    margin: 0;
    margin-top: 85px;
}

.footer-copyright,
.footer-copyright a {
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    font-weight: 400;
    color: var(--primary);
    padding: 20px 0;
}