/*
Theme Name: Astra Child
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: Custom child theme for Astra
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* ============================================
   VARIABLES
   ============================================ */
:root {
    --color-primary: #1a5276;
    --color-secondary: #2e86c1;
    --color-text: #2c3e50;
    --color-gold: #f5d88d;
    --color-brown: #463206;
    --color-white: #ffffff;
    --font-body: 'Roboto', Arial, sans-serif;
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   REMOVE ASTRA SPACING
   ============================================ */
.site-content,
.ast-container,
#primary,
.site-main,
.ast-page-builder-template .site-content,
.ast-single-post .site-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.button--primary {
    background: var(--color-primary);
    color: white;
}

.button--primary:hover {
    background: var(--color-secondary);
    transform: translateY(-2px);
}

.button--secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.button--secondary:hover {
    background: white;
    color: var(--color-primary);
}
/* ============================================
   HEADER - COMPLETE STYLES
   ============================================ */

.site-header {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

.header__top-bar {
    background: #463206;
    padding: 10px 40px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
}

.header__top-bar-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.header__top-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header__social-icon {
    color: #FFFFFF !important;
    font-size: 16px;
    transition: color 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header__social-icon:hover {
    color: #F5D88D !important;
}

.header__top-bar-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header__top-bar-center .custom-logo {
    max-height: 50px;
    width: auto;
    display: block;
}

.header__logo-text {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: center;
}

.header__logo-line1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 1px;
}

.header__logo-line2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 1px;
}

.header__logo-line3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #F5D88D;
    letter-spacing: 1px;
}

.header__top-bar-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header__search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    transition: all 0.3s ease;
}

.header__search-icon {
    color: #FFFFFF;
    font-size: 14px;
}

.header__search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 4px 0;
    width: 120px;
}

.header__search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.header__menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
    background: none;
    border: none;
    align-items: center;
    justify-content: center;
}

.header__menu-toggle span {
    width: 28px;
    height: 3px;
    background: #FFFFFF;
    transition: all 0.3s ease;
    display: block;
    border-radius: 3px;
}

.header__menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.header__menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.header__menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.header__nav-bar {
    background: #8A794C;
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 999;
}

.header__nav-bar-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.header__nav {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.header__menu {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.header__menu li {
    margin: 0;
    padding: 0;
}

.header__menu a {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF !important;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 12px 0;
    position: relative;
    display: inline-block;
}

.header__menu a:hover {
    color: #F5D88D !important;
}

.header__menu .current-menu-item a,
.header__menu .current-page-ancestor a {
    color: #F5D88D !important;
}

.header__menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #F5D88D;
    transition: width 0.3s ease;
}

.header__menu a:hover::after {
    width: 100%;
}

.header__menu .current-menu-item a::after {
    width: 100%;
}

/* ============================================
   RESPONSIVE - HEADER
   ============================================ */

@media (max-width: 992px) {
    .header__top-bar {
        padding: 10px 20px;
    }
    .header__top-bar-container {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 15px;
    }
    .header__top-bar-left {
        gap: 15px;
    }
    .header__top-bar-right {
        justify-content: flex-end;
    }
    .header__search-input {
        width: 80px;
    }
    .header__nav-bar {
        padding: 0 20px;
    }
    .header__menu-toggle {
        display: flex;
    }
    .header__nav {
        justify-content: flex-end;
    }
    .header__top-bar-center .custom-logo {
        max-height: 40px;
    }
    .header__logo-line1,
    .header__logo-line2,
    .header__logo-line3 {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .header__top-bar {
        padding: 8px 15px;
    }
    .header__top-bar-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        align-items: center;
        gap: 10px;
        width: 100%;
    }
    .header__top-bar-left {
        gap: 10px;
        justify-content: flex-start;
        grid-column: 1 / 2;
    }
    .header__social-icon {
        font-size: 14px;
    }
    .header__top-bar-center {
        grid-column: 2 / 3;
        justify-content: center;
    }
    .header__top-bar-center .custom-logo {
        max-height: 35px;
    }
    .header__logo-line1,
    .header__logo-line2,
    .header__logo-line3 {
        font-size: 11px;
    }
    .header__top-bar-right {
        display: none !important;
        grid-column: 3 / 4;
        justify-content: flex-end;
    }
    .header__search-box {
        display: none !important;
    }
    .header__menu-toggle {
        display: flex !important;
        grid-column: 3 / 4;
        justify-content: flex-end;
        align-items: center;
        padding: 5px;
        margin: 0;
    }
    .header__menu-toggle span {
        background: #FFFFFF;
        width: 25px;
        height: 3px;
    }
    .header__menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .header__menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .header__menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    .header__nav-bar {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #8A794C;
        padding: 0;
        width: 100%;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        z-index: 999;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .header__nav-bar.open {
        max-height: 500px;
    }
    .header__nav-bar-container {
        padding: 0;
    }
    .header__nav {
        justify-content: flex-start;
        padding: 0;
    }
    .header__menu {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 10px 0;
    }
    .header__menu li {
        width: 100%;
    }
    .header__menu a {
        display: block;
        padding: 12px 25px;
        text-align: left;
        font-size: 14px;
        color: #FFFFFF !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .header__menu a:hover {
        color: #F5D88D !important;
    }
    .header__menu a::after {
        display: none;
    }
}

@media (max-width: 400px) {
    .header__top-bar {
        padding: 6px 12px;
    }
    .header__top-bar-container {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 6px;
    }
    .header__top-bar-left {
        gap: 6px;
    }
    .header__social-icon {
        font-size: 12px;
    }
    .header__top-bar-center .custom-logo {
        max-height: 40px;
    }
    .header__logo-line1,
    .header__logo-line2,
    .header__logo-line3 {
        font-size: 10px;
    }
    .header__menu-toggle span {
        width: 22px;
        height: 2px;
    }
    .header__nav-bar {
        top: 100%;
    }
    .header__menu a {
        font-size: 13px;
        padding: 10px 20px;
    }
}
/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background: #161616;
    padding: 60px 40px 50px;
    width: 100%;
    box-sizing: border-box;
}

.footer__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.footer__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    width: 100%;
}

.footer__heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 25px;
    color: #FFFFFF;
    margin: 0 0 20px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

/* Column 1 - Quick Links */
.footer__col--menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__menu {
    display: flex;
    flex-direction: column;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer__menu li {
    margin: 0;
    padding: 0;
}

.footer__menu a {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF !important;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 2px 0;
    opacity: 0.85;
}

.footer__menu a:hover {
    color: #F5D88D !important;
    opacity: 1;
}

/* Column 2 - Contact Info */
.footer__col--contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__contact-content {
    color: #FFFFFF;
}

.footer__practice-name {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    margin: 0 0 12px;
    line-height: 1.4;
}

.footer__address {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    margin: 0 0 12px;
    line-height: 1.6;
    opacity: 0.85;
}

.footer__phone {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin: 0 0 8px;
}

.footer__phone a {
    color: #FFFFFF !important;
    text-decoration: none;
    transition: color 0.3s ease;
    opacity: 0.85;
}

.footer__phone a:hover {
    color: #FFFFFF !important;
    opacity: 1;
}

.footer__email {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin: 0 0 15px;
}

.footer__email a {
    color: #FFFFFF !important;
    text-decoration: none;
    transition: color 0.3s ease;
    opacity: 0.85;
}

.footer__email a:hover {
    color: #FFFFFF !important;
    opacity: 1;
}

/* Social Icons - Same as your working old footer */
.footer__social {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    align-items: center;
}

.footer__social-icon {
    color: #FFFFFF !important;
    font-size: 20px;
    transition: color 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer__social-icon:hover {
    color: #F5D88D !important;
}

/* Column 3 - Hours */
.footer__col--hours {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__hours-content {
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
}

.footer__hours-content p {
    margin: 0;
    padding: 2px 0;
    opacity: 0.85;
}

.footer__hours-content p:hover {
    opacity: 1;
}

.footer__day {
    font-weight: 500;
    color: #FFFFFF;
    min-width: 40px;
    display: inline-block;
}

.footer__time {
    font-weight: 400;
    color: #FFFFFF;
}

/* ============================================
   RESPONSIVE - FOOTER
   ============================================ */

@media (max-width: 992px) {
    .site-footer {
        padding: 50px 30px 40px;
    }
    .footer__row {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .footer__col--menu {
        align-items: flex-start;
    }
    .footer__col--contact {
        align-items: flex-start;
    }
    .footer__col--hours {
        align-items: flex-start;
    }
    .footer__social {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 40px 20px 30px;
    }
    .footer__row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer__col--menu {
        align-items: center;
        text-align: center;
    }
    .footer__col--contact {
        align-items: center;
        text-align: center;
    }
    .footer__col--hours {
        align-items: center;
        text-align: center;
    }
    .footer__menu {
        align-items: center;
    }
    .footer__heading {
        text-align: center;
        width: 100%;
    }
    .footer__contact-content {
        text-align: center;
    }
    .footer__hours-content {
        text-align: center;
    }
    .footer__day {
        min-width: auto;
    }
    .footer__social {
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .site-footer {
        padding: 30px 15px 25px;
    }
    .footer__row {
        gap: 25px;
    }
    .footer__heading {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .footer__menu a {
        font-size: 14px;
    }
    .footer__practice-name {
        font-size: 15px;
    }
    .footer__address {
        font-size: 14px;
    }
    .footer__phone {
        font-size: 14px;
    }
    .footer__email {
        font-size: 14px;
    }
    .footer__hours-content {
        font-size: 14px;
    }
    .footer__social-icon {
        font-size: 18px;
    }
    .footer__social {
        gap: 15px;
    }
}
/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    width: 100%;
    min-height: 100vh;
    background-image: url('/wp-content/uploads/2026/07/hero-section-background.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 70px !important;
    padding-right: 100px !important;
    padding-bottom: 0 !important;
    padding-left: 100px !important;
    color: var(--color-white);
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding-top: 20px;
    position: relative;
    z-index: 1;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 10px;
    position: relative;
    z-index: 1;
}

.hero__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 60px;
    line-height: 1.1;
    letter-spacing: -2px;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    padding-top: 10px;
}

.hero__description {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-white);
    max-width: 700px;
    margin: 0;
}

.hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 256px;
    height: 50px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.hero__button .button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.hero__button:hover .button-icon {
    transform: translateX(4px);
}

/* ============================================
   HERO IMAGE SUB-SECTION
   ============================================ */

.hero__image-subsection {
    width: 100%;
    margin-top: 50px;
    padding: 0;
    position: relative;
    z-index: 1;
}

.hero__image-subcontainer {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 0;
}

.hero__image-left {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 150px;
    padding-right: 20px;
    justify-content: center;
}

.hero__image-center {
    grid-column: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.hero__image-right {
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
    min-height: 100%;
}

.hero__image-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero__image {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   HERO COUNTERS
   ============================================ */

.hero__counter {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 190px;
    height: 55px;
    padding: 16px 24px 19px 24px;
    background: #D9D9D959;
    border: 2px solid transparent;
    border-radius: 48.5px;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-clip: padding-box;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.hero__counter::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 48.5px;
    padding: 2px;
    background: linear-gradient(137.21deg, #FFFFFF -29.95%, rgba(255, 255, 255, 0.2) 175.82%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.hero__counter > * {
    position: relative;
    z-index: 1;
}

.hero__counter:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}

.hero__counter-number {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 23px;
    line-height: 40px;
    letter-spacing: -3%;
    background: linear-gradient(90deg, #BEAE82 0%, #BEAE82 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
}

.hero__counter-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 4%;
    text-align: left;
    background: linear-gradient(90deg, #BEAE82 0%, #BEAE82 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   RESPONSIVE - HERO
   ============================================ */

@media (max-width: 1200px) {
    .hero {
        padding-top: 70px !important;
        padding-right: 60px !important;
        padding-left: 60px !important;
    }
    .hero__image-subcontainer {
        grid-template-columns: 20% 60% 20%;
    }
    .hero__image-left {
        gap: 100px;
    }
}

@media (max-width: 992px) {
    .hero {
        padding-top: 60px !important;
        padding-right: 40px !important;
        padding-left: 40px !important;
        min-height: 80vh;
    }
    .hero__image-subcontainer {
        grid-template-columns: 10% 80% 10%;
    }
    .hero__title {
        font-size: 48px;
        line-height: 56px;
    }
    .hero__image-wrapper {
        max-width: 400px;
    }
    .hero__counter {
        width: 200px;
        height: 68px;
        padding: 14px 20px 16px 20px;
        border-radius: 40px;
    }
    .hero__counter::before {
        border-radius: 40px;
    }
    .hero__counter-number {
        font-size: 28px;
        line-height: 36px;
    }
    .hero__counter-label {
        font-size: 16px;
        line-height: 17px;
    }
    .hero__image-left {
        gap: 80px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-top: 50px !important;
        padding-right: 30px !important;
        padding-left: 30px !important;
        min-height: 70vh;
    }
    .hero__image-subcontainer {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .hero__image-left {
        grid-column: 1 / 2;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 30px;
        padding-right: 0;
    }
    .hero__image-center {
        grid-column: 1 / 2;
        padding: 0;
    }
    .hero__image-right {
        grid-column: 1 / 2;
        justify-content: center;
        padding-left: 0;
    }
    .hero__title {
        font-size: 40px;
        line-height: 48px;
    }
    .hero__image-wrapper {
        max-width: 350px;
    }
    .hero__counter {
        width: 180px;
        height: 60px;
        padding: 12px 16px 14px 16px;
        border-radius: 35px;
        gap: 12px;
    }
    .hero__counter::before {
        border-radius: 35px;
    }
    .hero__counter-number {
        font-size: 24px;
        line-height: 30px;
    }
    .hero__counter-label {
        font-size: 14px;
        line-height: 15px;
    }
    .hero__image-subsection {
        margin-top: 30px;
    }
}

@media (max-width: 576px) {
    .hero {
        padding-top: 40px !important;
        padding-right: 16px !important;
        padding-left: 16px !important;
        min-height: 100vh;
    }
    .hero__title {
        font-size: 40px;
        line-height: 45px;
    }
    .hero__description {
        font-size: 15px;
        line-height: 20px;
    }
    .hero__image-wrapper {
        max-width: 280px;
    }
    .hero__image-left {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .hero__image-right {
        justify-content: center;
    }
    .hero__counter {
        width: 100%;
        max-width: 225px;
        height: 55px;
        padding: 10px 14px 12px 14px;
        border-radius: 30px;
        gap: 10px;
        justify-content: center;
    }
    .hero__counter::before {
        border-radius: 30px;
    }
    .hero__counter-number {
        font-size: 22px;
        line-height: 28px;
        letter-spacing: -2%;
    }
    .hero__counter-label {
        font-size: 13px;
        line-height: 14px;
        letter-spacing: 3%;
    }
    .hero__button {
        width: 100%;
        max-width: 280px;
        height: 48px;
        font-size: 0.85rem;
    }
    .hero__image-subsection {
        margin-top: 20px;
    }
}

@media (max-width: 400px) {
    .hero {
        padding-top: 30px !important;
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
    .hero__title {
        font-size: 40px;
        line-height: 43px;
    }
    .hero__description {
        font-size: 15px;
        line-height: 20px;
    }
    .hero__image-wrapper {
        max-width: 220px;
    }
    .hero__counter {
        max-width: 100%;
        height: 50px;
        padding: 8px 12px 10px 12px;
        border-radius: 25px;
        gap: 8px;
    }
    .hero__counter::before {
        border-radius: 25px;
    }
    .hero__counter-number {
        font-size: 20px;
        line-height: 26px;
    }
    .hero__counter-label {
        font-size: 12px;
        line-height: 13px;
    }
    .hero__button {
        height: 44px;
        font-size: 0.8rem;
        max-width: 100%;
    }
}

/* ============================================
   SERVICES SECTION
   ============================================ */

.services {
    padding: 0px 40px;
    padding-bottom: 90px;
    background: #000000;
    width: 100%;
}

.services__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.services__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.services__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 49px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 10px;
}

.services__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--color-white);
    margin: 0;
}

.services__boxes-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: 100%;
}

.services__box {
    background: linear-gradient(180deg, rgba(190, 174, 130, 0.28) 0%, rgba(88, 81, 60, 0.28) 100%);
    border: 2.62px solid transparent;
    background-clip: padding-box;
    border-radius: 26.4px;
    padding: 35px 30px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    position: relative;
    transition: all 0.3s ease;
}

.services__box::before {
    content: '';
    position: absolute;
    inset: -2.62px;
    border-radius: 26.4px;
    padding: 2.62px;
    background: linear-gradient(137.21deg, #8A794C -29.95%, #463206 175.82%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.services__box > * {
    position: relative;
    z-index: 1;
}

.services__box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.services__box-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.services__box-icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    display: block;
}

.services__box h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 15.76px;
    line-height: 33px;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
}

/* ============================================
   RESPONSIVE - SERVICES
   ============================================ */

@media (max-width: 992px) {
    .services {
        padding: 60px 30px;
    }
    .services__boxes-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .services__box {
        min-height: 180px;
        padding: 25px 20px;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 40px 20px;
    }
    .services__title {
        font-size: 36px;
        line-height: 48px;
    }
    .services__description {
        font-size: 15px;
    }
    .services__boxes-row {
        gap: 16px;
    }
    .services__box {
        min-height: 160px;
        padding: 20px 16px;
        border-radius: 20px;
    }
    .services__box::before {
        border-radius: 20px;
        inset: -2px;
        padding: 2px;
    }
    .services__box-icon {
        width: 60px;
        height: 60px;
    }
    .services__box-icon img {
        width: 30px;
        height: 30px;
    }
    .services__box h3 {
        font-size: 18px;
        line-height: 26px;
    }
}

@media (max-width: 576px) {
    .services {
        padding: 50px 20px;
    }
    .services__title {
        font-size: 28px;
        line-height: 34px;
    }
    .services__description {
        font-size: 15px;
        line-height: 20px;
    }
    .services__boxes-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .services__box {
        min-height: 140px;
        padding: 16px 12px;
        border-radius: 16px;
    }
    .services__box::before {
        border-radius: 16px;
        inset: -1.5px;
        padding: 1.5px;
    }
    .services__box-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 15px;
    }
    .services__box-icon img {
        width: 30px;
        height: 30px;
    }
    .services__box h3 {
        font-size: 17px;
        line-height: 22px;
    }
}
/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

.testimonials {
    padding: 80px 40px;
    background: #000000;
    width: 100%;
    box-sizing: border-box;
}

.testimonials__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.testimonials__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.testimonials__left {
    width: 100%;
    box-sizing: border-box;
}

.testimonials__left-inner {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonials__left-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    z-index: 0;
}

.testimonials__bg-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 16px;
}

.testimonials__left-overlay {
    position: relative;
    z-index: 1;
    padding: 30px 25px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    background: transparent;
}

.testimonials__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.testimonials__card {
    background: rgba(255, 255, 255, 0.95);
    padding: 18px 22px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 16px;
    width: 410px;
    max-width: 100%;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.testimonials__card:nth-child(odd) {
    align-self: flex-start;
    margin-right: auto;
}

.testimonials__card:nth-child(even) {
    align-self: flex-end;
    margin-left: auto;
}

.testimonials__card:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 1);
}

.testimonials__card:nth-child(even):hover {
    transform: translateX(-5px);
}

.testimonials__client-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.testimonials__client-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.testimonials__client-image--placeholder {
    background: linear-gradient(135deg, #463206, #8A794C);
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonials__client-image--placeholder span {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #ffffff;
}

.testimonials__card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.testimonials__client-name {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #2d2208;
    margin: 0 0 3px;
}

.testimonials__review {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 17px;
    color: #555555;
    margin: 0;
}

.testimonials__right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: flex-start;
    min-height: 100%;
    height: 100%;
}

.testimonials__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 82px;
    letter-spacing: -2px;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .testimonials__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.testimonials__right-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
}

.testimonials__right-text p {
    margin: 0;
}

.testimonials__features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.testimonials__feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
}

.testimonials__feature-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.testimonials__feature-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

.testimonials__feature-content {
    flex: 1;
}

.testimonials__feature-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 4px;
}

@supports not (background-clip: text) {
    .testimonials__feature-heading {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.testimonials__feature-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #FFFFFF;
    margin: 0;
}

/* ============================================
   RESPONSIVE - TESTIMONIALS
   ============================================ */

@media (max-width: 1200px) {
    .testimonials__title {
        font-size: 48px;
        line-height: 62px;
    }
}

@media (max-width: 992px) {
    .testimonials {
        padding: 60px 30px;
    }
    .testimonials__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .testimonials__right {
        order: 1;
    }
    .testimonials__left {
        order: 2;
    }
    
    .testimonials__title {
        font-size: 42px;
        line-height: 56px;
    }
    .testimonials__left-inner {
        min-height: 400px;
    }
    .testimonials__left-overlay {
        min-height: 400px;
        padding: 25px 20px;
    }
    .testimonials__left-bg {
        width: 60%;
        height: 60%;
    }
}

@media (max-width: 768px) {
    .testimonials {
        padding: 40px 20px;
    }
    .testimonials__title {
        font-size: 36px;
        line-height: 48px;
        letter-spacing: -1px;
    }
    .testimonials__left-inner {
        min-height: 350px;
    }
    .testimonials__left-overlay {
        min-height: 350px;
        padding: 20px 16px;
    }
    .testimonials__left-bg {
        width: 50%;
        height: 50%;
    }
    .testimonials__card {
        width: 280px;
        padding: 14px 16px;
        gap: 12px;
    }
    .testimonials__client-image {
        width: 42px;
        height: 42px;
    }
    .testimonials__client-name {
        font-size: 14px;
    }
    .testimonials__review {
        font-size: 12px;
        line-height: 18px;
    }
    .testimonials__right-text {
        font-size: 15px;
        line-height: 24px;
    }
    .testimonials__feature-heading {
        font-size: 17px;
        line-height: 24px;
    }
    .testimonials__feature-description {
        font-size: 14px;
        line-height: 22px;
    }
}

@media (max-width: 576px) {
    .testimonials {
        padding: 50px 20px;
    }
    .testimonials__layout {
        gap: 30px;
    }
    .testimonials__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .testimonials__left-inner {
        min-height: 300px;
    }
    .testimonials__left-overlay {
        min-height: 300px;
        padding: 16px 12px;
    }
    .testimonials__left-bg {
        width: 40%;
        height: 40%;
    }
    .testimonials__list {
        gap: 12px;
    }
    .testimonials__card {
        width: 100%;
        max-width: 300px;
        padding: 12px 14px;
        gap: 10px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .testimonials__card:nth-child(odd),
    .testimonials__card:nth-child(even) {
        align-self: center;
        margin: 0 auto;
    }
    .testimonials__card:nth-child(even):hover {
        transform: translateY(-3px);
    }
    .testimonials__client-image {
        width: 45px;
        height: 45px;
        margin: 0 auto;
    }
    .testimonials__client-name {
        font-size: 14px;
    }
    .testimonials__review {
        font-size: 12px;
        line-height: 18px;
    }
    .testimonials__right-text {
        font-size: 15px;
        line-height: 20px;
    }
    .testimonials__feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .testimonials__feature-icon {
        width: 40px;
        height: 40px;
    }
    .testimonials__feature-icon img {
        width: 40px;
        height: 40px;
    }
    .testimonials__feature-heading {
        font-size: 17px;
        line-height: 22px;
    }
    .testimonials__feature-description {
        font-size: 15px;
        line-height: 20px;
    }
    
   
    .testimonials__left-bg {
        display: none !important;
    }
}
/* ============================================
   TESTIMONIALS - BUTTON
   ============================================ */

.testimonials__button-wrapper {
    margin-top: 20px;
    width: 100%;
}

.testimonials__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 256px;
    height: 50px;
    padding: 12px 24px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.testimonials__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.testimonials__button .testimonials__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.testimonials__button:hover .testimonials__button-icon {
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE - BUTTON
   ============================================ */

@media (max-width: 768px) {
    .testimonials__button {
        width: 100%;
        justify-content: center;
        height: 45px;
        font-size: 13px;
        padding: 10px 20px;
    }
}

@media (max-width: 576px) {
    .testimonials__button-wrapper {
        margin-top: 15px;
    }
    .testimonials__button {
        height: 40px;
        font-size: 12px;
        padding: 8px 16px;
        border-radius: 35px;
        gap: 8px;
    }
    .testimonials__button .testimonials__button-icon {
        font-size: 0.9rem;
    }
}
/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
    padding: 80px 40px;
    background: #161616;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.cta-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.cta-section__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.cta-section__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.cta-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 55px;
    letter-spacing: -2px;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .cta-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.cta-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #8A794C;
    margin: 0;
    max-width: 500px;
}

.cta-section__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 168px;
    height: 56px;
    padding: 12px 24px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.cta-section__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.cta-section__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.cta-section__button:hover .cta-section__button-icon {
    transform: translateX(4px);
}

.cta-section__button:focus {
    outline: none;
}

.cta-section__button:active {
    transform: scale(0.97);
}

.cta-section__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.cta-section__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    
    margin-left: auto;
}

.cta-section__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - CTA SECTION
   ============================================ */

@media (max-width: 992px) {
    .cta-section {
        padding: 60px 30px;
        min-height: auto;
    }
    .cta-section__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cta-section__title {
        font-size: 48px;
        line-height: 62px;
    }
    .cta-section__description {
        max-width: 100%;
    }
    .cta-section__image-wrapper {
        max-width: 100%;
        max-height: 400px;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .cta-section {
        padding: 50px 20px;
    }
    .cta-section__title {
        font-size: 36px;
        line-height: 48px;
        letter-spacing: -1px;
    }
    .cta-section__description {
        font-size: 15px;
        line-height: 22px;
    }
    .cta-section__button {
        width: 100%;
        max-width: 200px;
        height: 50px;
        font-size: 0.85rem;
    }
    
    
    
    .cta-section__image-wrapper {
        max-width: 100%;
        max-height: 300px;
        object-fit: cover;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .cta-section {
        padding: 50px 20px;
    }
    .cta-section__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .cta-section__description {
        font-size: 15px;
        line-height: 20px;
        color: #8A794C;
    }
    .cta-section__button {
        width: 100%;
        max-width: 100%;
        height: 48px;
        font-size: 0.85rem;
    }
    .cta-section__image-wrapper {
        min-height: 250px;
        max-height: 300px;
    }
}
/* ============================================
   NVDI SMILE MEMBERSHIP SECTION
   ============================================ */

.nsm-section {
    width: 100%;
    height: 100px;
    background: linear-gradient(
        to bottom,
        #000000 0%,
        #000000 50%,
        #161615 50%,
        #161615 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
}

.nsm-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.nsm-section__content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.nsm-section__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 550px;
    max-width: 100%;
    height: 70px;
    padding: 0 12px;
    border-radius: 90px;
    background: linear-gradient(90deg, #463206 0%, #9E8D60 22.12%, #6C5830 48.08%, #9E8D60 82.7%, #463206 99.98%);
    border: 1px solid #BEAE82;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    box-sizing: border-box;
    gap: 20px;
}

.nsm-section__button:hover {
    background: #8A794C3D;
    border-color: #D0C093;
    transform: translateY(-3px) scale(1.01);
    box-shadow: 
        0 10px 40px rgba(70, 50, 6, 0.3),
        0 0 60px rgba(190, 174, 130, 0.1);
    padding-right: 8px;
    padding-left: 10px;
    gap: 100px;
}

.nsm-section__button-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
}

.nsm-section__button:hover .nsm-section__button-text {
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.nsm-section__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    background: linear-gradient(274.43deg, #D0C093 20.43%, #8A794C 98.65%);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: scale(0.3) translateX(30px);
    box-shadow: 0 4px 20px rgba(138, 121, 76, 0.3);
    position: absolute;
    right: 12px;
}

.nsm-section__button:hover .nsm-section__button-icon {
    opacity: 1;
    transform: scale(1) translateX(0);
    box-shadow: 0 8px 30px rgba(138, 121, 76, 0.5);
    right: 8px;
}

.nsm-section__button-icon svg {
    width: 28px;
    height: 28px;
    stroke: #FFFFFF;
    fill: none;
    transition: all 0.4s ease;
}

.nsm-section__button:hover .nsm-section__button-icon svg {
    transform: translateX(4px);
}

.nsm-section__button:active {
    transform: scale(0.97);
    box-shadow: 0 5px 20px rgba(70, 50, 6, 0.2);
}

/* ============================================
   RESPONSIVE - NSM SECTION
   ============================================ */

@media (max-width: 1200px) {
    .nsm-section__button {
        width: 85%;
        height: 120px;
        padding: 0 10px;
        gap: 15px;
    }
    .nsm-section__button:hover {
        gap: 40px;
    }
    .nsm-section__button-text {
        font-size: 26px;
    }
    .nsm-section__button-icon {
        width: 65px;
        height: 65px;
        min-width: 65px;
        right: 10px;
    }
    .nsm-section__button-icon svg {
        width: 26px;
        height: 26px;
    }
    .nsm-section__button:hover {
        padding-right: 6px;
    }
    .nsm-section__button:hover .nsm-section__button-icon {
        right: 6px;
    }
}

@media (max-width: 992px) {
    .nsm-section {
        height: 450px;
    }
    .nsm-section__button {
        width: 90%;
        height: 110px;
        padding: 0 10px;
        border-radius: 80px;
        gap: 15px;
    }
    .nsm-section__button:hover {
        gap: 35px;
    }
    .nsm-section__button-text {
        font-size: 24px;
        letter-spacing: 1.5px;
    }
    .nsm-section__button-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        right: 10px;
    }
    .nsm-section__button-icon svg {
        width: 24px;
        height: 24px;
    }
    .nsm-section__button:hover {
        padding-right: 6px;
    }
    .nsm-section__button:hover .nsm-section__button-icon {
        right: 6px;
    }
}

@media (max-width: 768px) {
    .nsm-section {
        height: 400px;
    }
    .nsm-section__button {
        width: 95%;
        height: 100px;
        padding: 0 8px;
        border-radius: 70px;
        gap: 12px;
    }
    .nsm-section__button:hover {
        gap: 30px;
    }
    .nsm-section__button-text {
        font-size: 20px;
        letter-spacing: 1px;
    }
    .nsm-section__button-icon {
        width: 55px;
        height: 55px;
        min-width: 55px;
        right: 8px;
    }
    .nsm-section__button-icon svg {
        width: 22px;
        height: 22px;
    }
    .nsm-section__button:hover {
        transform: translateY(-2px) scale(1.005);
        padding-right: 5px;
    }
    .nsm-section__button:hover .nsm-section__button-icon {
        right: 5px;
    }
}

@media (max-width: 576px) {
    .nsm-section {
        height: 350px;
        padding: 50px 20px;
    }
    .nsm-section__button {
        width: 100%;
        height: 85px;
        padding: 0 6px;
        border-radius: 60px;
        gap: 10px;
    }
    .nsm-section__button:hover {
        gap: 25px;
    }
    .nsm-section__button-text {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
    .nsm-section__button-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        right: 6px;
    }
    .nsm-section__button-icon svg {
        width: 18px;
        height: 18px;
    }
    .nsm-section__button:hover {
        padding-right: 4px;
    }
    .nsm-section__button:hover .nsm-section__button-icon {
        right: 4px;
    }
    .nsm-section__button:hover .nsm-section__button-text {
        letter-spacing: 1px;
    }
}

@media (max-width: 400px) {
    .nsm-section {
        height: 300px;
    }
    .nsm-section__button {
        height: 75px;
        padding: 0 5px;
        border-radius: 50px;
        gap: 8px;
    }
    .nsm-section__button:hover {
        gap: 20px;
    }
    .nsm-section__button-text {
        font-size: 14px;
        letter-spacing: 0.5px;
    }
    .nsm-section__button-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        right: 5px;
    }
    .nsm-section__button-icon svg {
        width: 16px;
        height: 16px;
    }
    .nsm-section__button:hover {
        padding-right: 3px;
    }
    .nsm-section__button:hover .nsm-section__button-icon {
        right: 3px;
    }
}

/* ============================================
   WHY CHOOSE US SECTION
   ============================================ */

.why-choose-us {
    padding: 80px 40px;
    background: #161615;
    width: 100%;
    box-sizing: border-box;
}

.why-choose-us__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.why-choose-us__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.why-choose-us__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 82px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: inline-block;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 10px;
}

@supports not (background-clip: text) {
    .why-choose-us__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.why-choose-us__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
}

/* ===== DESKTOP LAYOUT ===== */
.why-choose-us__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 180px;
    padding-right: 00px;
    padding-top: 40px;
}

.why-choose-us__column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.why-choose-us__feature {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    margin-bottom: 20px;
    width: 250px;
    max-width: 100%;
}

.why-choose-us__column .why-choose-us__feature:nth-child(2) {
    margin-left: 50px;
}

.why-choose-us__feature-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 12px;
    margin-top: 2px;
    margin-right: 0;
}

.why-choose-us__feature-icon img {
    width: 54%;
    height: 54%;
    object-fit: contain;
    display: block;
}

.why-choose-us__feature-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 0;
}

.why-choose-us__feature-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 19px;
    line-height: 22px;
    letter-spacing: 0px;
    vertical-align: middle;
    text-transform: capitalize;
    display: inline-block;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .why-choose-us__feature-heading {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.why-choose-us__feature-divider {
    width: 100%;
    height: 0;
    border: none;
    border-top: 1px solid #BEAE82;
    margin: 8px 0 8px 0;
    display: block;
}

.why-choose-us__feature-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 125%;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}

/* ===== MOBILE SLIDER ===== */
.mobile-slider {
    display: none;
}

.why-choose-us__slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
}

.why-choose-us__slide {
    display: none;
    animation: fadeIn 0.5s ease;
}

.why-choose-us__slide.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== MOBILE SLIDER - SAME AS DESKTOP STYLE ===== */
.why-choose-us__slider .why-choose-us__feature {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    margin-bottom: 20px;
    width: 100%;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row; /* Keep icon on left */
    text-align: left;
}

.why-choose-us__slider .why-choose-us__feature-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 12px;
    margin-top: 2px;
    margin-right: 0;
    margin-left: 0;
}

.why-choose-us__slider .why-choose-us__feature-icon img {
    width: 54%;
    height: 54%;
    object-fit: contain;
    display: block;
}

.why-choose-us__slider .why-choose-us__feature-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 0;
    text-align: left;
}

.why-choose-us__slider .why-choose-us__feature-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 19px;
    line-height: 22px;
    letter-spacing: 0px;
    vertical-align: middle;
    text-transform: capitalize;
    display: inline-block;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    text-align: left;
}

.why-choose-us__slider .why-choose-us__feature-divider {
    width: 100%;
    height: 0;
    border: none;
    border-top: 1px solid #BEAE82;
    margin: 8px 0 8px 0;
    display: block;
}

.why-choose-us__slider .why-choose-us__feature-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 125%;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* ===== SLIDER NAVIGATION ===== */
.why-choose-us__slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.why-choose-us__slider-prev,
.why-choose-us__slider-next {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 44px;
    background: linear-gradient(274.43deg, #D0C093 20.43%, #8A794C 98.65%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 9.43px 12.57px;
}

.why-choose-us__slider-prev:hover,
.why-choose-us__slider-next:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
}

.why-choose-us__slider-prev svg,
.why-choose-us__slider-next svg {
    width: 24px;
    height: 24px;
    stroke: #FFFFFF;
    fill: none;
}

.why-choose-us__slider-next {
    transform: rotate(180deg);
}

.why-choose-us__slider-next:hover {
    transform: scale(1.05) rotate(180deg);
}

/* Dots */
.why-choose-us__slider-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.why-choose-us__slider-dot {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.why-choose-us__slider-dot.active {
    background: #BEAE82;
    width: 30px;
    border-radius: 6px;
}

.why-choose-us__slider-dot:hover {
    background: rgba(190, 174, 130, 0.5);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
    .why-choose-us__layout {
        gap: 60px;
        padding-left: 100px;
        padding-right: 60px;
    }
}

@media (max-width: 992px) {
    .why-choose-us {
        padding: 60px 30px;
    }
    .why-choose-us__title {
        font-size: 48px;
        line-height: 62px;
    }
    .why-choose-us__description {
        font-size: 17px;
    }
    .why-choose-us__layout {
        gap: 50px;
        padding-left: 60px;
        padding-right: 40px;
        padding-top: 30px;
    }
    .why-choose-us__feature {
        width: 220px;
    }
    .why-choose-us__column .why-choose-us__feature:nth-child(2) {
        margin-left: 30px;
    }
    .why-choose-us__feature-heading {
        font-size: 20px;
        line-height: 26px;
    }
}

@media (max-width: 768px) {
    .why-choose-us {
        padding: 50px 20px;
    }
    .why-choose-us__title {
        font-size: 36px;
        line-height: 48px;
        letter-spacing: -1px;
    }
    .why-choose-us__description {
        font-size: 16px;
    }
    
    /* Hide desktop layout on mobile */
    .desktop-layout {
        display: none !important;
    }
    
    /* Show mobile slider */
    .mobile-slider {
        display: block;
    }
    
    .why-choose-us__slider .why-choose-us__feature {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .why-choose-us {
        padding: 50px 20px;
    }
    .why-choose-us__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .why-choose-us__description {
        font-size: 15px;
    }
    .why-choose-us__slider .why-choose-us__feature-icon {
        width: 45px;
        height: 45px;
    }
    .why-choose-us__slider .why-choose-us__feature-heading {
        font-size: 18px;
        line-height: 24px;
    }
    .why-choose-us__slider .why-choose-us__feature-description {
        font-size: 14px;
    }
    .why-choose-us__slider-prev,
    .why-choose-us__slider-next {
        width: 40px;
        height: 40px;
        padding: 8px 10px;
    }
    .why-choose-us__slider-prev svg,
    .why-choose-us__slider-next svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 400px) {
    .why-choose-us {
        padding: 50px 20px;
    }
    .why-choose-us__title {
        font-size: 28px;
        line-height: 34px;
    }
    .why-choose-us__description {
        font-size: 15px;
        line-height: 24px;
    }
    .why-choose-us__slider .why-choose-us__feature-icon {
        width: 60px;
        height: 60px;
    }
    .why-choose-us__slider .why-choose-us__feature-heading {
        font-size: 20px;
        line-height: 22px;
    }
    .why-choose-us__slider .why-choose-us__feature-description {
        font-size: 15px;
        line-height: 20px;
    }
    .why-choose-us__slider-prev,
    .why-choose-us__slider-next {
        width: 36px;
        height: 36px;
        padding: 6px 8px;
    }
    .why-choose-us__slider-prev svg,
    .why-choose-us__slider-next svg {
        width: 18px;
        height: 18px;
    }
}
/* ============================================
   TEAM SECTION
   ============================================ */

.team-section {
    padding: 80px 80px 0;
    background: #161615;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.team-section__container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.team-section__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.team-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 82px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: inline-block;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 10px;
}

@supports not (background-clip: text) {
    .team-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.team-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 135%;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
}

.team-section__slider-wrapper {
    position: relative;
    width: 100%;
    padding-top: 40px;
}

.team-section__slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ===== SLIDES ===== */
.team-section__slide {
    display: none;
    animation: fadeIn 0.5s ease;
}

.team-section__slide.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== DESKTOP SLIDES (2 columns) ===== */
.team-section__slide--desktop {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;
}

.team-section__slide--desktop.active {
    display: grid;
}

/* ===== MOBILE SLIDES (1 column) ===== */
.team-section__slide--mobile {
    display: none;
    width: 100%;
}

.team-section__slide--mobile.active {
    display: block;
}

/* ===== MEMBER CARD - IMAGE LEFT, TEXT RIGHT ===== */
.team-section__member {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: transparent;
    overflow: hidden;
    gap: 0;
}

.team-section__member-image {
    flex: 0 0 45%;
    overflow: hidden;
    height: 350px;
}

.team-section__member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-section__member-content {
    flex: 1;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border: 1px solid #BEAE82;
    border-radius: 0px;
    background: transparent;
    min-height: 300px;
    max-height: 300px;
    overflow-y: auto;
}

.team-section__member-name {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 25px;
    line-height: 34px;
    letter-spacing: -2px;
    vertical-align: middle;
    text-transform: capitalize;
    display: inline-block;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 4px;
}

@supports not (background-clip: text) {
    .team-section__member-name {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.team-section__member-designation {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
	line-height: 17px;
    letter-spacing: 0px;
    text-transform: capitalize;
    color: #BEAE82;
    margin-bottom: 10px;
    display: block;
}

.team-section__member-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #FFFFFF;
    margin: 0 0 20px;
}

.team-section__member-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 35px;
    padding: 10px 20px;
    background: linear-gradient(90deg, #463206 0%, #F6E8B9 48.56%, #463206 100%);
    border: 0.98px solid #F6E8B9;
    border-radius: 4px;
    color: #000000;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 10%;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0px;
    flex-shrink: 0;
}

.team-section__member-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(70, 50, 6, 0.4);
    color: #000000;
    background: linear-gradient(90deg, #5A3A16 0%, #F6E8B9 48.56%, #5A3A16 100%);
}

.team-section__member-button:active {
    transform: scale(0.97);
}

/* ============================================
   NAVIGATION - LEFT & RIGHT ARROWS OUTSIDE (NO LOOP)
   ============================================ */

.team-section__navigation {
    position: absolute;
    top: 50%;
    left: -70px;
    right: -70px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.team-section__nav {
    pointer-events: auto;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 56px;
    background: linear-gradient(274.43deg, #D0C093 20.43%, #8A794C 98.65%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 12px 16px;
    opacity: 1;
    flex-shrink: 0;
}

.team-section__nav--prev {
    margin-left: 0;
}

.team-section__nav--next {
    margin-right: 0;
}

.team-section__nav:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
}

/* Disabled state - dull/transparent gradient */
.team-section__nav:disabled {
    background: linear-gradient(274.43deg, rgba(208, 192, 147, 0.1) 20.43%, rgba(138, 121, 76, 0.1) 98.65%);
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

.team-section__nav:disabled:hover {
    transform: none;
    box-shadow: none;
}

.team-section__nav svg {
    width: 24px;
    height: 24px;
    stroke: #FFFFFF;
    fill: none;
}

/* Hide dots */
.team-section__dots {
    display: none !important;
}

.team-section__dot {
    display: none !important;
}

.team-section__dot--desktop {
    display: none !important;
}

.team-section__dot--mobile {
    display: none !important;
}

/* ============================================
   BOTTOM FULL WIDTH IMAGE
   ============================================ */

.team-section__bottom-image {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}

.team-section__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - DESKTOP (769px and above)
   ============================================ */

@media (min-width: 769px) {
    .team-section__slide--desktop {
        display: none;
    }
    
    .team-section__slide--desktop.active {
        display: grid;
    }
    
    .team-section__slide--mobile {
        display: none !important;
    }
}

@media (max-width: 1200px) {
    .team-section {
        padding: 80px 80px 0;
    }
    .team-section__navigation {
        left: -70px;
        right: -70px;
    }
}

@media (max-width: 992px) {
    .team-section {
        padding: 60px 80px 0;
    }
    .team-section__title {
        font-size: 48px;
        line-height: 62px;
    }
    .team-section__slide--desktop {
        gap: 30px;
    }
    .team-section__member-image {
        height: 320px;
    }
    .team-section__member-content {
        min-height: 280px;
        max-height: none;
    }
    .team-section__member-name {
        font-size: 28px;
        line-height: 34px;
    }
    .team-section__navigation {
        left: -70px;
        right: -70px;
    }
    .team-section__nav {
        width: 48px;
        height: 48px;
        padding: 10px 14px;
    }
    .team-section__nav svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (768px and below)
   ============================================ */

@media (max-width: 768px) {
    .team-section {
        padding: 50px 0px 0;
    }
    .team-section__title {
        font-size: 36px;
        line-height: 48px;
    }
    .team-section__description {
        font-size: 16px;
    }
    
    .team-section__slide--desktop {
        display: none !important;
    }
    
    .team-section__slide--mobile {
        display: none !important;
    }
    
    .team-section__slide--mobile.active {
        display: block !important;
    }
    
    .team-section__member {
        flex-direction: row !important;
        align-items: center;
        margin: 0 30px;
    }
    
    .team-section__member-image {
        flex: 0 0 40%;
        height: 250px;
        border-radius: 10px 0 0 10px !important;
    }
    
    .team-section__member-content {
        flex: 1;
        min-height: 220px;
        max-height: none;
        padding: 18px 16px;
        border-radius: 0 10px 10px 0 !important;
        border-left: none !important;
        border: 1px solid #BEAE82 !important;
    }
    
    .team-section__member-name {
        font-size: 22px;
        line-height: 28px;
    }
    
    .team-section__member-designation {
        font-size: 12px;
    }
    
    .team-section__member-description {
        font-size: 13px;
        line-height: 18px;
    }
    
    .team-section__member-button {
        width: 110px;
        height: 34px;
        font-size: 11px;
        padding: 6px 12px;
    }
    
    .team-section__navigation {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
        padding: 0;
        pointer-events: auto;
    }
    
    .team-section__nav {
        width: 44px;
        height: 44px;
        padding: 8px 12px;
    }
    
    .team-section__nav svg {
        width: 18px;
        height: 18px;
    }
}

/* ===== SMALL MOBILE (576px and below) ===== */
@media (max-width: 576px) {
    .team-section {
        padding: 50px 0px 0;
    }
    .team-section__title {
        font-size: 28px;
        line-height: 34px;
    }
    .team-section__description {
        font-size: 15px;
        line-height: 24px;
    }
    
    .team-section__member {
        flex-direction: row !important;
        align-items: center;
        margin: 0 30px;
    }
    
    .team-section__member-image {
        flex: 0 0 35%;
        height: 180px;
        border-radius: 8px 0 0 8px !important;
    }
    
    .team-section__member-content {
        min-height: 160px;
        padding: 12px 10px;
        border-radius: 0 8px 8px 0 !important;
    }
    
    .team-section__member-name {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.5px;
    }
    
    .team-section__member-designation {
        font-size: 10px;
        margin-bottom: 4px;
    }
    
    .team-section__member-description {
        font-size: 11px;
        line-height: 15px;
        margin: 0 0 6px;
    }
    
    .team-section__member-button {
        width: 80px;
        height: 28px;
        font-size: 9px;
        padding: 4px 8px;
        margin-top: 4px;
        letter-spacing: 5%;
    }
    
    .team-section__navigation {
        gap: 15px;
        margin-top: 25px;
    }
    
    .team-section__nav {
        width: 36px;
        height: 36px;
        padding: 6px 8px;
    }
    
    .team-section__nav svg {
        width: 16px;
        height: 16px;
    }
}

/* ===== EXTRA SMALL (below 400px) ===== */
@media (max-width: 400px) {
    .team-section {
        padding-top: 50px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }
    
    .team-section__title {
        font-size: 28px;
        line-height: 34px;
    }
    .team-section__description {
        font-size: 15px;
        line-height: 20px;
    }
    
    .team-section__member {
        margin: 0 30px;
    }
    
    .team-section__member-image {
        flex: 0 0 35%;
        height: 200px;
        margin-right: 2px;
        border-radius: 6px 0 0 6px !important;
    }
    
    .team-section__member-content {
        min-height: 130px;
        padding: 10px 8px;
        border-radius: 0 6px 6px 0 !important;
    }
    
    .team-section__member-name {
        font-size: 14px;
        line-height: 18px;
        letter-spacing: -0.5px;
    }
    
    .team-section__member-designation {
        font-size: 12px;
        margin-bottom: 3px;
    }
    
    .team-section__member-description {
        font-size: 11px;
        line-height: 13px;
        margin: 0 0 4px;
    }
    
    .team-section__member-button {
        width: 70px;
        height: 24px;
        font-size: 8px;
        padding: 3px 6px;
        margin-top: 3px;
        letter-spacing: 3%;
    }
    
    .team-section__navigation {
        gap: 12px;
        margin-top: 20px;
    }
    
    .team-section__nav {
        width: 30px;
        height: 30px;
        padding: 5px 6px;
    }
    
    .team-section__nav svg {
        width: 14px;
        height: 14px;
    }
}
/* ============================================
   TEAM SECTION - BOTTOM BUTTON
   ============================================ */

.team-section__button-wrapper {
    text-align: center;
    margin-top: 40px;
}

.team-section__bottom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7.14px;
    width: 250px;
    height: 55px;
    padding: 8.57px 17.14px;
    border-radius: 30.71px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1;
}

.team-section__bottom-button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.team-section__bottom-button:active {
    transform: scale(0.97);
}

.team-section__bottom-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 14px;
    line-height: 1;
    color: #FFFFFF;
}

.team-section__bottom-button-icon i {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    color: #FFFFFF;
}

.team-section__bottom-button:hover .team-section__bottom-button-icon {
    transform: translateX(4px);
}

.team-section__bottom-button:hover .team-section__bottom-button-icon i {
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE - BOTTOM BUTTON
   ============================================ */

@media (max-width: 576px) {
    .team-section__button-wrapper {
        margin-top: 30px;
    }
    .team-section__bottom-button {
        width: 80%;
        height: 35px;
        padding: 6px 14px;
        font-size: 12px;
        border-radius: 25px;
    }
    .team-section__bottom-button-icon,
    .team-section__bottom-button-icon i {
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .team-section__button-wrapper {
        margin-top: 25px;
    }
    .team-section__bottom-button {
        width: 80%;
        height: 35px;
        padding: 5px 12px;
        font-size: 11px;
        border-radius: 22px;
    }
    .team-section__bottom-button-icon,
    .team-section__bottom-button-icon i {
        font-size: 11px;
    }
}
/* ============================================
   LOYALTY CTA SECTION
   ============================================ */

.loyalty-cta-section {
    padding: 80px 100px;
    background: #161616;
    width: 100%;
    box-sizing: border-box;
}

.loyalty-cta-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.loyalty-cta-section__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.loyalty-cta-section__left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.loyalty-cta-section__image-wrapper {
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    
}

.loyalty-cta-section__image {
    width: 90%;
    height: auto;
    display: block;
}

.loyalty-cta-section__right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: flex-start;
}

.loyalty-cta-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 82px;
    letter-spacing: -2px;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .loyalty-cta-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.loyalty-cta-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
    max-width: 500px;
}

.loyalty-cta-section__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 370px;
    height: 51px;
    padding: 0 1px 0 30px;
    border-radius: 37.5px;
    background: rgba(138, 121, 76, 0.24);
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    position: relative;
}

.loyalty-cta-section__button:hover {
    background: rgba(138, 121, 76, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.2);
}

.loyalty-cta-section__button-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    color: #8A794C;
    text-transform: capitalize;
    flex: 1;
}

.loyalty-cta-section__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: linear-gradient(274.43deg, #D0C093 20.43%, #8A794C 98.65%);
    transition: all 0.3s ease;
}

.loyalty-cta-section__button-icon svg {
    width: 20px;
    height: 20px;
    stroke: #FFFFFF;
    fill: none;
}

.loyalty-cta-section__button:hover .loyalty-cta-section__button-icon {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(138, 121, 76, 0.4);
}

.loyalty-cta-section__button:hover .loyalty-cta-section__button-icon svg {
    transform: translateX(3px);
    transition: transform 0.3s ease;
}

.loyalty-cta-section__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - LOYALTY CTA
   ============================================ */

@media (max-width: 1200px) {
    .loyalty-cta-section__button {
        width: 100%;
        max-width: 581px;
    }
}

@media (max-width: 992px) {
    .loyalty-cta-section {
        padding: 60px 30px;
    }
    .loyalty-cta-section__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .loyalty-cta-section__title {
        font-size: 48px;
        line-height: 62px;
    }
    .loyalty-cta-section__description {
        font-size: 17px;
        max-width: 100%;
    }
    .loyalty-cta-section__image-wrapper {
        max-width: 100%;
        max-height: 400px;
        object-fit: cover;
    }
    .loyalty-cta-section__button {
        max-width: 100%;
        width: 100%;
    }
    .loyalty-cta-section__left {
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .loyalty-cta-section {
        padding: 50px 20px;
    }
    .loyalty-cta-section__title {
        font-size: 36px;
        line-height: 48px;
        letter-spacing: -1px;
    }
    .loyalty-cta-section__description {
        font-size: 16px;
        line-height: 26px;
    }
    .loyalty-cta-section__right {
        align-items: center;
        text-align: center;
    }
    .loyalty-cta-section__layout {
        gap: 30px;
    }
    .loyalty-cta-section__button {
        height: 56px;
        padding: 0 6px 0 20px;
        max-width: 100%;
        width: 100%;
    }
    .loyalty-cta-section__button-text {
        font-size: 16px;
    }
    .loyalty-cta-section__button-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }
    .loyalty-cta-section__button-icon svg {
        width: 18px;
        height: 18px;
    }
    .loyalty-cta-section__left {
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .loyalty-cta-section {
        padding: 50px 20px;
    }
    .loyalty-cta-section__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .loyalty-cta-section__description {
        font-size: 15px;
        line-height: 24px;
    }
    .loyalty-cta-section__left {
        order: -1;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .loyalty-cta-section__image-wrapper {
        max-height: 250px;
        width: 100%;
    }
    .loyalty-cta-section__image {
        width: 100%;
    }
    .loyalty-cta-section__button {
        height: 48px;
        padding: 0 5px 0 15px;
        max-width: 100%;
        width: 100%;
        border-radius: 30px;
    }
    .loyalty-cta-section__button-text {
        font-size: 14px;
    }
    .loyalty-cta-section__button-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
    .loyalty-cta-section__button-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================
   FINANCING SECTION
   ============================================ */

.financing-section {
    padding: 80px 0;
    background: #000000;
    width: 100%;
    box-sizing: border-box;
}

.financing-section__container {
    max-width: 1250px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0 70px
}

.financing-section__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.financing-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 82px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 10px;
}

@supports not (background-clip: text) {
    .financing-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.financing-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
}

.financing-section__inner {
    padding: 60px 50px;
    border: 2px solid transparent;
    border-radius: 48.5px;
    position: relative;
    background: #20201f;
    background-clip: padding-box;
}

.financing-section__inner::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 48.5px;
    padding: 2px;
    background: linear-gradient(137.21deg, #B89668 -29.95%, rgba(108, 88, 48, 0) 175.82%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.financing-section__inner > * {
    position: relative;
    z-index: 1;
}

.financing-section__layout {
    display: grid;
    grid-template-columns: 65% 35%;
    gap: 40px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.financing-section__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.financing-section__left-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 38px;
    line-height: 42px;
    letter-spacing: -1px;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .financing-section__left-title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.financing-section__left-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
    max-width: 600px;
}

.financing-section__icons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 5px;
}

.financing-section__icon-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 550px;
    max-width: 100%;
    height: 50px;
    padding: 0 24px;
    background: #D9D9D90F;
    border: 1px solid transparent;
    border-radius: 66px;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-clip: padding-box;
    transition: all 0.3s ease;
}

.financing-section__icon-item::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 66px;
    padding: 1px;
    background: linear-gradient(137.21deg, #B89668 -29.95%, rgba(184, 150, 104, 0.59) 175.82%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.financing-section__icon-item > * {
    position: relative;
    z-index: 1;
}

.financing-section__icon-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(184, 150, 104, 0.15);
}

.financing-section__icon-wrapper {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.financing-section__icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.financing-section__icon-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #FFFFFF;
}

.financing-section__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 200px;
    height: 56px;
    padding: 12px 24px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    margin-top: 5px;
}

.financing-section__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.financing-section__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.financing-section__button:hover .financing-section__button-icon {
    transform: translateX(4px);
}

.financing-section__button:focus {
    outline: none;
}

.financing-section__button:active {
    transform: scale(0.97);
}

.financing-section__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.financing-section__right-image-wrapper {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    overflow: hidden;
    padding-right: 30px;
}

.financing-section__right-image {
    width: 100%;
    height: auto;
    display: block;
    padding-right: 30px;
}

/* ============================================
   RESPONSIVE - FINANCING SECTION
   ============================================ */

@media (max-width: 1200px) {
    .financing-section__container {
        padding: 0 150px;
    }
    .financing-section__icon-item {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .financing-section {
        padding: 60px 0;
    }
    .financing-section__container {
        padding: 0 60px;
    }
    .financing-section__inner {
        padding: 40px 30px;
        border-radius: 35px;
    }
    .financing-section__inner::before {
        border-radius: 35px;
    }
    .financing-section__title {
        font-size: 48px;
        line-height: 62px;
    }
    .financing-section__description {
        font-size: 17px;
    }
    .financing-section__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .financing-section__left-title {
        font-size: 30px;
        line-height: 38px;
    }
    .financing-section__left-description {
        max-width: 100%;
    }
    
    .financing-section__left {
        order: 1;
    }
    .financing-section__right {
        order: 2;
        justify-content: center;
    }
    
    .financing-section__right-image-wrapper {
        max-width: 250px;
    }
    .financing-section__icon-item {
        width: 100%;
        height: 64px;
        padding: 0 18px;
    }
}

@media (max-width: 768px) {
    .financing-section {
        padding: 40px 0;
    }
    .financing-section__container {
        padding: 0 30px;
    }
    .financing-section__inner {
        padding: 30px 20px;
        border-radius: 25px;
    }
    .financing-section__inner::before {
        border-radius: 25px;
    }
    .financing-section__title {
        font-size: 36px;
        line-height: 48px;
        letter-spacing: -1px;
    }
    .financing-section__description {
        font-size: 16px;
    }
    .financing-section__left-title {
        font-size: 26px;
        line-height: 34px;
    }
    .financing-section__left-description {
        font-size: 15px;
        line-height: 24px;
    }
    .financing-section__icon-item {
        width: 100%;
        height: 56px;
        padding: 0 14px;
        border-radius: 50px;
    }
    .financing-section__icon-item::before {
        border-radius: 50px;
    }
    .financing-section__icon-text {
        font-size: 15px;
    }
    .financing-section__button {
        width: 100%;
        max-width: 200px;
        height: 50px;
        font-size: 0.85rem;
    }
    .financing-section__right-image-wrapper {
        max-width: 200px;
    }
}

@media (max-width: 576px) {
    .financing-section {
        padding: 50px 20px;
    }
    .financing-section__container {
        padding: 0 15px;
    }
    .financing-section__inner {
        padding: 20px 15px;
        border-radius: 20px;
    }
    .financing-section__inner::before {
        border-radius: 20px;
        inset: -1.5px;
        padding: 1.5px;
    }
    .financing-section__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .financing-section__description {
        font-size: 15px;
        line-height: 20px;
    }
    .financing-section__left-title {
        font-size: 22px;
        line-height: 30px;
    }
    .financing-section__left-description {
        font-size: 14px;
        line-height: 23px;
    }
    .financing-section__icon-item {
        width: 100%;
        height: 78px;
        padding: 0 12px;
        border-radius: 40px;
        gap: 10px;
    }
    .financing-section__icon-item::before {
        border-radius: 40px;
    }
    .financing-section__icon-text {
        font-size: 14px;
    }
    .financing-section__icon-wrapper {
        width: 28px;
        height: 28px;
    }
    .financing-section__button {
        width: 100%;
        max-width: 100%;
        height: 48px;
        font-size: 0.85rem;
    }
    .financing-section__right-image-wrapper {
        max-width: 200px;
    }
}
/* ============================================
   ABOUT PAGE - HERO SECTION
   ============================================ */

.about-hero {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.about-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.about-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.about-hero__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 60px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .about-hero__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.about-hero__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: var(--color-white);
    max-width: 700px;
    margin: 0;
}

.about-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 253px;
    height: 56px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.about-hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.about-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.about-hero__button:hover .about-hero__button-icon {
    transform: translateX(4px);
}

.about-hero__button:focus {
    outline: none;
}

.about-hero__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - ABOUT HERO
   ============================================ */

@media (max-width: 1200px) {
    .about-hero__title {
        font-size: 72px;
        line-height: 74px;
    }
}

@media (max-width: 992px) {
    .about-hero {
        height: 380px;
    }
    .about-hero__title {
        font-size: 60px;
        line-height: 62px;
    }
    .about-hero__description {
        font-size: 15px;
        line-height: 22px;
    }
    .about-hero__button {
        width: 220px;
        height: 50px;
        font-size: 0.85rem;
    }
    .about-hero__content {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .about-hero {
        height: 320px;
        background-position: center center;
    }
    .about-hero__title {
        font-size: 48px;
        line-height: 50px;
        letter-spacing: -1px;
    }
    .about-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .about-hero__button {
        width: 200px;
        height: 48px;
        font-size: 0.85rem;
    }
    .about-hero__content {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .about-hero {
        height: auto;
        min-height: 300px;
        padding: 50px 20px;
        background-position: center center;
    }
    .about-hero__title {
        font-size: 32px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .about-hero__description {
        font-size: 15px;
        line-height: 20px;
    }
    .about-hero__button {
        width: 100%;
        max-width: 200px;
        height: 44px;
        font-size: 0.8rem;
    }
    .about-hero__content {
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .about-hero {
        min-height: 350px;
        padding: 50px 20px;
    }
    .about-hero__title {
        font-size: 28px;
        line-height: 34px;
    }
    .about-hero__description {
        padding: 10px 0px;
        font-size: 15px;
        line-height: 20px;
    }
    .about-hero__button {
        height: 40px;
        font-size: 0.75rem;
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================
   ABOUT NORTH VANCOUVER SECTION
   ============================================ */

.about-nv-section {
    padding-top: 0px;
    padding-right: 40px;
    padding-bottom: 80px;
    padding-left: 40px;
    background: #040401;
    width: 100%;
    box-sizing: border-box;
}

.about-nv-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.about-nv-section__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.about-nv-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -2px;
    text-align: center;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 10px;
}

@supports not (background-clip: text) {
    .about-nv-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.about-nv-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--color-white);
    margin: 10px 0 0;
}

.about-nv-section__layout {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    align-items: center;
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;

}

.about-nv-section__left {
    grid-column: 1 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-nv-section__center {
    grid-column: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

/* ============================================
   IMAGE WRAPPER - THE SQUARE BORDER MODULE
   ============================================ */

.about-nv-section__image-wrap {
    width: 100%;
    max-width: 800px;
    padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
    box-sizing: border-box;
    margin: 0 auto;
}

.about-nv-section__image-border {
    position: relative;
    border-radius: 48.5px;
    padding: 0px;
    
    background-clip: padding-box;
    width: 100%;
    box-sizing: border-box;
}

.about-nv-section__image-inner {
    border-radius: 48.5px;
    
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 25px;
}

.about-nv-section__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

.about-nv-section__right {
    grid-column: 3 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 150px;
    min-height: 200px;
}

/* ============================================
   COUNTERS - Transparent Background
   ============================================ */

.about-nv-section__counter {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 200px;
    height: 65px;
    padding: 16px 24px 16px 24px;
    background: rgba(255, 255, 255, 0.2); /* White with 50% opacity */
    border: 2px solid transparent;
    border-radius: 48.5px;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-sizing: border-box;
}

/* Left Counter - Move RIGHT by 130px */
.about-nv-section__left .about-nv-section__counter {
    right: -130px;
    z-index: 10;
}

/* Right Counters - Move LEFT by 130px */
.about-nv-section__right .about-nv-section__counter {
    left: -130px;
    z-index: 1;
}

.about-nv-section__counter::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 48.5px;
    padding: 2px;
    background: linear-gradient(137.21deg, #FFFFFF -29.95%, rgba(255, 255, 255, 0.2) 175.82%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.about-nv-section__counter > * {
    position: relative;
    z-index: 1;
}

.about-nv-section__counter-number {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 40px;
    letter-spacing: -3%;
    background: linear-gradient(90deg, #BEAE82 0%, #BEAE82 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
}

.about-nv-section__counter-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 4%;
    background: linear-gradient(90deg, #BEAE82 0%, #BEAE82 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 992px) {
    .about-nv-section {
        padding: 60px 30px;
    }

    .about-nv-section__title {
        font-size: 48px;
        line-height: 50px;
    }

    .about-nv-section__description {
        font-size: 15px;
    }

    .about-nv-section__layout {
        grid-template-columns: 1fr;
        gap: 30px;
        min-height: auto;
    }

    .about-nv-section__left {
        grid-column: 1 / 2;
        justify-content: center;
    }

    .about-nv-section__left .about-nv-section__counter {
        right: 0;
    }

    .about-nv-section__center {
        grid-column: 1 / 2;
        order: -1;
    }

    .about-nv-section__right {
        grid-column: 1 / 2;
        flex-direction: row;
        gap: 30px;
        flex-wrap: wrap;
        justify-content: center;
        min-height: auto;
    }

    .about-nv-section__right .about-nv-section__counter {
        left: 0;
    }

    .about-nv-section__image-wrap {
        max-width: 100%;
    }

    .about-nv-section__image-border,
    .about-nv-section__image-inner {
        border-radius: 35px;
    }

    .about-nv-section__image-inner {
        padding: 35px;
    }

    .about-nv-section__counter {
        width: 180px;
        height: 60px;
        padding: 14px 20px 16px 20px;
    }

    .about-nv-section__counter-number {
        font-size: 24px;
        line-height: 32px;
    }

    .about-nv-section__counter-label {
        font-size: 14px;
        line-height: 15px;
    }
}

@media (max-width: 768px) {
    .about-nv-section {
        padding: 50px 20px;
    }

    .about-nv-section__title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .about-nv-section__description {
        font-size: 15px;
        line-height: 22px;
    }

    .about-nv-section__right {
        gap: 20px;
    }

    .about-nv-section__image-wrap {
        max-width: 100%;
    }

    .about-nv-section__image-border,
    .about-nv-section__image-inner {
        border-radius: 25px;
    }

    .about-nv-section__image-inner {
        padding: 25px;
    }

    .about-nv-section__counter {
        width: 160px;
        height: 55px;
        padding: 12px 16px 14px 16px;
        gap: 12px;
    }

    .about-nv-section__left .about-nv-section__counter {
        right: 0;
    }

    .about-nv-section__right .about-nv-section__counter {
        left: 0;
    }

    .about-nv-section__counter-number {
        font-size: 22px;
        line-height: 28px;
    }

    .about-nv-section__counter-label {
        font-size: 13px;
        line-height: 14px;
    }
}

@media (max-width: 576px) {
    .about-nv-section {
        padding: 50px 20px;
    }

    .about-nv-section__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }

    .about-nv-section__description {
        font-size: 15px;
        line-height: 20px;
    }

    .about-nv-section__right {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .about-nv-section__image-wrap {
        max-width: 100%;
    }

    .about-nv-section__image-border,
    .about-nv-section__image-inner {
        border-radius: 20px;
    }

    .about-nv-section__image-inner {
        padding: 15px;
    }

    .about-nv-section__counter {
        width: 100%;
        max-width: 300px;
        height: 50px;
        padding: 10px 14px 12px 14px;
        gap: 10px;
        justify-content: center;
    }

    .about-nv-section__left .about-nv-section__counter {
        right: 0;
    }

    .about-nv-section__right .about-nv-section__counter {
        left: 0;
    }

    .about-nv-section__counter-number {
        font-size: 25px;
        line-height: 26px;
        letter-spacing: -2%;
    }

    .about-nv-section__counter-label {
        font-size: 17px;
        line-height: 17px;
        letter-spacing: 3%;
    }
}


/* ============================================
   WHO IS NORTH SECTION
   ============================================ */

.who-is-north {
    padding: 100px 0px 0;
    background: #161615;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.who-is-north__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.who-is-north__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.who-is-north__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.who-is-north__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1px;
    text-transform: capitalize;
    display: inline-block;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .who-is-north__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.who-is-north__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
}

.who-is-north__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 220px;
    height: 56px;
    padding: 12px 24px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    margin-top: 10px;
}

.who-is-north__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.who-is-north__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.who-is-north__button:hover .who-is-north__button-icon {
    transform: translateX(4px);
}

.who-is-north__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.who-is-north__image-wrap {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.who-is-north__image {
    width: 100%;
    height: auto;
    display: block;
}

.who-is-north__bottom {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}

.who-is-north__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - WHO IS NORTH
   ============================================ */

@media (max-width: 992px) {
    .who-is-north {
        padding: 60px 30px 0;
    }
    .who-is-north__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 40px;
    }
    

    .who-is-north__left {
        order: 1;
    }
    .who-is-north__right {
        order: 2;
    }
    
    .who-is-north__title {
        font-size: 40px;
        line-height: 48px;
    }
    .who-is-north__description {
        font-size: 15px;
        line-height: 24px;
    }
    .who-is-north__image-wrap {
        max-width: 100%;
        max-height: 400px;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .who-is-north {
        padding: 50px 20px 0;
    }
    .who-is-north__layout {
        padding-bottom: 30px;
    }
    .who-is-north__title {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.5px;
    }
    .who-is-north__description {
        font-size: 15px;
        line-height: 24px;
    }
    .who-is-north__button {
        width: 100%;
        max-width: 200px;
        height: 50px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .who-is-north {
        padding: 50px 20px 0;
    }
    .who-is-north__layout {
        padding-bottom: 20px;
        gap: 30px;
    }
    .who-is-north__title {
        font-size: 28px;
        line-height: 34px;
    }
    .who-is-north__description {
        font-size: 15px;
        line-height: 20px;
    }
    .who-is-north__button {
        width: 100%;
        max-width: 100%;
        height: 48px;
        font-size: 0.85rem;
    }
    .who-is-north__image-wrap {
        max-height: 250px;
    }
}
/* ============================================
   OUR OFFICE SECTION
   ============================================ */

.our-office {
    position: relative;
    padding: 80px 0 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.our-office__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
}

.our-office__container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0 20px;
}
.our-office__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    text-transform: capitalize;
    display: block; /* Changed from inline-block to block */
    width: fit-content; /* Fits content width */
    margin: 0 auto 50px; /* Auto margins for centering */
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .our-office__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}
.our-office__slider-wrapper {
    position: relative;
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
}

.our-office__slider {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
    width: 100%;
    position: relative;
    gap: 20px;
}

.our-office__slide--center {
    position: relative;
    width: 42%;
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    z-index: 3;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.our-office__slide--center .our-office__slide-inner {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.our-office__slide--left {
    position: relative;
    width: 30%;
    opacity: 0.5;
    transform: scale(0.85);
    filter: blur(1.5px);
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.our-office__slide--right {
    position: relative;
    width: 30%;
    opacity: 0.5;
    transform: scale(0.85);
    filter: blur(1.5px);
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.our-office__slide.animating .our-office__slide-inner {
    animation: slideHorizontal 0.5s ease-in-out;
}

@keyframes slideHorizontal {
    0% {
        transform: translateX(20px);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.our-office__slide-inner {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    aspect-ratio: 16/10;
    background: #1a1a1a;
}

.our-office__slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.our-office__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

.our-office__nav {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 56px;
    background: linear-gradient(274.43deg, #D0C093 20.43%, #8A794C 98.65%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(138, 121, 76, 0.3);
}

.our-office__nav:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(138, 121, 76, 0.4);
}

.our-office__nav svg {
    width: 24px;
    height: 24px;
    stroke: #FFFFFF;
    fill: none;
}

/* ============================================
   RESPONSIVE - OUR OFFICE
   ============================================ */

@media (max-width: 1200px) {
    .our-office__container {
        max-width: 100%;
        padding: 0 40px;
    }
    .our-office__slide--center {
        width: 45%;
    }
    .our-office__slide--left,
    .our-office__slide--right {
        width: 28%;
    }
}

@media (max-width: 992px) {
    .our-office {
        padding: 60px 0 80px;
    }
    .our-office__title {
        font-size: 48px;
        line-height: 50px;
    }
    .our-office__slider {
        min-height: 350px;
        gap: 15px;
    }
    .our-office__slide--center {
        width: 50%;
    }
    .our-office__slide--left,
    .our-office__slide--right {
        width: 25%;
    }
    .our-office__nav {
        width: 48px;
        height: 48px;
        padding: 10px 14px;
    }
    .our-office__nav svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .our-office {
        padding: 50px 0 60px;
        background-position: center center;
    }
    .our-office__container {
        padding: 0 20px;
    }
    .our-office__title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -1px;
    }
    .our-office__slider {
        min-height: 280px;
        gap: 12px;
    }
    .our-office__slide--center {
        width: 55%;
    }
    .our-office__slide--left,
    .our-office__slide--right {
        width: 22%;
        opacity: 0.4;
    }
    .our-office__nav {
        width: 42px;
        height: 42px;
        padding: 8px 12px;
    }
    .our-office__nav svg {
        width: 18px;
        height: 18px;
    }
    .our-office__navigation {
        gap: 20px;
        margin-top: 30px;
    }
}

@media (max-width: 576px) {
    .our-office {
        padding: 50px 20px;
        background-position: center center;
    }
    .our-office__container {
        padding: 0 15px;
    }
    .our-office__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .our-office__slider {
        min-height: 200px;
        gap: 8px;
    }
    .our-office__slide--center {
        width: 65%;
    }
    .our-office__slide--left,
    .our-office__slide--right {
        width: 18%;
        opacity: 0.3;
    }
    .our-office__nav {
        width: 36px;
        height: 36px;
        padding: 6px 10px;
    }
    .our-office__nav svg {
        width: 16px;
        height: 16px;
    }
    .our-office__navigation {
        gap: 15px;
        margin-top: 20px;
    }
}

/* ============================================
   VIRTUAL TOUR SECTION
   ============================================ */

.virtual-tour {
    padding: 80px 40px 100px;
    background: #000000;
    width: 100%;
    box-sizing: border-box;
}

.virtual-tour__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.virtual-tour__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto 50px;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .virtual-tour__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.virtual-tour__image-wrapper {
    width: 100%;
    max-width: 900px;
    padding: 0;
    box-sizing: border-box;
    margin: 0 auto;
}

.virtual-tour__image-border {
    position: relative;
    border-radius: 48.5px;
    padding: 2px;
    background: linear-gradient(137.21deg, #B89668 -29.95%, rgba(108, 88, 48, 0) 175.82%);
    background-clip: padding-box;
    width: 100%;
    box-sizing: border-box;
}

.virtual-tour__image-inner {
    border-radius: 48.5px;
    background: #000000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 25px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.virtual-tour__content {
    width: 100%;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
}

/* Google Map Styles */
.virtual-tour__content iframe {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 30px;
    display: block;
}

.virtual-tour__content p {
    margin: 0 0 15px;
}

.virtual-tour__content p:last-child {
    margin-bottom: 0;
}

/* ============================================
   RESPONSIVE - VIRTUAL TOUR
   ============================================ */

@media (max-width: 992px) {
    .virtual-tour {
        padding: 60px 30px 80px;
    }
    .virtual-tour__title {
        font-size: 48px;
        line-height: 50px;
    }
    .virtual-tour__image-wrapper {
        max-width: 100%;
    }
    .virtual-tour__image-border,
    .virtual-tour__image-inner {
        border-radius: 35px;
    }
    .virtual-tour__image-inner {
        padding: 20px;
        min-height: 250px;
    }
    .virtual-tour__content iframe {
        height: 400px;
        border-radius: 25px;
    }
}

@media (max-width: 768px) {
    .virtual-tour {
        padding: 50px 20px 60px;
    }
    .virtual-tour__title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -1px;
    }
    .virtual-tour__image-border,
    .virtual-tour__image-inner {
        border-radius: 25px;
    }
    .virtual-tour__image-inner {
        padding: 15px;
        min-height: 200px;
    }
    .virtual-tour__content iframe {
        height: 300px;
        border-radius: 18px;
    }
}

@media (max-width: 576px) {
    .virtual-tour {
        padding: 50px 20px;
    }
    .virtual-tour__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .virtual-tour__image-border,
    .virtual-tour__image-inner {
        border-radius: 20px;
    }
    .virtual-tour__image-inner {
        padding: 10px;
        min-height: 150px;
    }
    .virtual-tour__content iframe {
        height: 250px;
        border-radius: 12px;
    }
}

@media (max-width: 400px) {
    .virtual-tour__content iframe {
        height: 200px;
    }
}
/* ============================================
   ADVANCED DENTAL TECHNOLOGY SECTION
   ============================================ */

.advanced-tech {
    padding: 80px 40px;
    background: #161615;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.advanced-tech__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ===== TWO COLUMN LAYOUT - 50% / 50% ===== */
.advanced-tech__layout {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 60px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.advanced-tech__left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* ===== MAIN HEADING (Gradient) ===== */
.advanced-tech__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    display: block;
    width: 100%;
    margin: 0 0 10px;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .advanced-tech__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== SUBHEADING ===== */
.advanced-tech__subheading {
    font-family: 'SF Pro', 'SF Pro Display', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: 22px;
    line-height: 35px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0px 0 0px 0;
    width: 100%;
}

/* ===== BODY TEXT ===== */
.advanced-tech__description {
    font-family: 'SF Pro', 'SF Pro Display', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.advanced-tech__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 30px;
}

.advanced-tech__image-wrapper {
    width: 80%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.advanced-tech__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== ICON BOXES GRID - BELOW IMAGE ===== */
.advanced-tech__icon-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.advanced-tech__icon-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.advanced-tech__icon-row--two {
    justify-content: center;
}

.advanced-tech__icon-row--one {
    justify-content: center;
}

/* ===== ICON BOX ===== */
.advanced-tech__icon-box {
    display: flex;
    align-items: center;
    gap: 22.69px;
    width: 100%;
    max-width: 250.33px;
    height: 58.34px;
    padding: 8.1px 20px 8.91px 10.53px;
    border-radius: 53.48px;
    background: #D9D9D90F;
    border: 0.81px solid transparent;
    position: relative;
    backdrop-filter: blur(16.21px);
    -webkit-backdrop-filter: blur(16.21px);
    background-clip: padding-box;
    box-sizing: border-box;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.advanced-tech__icon-box::before {
    content: '';
    position: absolute;
    inset: -0.81px;
    border-radius: 53.48px;
    padding: 0.81px;
    background: linear-gradient(137.21deg, #B89668 -29.95%, rgba(184, 150, 104, 0.59) 175.82%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.advanced-tech__icon-box > * {
    position: relative;
    z-index: 1;
}

.advanced-tech__icon-box--center {
    margin: 0 auto;
}

.advanced-tech__icon-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(184, 150, 104, 0.15);
}

.advanced-tech__icon-box-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advanced-tech__icon-box-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.advanced-tech__icon-box-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    white-space: nowrap;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
    .advanced-tech__icon-box {
        max-width: 280px;
    }
}

@media (max-width: 992px) {
    .advanced-tech {
        padding: 60px 30px;
    }
    .advanced-tech__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .advanced-tech__left {
        order: 1;
    }
    .advanced-tech__right {
        order: 2;
    }
    
    .advanced-tech__title {
        font-size: 42px;
        line-height: 50px;
        text-align: center;
        margin: 0 auto 10px;
    }
    .advanced-tech__subheading {
        text-align: center;
        font-size: 28px;
        line-height: 34px;
    }
    .advanced-tech__description {
        max-width: 100%;
        text-align: center;
    }
    .advanced-tech__left {
        align-items: center;
        text-align: center;
    }
    .advanced-tech__image-wrapper {
        max-width: 400px;
    }
    .advanced-tech__icon-box {
        max-width: 240px;
        gap: 15px;
    }
    .advanced-tech__icon-box-text {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .advanced-tech {
        padding: 50px 20px;
    }
    .advanced-tech__title {
        font-size: 36px;
        line-height: 44px;
    }
    .advanced-tech__subheading {
        font-size: 24px;
        line-height: 28px;
    }
    .advanced-tech__description {
        font-size: 15px;
        line-height: 22px;
    }
    .advanced-tech__right {
        gap: 25px;
    }
    .advanced-tech__icon-grid {
        gap: 12px;
    }
    .advanced-tech__icon-row {
        gap: 12px;
        flex-wrap: wrap;
    }
    .advanced-tech__icon-box {
        max-width: 280px;
        padding-right: 20px;
        padding-left: 15px;
        gap: 15px;
        height: 52px;
    }
    .advanced-tech__icon-box-icon {
        width: 28px;
        height: 28px;
    }
    .advanced-tech__icon-box-text {
        font-size: 13px;
        white-space: normal;
    }
}

@media (max-width: 576px) {
    .advanced-tech {
        padding: 50px 20px;
    }
    .advanced-tech__title {
        font-size: 28px;
        line-height: 34px;
    }
    .advanced-tech__subheading {
        font-size: 20px;
        line-height: 24px;
    }
    .advanced-tech__description {
        font-size: 15px;
        line-height: 20px;
    }
    .advanced-tech__layout {
        gap: 30px;
    }
    .advanced-tech__image-wrapper {
        max-width: 100%;
    }
    .advanced-tech__right {
        gap: 20px;
    }
    .advanced-tech__icon-grid {
        gap: 10px;
    }
    .advanced-tech__icon-row {
        gap: 10px;
        flex-wrap: wrap;
    }
    .advanced-tech__icon-box {
        max-width: 80%;
        height: 48px;
        padding: 6px 14px;
        gap: 12px;
        border-radius: 40px;
    }
    .advanced-tech__icon-box::before {
        border-radius: 40px;
    }
    .advanced-tech__icon-box-icon {
        width: 24px;
        height: 24px;
    }
    .advanced-tech__icon-box-text {
        font-size: 17px;
    }
}
/* ============================================
   CALL TO ACTION - ABOUT PAGE
   ============================================ */

.cta-about {
    width: 100%;
    height: 300px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cta-about__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
}

.cta-about__content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.cta-about__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 380px;
    height: 56px;
    padding: 12px 24px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
}

.cta-about__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.cta-about__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.cta-about__button:hover .cta-about__button-icon {
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE - CTA ABOUT
   ============================================ */

@media (max-width: 768px) {
    .cta-about {
        height: auto;
        padding: 60px 20px;
    }
    .cta-about__container {
        padding: 0 20px;
    }
    .cta-about__button {
        width: 200px;
        height: 50px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .cta-about {
        padding: 40px 15px;
    }
    .cta-about__button {
        width: 100%;
        max-width: 100%;
        height: 48px;
        font-size: 0.85rem;
    }
}

/* ============================================
   SERVICES PAGE - HERO SECTION
   ============================================ */

.services-hero {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.services-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.services-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.services-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.services-hero__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 60px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .services-hero__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.services-hero__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 700px;
    margin: 0;
}

.services-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 253px;
    height: 56px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.services-hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.services-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.services-hero__button:hover .services-hero__button-icon {
    transform: translateX(4px);
}

.services-hero__button:focus {
    outline: none;
}

.services-hero__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - SERVICES HERO
   ============================================ */

@media (max-width: 1200px) {
    .services-hero__title {
        font-size: 72px;
        line-height: 74px;
    }
}

@media (max-width: 992px) {
    .services-hero {
        height: 380px;
    }
    .services-hero__title {
        font-size: 60px;
        line-height: 62px;
    }
    .services-hero__description {
        font-size: 15px;
        line-height: 22px;
    }
    .services-hero__button {
        width: 220px;
        height: 50px;
        font-size: 0.85rem;
    }
    .services-hero__content {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .services-hero {
        height: 320px;
    }
    .services-hero__title {
        font-size: 48px;
        line-height: 50px;
        letter-spacing: -1px;
    }
    .services-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .services-hero__button {
        width: 200px;
        height: 48px;
        font-size: 0.85rem;
    }
    .services-hero__content {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .services-hero {
        height: auto;
        min-height: 300px;
        padding: 40px 16px;
    }
    .services-hero__title {
        font-size: 32px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .services-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .services-hero__button {
        width: 100%;
        max-width: 200px;
        height: 44px;
        font-size: 0.8rem;
    }
    .services-hero__content {
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .services-hero {
        min-height: 350px;
        padding: 50px 20px;
    }
    .services-hero__title {
        font-size: 28px;
        line-height: 34px;
    }
    .services-hero__description {
        font-size: 15px;
        line-height: 20px;
    }
    .services-hero__button {
        height: 40px;
        font-size: 0.75rem;
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================
   SERVICES PAGE - NORTH VANCOUVER SECTION
   ============================================ */

.north-vancouver {
    width: 100%;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 80px;
    padding-left: 20px;
    background: #030200;
    box-sizing: border-box;
}

.north-vancouver__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.north-vancouver__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.north-vancouver__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
}

@supports not (background-clip: text) {
    .north-vancouver__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.north-vancouver__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 900px;
    margin: 0 0 40px;
}

.north-vancouver__image-wrapper {
    width: 90%;
    max-width: 800px;
    border-radius: 16px;
	justify-content: center;
	align-items: center;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.north-vancouver__image {
    width: 90%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - NORTH VANCOUVER
   ============================================ */

@media (max-width: 992px) {
    .north-vancouver {
        padding: 60px 30px;
    }
    .north-vancouver__title {
        font-size: 48px;
        line-height: 56px;
    }
    .north-vancouver__description {
        font-size: 17px;
        line-height: 26px;
    }
    .north-vancouver__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .north-vancouver {
        padding: 50px 20px;
    }
    .north-vancouver__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .north-vancouver__description {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }
    .north-vancouver__image-wrapper {
        border-radius: 12px;
    }
}

@media (max-width: 576px) {
    .north-vancouver {
        padding: 40px 16px;
    }
    .north-vancouver__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .north-vancouver__description {
        font-size: 15px;
        line-height: 22px;
        margin: 0 0 30px;
    }
    .north-vancouver__image-wrapper {
        border-radius: 10px;
    }
}

@media (max-width: 400px) {
    .north-vancouver {
        padding: 50px 20px;
    }
    .north-vancouver__title {
        font-size: 28px;
        line-height: 34px;
    }
    .north-vancouver__description {
        font-size: 15px;
        line-height: 20px;
    }
}

/* ============================================
   SERVICES PAGE - PREVENTATIVE CARE SECTION
   ============================================ */

.preventative-care {
    width: 100%;
    padding: 80px 0 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.preventative-care__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.preventative-care__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.preventative-care__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.preventative-care__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .preventative-care__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.preventative-care__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.preventative-care__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.preventative-care__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.preventative-care__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.preventative-care__button:hover .preventative-care__button-icon {
    transform: translateX(4px);
}

.preventative-care__button:active {
    transform: scale(0.97);
}

.preventative-care__right {
    display: flex;
    justify-content: Right;
    align-items: Right;
}

.preventative-care__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.preventative-care__image {
    width: 100%;
    height: auto;
    display: block;
}

.preventative-care__bottom-image {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}

.preventative-care__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - PREVENTATIVE CARE
   ============================================ */

@media (max-width: 992px) {
    .preventative-care {
        padding: 60px 0 0;
    }
    .preventative-care__container {
        padding: 0 30px;
    }
    .preventative-care__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 40px;
    }
    .preventative-care__title {
        font-size: 48px;
        line-height: 56px;
    }
    .preventative-care__description {
        font-size: 17px;
        line-height: 26px;
    }
    .preventative-care__right {
        justify-content: center;
    }
    .preventative-care__image-wrapper {
        max-width: 100%;
    }
    .preventative-care__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .preventative-care {
        padding: 50px 0 0;
    }
    .preventative-care__container {
        padding: 0 20px;
    }
    .preventative-care__layout {
        gap: 30px;
        padding-bottom: 30px;
    }
    .preventative-care__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .preventative-care__description {
        font-size: 16px;
        line-height: 24px;
    }
    .preventative-care__left {
        align-items: center;
        text-align: center;
    }
    .preventative-care__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .preventative-care__image-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
    .preventative-care__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .preventative-care {
        padding: 40px 0 0;
    }
    .preventative-care__container {
        padding: 0 16px;
    }
    .preventative-care__layout {
        gap: 20px;
        padding-bottom: 20px;
    }
    .preventative-care__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .preventative-care__description {
        font-size: 15px;
        line-height: 22px;
    }
    .preventative-care__left {
        align-items: center;
        text-align: center;
    }
    .preventative-care__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .preventative-care__right {
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .preventative-care__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .preventative-care__image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .preventative-care {
        padding:50px 20px 0;
    }
    .preventative-care__container {
        padding: 0 12px;
    }
    .preventative-care__title {
        font-size: 28px;
        line-height: 34px;
    }
    .preventative-care__description {
        font-size: 15px;
        line-height: 20px;
    }
    .preventative-care__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    .preventative-care__right {
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .preventative-care__image-wrapper {
        max-width: 100%;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .preventative-care__image {
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================
   SERVICES PAGE - DENTAL CLEANING SECTION
   ============================================ */

.dental-cleaning {
    width: 100%;
    padding: 80px 20px;
    background: #000000;
    box-sizing: border-box;
}

.dental-cleaning__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.dental-cleaning__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.dental-cleaning__left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dental-cleaning__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.dental-cleaning__image {
    width: 100%;
    height: auto;
    display: block;
}

.dental-cleaning__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.dental-cleaning__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .dental-cleaning__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.dental-cleaning__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.dental-cleaning__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.dental-cleaning__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.dental-cleaning__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.dental-cleaning__button:hover .dental-cleaning__button-icon {
    transform: translateX(4px);
}

.dental-cleaning__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - DENTAL CLEANING
   ============================================ */

@media (max-width: 992px) {
    .dental-cleaning {
        padding: 60px 30px;
    }
    .dental-cleaning__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .dental-cleaning__title {
        font-size: 48px;
        line-height: 56px;
    }
    .dental-cleaning__description {
        font-size: 17px;
        line-height: 26px;
    }
    .dental-cleaning__left {
        justify-content: center;
    }
    .dental-cleaning__image-wrapper {
        max-width: 100%;
    }
    .dental-cleaning__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .dental-cleaning {
        padding: 50px 20px;
    }
    .dental-cleaning__layout {
        gap: 30px;
    }
    .dental-cleaning__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .dental-cleaning__description {
        font-size: 16px;
        line-height: 24px;
    }
    .dental-cleaning__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .dental-cleaning__image-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
    .dental-cleaning__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .dental-cleaning {
        padding: 40px 16px;
    }
    .dental-cleaning__layout {
        gap: 20px;
    }
    .dental-cleaning__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .dental-cleaning__description {
        font-size: 15px;
        line-height: 22px;
    }
    .dental-cleaning__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .dental-cleaning__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .dental-cleaning__left {
        order: 2;
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .dental-cleaning__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .dental-cleaning__image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .dental-cleaning {
        padding: 50px 20px;
    }
    .dental-cleaning__title {
        font-size: 28px;
        line-height: 34px;
    }
    .dental-cleaning__description {
        font-size: 15px;
        line-height: 20px;
    }
    .dental-cleaning__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    
    /*  SWAP COLUMNS ON MOBILE - Right column first, Left column second */
    .dental-cleaning__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .dental-cleaning__left {
        order: 2;
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .dental-cleaning__image-wrapper {
        max-width: 100%;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .dental-cleaning__image {
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================
   SERVICES PAGE - DENTAL EXAMS SECTION
   ============================================ */

.dental-exams {
    width: 100%;
    padding: 80px 20px;
    background: #161615;
    box-sizing: border-box;
}

.dental-exams__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.dental-exams__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.dental-exams__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.dental-exams__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .dental-exams__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.dental-exams__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.dental-exams__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.dental-exams__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.dental-exams__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.dental-exams__button:hover .dental-exams__button-icon {
    transform: translateX(4px);
}

.dental-exams__button:active {
    transform: scale(0.97);
}

.dental-exams__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dental-exams__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.dental-exams__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - DENTAL EXAMS
   ============================================ */

@media (max-width: 992px) {
    .dental-exams {
        padding: 60px 30px;
    }
    .dental-exams__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .dental-exams__title {
        font-size: 48px;
        line-height: 56px;
    }
    .dental-exams__description {
        font-size: 17px;
        line-height: 26px;
    }
    .dental-exams__right {
        justify-content: center;
    }
    .dental-exams__image-wrapper {
        max-width: 100%;
    }
    .dental-exams__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .dental-exams {
        padding: 50px 20px;
    }
    .dental-exams__layout {
        gap: 30px;
    }
    .dental-exams__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .dental-exams__description {
        font-size: 16px;
        line-height: 24px;
    }
    .dental-exams__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .dental-exams__image-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
    .dental-exams__image {
        width: 100%;
        margin: 0 auto;
    }
    .dental-exams__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .dental-exams {
        padding: 40px 16px;
    }
    .dental-exams__layout {
        gap: 20px;
    }
    .dental-exams__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .dental-exams__description {
        font-size: 15px;
        line-height: 22px;
    }
    .dental-exams__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .dental-exams__left {
        align-items: center;
        text-align: center;
    }
    .dental-exams__right {
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .dental-exams__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .dental-exams__image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .dental-exams {
        padding: 50px 20px;
    }
    .dental-exams__title {
        font-size: 28px;
        line-height: 34px;
    }
    .dental-exams__description {
        font-size: 15px;
        line-height: 20px;
    }
    .dental-exams__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    .dental-exams__right {
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .dental-exams__image-wrapper {
        max-width: 100%;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .dental-exams__image {
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================
   SERVICES PAGE - DENTAL X-RAYS SECTION
   ============================================ */

.dental-xrays {
    width: 100%;
    padding: 80px 20px;
    background: #000000;
    box-sizing: border-box;
}

.dental-xrays__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.dental-xrays__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.dental-xrays__left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dental-xrays__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dental-xrays__image {
    width: 100%;
    height: auto;
    display: block;
}

.dental-xrays__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.dental-xrays__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .dental-xrays__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.dental-xrays__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.dental-xrays__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.dental-xrays__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.dental-xrays__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.dental-xrays__button:hover .dental-xrays__button-icon {
    transform: translateX(4px);
}

.dental-xrays__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - DENTAL X-RAYS
   ============================================ */

@media (max-width: 992px) {
    .dental-xrays {
        padding: 60px 30px;
    }
    .dental-xrays__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .dental-xrays__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .dental-xrays__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .dental-xrays__left {
        justify-content: center;
    }
    .dental-xrays__image-wrapper {
        max-width: 100%;
    }
    .dental-xrays__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .dental-xrays {
        padding: 50px 20px;
    }
    .dental-xrays__layout {
        gap: 30px;
    }
    .dental-xrays__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .dental-xrays__description {
        font-size: 16px;
        line-height: 24px;
    }
    .dental-xrays__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .dental-xrays__image-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
    .dental-xrays__image {
        width: 100%;
        margin: 0 auto;
    }
    .dental-xrays__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .dental-xrays {
        padding: 40px 16px;
    }
    .dental-xrays__layout {
        gap: 20px;
    }
    .dental-xrays__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .dental-xrays__description {
        font-size: 15px;
        line-height: 22px;
    }
    .dental-xrays__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .dental-xrays__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .dental-xrays__left {
        order: 2;
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .dental-xrays__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .dental-xrays__image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .dental-xrays {
        padding: 50px 20px;
    }
    .dental-xrays__title {
        font-size: 28px;
        line-height: 34px;
    }
    .dental-xrays__description {
        font-size: 15px;
        line-height: 20px;
    }
    .dental-xrays__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    

    .dental-xrays__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .dental-xrays__left {
        order: 2;
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .dental-xrays__image-wrapper {
        max-width: 100%;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .dental-xrays__image {
        width: 100%;
        margin: 0 auto;
    }
}
/* ============================================
   SERVICES PAGE - ROOT CANALS SECTION
   ============================================ */

.root-canals {
    width: 100%;
    padding: 80px 20px;
    background: #161615;
    box-sizing: border-box;
}

.root-canals__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.root-canals__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.root-canals__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.root-canals__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .root-canals__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.root-canals__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.root-canals__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.root-canals__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    color: #FFFFFF;
}

.root-canals__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.root-canals__button:hover .root-canals__button-icon {
    transform: translateX(4px);
}

.root-canals__button:active {
    transform: scale(0.97);
}

.root-canals__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.root-canals__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.root-canals__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - ROOT CANALS
   ============================================ */

@media (max-width: 992px) {
    .root-canals {
        padding: 60px 30px;
    }
    .root-canals__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .root-canals__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .root-canals__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .root-canals__right {
        justify-content: center;
    }
    .root-canals__image-wrapper {
        max-width: 100%;
    }
    .root-canals__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .root-canals {
        padding: 50px 20px;
    }
    .root-canals__layout {
        gap: 30px;
    }
    .root-canals__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .root-canals__description {
        font-size: 16px;
        line-height: 24px;
    }
    .root-canals__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .root-canals__image-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
    .root-canals__image {
        width: 100%;
        margin: 0 auto;
    }
    .root-canals__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .root-canals {
        padding: 40px 16px;
    }
    .root-canals__layout {
        gap: 20px;
    }
    .root-canals__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .root-canals__description {
        font-size: 15px;
        line-height: 22px;
    }
    .root-canals__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .root-canals__left {
        align-items: center;
        text-align: center;
    }
    .root-canals__right {
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .root-canals__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .root-canals__image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .root-canals {
        padding: 50px 20px;
    }
    .root-canals__title {
        font-size: 28px;
        line-height: 34px;
    }
    .root-canals__description {
        font-size: 15px;
        line-height: 20px;
    }
    .root-canals__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    .root-canals__right {
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .root-canals__image-wrapper {
        max-width: 100%;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .root-canals__image {
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================
   SERVICES PAGE - PERIODONTAL SERVICES SECTION
   ============================================ */

.periodontal-services {
    width: 100%;
    padding: 80px 20px;
    background: #000000;
    box-sizing: border-box;
}

.periodontal-services__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.periodontal-services__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.periodontal-services__left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.periodontal-services__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.periodontal-services__image {
    width: 100%;
    height: auto;
    display: block;
}

.periodontal-services__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.periodontal-services__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .periodontal-services__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.periodontal-services__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.periodontal-services__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.periodontal-services__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.periodontal-services__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.periodontal-services__button:hover .periodontal-services__button-icon {
    transform: translateX(4px);
}

.periodontal-services__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - PERIODONTAL SERVICES
   ============================================ */

@media (max-width: 992px) {
    .periodontal-services {
        padding: 60px 30px;
    }
    .periodontal-services__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .periodontal-services__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .periodontal-services__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .periodontal-services__left {
        justify-content: center;
    }
    .periodontal-services__image-wrapper {
        max-width: 100%;
    }
    .periodontal-services__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .periodontal-services {
        padding: 50px 20px;
    }
    .periodontal-services__layout {
        gap: 30px;
    }
    .periodontal-services__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .periodontal-services__description {
        font-size: 16px;
        line-height: 24px;
    }
    .periodontal-services__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .periodontal-services__image-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
    .periodontal-services__image {
        width: 100%;
        margin: 0 auto;
    }
    .periodontal-services__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .periodontal-services {
        padding: 40px 16px;
    }
    .periodontal-services__layout {
        gap: 20px;
    }
    .periodontal-services__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .periodontal-services__description {
        font-size: 15px;
        line-height: 22px;
    }
    .periodontal-services__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    
    .periodontal-services__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .periodontal-services__left {
        order: 2;
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .periodontal-services__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .periodontal-services__image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .periodontal-services {
        padding: 50px 20px;
    }
    .periodontal-services__title {
        font-size: 28px;
        line-height: 34px;
    }
    .periodontal-services__description {
        font-size: 15px;
        line-height: 20px;
    }
    .periodontal-services__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    

    .periodontal-services__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .periodontal-services__left {
        order: 2;
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .periodontal-services__image-wrapper {
        max-width: 100%;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .periodontal-services__image {
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================
   ORAL SURGERY PAGE - HERO SECTION
   ============================================ */

.oral-surgery-hero {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.oral-surgery-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.oral-surgery-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 0px;
    position: relative;
    z-index: 1;
}

.oral-surgery-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.oral-surgery-hero__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 60px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .oral-surgery-hero__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.oral-surgery-hero__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 700px;
    margin: 0;
}

.oral-surgery-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 253px;
    height: 56px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.oral-surgery-hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.oral-surgery-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.oral-surgery-hero__button:hover .oral-surgery-hero__button-icon {
    transform: translateX(4px);
}

.oral-surgery-hero__button:focus {
    outline: none;
}

.oral-surgery-hero__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - ORAL SURGERY HERO
   ============================================ */

@media (max-width: 1200px) {
    .oral-surgery-hero__title {
        font-size: 72px;
        line-height: 74px;
    }
}

@media (max-width: 992px) {
    .oral-surgery-hero {
        height: 380px;
    }
    .oral-surgery-hero__title {
        font-size: 60px;
        line-height: 62px;
    }
    .oral-surgery-hero__description {
        font-size: 15px;
        line-height: 22px;
    }
    .oral-surgery-hero__button {
        width: 220px;
        height: 50px;
        font-size: 0.85rem;
    }
    .oral-surgery-hero__content {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .oral-surgery-hero {
        height: 320px;
    }
    .oral-surgery-hero__title {
        font-size: 48px;
        line-height: 50px;
        letter-spacing: -1px;
    }
    .oral-surgery-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .oral-surgery-hero__button {
        width: 200px;
        height: 48px;
        font-size: 0.85rem;
    }
    .oral-surgery-hero__content {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .oral-surgery-hero {
        height: auto;
        min-height: 300px;
        padding: 80px 16px;
    }
    .oral-surgery-hero__title {
        font-size: 32px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .oral-surgery-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .oral-surgery-hero__button {
        width: 100%;
        max-width: 200px;
        height: 44px;
        font-size: 0.8rem;
    }
    .oral-surgery-hero__content {
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .oral-surgery-hero {
        min-height: 350px;
        padding: 50px 20px;
    }
    .oral-surgery-hero__title {
        font-size: 28px;
        line-height: 34px;
    }
    .oral-surgery-hero__description {
        font-size: 15px;
        line-height: 20px;
    }
    .oral-surgery-hero__button {
        height: 40px;
        font-size: 0.75rem;
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================
   ORAL SURGERY PAGE - ORAL SURGERY SERVICES SECTION
   ============================================ */

.oral-surgery-services {
    width: 100%;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 80px;
    padding-left: 0px;
    background: #030200;
    box-sizing: border-box;
}

.oral-surgery-services__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.oral-surgery-services__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    gap: 30px;
}

.oral-surgery-services__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 55px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .oral-surgery-services__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.oral-surgery-services__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: var(--color-white);
    max-width: 900px;
    margin: 0;
}

.oral-surgery-services__image-wrapper {
    width: 90%;
    max-width: 800px;
    border-radius: 16px;
    overflow: hidden;
	justify-content: center;
	align-items: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.oral-surgery-services__image {
    width: 90%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - ORAL SURGERY SERVICES
   ============================================ */

@media (max-width: 992px) {
    .oral-surgery-services {
        padding: 60px 30px;
    }
    .oral-surgery-services__title {
        font-size: 48px;
        line-height: 56px;
    }
    .oral-surgery-services__description {
        font-size: 17px;
        line-height: 26px;
    }
    .oral-surgery-services__image-wrapper {
        max-width: 100%;
    }
    .oral-surgery-services__content {
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .oral-surgery-services {
        padding: 50px 20px;
    }
    .oral-surgery-services__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .oral-surgery-services__description {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }
    .oral-surgery-services__image-wrapper {
        border-radius: 12px;
    }
    .oral-surgery-services__content {
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .oral-surgery-services {
        padding: 40px 16px;
    }
    .oral-surgery-services__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .oral-surgery-services__description {
        font-size: 15px;
        line-height: 20px;
    }
    .oral-surgery-services__image-wrapper {
        border-radius: 10px;
    }
    .oral-surgery-services__content {
        gap: 16px;
    }
}

@media (max-width: 400px) {
    .oral-surgery-services {
        padding: 50px 20px;
    }
    .oral-surgery-services__title {
        font-size: 28px;
        line-height: 34px;
    }
    .oral-surgery-services__description {
        font-size: 15px;
        line-height: 20px;
    }
    .oral-surgery-services__content {
        gap: 12px;
    }
}

/* ============================================
   ORAL SURGERY PAGE - DENTAL IMPLANTS SECTION
   ============================================ */

.dental-implants {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.dental-implants__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.dental-implants__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.dental-implants__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.dental-implants__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .dental-implants__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.dental-implants__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.dental-implants__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.dental-implants__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.dental-implants__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.dental-implants__button:hover .dental-implants__button-icon {
    transform: translateX(4px);
}

.dental-implants__button:active {
    transform: scale(0.97);
}

.dental-implants__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dental-implants__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.dental-implants__image {
    width: 100%;
    height: auto;
    display: block;
}

.dental-implants__bottom-image {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}

.dental-implants__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - DENTAL IMPLANTS
   ============================================ */

@media (max-width: 992px) {
    .dental-implants {
        padding: 60px 0 0;
    }
    .dental-implants__container {
        padding: 0 30px;
    }
    .dental-implants__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 40px;
    }
    .dental-implants__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .dental-implants__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .dental-implants__right {
        justify-content: center;
    }
    .dental-implants__image-wrapper {
        max-width: 100%;
    }
    .dental-implants__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .dental-implants {
        padding: 50px 0 0;
    }
    .dental-implants__container {
        padding: 0 20px;
    }
    .dental-implants__layout {
        gap: 30px;
        padding-bottom: 30px;
    }
    .dental-implants__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .dental-implants__description {
        font-size: 16px;
        line-height: 24px;
    }
    .dental-implants__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .dental-implants__image-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
    .dental-implants__image {
        width: 100%;
        margin: 0 auto;
    }
    .dental-implants__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .dental-implants {
        padding: 40px 0 0;
    }
    .dental-implants__container {
        padding: 0 16px;
    }
    .dental-implants__layout {
        gap: 20px;
        padding-bottom: 20px;
    }
    .dental-implants__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .dental-implants__description {
        font-size: 15px;
        line-height: 22px;
    }
    .dental-implants__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    /* CENTER IMAGE ON MOBILE */
    .dental-implants__right {
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .dental-implants__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .dental-implants__image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .dental-implants__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .dental-implants {
        padding: 50px 20px 0;
    }
    .dental-implants__container {
        padding: 0 12px;
    }
    .dental-implants__title {
        font-size: 28px;
        line-height: 34px;
    }
    .dental-implants__description {
        font-size: 15px;
        line-height: 20px;
    }
    .dental-implants__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    /* CENTER IMAGE ON SMALL MOBILE */
    .dental-implants__right {
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .dental-implants__image-wrapper {
        max-width: 100%;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .dental-implants__image {
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================
   ORAL SURGERY PAGE - PERIODONTAL DISEASE SECTION
   ============================================ */

.periodontal-disease {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.periodontal-disease__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.periodontal-disease__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.periodontal-disease__left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.periodontal-disease__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.periodontal-disease__image {
    width: 100%;
    height: auto;
    display: block;
}

.periodontal-disease__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.periodontal-disease__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .periodontal-disease__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.periodontal-disease__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.periodontal-disease__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.periodontal-disease__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.periodontal-disease__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.periodontal-disease__button:hover .periodontal-disease__button-icon {
    transform: translateX(4px);
}

.periodontal-disease__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - PERIODONTAL DISEASE
   ============================================ */

@media (max-width: 992px) {
    .periodontal-disease {
        padding: 60px 0 60px;
    }
    .periodontal-disease__container {
        padding: 0 30px;
    }
    .periodontal-disease__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .periodontal-disease__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .periodontal-disease__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .periodontal-disease__left {
        justify-content: center;
    }
    .periodontal-disease__image-wrapper {
        max-width: 100%;
    }
    .periodontal-disease__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .periodontal-disease {
        padding: 50px 0 50px;
    }
    .periodontal-disease__container {
        padding: 0 20px;
    }
    .periodontal-disease__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .periodontal-disease__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .periodontal-disease__description {
        font-size: 16px;
        line-height: 24px;
    }
    .periodontal-disease__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .periodontal-disease__image-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
    .periodontal-disease__image {
        width: 100%;
        margin: 0 auto;
    }
    .periodontal-disease__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .periodontal-disease {
        padding: 40px 0 40px;
    }
    .periodontal-disease__container {
        padding: 0 16px;
    }
    .periodontal-disease__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .periodontal-disease__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .periodontal-disease__description {
        font-size: 15px;
        line-height: 22px;
    }
    .periodontal-disease__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .periodontal-disease__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .periodontal-disease__left {
        order: 2;
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .periodontal-disease__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .periodontal-disease__image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .periodontal-disease {
        padding: 50px 20px;
    }
    .periodontal-disease__container {
        padding: 0 12px;
    }
    .periodontal-disease__title {
        font-size: 28px;
        line-height: 34px;
    }
    .periodontal-disease__description {
        font-size: 15px;
        line-height: 20px;
    }
    .periodontal-disease__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    
    
    .periodontal-disease__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .periodontal-disease__left {
        order: 2;
        justify-content: center;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .periodontal-disease__image-wrapper {
        max-width: 100%;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .periodontal-disease__image {
        width: 100%;
        margin: 0 auto;
    }
}
/* ============================================
   ORAL SURGERY PAGE - GUM GRAFT SECTION
   ============================================ */

.gum-graft {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.gum-graft__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.gum-graft__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.gum-graft__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.gum-graft__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .gum-graft__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.gum-graft__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.gum-graft__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.gum-graft__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.gum-graft__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.gum-graft__button:hover .gum-graft__button-icon {
    transform: translateX(4px);
}

.gum-graft__button:active {
    transform: scale(0.97);
}

.gum-graft__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gum-graft__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.gum-graft__image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image within its wrapper */
}

/* ============================================
   RESPONSIVE - GUM GRAFT
   ============================================ */

@media (max-width: 992px) {
    .gum-graft {
        padding: 60px 0 60px;
    }
    .gum-graft__container {
        padding: 0 30px;
    }
    .gum-graft__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .gum-graft__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .gum-graft__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .gum-graft__right {
        justify-content: center;
    }
    .gum-graft__image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .gum-graft__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .gum-graft {
        padding: 50px 0 50px;
    }
    .gum-graft__container {
        padding: 0 20px;
    }
    .gum-graft__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .gum-graft__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .gum-graft__description {
        font-size: 16px;
        line-height: 24px;
    }
    .gum-graft__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .gum-graft__image-wrapper {
        max-width: 80%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .gum-graft__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .gum-graft {
        padding: 40px 0 40px;
    }
    .gum-graft__container {
        padding: 0 16px;
    }
    .gum-graft__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .gum-graft__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .gum-graft__description {
        font-size: 15px;
        line-height: 22px;
    }
    .gum-graft__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .gum-graft__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .gum-graft__image {
        width: 100%;
        margin: 0 auto;
    }
    .gum-graft__right {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 400px) {
    .gum-graft {
        padding: 50px 20px;
    }
    .gum-graft__container {
        padding: 0 12px;
    }
    .gum-graft__title {
        font-size: 28px;
        line-height: 34px;
    }
    .gum-graft__description {
        font-size: 15px;
        line-height: 20px;
    }
    .gum-graft__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    .gum-graft__image-wrapper {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .gum-graft__image {
        width: 100%;
        margin: 0 auto;
    }
    .gum-graft__right {
        justify-content: center;
        width: 100%;
    }
}

/* ============================================
   ORAL SURGERY PAGE - CROWN LENGTHENING SECTION
   ============================================ */

.crown-lengthening {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.crown-lengthening__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.crown-lengthening__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.crown-lengthening__left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.crown-lengthening__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.crown-lengthening__image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.crown-lengthening__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.crown-lengthening__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .crown-lengthening__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.crown-lengthening__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.crown-lengthening__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.crown-lengthening__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.crown-lengthening__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.crown-lengthening__button:hover .crown-lengthening__button-icon {
    transform: translateX(4px);
}

.crown-lengthening__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - CROWN LENGTHENING
   ============================================ */

@media (max-width: 992px) {
    .crown-lengthening {
        padding: 60px 0 60px;
    }
    .crown-lengthening__container {
        padding: 0 30px;
    }
    .crown-lengthening__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .crown-lengthening__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .crown-lengthening__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .crown-lengthening__left {
        justify-content: center;
    }
    .crown-lengthening__image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .crown-lengthening__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .crown-lengthening {
        padding: 50px 0 50px;
    }
    .crown-lengthening__container {
        padding: 0 20px;
    }
    .crown-lengthening__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .crown-lengthening__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .crown-lengthening__description {
        font-size: 16px;
        line-height: 24px;
    }
    .crown-lengthening__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .crown-lengthening__image-wrapper {
        max-width: 80%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .crown-lengthening__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .crown-lengthening {
        padding: 40px 0 40px;
    }
    .crown-lengthening__container {
        padding: 0 16px;
    }
    .crown-lengthening__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .crown-lengthening__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .crown-lengthening__description {
        font-size: 15px;
        line-height: 22px;
    }
    .crown-lengthening__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
 
    .crown-lengthening__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .crown-lengthening__left {
        order: 2;
        justify-content: center;
        width: 100%;
    }
    
    .crown-lengthening__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .crown-lengthening__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .crown-lengthening {
        padding: 50px 20px;
    }
    .crown-lengthening__container {
        padding: 0 12px;
    }
    .crown-lengthening__title {
        font-size: 28px;
        line-height: 34px;
    }
    .crown-lengthening__description {
        font-size: 15px;
        line-height: 20px;
    }
    .crown-lengthening__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    
   
    .crown-lengthening__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .crown-lengthening__left {
        order: 2;
        justify-content: center;
        width: 100%;
    }
    
    .crown-lengthening__image-wrapper {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .crown-lengthening__image {
        width: 100%;
        margin: 0 auto;
    }
}
/* ============================================
   ORAL SURGERY PAGE - TEETH EXTRACTIONS SECTION
   ============================================ */

.teeth-extractions {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.teeth-extractions__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.teeth-extractions__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.teeth-extractions__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.teeth-extractions__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .teeth-extractions__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.teeth-extractions__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.teeth-extractions__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.teeth-extractions__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.teeth-extractions__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.teeth-extractions__button:hover .teeth-extractions__button-icon {
    transform: translateX(4px);
}

.teeth-extractions__button:active {
    transform: scale(0.97);
}

.teeth-extractions__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.teeth-extractions__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.teeth-extractions__image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image within its wrapper */
}

/* ============================================
   RESPONSIVE - TEETH EXTRACTIONS
   ============================================ */

@media (max-width: 992px) {
    .teeth-extractions {
        padding: 60px 0 60px;
    }
    .teeth-extractions__container {
        padding: 0 30px;
    }
    .teeth-extractions__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .teeth-extractions__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .teeth-extractions__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .teeth-extractions__right {
        justify-content: center;
    }
    .teeth-extractions__image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .teeth-extractions__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .teeth-extractions {
        padding: 50px 0 50px;
    }
    .teeth-extractions__container {
        padding: 0 20px;
    }
    .teeth-extractions__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .teeth-extractions__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .teeth-extractions__description {
        font-size: 16px;
        line-height: 24px;
    }
    .teeth-extractions__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .teeth-extractions__image-wrapper {
        max-width: 80%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .teeth-extractions__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .teeth-extractions {
        padding: 40px 0 40px;
    }
    .teeth-extractions__container {
        padding: 0 16px;
    }
    .teeth-extractions__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .teeth-extractions__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .teeth-extractions__description {
        font-size: 15px;
        line-height: 22px;
    }
    .teeth-extractions__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .teeth-extractions__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .teeth-extractions__image {
        width: 100%;
        margin: 0 auto;
    }
    .teeth-extractions__right {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 400px) {
    .teeth-extractions {
        padding: 50px 20px;
    }
    .teeth-extractions__container {
        padding: 0 12px;
    }
    .teeth-extractions__title {
        font-size: 28px;
        line-height: 34px;
    }
    .teeth-extractions__description {
        font-size: 15px;
        line-height: 20px;
    }
    .teeth-extractions__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    .teeth-extractions__image-wrapper {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .teeth-extractions__image {
        width: 100%;
        margin: 0 auto;
    }
    .teeth-extractions__right {
        justify-content: center;
        width: 100%;
    }
}

/* ============================================
   ORAL SURGERY PAGE - GUIDED IMPLANT SURGERY SECTION
   ============================================ */

.guided-implant-surgery {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.guided-implant-surgery__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.guided-implant-surgery__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.guided-implant-surgery__left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.guided-implant-surgery__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.guided-implant-surgery__image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.guided-implant-surgery__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.guided-implant-surgery__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .guided-implant-surgery__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.guided-implant-surgery__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.guided-implant-surgery__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.guided-implant-surgery__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.guided-implant-surgery__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.guided-implant-surgery__button:hover .guided-implant-surgery__button-icon {
    transform: translateX(4px);
}

.guided-implant-surgery__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - GUIDED IMPLANT SURGERY
   ============================================ */

@media (max-width: 992px) {
    .guided-implant-surgery {
        padding: 60px 0 60px;
    }
    .guided-implant-surgery__container {
        padding: 0 30px;
    }
    .guided-implant-surgery__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .guided-implant-surgery__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .guided-implant-surgery__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .guided-implant-surgery__left {
        justify-content: center;
    }
    .guided-implant-surgery__image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .guided-implant-surgery__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .guided-implant-surgery {
        padding: 50px 0 50px;
    }
    .guided-implant-surgery__container {
        padding: 0 20px;
    }
    .guided-implant-surgery__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .guided-implant-surgery__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .guided-implant-surgery__description {
        font-size: 16px;
        line-height: 24px;
    }
    .guided-implant-surgery__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .guided-implant-surgery__image-wrapper {
        max-width: 80%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .guided-implant-surgery__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .guided-implant-surgery {
        padding: 40px 0 40px;
    }
    .guided-implant-surgery__container {
        padding: 0 16px;
    }
    .guided-implant-surgery__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .guided-implant-surgery__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .guided-implant-surgery__description {
        font-size: 15px;
        line-height: 22px;
    }
    .guided-implant-surgery__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .guided-implant-surgery__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .guided-implant-surgery__left {
        order: 2;
        justify-content: center;
        width: 100%;
    }
    
    .guided-implant-surgery__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .guided-implant-surgery__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .guided-implant-surgery {
        padding: 50px 20px;
    }
    .guided-implant-surgery__container {
        padding: 0 12px;
    }
    .guided-implant-surgery__title {
        font-size: 28px;
        line-height: 34px;
    }
    .guided-implant-surgery__description {
        font-size: 15px;
        line-height: 20px;
    }
    .guided-implant-surgery__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    .guided-implant-surgery__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .guided-implant-surgery__left {
        order: 2;
        justify-content: center;
        width: 100%;
    }
    
    .guided-implant-surgery__image-wrapper {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .guided-implant-surgery__image {
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================
   ORAL SURGERY PAGE - SEDATION DENTISTRY SECTION
   ============================================ */

.sedation-dentistry {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.sedation-dentistry__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.sedation-dentistry__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.sedation-dentistry__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.sedation-dentistry__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .sedation-dentistry__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.sedation-dentistry__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.sedation-dentistry__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.sedation-dentistry__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.sedation-dentistry__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.sedation-dentistry__button:hover .sedation-dentistry__button-icon {
    transform: translateX(4px);
}

.sedation-dentistry__button:active {
    transform: scale(0.97);
}

.sedation-dentistry__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sedation-dentistry__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.sedation-dentistry__image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image within its wrapper */
}

/* ============================================
   RESPONSIVE - SEDATION DENTISTRY
   ============================================ */

@media (max-width: 992px) {
    .sedation-dentistry {
        padding: 60px 0 60px;
    }
    .sedation-dentistry__container {
        padding: 0 30px;
    }
    .sedation-dentistry__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .sedation-dentistry__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .sedation-dentistry__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .sedation-dentistry__right {
        justify-content: center;
    }
    .sedation-dentistry__image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .sedation-dentistry__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .sedation-dentistry {
        padding: 50px 0 50px;
    }
    .sedation-dentistry__container {
        padding: 0 20px;
    }
    .sedation-dentistry__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .sedation-dentistry__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .sedation-dentistry__description {
        font-size: 16px;
        line-height: 24px;
    }
    .sedation-dentistry__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .sedation-dentistry__image-wrapper {
        max-width: 80%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .sedation-dentistry__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .sedation-dentistry {
        padding: 40px 0 40px;
    }
    .sedation-dentistry__container {
        padding: 0 16px;
    }
    .sedation-dentistry__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .sedation-dentistry__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .sedation-dentistry__description {
        font-size: 15px;
        line-height: 22px;
    }
    .sedation-dentistry__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .sedation-dentistry__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .sedation-dentistry__image {
        width: 100%;
        margin: 0 auto;
    }
    .sedation-dentistry__right {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 400px) {
    .sedation-dentistry {
        padding: 50px 20px;
    }
    .sedation-dentistry__container {
        padding: 0 12px;
    }
    .sedation-dentistry__title {
        font-size: 28px;
        line-height: 34px;
    }
    .sedation-dentistry__description {
        font-size: 15px;
        line-height: 20px;
    }
    .sedation-dentistry__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    .sedation-dentistry__image-wrapper {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .sedation-dentistry__image {
        width: 100%;
        margin: 0 auto;
    }
    .sedation-dentistry__right {
        justify-content: center;
        width: 100%;
    }
}
/* ============================================
   COSMETIC DENTISTRY PAGE - COSMETIC DENTISTRY HERO SECTION
   ============================================ */

.cosmetic-hero {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.cosmetic-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.cosmetic-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.cosmetic-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.cosmetic-hero__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 60px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .cosmetic-hero__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.cosmetic-hero__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 700px;
    margin: 0;
}

.cosmetic-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 253px;
    height: 56px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.cosmetic-hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.cosmetic-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.cosmetic-hero__button:hover .cosmetic-hero__button-icon {
    transform: translateX(4px);
}

.cosmetic-hero__button:focus {
    outline: none;
}

.cosmetic-hero__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - COSMETIC HERO
   ============================================ */

@media (max-width: 1200px) {
    .cosmetic-hero__title {
        font-size: 72px;
        line-height: 74px;
    }
}

@media (max-width: 992px) {
    .cosmetic-hero {
        height: 380px;
    }
    .cosmetic-hero__title {
        font-size: 60px;
        line-height: 62px;
    }
    .cosmetic-hero__description {
        font-size: 15px;
        line-height: 22px;
    }
    .cosmetic-hero__button {
        width: 220px;
        height: 50px;
        font-size: 0.85rem;
    }
    .cosmetic-hero__content {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .cosmetic-hero {
        height: 320px;
        background-position: center center;
    }
    .cosmetic-hero__title {
        font-size: 48px;
        line-height: 50px;
        letter-spacing: -1px;
    }
    .cosmetic-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .cosmetic-hero__button {
        width: 200px;
        height: 48px;
        font-size: 0.85rem;
    }
    .cosmetic-hero__content {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .cosmetic-hero {
        height: auto;
        min-height: 300px;
        padding: 40px 16px;
        background-position: center center;
    }
    .cosmetic-hero__title {
        font-size: 32px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .cosmetic-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .cosmetic-hero__button {
        width: 100%;
        max-width: 200px;
        height: 44px;
        font-size: 0.8rem;
    }
    .cosmetic-hero__content {
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .cosmetic-hero {
        min-height: 350px;
        padding: 80px 20px;
    }
    .cosmetic-hero__title {
        font-size: 28px;
        line-height: 34px;
    }
    .cosmetic-hero__description {
        font-size: 15px;
        line-height: 20px;
    }
    .cosmetic-hero__button {
        height: 40px;
        font-size: 0.75rem;
        max-width: 100%;
        width: 100%;
    }
}
/* ============================================
   COSMETIC DENTISTRY PAGE - COSMETIC INTRO SECTION
   ============================================ */

.cosmetic-intro {
    width: 100%;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #020302;
    box-sizing: border-box;
    overflow: hidden;
}

.cosmetic-intro__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.cosmetic-intro__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
}

.cosmetic-intro__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
}

@supports not (background-clip: text) {
    .cosmetic-intro__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.cosmetic-intro__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 1000px;
    margin: 0;
}

.cosmetic-intro__image-wrapper {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cosmetic-intro__image {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============================================
   RESPONSIVE - COSMETIC INTRO
   ============================================ */

@media (max-width: 992px) {
    .cosmetic-intro {
        padding: 60px 0 80px;
    }
    .cosmetic-intro__title {
        font-size: 48px;
        line-height: 56px;
    }
    .cosmetic-intro__description {
        font-size: 17px;
        line-height: 26px;
    }
    .cosmetic-intro__image-wrapper {
        max-width: 100%;
    }
    .cosmetic-intro__content {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .cosmetic-intro {
        padding: 50px 0 60px;
    }
    .cosmetic-intro__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .cosmetic-intro__description {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }
    .cosmetic-intro__image-wrapper {
        border-radius: 12px;
    }
    .cosmetic-intro__content {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .cosmetic-intro {
        padding: 40px 0 50px;
    }
    .cosmetic-intro__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .cosmetic-intro__description {
        font-size: 15px;
        line-height: 22px;
    }
    .cosmetic-intro__image-wrapper {
        border-radius: 10px;
    }
    .cosmetic-intro__content {
        margin-bottom: 25px;
    }
}

@media (max-width: 400px) {
    .cosmetic-intro {
        padding: 50px 20px;
    }
    .cosmetic-intro__title {
        font-size: 28px;
        line-height: 34px;
    }
    .cosmetic-intro__description {
        font-size: 15px;
        line-height: 20px;
    }
}

/* ============================================
   COSMETIC DENTISTRY PAGE - TOOTH WHITENING SECTION
   ============================================ */

.tooth-whitening {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.tooth-whitening__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.tooth-whitening__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.tooth-whitening__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.tooth-whitening__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .tooth-whitening__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.tooth-whitening__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.tooth-whitening__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.tooth-whitening__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.tooth-whitening__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.tooth-whitening__button:hover .tooth-whitening__button-icon {
    transform: translateX(4px);
}

.tooth-whitening__button:active {
    transform: scale(0.97);
}

.tooth-whitening__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tooth-whitening__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.tooth-whitening__image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image within its wrapper */
}

.tooth-whitening__bottom-image {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}

.tooth-whitening__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - TOOTH WHITENING
   ============================================ */

@media (max-width: 992px) {
    .tooth-whitening {
        padding: 60px 0 0;
    }
    .tooth-whitening__container {
        padding: 0 30px;
    }
    .tooth-whitening__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .tooth-whitening__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .tooth-whitening__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .tooth-whitening__right {
        justify-content: center;
    }
    .tooth-whitening__image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .tooth-whitening__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .tooth-whitening {
        padding: 50px 0 0;
    }
    .tooth-whitening__container {
        padding: 0 20px;
    }
    .tooth-whitening__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .tooth-whitening__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .tooth-whitening__description {
        font-size: 16px;
        line-height: 24px;
    }
    .tooth-whitening__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .tooth-whitening__image-wrapper {
        max-width: 80%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .tooth-whitening__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .tooth-whitening {
        padding: 40px 0 0;
    }
    .tooth-whitening__container {
        padding: 0 16px;
    }
    .tooth-whitening__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .tooth-whitening__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .tooth-whitening__description {
        font-size: 15px;
        line-height: 22px;
    }
    .tooth-whitening__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .tooth-whitening__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .tooth-whitening__image {
        width: 100%;
        margin: 0 auto;
    }
    .tooth-whitening__right {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 400px) {
 
	.tooth-whitening {
		padding-top: 50px;
		padding-right: 20px;
		padding-bottom: 0px;
		padding-left: 20px;
}
    .tooth-whitening__container {
        padding: 0 12px;
    }
    .tooth-whitening__title {
        font-size: 28px;
        line-height: 34px;
    }
    .tooth-whitening__description {
        font-size: 15px;
        line-height: 20px;
    }
    .tooth-whitening__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    .tooth-whitening__image-wrapper {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .tooth-whitening__image {
        width: 100%;
        margin: 0 auto;
    }
    .tooth-whitening__right {
        justify-content: center;
        width: 100%;
    }
}

/* ============================================
   COSMETIC DENTISTRY PAGE - PORCELAIN VENEERS SECTION
   ============================================ */

.porcelain-veneers {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.porcelain-veneers__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.porcelain-veneers__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.porcelain-veneers__left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.porcelain-veneers__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.porcelain-veneers__image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.porcelain-veneers__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.porcelain-veneers__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .porcelain-veneers__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.porcelain-veneers__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.porcelain-veneers__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.porcelain-veneers__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.porcelain-veneers__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.porcelain-veneers__button:hover .porcelain-veneers__button-icon {
    transform: translateX(4px);
}

.porcelain-veneers__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - PORCELAIN VENEERS
   ============================================ */

@media (max-width: 992px) {
    .porcelain-veneers {
        padding: 60px 0 60px;
    }
    .porcelain-veneers__container {
        padding: 0 30px;
    }
    .porcelain-veneers__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .porcelain-veneers__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .porcelain-veneers__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .porcelain-veneers__left {
        justify-content: center;
    }
    .porcelain-veneers__image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .porcelain-veneers__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .porcelain-veneers {
        padding: 50px 0 50px;
    }
    .porcelain-veneers__container {
        padding: 0 20px;
    }
    .porcelain-veneers__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .porcelain-veneers__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .porcelain-veneers__description {
        font-size: 16px;
        line-height: 24px;
    }
    .porcelain-veneers__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .porcelain-veneers__image-wrapper {
        max-width: 80%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .porcelain-veneers__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .porcelain-veneers {
        padding: 40px 0 40px;
    }
    .porcelain-veneers__container {
        padding: 0 16px;
    }
    .porcelain-veneers__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .porcelain-veneers__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .porcelain-veneers__description {
        font-size: 15px;
        line-height: 22px;
    }
    .porcelain-veneers__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .porcelain-veneers__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .porcelain-veneers__left {
        order: 2;
        justify-content: center;
        width: 100%;
    }
    
    .porcelain-veneers__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .porcelain-veneers__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .porcelain-veneers {
        padding: 50px 20px;
    }
    .porcelain-veneers__container {
        padding: 0 12px;
    }
    .porcelain-veneers__title {
        font-size: 28px;
        line-height: 34px;
    }
    .porcelain-veneers__description {
        font-size: 15px;
        line-height: 20px;
    }
    .porcelain-veneers__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
   
    .porcelain-veneers__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .porcelain-veneers__left {
        order: 2;
        justify-content: center;
        width: 100%;
    }
    
    .porcelain-veneers__image-wrapper {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .porcelain-veneers__image {
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================
   COSMETIC DENTISTRY PAGE - DENTAL BONDING SECTION
   ============================================ */

.dental-bonding {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.dental-bonding__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.dental-bonding__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.dental-bonding__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.dental-bonding__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .dental-bonding__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.dental-bonding__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.dental-bonding__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.dental-bonding__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.dental-bonding__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.dental-bonding__button:hover .dental-bonding__button-icon {
    transform: translateX(4px);
}

.dental-bonding__button:active {
    transform: scale(0.97);
}

.dental-bonding__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dental-bonding__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.dental-bonding__image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image within its wrapper */
}

/* ============================================
   RESPONSIVE - DENTAL BONDING
   ============================================ */

@media (max-width: 992px) {
    .dental-bonding {
        padding: 60px 0 60px;
    }
    .dental-bonding__container {
        padding: 0 30px;
    }
    .dental-bonding__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .dental-bonding__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .dental-bonding__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .dental-bonding__right {
        justify-content: center;
    }
    .dental-bonding__image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .dental-bonding__left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .dental-bonding {
        padding: 50px 0 50px;
    }
    .dental-bonding__container {
        padding: 0 20px;
    }
    .dental-bonding__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .dental-bonding__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .dental-bonding__description {
        font-size: 16px;
        line-height: 24px;
    }
    .dental-bonding__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .dental-bonding__image-wrapper {
        max-width: 80%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .dental-bonding__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .dental-bonding {
        padding: 40px 0 40px;
    }
    .dental-bonding__container {
        padding: 0 16px;
    }
    .dental-bonding__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .dental-bonding__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .dental-bonding__description {
        font-size: 15px;
        line-height: 22px;
    }
    .dental-bonding__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .dental-bonding__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .dental-bonding__image {
        width: 100%;
        margin: 0 auto;
    }
    .dental-bonding__right {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 400px) {
    .dental-bonding {
        padding: 50px 20px;
    }
    .dental-bonding__container {
        padding: 0 12px;
    }
    .dental-bonding__title {
        font-size: 28px;
        line-height: 34px;
    }
    .dental-bonding__description {
        font-size: 15px;
        line-height: 20px;
    }
    .dental-bonding__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    .dental-bonding__image-wrapper {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .dental-bonding__image {
        width: 100%;
        margin: 0 auto;
    }
    .dental-bonding__right {
        justify-content: center;
        width: 100%;
    }
}

/* ============================================
   COSMETIC DENTISTRY PAGE - INLAYS AND ONLAYS SECTION
   ============================================ */

.inlays-onlays {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.inlays-onlays__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.inlays-onlays__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0px;
}

.inlays-onlays__left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.inlays-onlays__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.inlays-onlays__image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.inlays-onlays__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.inlays-onlays__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .inlays-onlays__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.inlays-onlays__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.inlays-onlays__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.inlays-onlays__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.inlays-onlays__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.inlays-onlays__button:hover .inlays-onlays__button-icon {
    transform: translateX(4px);
}

.inlays-onlays__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - INLAYS AND ONLAYS
   ============================================ */

@media (max-width: 992px) {
    .inlays-onlays {
        padding: 60px 0 60px;
    }
    .inlays-onlays__container {
        padding: 0 30px;
    }
    .inlays-onlays__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0px;
    }
    .inlays-onlays__title {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    .inlays-onlays__description {
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }
    .inlays-onlays__left {
        justify-content: center;
    }
    .inlays-onlays__image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .inlays-onlays__right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .inlays-onlays {
        padding: 50px 0 50px;
    }
    .inlays-onlays__container {
        padding: 0 20px;
    }
    .inlays-onlays__layout {
        gap: 30px;
        padding-bottom: 0px;
    }
    .inlays-onlays__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .inlays-onlays__description {
        font-size: 16px;
        line-height: 24px;
    }
    .inlays-onlays__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
    .inlays-onlays__image-wrapper {
        max-width: 80%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .inlays-onlays__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .inlays-onlays {
        padding: 40px 0 40px;
    }
    .inlays-onlays__container {
        padding: 0 16px;
    }
    .inlays-onlays__layout {
        gap: 20px;
        padding-bottom: 0px;
    }
    .inlays-onlays__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .inlays-onlays__description {
        font-size: 15px;
        line-height: 22px;
    }
    .inlays-onlays__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .inlays-onlays__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .inlays-onlays__left {
        order: 2;
        justify-content: center;
        width: 100%;
    }
    
    .inlays-onlays__image-wrapper {
        max-width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .inlays-onlays__image {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .inlays-onlays {
        padding: 50px 20px;
    }
    .inlays-onlays__container {
        padding: 0 12px;
    }
    .inlays-onlays__title {
        font-size: 28px;
        line-height: 34px;
    }
    .inlays-onlays__description {
        font-size: 15px;
        line-height: 20px;
    }
    .inlays-onlays__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
        max-width: 100%;
    }
    
 
    .inlays-onlays__right {
        order: 1;
        align-items: center;
        text-align: center;
    }
    .inlays-onlays__left {
        order: 2;
        justify-content: center;
        width: 100%;
    }
    
    .inlays-onlays__image-wrapper {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .inlays-onlays__image {
        width: 100%;
        margin: 0 auto;
    }
}
/* ============================================
   INVISALIGN PAGE - INVISALIGN HERO SECTION
   ============================================ */

.invisalign-hero {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.invisalign-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.invisalign-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.invisalign-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.invisalign-hero__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .invisalign-hero__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.invisalign-hero__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 700px;
    margin: 0;
}

.invisalign-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 253px;
    height: 56px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.invisalign-hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.invisalign-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.invisalign-hero__button:hover .invisalign-hero__button-icon {
    transform: translateX(4px);
}

.invisalign-hero__button:focus {
    outline: none;
}

.invisalign-hero__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - INVISALIGN HERO
   ============================================ */

@media (max-width: 1200px) {
    .invisalign-hero__title {
        font-size: 72px;
        line-height: 74px;
    }
}

@media (max-width: 992px) {
    .invisalign-hero {
        height: 380px;
    }
    .invisalign-hero__title {
        font-size: 60px;
        line-height: 62px;
    }
    .invisalign-hero__description {
        font-size: 15px;
        line-height: 22px;
    }
    .invisalign-hero__button {
        width: 220px;
        height: 50px;
        font-size: 0.85rem;
    }
    .invisalign-hero__content {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .invisalign-hero {
        height: 320px;
        background-position: center center;
    }
    .invisalign-hero__title {
        font-size: 48px;
        line-height: 50px;
        letter-spacing: -1px;
    }
    .invisalign-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .invisalign-hero__button {
        width: 200px;
        height: 48px;
        font-size: 0.85rem;
    }
    .invisalign-hero__content {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .invisalign-hero {
        height: auto;
        min-height: 300px;
        padding: 40px 16px;
        background-position: center center;
    }
    .invisalign-hero__title {
        font-size: 32px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .invisalign-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .invisalign-hero__button {
        width: 100%;
        max-width: 200px;
        height: 44px;
        font-size: 0.8rem;
    }
    .invisalign-hero__content {
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .invisalign-hero {
        min-height: 350px;
        padding: 80px 20px;
    }
    .invisalign-hero__title {
        font-size: 28px;
        line-height: 38px;
    }
    .invisalign-hero__description {
        font-size: 15px;
        line-height: 20px;
    }
    .invisalign-hero__button {
        height: 40px;
        font-size: 0.75rem;
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================
   INVISALIGN PAGE - INVISALIGN BENEFITS SECTION
   ============================================ */

.invisalign-benefits {
    width: 100%;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #020101;
    box-sizing: border-box;
    overflow: hidden;
}

.invisalign-benefits__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.invisalign-benefits__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: block; /* Changed from inline-block to block */
    width: fit-content; /* Fits content width */
    margin: 0 auto 10px; /* Centers the block element */
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .invisalign-benefits__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.invisalign-benefits__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.invisalign-benefits__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    padding: 5px 20px;
}

.invisalign-benefits__icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.invisalign-benefits__item-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
    text-align: center;
}

.invisalign-benefits__image-wrapper {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
	
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	display: flex;
    justify-content: center;
    align-items: center;
}

.invisalign-benefits__image {
    width: 90%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - INVISALIGN BENEFITS
   ============================================ */

@media (max-width: 992px) {
    .invisalign-benefits {
        padding: 60px 0 80px;
    }
    .invisalign-benefits__title {
        font-size: 48px;
        line-height: 56px;
        margin-bottom: 35px;
    }
    .invisalign-benefits__list {
        max-width: 100%;
        gap: 10px;
    }
    .invisalign-benefits__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .invisalign-benefits {
        padding: 50px 0 60px;
    }
    .invisalign-benefits__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
        margin-bottom: 30px;
    }
    .invisalign-benefits__list {
        gap: 8px;
        margin-bottom: 40px;
    }
    .invisalign-benefits__item {
        padding: 5px 15px;
        gap: 12px;
    }
    .invisalign-benefits__icon {
        width: 20px;
        height: 20px;
    }
    .invisalign-benefits__item-text {
        font-size: 15px;
        line-height: 22px;
    }
    .invisalign-benefits__image-wrapper {
        border-radius: 12px;
    }
}

@media (max-width: 576px) {
    .invisalign-benefits {
        padding: 40px 0 50px;
    }
    .invisalign-benefits__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
        margin-bottom: 25px;
    }
    .invisalign-benefits__list {
        gap: 6px;
        margin-bottom: 30px;
    }
    .invisalign-benefits__item {
        padding: 4px 10px;
        gap: 10px;
    }
    .invisalign-benefits__icon {
        width: 18px;
        height: 18px;
    }
    .invisalign-benefits__item-text {
        font-size: 14px;
        line-height: 20px;
    }
    .invisalign-benefits__image-wrapper {
        border-radius: 10px;
    }
}

@media (max-width: 400px) {
    .invisalign-benefits {
        padding: 50px 20px;
    }
    .invisalign-benefits__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 20px;
    }
    .invisalign-benefits__list {
        gap: 4px;
        margin-bottom: 25px;
    }
    .invisalign-benefits__item {
        padding: 3px 8px;
        gap: 8px;
    }
    .invisalign-benefits__icon {
        width: 16px;
        height: 16px;
    }
    .invisalign-benefits__item-text {
        font-size: 15px;
        line-height: 20px;
    }
}

/* ============================================
   INVISALIGN PAGE - STEPS TO A HEALTHY SMILE SECTION
   ============================================ */

.steps-healthy-smile {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.steps-healthy-smile__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.steps-healthy-smile__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 60px;
}

@supports not (background-clip: text) {
    .steps-healthy-smile__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.steps-healthy-smile__subsection {
    margin-bottom: 100px;
}

.steps-healthy-smile__subsection:last-child {
    margin-bottom: 0;
}

.steps-healthy-smile__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.steps-healthy-smile__layout--reverse {
    grid-template-columns: 1fr 1fr;
}

.steps-healthy-smile__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.steps-healthy-smile__layout--reverse .steps-healthy-smile__content--order1 {
    order: 2;
}

.steps-healthy-smile__layout--reverse .steps-healthy-smile__image-col--order2 {
    order: 1;
}

.steps-healthy-smile__heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -1px;
    text-align: left;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .steps-healthy-smile__heading {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.steps-healthy-smile__subheading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.steps-healthy-smile__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.steps-healthy-smile__image-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.steps-healthy-smile__image-wrapper {
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.steps-healthy-smile__image {
    width: 90%;
    height: auto;
    display: block;
}

.steps-healthy-smile__bottom-image {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
    margin-top: 0px;
}

.steps-healthy-smile__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - STEPS TO A HEALTHY SMILE
   ============================================ */

@media (max-width: 992px) {
    .steps-healthy-smile {
        padding-top: 60px;
    }
    .steps-healthy-smile__title {
        font-size: 48px;
        line-height: 56px;
        margin-bottom: 40px;
    }
    .steps-healthy-smile__subsection {
        margin-bottom: 40px;
    }
    .steps-healthy-smile__layout,
    .steps-healthy-smile__layout--reverse {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .steps-healthy-smile__layout--reverse .steps-healthy-smile__content--order1 {
        order: 0;
    }
    .steps-healthy-smile__layout--reverse .steps-healthy-smile__image-col--order2 {
        order: 0;
    }
    .steps-healthy-smile__content {
        align-items: center;
        text-align: center;
    }
    .steps-healthy-smile__heading {
        font-size: 30px;
        line-height: 38px;
        text-align: center;
    }
    .steps-healthy-smile__subheading {
        text-align: center;
    }
    .steps-healthy-smile__description {
        text-align: center;
    }
    .steps-healthy-smile__image-wrapper {
        max-width: 100%;
    }
    .steps-healthy-smile__bottom-image {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .steps-healthy-smile {
        padding-top: 50px;
    }
    .steps-healthy-smile__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
        margin-bottom: 30px;
    }
    .steps-healthy-smile__subsection {
        margin-bottom: 30px;
    }
    .steps-healthy-smile__layout,
    .steps-healthy-smile__layout--reverse {
        gap: 20px;
    }
    .steps-healthy-smile__heading {
        font-size: 26px;
        line-height: 34px;
    }
    .steps-healthy-smile__subheading {
        font-size: 16px;
        line-height: 24px;
    }
    .steps-healthy-smile__description {
        font-size: 15px;
        line-height: 22px;
    }
    .steps-healthy-smile__bottom-image {
        margin-top: 30px;
    }
}

@media (max-width: 576px) {
    .steps-healthy-smile {
        padding-top: 40px;
    }
    .steps-healthy-smile__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
        margin-bottom: 25px;
    }
    .steps-healthy-smile__subsection {
        margin-bottom: 25px;
    }
    .steps-healthy-smile__layout,
    .steps-healthy-smile__layout--reverse {
        gap: 15px;
    }
    .steps-healthy-smile__heading {
        font-size: 22px;
        line-height: 30px;
    }
    .steps-healthy-smile__subheading {
        font-size: 15px;
        line-height: 22px;
    }
    .steps-healthy-smile__description {
        font-size: 14px;
        line-height: 20px;
    }
    .steps-healthy-smile__image-wrapper {
        border-radius: 12px;
    }
    .steps-healthy-smile__bottom-image {
        margin-top: 25px;
    }
    
    .steps-healthy-smile__subsection .steps-healthy-smile__layout--reverse {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .steps-healthy-smile__subsection .steps-healthy-smile__layout--reverse .steps-healthy-smile__image-col--order2 {
        order: 2 !important;
    }
    .steps-healthy-smile__subsection .steps-healthy-smile__layout--reverse .steps-healthy-smile__content--order1 {
        order: 1 !important;
    }
}

@media (max-width: 400px) {
    .steps-healthy-smile {
        padding: 50px 20px;
    }
    .steps-healthy-smile__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 20px;
    }
    .steps-healthy-smile__subsection {
        margin-bottom: 20px;
    }
    .steps-healthy-smile__heading {
        font-size: 24px;
        line-height: 22px;
    }
    .steps-healthy-smile__subheading {
        font-size: 16px;
        line-height: 22px;
    }
    .steps-healthy-smile__description {
        font-size: 15px;
        line-height: 20px;
    }
    .steps-healthy-smile__bottom-image {
        margin-top: 20px;
    }
    
    .steps-healthy-smile__subsection .steps-healthy-smile__layout--reverse {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .steps-healthy-smile__subsection .steps-healthy-smile__layout--reverse .steps-healthy-smile__image-col--order2 {
        order: 2 !important;
    }
    .steps-healthy-smile__subsection .steps-healthy-smile__layout--reverse .steps-healthy-smile__content--order1 {
        order: 1 !important;
    }
}
/* ============================================
   INVISALIGN PAGE - INVITED FORM SECTION
   ============================================ */

.invited-form {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.invited-form__container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.invited-form__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    margin: 0 auto 40px;
}

.invited-form__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
}

@supports not (background-clip: text) {
    .invited-form__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.invited-form__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 1000px;
    margin: 0;
}

.invited-form__form-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.invited-form__form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.invited-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.invited-form__label {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -4%;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.invited-form__input {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 12px;
    letter-spacing: -4%;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 14px 18px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
    height: 50px;
}

.invited-form__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 12px;
    letter-spacing: -4%;
}

.invited-form__input:focus {
    border-color: #BEAE82;
    box-shadow: 0 0 20px rgba(190, 174, 130, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.invited-form__select {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 12px;
    letter-spacing: -4%;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 14px 18px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
    height: 50px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.invited-form__select:focus {
    border-color: #BEAE82;
    box-shadow: 0 0 20px rgba(190, 174, 130, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.invited-form__select option {
    color: #333333;
    background: #FFFFFF;
}

.invited-form__select option:hover,
.invited-form__select option:focus {
    background: #BEAE82;
}

.invited-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 40px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
    width: auto;
    min-width: 180px;
    margin: 0;
    align-self: flex-start;
}

.invited-form__submit:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
}

.invited-form__submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.invited-form__submit:hover .invited-form__submit-icon {
    transform: translateX(4px);
}

.invited-form__submit:active {
    transform: scale(0.97);
}

.invited-form__response {
    margin-top: 10px;
    width: 100%;
}

.invited-form__success {
    background: rgba(46, 125, 50, 0.15);
    border: 1px solid #2e7d32;
    color: #4caf50;
    padding: 15px 20px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    text-align: center;
}

.invited-form__error {
    background: rgba(211, 47, 47, 0.15);
    border: 1px solid #c62828;
    color: #ef5350;
    padding: 15px 20px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    text-align: center;
}

/* ============================================
   RESPONSIVE - INVITED FORM
   ============================================ */

@media (max-width: 992px) {
    .invited-form {
        padding: 60px 0 80px;
    }
    .invited-form__title {
        font-size: 48px;
        line-height: 56px;
    }
    .invited-form__description {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 768px) {
    .invited-form {
        padding: 50px 0 60px;
    }
    .invited-form__container {
        padding: 0 20px;
    }
    .invited-form__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
        margin-bottom: 15px;
    }
    .invited-form__description {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }
    .invited-form__content {
        margin-bottom: 30px;
    }
    .invited-form__form-wrapper {
        max-width: 100%;
    }
    .invited-form__submit {
        min-width: 100%;
        width: 100%;
        justify-content: center;
        align-self: stretch;
    }
}

@media (max-width: 576px) {
    .invited-form {
        padding: 40px 0 50px;
    }
    .invited-form__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
        margin-bottom: 12px;
    }
    .invited-form__description {
        font-size: 15px;
        line-height: 22px;
    }
    .invited-form__form {
        gap: 18px;
    }
    .invited-form__input,
    .invited-form__select {
        height: 46px;
        padding: 12px 16px;
        font-size: 14px;
    }
    .invited-form__submit {
        min-height: 48px;
        font-size: 15px;
        padding: 12px 25px;
    }
}

@media (max-width: 400px) {
    .invited-form {
        padding: 50px 20px;
    }
    .invited-form__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 10px;
    }
    .invited-form__description {
        font-size: 15px;
        line-height: 20px;
    }
    .invited-form__input,
    .invited-form__select {
        height: 42px;
        padding: 10px 14px;
        font-size: 13px;
    }
    .invited-form__submit {
        min-height: 44px;
        font-size: 14px;
        padding: 10px 20px;
    }
}
/* ============================================
   INVISALIGN PAGE - INTRODUCING INVISALIGN SECTION
   ============================================ */

.introducing-invisalign {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.introducing-invisalign__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.introducing-invisalign__header {
    max-width: 1200px;
    margin-bottom: 50px;
}

.introducing-invisalign__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: left;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
}

@supports not (background-clip: text) {
    .introducing-invisalign__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.introducing-invisalign__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
}

/* ===== THREE COLUMNS GRID ===== */
.introducing-invisalign__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.introducing-invisalign__column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.introducing-invisalign__icon-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.introducing-invisalign__icon-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.introducing-invisalign__icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.introducing-invisalign__icon-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
}

/* ===== IMAGE BELOW ICON LIST ===== */
.introducing-invisalign__image-wrapper {
    width: 90%;
    border-radius: 16px;
    overflow: hidden;
}

.introducing-invisalign__image {
    width: 90%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - INTRODUCING INVISALIGN
   ============================================ */

@media (max-width: 992px) {
    .introducing-invisalign {
        padding: 60px 0;
    }
    .introducing-invisalign__title {
        font-size: 48px;
        line-height: 56px;
    }
    .introducing-invisalign__grid {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .introducing-invisalign {
        padding: 50px 0;
    }
    .introducing-invisalign__header {
        max-width: 100%;
        margin-bottom: 35px;
    }
    .introducing-invisalign__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
        text-align: center;
    }
    .introducing-invisalign__description {
        font-size: 16px;
        text-align: center;
    }
    .introducing-invisalign__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .introducing-invisalign__icon-item {
        gap: 10px;
    }
    .introducing-invisalign__icon-text {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .introducing-invisalign {
        padding: 40px 0;
    }
    .introducing-invisalign__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
        margin-bottom: 15px;
    }
    .introducing-invisalign__description {
        font-size: 15px;
        line-height: 22px;
    }
    .introducing-invisalign__header {
        margin-bottom: 25px;
    }
    .introducing-invisalign__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .introducing-invisalign__column {
        gap: 15px;
    }
    .introducing-invisalign__icon-item {
        gap: 10px;
    }
    .introducing-invisalign__icon {
        width: 20px;
        height: 20px;
    }
    .introducing-invisalign__icon-text {
        font-size: 14px;
    }
    .introducing-invisalign__image-wrapper {
        border-radius: 12px;
    }
}

@media (max-width: 400px) {
    .introducing-invisalign {
        padding: 50px 20px;
    }
    .introducing-invisalign__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 12px;
    }
    .introducing-invisalign__description {
        font-size: 18px;
        line-height: 20px;
    }
    .introducing-invisalign__icon-text {
        font-size: 14px;
    }
}

/* ============================================
   INVISALIGN PAGE - INVISALIGN PLUS SECTION
   ============================================ */

.invisalign-plus {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.invisalign-plus__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.invisalign-plus__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 1200px;
}

.invisalign-plus__heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -2px;
    text-align: left;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
}

@supports not (background-clip: text) {
    .invisalign-plus__heading {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.invisalign-plus__subheading {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 40px;
    line-height: 50px;
    letter-spacing: -1.5px;
    text-align: left;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
}

@supports not (background-clip: text) {
    .invisalign-plus__subheading {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.invisalign-plus__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
}

.invisalign-plus__spacer {
    height: 30px;
    width: 100%;
}

/* ============================================
   RESPONSIVE - INVISALIGN PLUS
   ============================================ */

@media (max-width: 992px) {
    .invisalign-plus {
        padding: 60px 0;
    }
    .invisalign-plus__heading {
        font-size: 48px;
        line-height: 56px;
    }
    .invisalign-plus__subheading {
        font-size: 36px;
        line-height: 44px;
    }
    .invisalign-plus__description {
        font-size: 17px;
        line-height: 26px;
    }
    .invisalign-plus__content {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .invisalign-plus {
        padding: 50px 0;
    }
    .invisalign-plus__heading {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
        margin-bottom: 15px;
    }
    .invisalign-plus__subheading {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -1px;
        margin-bottom: 15px;
    }
    .invisalign-plus__description {
        font-size: 16px;
        line-height: 24px;
    }
    .invisalign-plus__spacer {
        height: 30px;
    }
}

@media (max-width: 576px) {
    .invisalign-plus {
        padding: 40px 0;
    }
    .invisalign-plus__heading {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
        margin-bottom: 12px;
    }
    .invisalign-plus__subheading {
        font-size: 24px;
        line-height: 30px;
        letter-spacing: -0.5px;
        margin-bottom: 12px;
    }
    .invisalign-plus__description {
        font-size: 15px;
        line-height: 22px;
    }
    .invisalign-plus__spacer {
        height: 30px;
    }
}

@media (max-width: 400px) {
    .invisalign-plus {
        padding: 50px 20px;
    }
    .invisalign-plus__heading {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 10px;
    }
    .invisalign-plus__subheading {
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 10px;
    }
    .invisalign-plus__description {
        font-size: 15px;
        line-height: 20px;
    }
    .invisalign-plus__spacer {
        height: 30px;
    }
}

/* ============================================
   INVISALIGN PAGE - MISALIGNED TEETH SECTION
   ============================================ */

.misaligned-teeth {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.misaligned-teeth__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.misaligned-teeth__header {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 50px;
}

.misaligned-teeth__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
}

@supports not (background-clip: text) {
    .misaligned-teeth__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.misaligned-teeth__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 700px;
    margin: 0 auto;
}

.misaligned-teeth__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.misaligned-teeth__card {
    width: 100%;
    max-width: 504px;
    height: auto;
    border-radius: 25px;
    padding: 35px 31.68px 25.08px 31.68px;
    background: linear-gradient(180deg, rgba(190, 174, 130, 0.28) 0%, rgba(88, 81, 60, 0.28) 100%);
    backdrop-filter: blur(26.398210525512695px);
    -webkit-backdrop-filter: blur(26.398210525512695px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    border: 1.5px solid transparent;
}

.misaligned-teeth__card::before {
    content: '';
    position: absolute;
    inset: -2.64px;
    border-radius: 25px;
    padding: 2.64px;
    background: linear-gradient(137.21deg, #8A794C -29.95%, #463206 175.82%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.misaligned-teeth__card > * {
    position: relative;
    z-index: 1;
}

.misaligned-teeth__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(138, 121, 76, 0.2);
}

.misaligned-teeth__video {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    background: #000;
    aspect-ratio: 504/277;
    object-fit: cover;
}

/* ============================================
   RESPONSIVE - MISALIGNED TEETH
   ============================================ */

@media (max-width: 992px) {
    .misaligned-teeth {
        padding: 60px 0 80px;
    }
    .misaligned-teeth__title {
        font-size: 48px;
        line-height: 56px;
    }
    .misaligned-teeth__description {
        font-size: 17px;
        line-height: 26px;
    }
    .misaligned-teeth__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        max-width: 100%;
    }
    .misaligned-teeth__card {
        padding: 25px 20px 20px 20px;
    }
}

@media (max-width: 768px) {
    .misaligned-teeth {
        padding: 50px 0 60px;
    }
    .misaligned-teeth__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .misaligned-teeth__description {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }
    .misaligned-teeth__header {
        margin-bottom: 35px;
    }
    .misaligned-teeth__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .misaligned-teeth__card {
        padding: 20px 15px 15px 15px;
        border-radius: 20px;
    }
    .misaligned-teeth__card::before {
        border-radius: 20px;
        inset: -2px;
        padding: 2px;
    }
}

@media (max-width: 576px) {
    .misaligned-teeth {
        padding: 40px 0 50px;
    }
    .misaligned-teeth__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
        margin-bottom: 15px;
    }
    .misaligned-teeth__description {
        font-size: 15px;
        line-height: 22px;
    }
    .misaligned-teeth__header {
        margin-bottom: 25px;
    }
    .misaligned-teeth__grid {
        grid-template-columns: 1fr;
        gap: 15px;
        max-width: 400px;
    }
    .misaligned-teeth__card {
        padding: 15px 12px 12px 12px;
        border-radius: 16px;
    }
    .misaligned-teeth__card::before {
        border-radius: 16px;
        inset: -1.5px;
        padding: 1.5px;
    }
}

@media (max-width: 400px) {
    .misaligned-teeth {
        padding: 50px 20px;
    }
    .misaligned-teeth__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 12px;
    }
    .misaligned-teeth__description {
        font-size: 15px;
        line-height: 20px;
    }
    .misaligned-teeth__grid {
        gap: 12px;
    }
    .misaligned-teeth__card {
        padding: 10px 8px 8px 8px;
        border-radius: 12px;
    }
    .misaligned-teeth__card::before {
        border-radius: 12px;
        inset: -1px;
        padding: 1px;
    }
}

/* ============================================
   INVISALIGN PAGE - ORAL HEALTH PROFESSIONALS SECTION
   ============================================ */

.oral-health-professionals {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.oral-health-professionals__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.oral-health-professionals__header {
    max-width: 1100px;
    margin: 0 0 50px 0;
}

.oral-health-professionals__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -2px;
    text-align: left;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
}

@supports not (background-clip: text) {
    .oral-health-professionals__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.oral-health-professionals__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
    color: #FFFFFF;
    max-width: 1100px;
    margin: 0;
}

.oral-health-professionals__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0;
}

.oral-health-professionals__column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.oral-health-professionals__item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.oral-health-professionals__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.oral-health-professionals__item-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #FFFFFF;
    text-align: left;
}

/* ============================================
   RESPONSIVE - ORAL HEALTH PROFESSIONALS
   ============================================ */

@media (max-width: 992px) {
    .oral-health-professionals {
        padding: 60px 0 80px;
    }
    .oral-health-professionals__title {
        font-size: 48px;
        line-height: 56px;
    }
    .oral-health-professionals__description {
        font-size: 17px;
        line-height: 26px;
        max-width: 100%;
    }
    .oral-health-professionals__grid {
        gap: 30px;
        margin: 0;
    }
    .oral-health-professionals__item-text {
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 768px) {
    .oral-health-professionals {
        padding: 50px 0 60px;
    }
    .oral-health-professionals__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .oral-health-professionals__description {
        font-size: 16px;
        line-height: 24px;
    }
    .oral-health-professionals__header {
        margin-bottom: 35px;
    }
    .oral-health-professionals__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        margin: 0;
    }
    .oral-health-professionals__column {
        gap: 15px;
    }
    .oral-health-professionals__item {
        gap: 12px;
    }
    .oral-health-professionals__item-text {
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 576px) {
    .oral-health-professionals {
        padding: 40px 0 50px;
    }
    .oral-health-professionals__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
        margin-bottom: 15px;
    }
    .oral-health-professionals__description {
        font-size: 15px;
        line-height: 22px;
    }
    .oral-health-professionals__header {
        margin-bottom: 25px;
    }
    .oral-health-professionals__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 400px;
        margin: 0 auto;
    }
    .oral-health-professionals__column {
        gap: 12px;
    }
    .oral-health-professionals__item {
        gap: 10px;
    }
    .oral-health-professionals__icon {
        width: 24px;
        height: 24px;
    }
    .oral-health-professionals__item-text {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (max-width: 400px) {
    .oral-health-professionals {
        padding: 50px 20px;
    }
    .oral-health-professionals__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 12px;
    }
    .oral-health-professionals__description {
        font-size: 15px;
        line-height: 20px;
    }
    .oral-health-professionals__grid {
        gap: 15px;
    }
    .oral-health-professionals__column {
        gap: 10px;
    }
    .oral-health-professionals__item {
        gap: 8px;
    }
    .oral-health-professionals__icon {
        width: 20px;
        height: 20px;
    }
    .oral-health-professionals__item-text {
        font-size: 13px;
        line-height: 18px;
    }
}

/* ============================================
   CONTACT US PAGE - HERO SECTION
   ============================================ */

.contact-hero {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.contact-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.contact-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.contact-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.contact-hero__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 60px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@supports not (background-clip: text) {
    .contact-hero__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.contact-hero__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 700px;
    margin: 0;
}

.contact-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 253px;
    height: 56px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.contact-hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.contact-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1rem;
    line-height: 1;
}

.contact-hero__button:hover .contact-hero__button-icon {
    transform: translateX(4px);
}

.contact-hero__button:focus {
    outline: none;
}

.contact-hero__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - CONTACT HERO
   ============================================ */

@media (max-width: 1200px) {
    .contact-hero__title {
        font-size: 72px;
        line-height: 74px;
    }
}

@media (max-width: 992px) {
    .contact-hero {
        height: 380px;
    }
    .contact-hero__title {
        font-size: 60px;
        line-height: 62px;
    }
    .contact-hero__description {
        font-size: 15px;
        line-height: 22px;
    }
    .contact-hero__button {
        width: 220px;
        height: 50px;
        font-size: 0.85rem;
    }
    .contact-hero__content {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        height: 320px;
        background-position: center center;
    }
    .contact-hero__title {
        font-size: 48px;
        line-height: 50px;
        letter-spacing: -1px;
    }
    .contact-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .contact-hero__button {
        width: 200px;
        height: 48px;
        font-size: 0.85rem;
    }
    .contact-hero__content {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .contact-hero {
        height: auto;
        min-height: 300px;
        padding: 40px 16px;
        background-position: center center;
    }
    .contact-hero__title {
        font-size: 32px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .contact-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    .contact-hero__button {
        width: 100%;
        max-width: 200px;
        height: 44px;
        font-size: 0.8rem;
    }
    .contact-hero__content {
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .contact-hero {
        min-height: 350px;
        padding: 80px 20px;
    }
    .contact-hero__title {
        font-size: 28px;
        line-height: 34px;
    }
    .contact-hero__description {
        font-size: 15px;
        line-height: 20px;
    }
    .contact-hero__button {
        height: 40px;
        font-size: 0.75rem;
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================
   CONTACT US PAGE - NORTH VANCOUVER DENTISTRY SECTION
   ============================================ */

.north-vancouver-dentistry {
    width: 100%;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background: #030302;
    box-sizing: border-box;
    overflow: hidden;
}

.north-vancouver-dentistry__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.north-vancouver-dentistry__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
}

.north-vancouver-dentistry__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
}

@supports not (background-clip: text) {
    .north-vancouver-dentistry__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.north-vancouver-dentistry__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 800px;
    margin: 0;
}

.north-vancouver-dentistry__image-wrapper {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	display: flex;
    justify-content: center;
    align-items: center;
}

.north-vancouver-dentistry__image {
    width: 90%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - NORTH VANCOUVER DENTISTRY
   ============================================ */

@media (max-width: 992px) {
    .north-vancouver-dentistry {
        padding: 60px 0 80px;
    }
    .north-vancouver-dentistry__title {
        font-size: 48px;
        line-height: 56px;
    }
    .north-vancouver-dentistry__description {
        font-size: 17px;
        line-height: 26px;
    }
    .north-vancouver-dentistry__image-wrapper {
        max-width: 100%;
    }
    .north-vancouver-dentistry__content {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .north-vancouver-dentistry {
        padding: 50px 0 60px;
    }
    .north-vancouver-dentistry__title {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .north-vancouver-dentistry__description {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }
    .north-vancouver-dentistry__image-wrapper {
        border-radius: 12px;
    }
    .north-vancouver-dentistry__content {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .north-vancouver-dentistry {
        padding: 40px 0 50px;
    }
    .north-vancouver-dentistry__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .north-vancouver-dentistry__description {
        font-size: 15px;
        line-height: 22px;
    }
    .north-vancouver-dentistry__image-wrapper {
        border-radius: 10px;
    }
    .north-vancouver-dentistry__content {
        margin-bottom: 25px;
    }
}

@media (max-width: 400px) {
    .north-vancouver-dentistry {
        padding: 50px 20px;
    }
    .north-vancouver-dentistry__title {
        font-size: 28px;
        line-height: 34px;
    }
    .north-vancouver-dentistry__description {
        font-size: 15px;
        line-height: 20px;
    }
}
/* ============================================
   CONTACT US PAGE - CONTACT FORM SECTION
   ============================================ */

.contact-form-section {
    width: 100%;
    padding-top: 130px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.contact-form-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px 0px 20px;
    box-sizing: border-box;
}

.contact-form-section__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.contact-form-section__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 700px;
}

/* ===== HEADING WITH GRADIENT ===== */
.contact-form-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 55px;
    text-align: center;
    text-transform: capitalize;
    margin: 0 0 50px 0;
    width: 100%;
    
    /* Gradient Text */
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Important for gradient to work */
    display: inline-block;
}

/* Fallback for browsers that don't support background-clip */
@supports not (background-clip: text) {
    .contact-form-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== FORM - LEFT ALIGNED ===== */
.contact-form {
    width: 100%;
}

.contact-form__label {
    text-align: left !important;
}

.contact-form__field-group {
    text-align: left !important;
}

.contact-form__button-wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

/* ===== BOTTOM FULL WIDTH IMAGE ===== */
.contact-form-section__bottom-image {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}

.contact-form-section__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - CONTACT FORM SECTION
   ============================================ */

@media (max-width: 992px) {
    .contact-form-section {
        padding-top: 60px;
    }
    .contact-form-section__container {
        padding: 0 30px 50px 30px;
    }
    .contact-form-section__title {
        font-size: 38px;
        line-height: 48px;
        margin: 0 0 50px 0;
    }
}

@media (max-width: 768px) {
    .contact-form-section {
        padding-top: 50px;
    }
    .contact-form-section__container {
        padding: 0 20px 40px 20px;
    }
    .contact-form-section__title {
        font-size: 32px;
        line-height: 40px;
        margin: 0 0 50px 0;
    }
}

@media (max-width: 576px) {
    .contact-form-section {
        padding-top: 40px;
    }
    .contact-form-section__container {
        padding: 0 16px 30px 16px;
    }
    .contact-form-section__title {
        font-size: 28px;
        line-height: 34px;
        margin: 0 0 50px 0;
    }
}

@media (max-width: 400px) {
    .contact-form-section {
        padding-top: 50px;
		padding-left: 20px;
		padding-right: 20px
    }
    .contact-form-section__container {
        padding: 0 20px 50px 20px;
    }
    .contact-form-section__title {
        font-size: 24px;
        line-height: 30px;
        margin: 0 0 50px 0;
    }
}
/* ============================================
   CONTACT US PAGE - CONTACT INFO SECTION
   ============================================ */

.contact-info-section {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.contact-info-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== SECTION HEADER ===== */
.contact-info-section__header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-info-section__title {
    font-family: 'SF Pro Display', 'SF Pro', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto;
    /* Fallback color */
    color: #BEAE82;
    /* Gradient for supported browsers */
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .contact-info-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* Firefox fallback */
@-moz-document url-prefix() {
    .contact-info-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* IE/Edge fallback */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .contact-info-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.contact-info-section__subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF;
    margin: 0;
}

/* ===== 3 COLUMN GRID - One Row ===== */
.contact-info-section__grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* ===== FEATURE BOX ===== */
.contact-info-section__box {
    width: 279.8210144042969px;
    height: 219.1051483154297px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0px;
    padding-top: 35px;
    padding-right: 31.68px;
    padding-bottom: 25.08px;
    padding-left: 31.68px;
    border-radius: 26.4px;
    background: linear-gradient(180deg, rgba(190, 174, 130, 0.28) 0%, rgba(88, 81, 60, 0.28) 100%);
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
    backdrop-filter: blur(26.398210525512695px);
    -webkit-backdrop-filter: blur(26.398210525512695px);
    box-sizing: border-box;
    opacity: 1;
    flex-shrink: 0;
}

/* Gradient Border - 1px */
.contact-info-section__box::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 27.4px;
    background: linear-gradient(137.21deg, #8A794C -29.95%, #463206 175.82%);
    z-index: -1;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}

/* ===== BOX ICON - No Background ===== */
.contact-info-section__box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-bottom: 10px;
}

.contact-info-section__box-img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    display: block;
}

.contact-info-section__box-emoji {
    font-size: 40px;
    line-height: 1;
}

/* ===== BOX HEADING ===== */
.contact-info-section__box-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0%;
    color: #BEAE82;
    margin: 0;
    padding: 0;
}

/* ===== BOX TEXT ===== */
.contact-info-section__box-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}

/* ============================================
   RESPONSIVE - CONTACT INFO SECTION
   ============================================ */

@media (max-width: 1200px) {
    .contact-info-section__title {
        font-size: 52px;
        line-height: 52px;
    }
    .contact-info-section__grid {
        gap: 10px;
    }
}

@media (max-width: 992px) {
    .contact-info-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .contact-info-section__container {
        padding: 0 30px;
    }
    .contact-info-section__title {
        font-size: 42px;
        line-height: 44px;
        letter-spacing: -1.5px;
    }
    .contact-info-section__grid {
        gap: 10px;
        margin-bottom: 0;
    }
    .contact-info-section__box {
        width: 100%;
        max-width: 279.82px;
        height: auto;
        min-height: 219.105px;
        padding: 35px 31.68px 25.08px 31.68px;
        border-radius: 26.4px;
        flex-shrink: 1;
    }
    .contact-info-section__box::before {
        border-radius: 28.4px;
    }
}

@media (max-width: 768px) {
    .contact-info-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .contact-info-section__container {
        padding: 0 20px;
    }
    .contact-info-section__title {
        font-size: 36px;
        line-height: 38px;
        letter-spacing: -1px;
    }
    .contact-info-section__subtitle {
        font-size: 16px;
        line-height: 24px;
    }
    .contact-info-section__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 0;
        flex-wrap: wrap;
    }
    .contact-info-section__box {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 200px;
        padding: 30px 25px 20px 25px;
        border-radius: 22px;
        flex-shrink: 1;
    }
    .contact-info-section__box::before {
        border-radius: 24px;
    }
    .contact-info-section__box-img {
        width: 42px;
        height: 42px;
    }
    .contact-info-section__box-emoji {
        font-size: 36px;
    }
    .contact-info-section__box-heading {
        font-size: 17px;
    }
    .contact-info-section__box-text {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .contact-info-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .contact-info-section__container {
        padding: 0 16px;
    }
    .contact-info-section__title {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.5px;
    }
    .contact-info-section__subtitle {
        font-size: 14px;
        line-height: 22px;
    }
    .contact-info-section__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 0;
        flex-wrap: wrap;
    }
    .contact-info-section__box {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 180px;
        padding: 25px 20px 18px 20px;
        border-radius: 20px;
        flex-shrink: 1;
    }
    .contact-info-section__box::before {
        border-radius: 22px;
    }
    .contact-info-section__box-img {
        width: 38px;
        height: 38px;
    }
    .contact-info-section__box-emoji {
        font-size: 32px;
    }
    .contact-info-section__box-heading {
        font-size: 16px;
    }
    .contact-info-section__box-text {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .contact-info-section {
        padding: 50px 20px;
        
    }
    .contact-info-section__container {
        padding: 0 20px;
    }
    .contact-info-section__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .contact-info-section__subtitle {
        font-size: 17px;
        line-height: 24px;
    }
    .contact-info-section__grid {
        gap: 10px;
    }
    .contact-info-section__box {
        min-height: 160px;
        padding: 20px 16px 14px 16px;
        border-radius: 18px;
    }
    .contact-info-section__box::before {
        border-radius: 20px;
    }
    .contact-info-section__box-img {
        width: 34px;
        height: 34px;
    }
    .contact-info-section__box-emoji {
        font-size: 28px;
    }
    .contact-info-section__box-heading {
        font-size: 15px;
    }
    .contact-info-section__box-text {
        font-size: 13px;
    }
}
/* ============================================
   OPENING DAYS AND HOURS SECTION
   ============================================ */

.opening-hours {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.opening-hours__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== SECTION HEADER ===== */
.opening-hours__header {
    text-align: center;
    margin-bottom: 50px;
}

.opening-hours__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .opening-hours__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== SUB SECTION ===== */
.opening-hours__sub-section {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding-top: 55px;
    padding-right: 60px;
    padding-bottom: 52px;
    padding-left: 60px;
    border-radius: 26.4px;
    background: linear-gradient(180deg, rgba(190, 174, 130, 0.28) 0%, rgba(88, 81, 60, 0.28) 100%);
    border: 2.64px solid transparent;
    position: relative;
    backdrop-filter: blur(26.398210525512695px);
    -webkit-backdrop-filter: blur(26.398210525512695px);
    background-clip: padding-box;
    box-sizing: border-box;
}

/* Gradient Border */
.opening-hours__sub-section::before {
    content: '';
    position: absolute;
    top: -2.64px;
    left: -2.64px;
    right: -2.64px;
    bottom: -2.64px;
    border-radius: 28.4px;
    background: linear-gradient(137.21deg, #8A794C -29.95%, #463206 175.82%);
    z-index: -1;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2.64px;
}

.opening-hours__sub-section > * {
    position: relative;
    z-index: 1;
}

/* ===== ROWS ===== */
.opening-hours__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(190, 174, 130, 0.2);
}

.opening-hours__row:last-child {
    border-bottom: none;
}

.opening-hours__days {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 28px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.opening-hours__hours {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 28px;
    color: #FFFFFF;
    text-align: right;
}

/* ============================================
   RESPONSIVE - OPENING HOURS
   ============================================ */

@media (max-width: 1200px) {
    .opening-hours__sub-section {
        max-width: 100%;
        padding: 40px 60px;
    }
}

@media (max-width: 992px) {
    .opening-hours {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .opening-hours__title {
        font-size: 42px;
        line-height: 52px;
    }
    .opening-hours__sub-section {
        padding: 35px 40px;
        border-radius: 22px;
    }
    .opening-hours__sub-section::before {
        border-radius: 24px;
    }
    .opening-hours__row {
        gap: 30px;
    }
    .opening-hours__days,
    .opening-hours__hours {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .opening-hours {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .opening-hours__title {
        font-size: 36px;
        line-height: 44px;
    }
    .opening-hours__sub-section {
        padding: 30px 25px;
        border-radius: 18px;
    }
    .opening-hours__sub-section::before {
        border-radius: 20px;
    }
    .opening-hours__row {
        gap: 20px;
        padding: 6px 0;
    }
    .opening-hours__days,
    .opening-hours__hours {
        font-size: 15px;
        line-height: 24px;
    }
}

@media (max-width: 576px) {
    .opening-hours {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .opening-hours__title {
        font-size: 28px;
        line-height: 34px;
    }
    .opening-hours__header {
        margin-bottom: 30px;
    }
    .opening-hours__sub-section {
        padding: 25px 20px;
        border-radius: 16px;
    }
    .opening-hours__sub-section::before {
        border-radius: 18px;
    }
    
   
    .opening-hours__row {
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        padding: 10px 0;
        text-align: left;
    }
    .opening-hours__days,
    .opening-hours__hours {
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }
    .opening-hours__hours {
        text-align: right;
    }
}

@media (max-width: 400px) {
    .opening-hours {
        padding: 50px 00px;
        
    }
    .opening-hours__title {
        font-size: 28px;
        line-height: 34px;
    }
    .opening-hours__sub-section {
        padding: 20px 15px;
        border-radius: 14px;
    }
    .opening-hours__sub-section::before {
        border-radius: 16px;
    }
    .opening-hours__row {
        gap: 10px;
        padding: 8px 0;
    }
    .opening-hours__days,
    .opening-hours__hours {
        font-size: 15px;
        line-height: 20px;
    }
}
/* ============================================
   CONTACT US PAGE - OUR LOCATION SECTION
   ============================================ */

.our-location-section {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
    padding-bottom: 100px;
    padding-left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* Overlay for better text readability */
.our-location-section__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.our-location-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

/* ===== SECTION HEADER ===== */
.our-location-section__header {
    text-align: center;
    margin-bottom: 40px;
}

.our-location-section__title {
    font-family: 'SF Pro Display', 'SF Pro', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto;
    color: #BEAE82;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .our-location-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* Firefox fallback */
@-moz-document url-prefix() {
    .our-location-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* IE/Edge fallback */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .our-location-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== MAP WRAPPER - Centered ===== */
.our-location-section__map-wrapper {
    text-align: center;
}

/* ===== MAP - Centered with 15px Border ===== */
.our-location-section__map {
    display: inline-block;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 15px solid transparent;
    background: linear-gradient(137.21deg, #8A794C -29.95%, #463206 175.82%);
    background-clip: padding-box;
    max-width: 100%;
}

.our-location-section__map iframe {
    display: block;
    width: 1200px;
    max-width: 100%;
    height: 350px;
    border: none;
    border-radius: 0px;
    margin: 0 auto;
}

/* ============================================
   RESPONSIVE - OUR LOCATION SECTION
   ============================================ */

@media (max-width: 1200px) {
    .our-location-section__title {
        font-size: 52px;
        line-height: 52px;
    }
}

@media (max-width: 992px) {
    .our-location-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .our-location-section__container {
        padding: 0 30px;
    }
    .our-location-section__title {
        font-size: 42px;
        line-height: 44px;
        letter-spacing: -1.5px;
    }
    .our-location-section__map iframe {
        height: 400px;
    }
    .our-location-section__map {
        border-width: 12px;
    }
}

@media (max-width: 768px) {
    .our-location-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .our-location-section__container {
        padding: 0 20px;
    }
    .our-location-section__title {
        font-size: 36px;
        line-height: 38px;
        letter-spacing: -1px;
    }
    .our-location-section__header {
        margin-bottom: 30px;
    }
    .our-location-section__map iframe {
        height: 350px;
    }
    .our-location-section__map {
        border-width: 10px;
    }
}

@media (max-width: 576px) {
    .our-location-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .our-location-section__container {
        padding: 0 16px;
    }
    .our-location-section__title {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.5px;
    }
    .our-location-section__header {
        margin-bottom: 20px;
    }
    .our-location-section__map iframe {
        height: 250px;
    }
    .our-location-section__map {
        border-width: 8px;
        border-radius: 12px;
    }
}

@media (max-width: 400px) {
    .our-location-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .our-location-section__container {
        padding: 0 20px;
    }
    .our-location-section__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .our-location-section__map iframe {
        height: 200px;
    }
    .our-location-section__map {
        border-width: 6px;
        border-radius: 10px;
    }
}
/* ============================================
   CONTACT US PAGE - NEW PATIENTS WELCOME SECTION
   ============================================ */

/* ===== MAIN SECTION - Black Background ===== */
.new-patients-section {
    width: 100%;
    height: 450px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    position: relative;
}

/* ===== SUBSECTION - 2560px x 556px Proportion ===== */
.new-patients-section__sub {
    width: 100%;
    max-width: 1200px;
    height: 260px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 20px;
}

/* Overlay for better text readability */
.new-patients-section__sub-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

.new-patients-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 0 40px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* ===== LAYOUT - Two Columns ===== */
.new-patients-section__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 30px;
}

/* ===== LEFT COLUMN - 70% ===== */
.new-patients-section__left {
    flex: 0 0 70%;
    max-width: 70%;
}

.new-patients-section__heading {
    font-family: 'SF Pro Display', 'SF Pro', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -1.5px;
    text-align: left;
    text-transform: capitalize;
    margin: 0 0 10px 0;
    color: #FFFFFF;
}

.new-patients-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
    max-width: 600px;
}

/* IE/Edge fallback */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .new-patients-section__heading {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.new-patients-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
    max-width: 600px;
}

/* ===== RIGHT COLUMN - 30% ===== */
.new-patients-section__right {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== BUTTON ===== */
.new-patients-section__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 50px;
    white-space: nowrap;
}

.new-patients-section__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.new-patients-section__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
    line-height: 1;
}

.new-patients-section__button:hover .new-patients-section__button-icon {
    transform: translateX(4px);
}

.new-patients-section__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - NEW PATIENTS WELCOME SECTION
   ============================================ */

@media (max-width: 1200px) {
    .new-patients-section__sub {
        height: 230px;
    }
}

@media (max-width: 992px) {
    .new-patients-section {
        height: auto;
        min-height: 450px;
        padding: 40px 0;
    }
    .new-patients-section__sub {
        height: auto;
        min-height: 220px;
        margin: 0 15px;
        border-radius: 12px;
    }
    .new-patients-section__container {
        padding: 30px 30px;
        height: auto;
        min-height: 220px;
    }
    .new-patients-section__layout {
        flex-direction: column;
        height: auto;
        gap: 20px;
        text-align: center;
    }
    .new-patients-section__left {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    .new-patients-section__heading {
        text-align: center;
        font-size: 28px;
        line-height: 34px;
    }
    .new-patients-section__description {
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
    }
    .new-patients-section__right {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
    }
    .new-patients-section__button {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .new-patients-section {
        min-height: 400px;
        padding: 30px 0;
    }
    .new-patients-section__sub {
        min-height: 180px;
        border-radius: 10px;
        margin: 0 10px;
    }
    .new-patients-section__container {
        padding: 25px 20px;
        min-height: 180px;
    }
    .new-patients-section__heading {
        font-size: 24px;
        line-height: 32px;
    }
    .new-patients-section__description {
        font-size: 15px;
        line-height: 22px;
    }
    .new-patients-section__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 46px;
    }
}

@media (max-width: 576px) {
    .new-patients-section {
        min-height: 350px;
        padding: 25px 0;
    }
    .new-patients-section__sub {
        min-height: 160px;
        border-radius: 8px;
        margin: 0 8px;
    }
    .new-patients-section__container {
        padding: 20px 16px;
        min-height: 160px;
    }
    .new-patients-section__layout {
        gap: 15px;
    }
    .new-patients-section__heading {
        font-size: 20px;
        line-height: 28px;
        margin: 0 0 8px 0;
    }
    .new-patients-section__description {
        font-size: 14px;
        line-height: 20px;
    }
    .new-patients-section__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 42px;
        width: 100%;
        max-width: 250px;
    }
}

@media (max-width: 400px) {
    .new-patients-section {
        min-height: 300px;
        padding: 50px 20px;
    }
    .new-patients-section__sub {
        min-height: 140px;
        border-radius: 6px;
        margin: 0 5px;
    }
    .new-patients-section__container {
        padding: 16px 12px;
        min-height: 140px;
    }
    .new-patients-section__heading {
        font-size: 18px;
        line-height: 24px;
    }
    .new-patients-section__description {
        font-size: 15px;
        line-height: 20px;
    }
    .new-patients-section__button {
        padding: 8px 18px;
        font-size: 13px;
        min-height: 38px;
        max-width: 100%;
    }
}
/* ============================================
   REFER A FRIEND - HERO SECTION
   ============================================ */


.refer-hero {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
}

.refer-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.refer-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.refer-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

/* ===== TITLE ===== */
.refer-hero__title {
    font-family: 'SF Pro Display', 'SF Pro', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.1;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .refer-hero__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== DESCRIPTION ===== */
.refer-hero__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 700px;
    margin: 0;
}

/* ===== BUTTON ===== */
.refer-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 253px;
    height: 56px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.refer-hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

/* ===== BUTTON ICON - BOLD ===== */
.refer-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
}

.refer-hero__button-icon i {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

.refer-hero__button:hover .refer-hero__button-icon {
    transform: translateX(4px);
}

.refer-hero__button:hover .refer-hero__button-icon i {
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE - REFER HERO SECTION
   ============================================ */

@media (max-width: 1200px) {
    .refer-hero__title {
        font-size: 72px;
        line-height: 72px;
    }
}

@media (max-width: 992px) {
    .refer-hero {
        padding-top: 60px !important;
        padding-right: 40px !important;
        padding-left: 40px !important;
        min-height: 80vh;
        height: auto;
    }
    .refer-hero__title {
        font-size: 56px;
        line-height: 58px;
    }
    .refer-hero__description {
        font-size: 16px;
        line-height: 24px;
    }
    .refer-hero__button {
        width: 220px;
        height: 48px;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .refer-hero {
        padding: 60px 20px !important;
        min-height: 70vh;
        height: auto;
    }
    .refer-hero__title {
        font-size: 42px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .refer-hero__description {
        font-size: 15px;
        line-height: 22px;
        max-width: 100%;
    }
    .refer-hero__button {
        width: 200px;
        height: 46px;
        font-size: 0.8rem;
        padding: 10px 20px;
    }
}

@media (max-width: 576px) {
    .refer-hero {
        padding: 50px 16px !important;
        min-height: 60vh;
        height: auto;
    }
    .refer-hero__title {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.5px;
    }
    .refer-hero__description {
        font-size: 14px;
        line-height: 20px;
    }
    

    .refer-hero__button {
        width: 100% !important;
        max-width: 100%;
        height: 50px;
        font-size: 0.85rem;
        padding: 12px 20px;
    }
    .refer-hero__button-icon {
        font-size: 1.1rem;
    }
    .refer-hero__button-icon i {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .refer-hero {
        padding: 50px 20px !important;
        min-height: 350px;
        height: auto;
    }
    .refer-hero__title {
        font-size: 28px;
        line-height: 34px;
    }
    .refer-hero__description {
        font-size: 15px;
        line-height: 20px;
    }
    
   
    .refer-hero__button {
        width: 100% !important;
        max-width: 100%;
        height: 44px;
        font-size: 0.8rem;
        padding: 10px 16px;
    }
    .refer-hero__button-icon {
        font-size: 1rem;
    }
    .refer-hero__button-icon i {
        font-size: 1rem;
    }
}
/* ============================================
   REFER A FRIEND - SECTION
   ============================================ */

.refer-friend-section {
    width: 100%;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #020100;
    box-sizing: border-box;
    overflow: hidden;
}

.refer-friend-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}

/* ===== TITLE ===== */
.refer-friend-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    margin: 0 0 40px 0;
    display: inline-block; /* Added for gradient to work */
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .refer-friend-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== IMAGE ===== */
.refer-friend-section__image-wrapper {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	display: flex;
    justify-content: center;
    align-items: center;
}

.refer-friend-section__image {
    width: 90%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - REFER FRIEND SECTION
   ============================================ */

@media (max-width: 1200px) {
    .refer-friend-section__title {
        font-size: 52px;
        line-height: 54px;
    }
}

@media (max-width: 992px) {
    .refer-friend-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .refer-friend-section__title {
        font-size: 42px;
        line-height: 44px;
        letter-spacing: -1.5px;
    }
    .refer-friend-section__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .refer-friend-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .refer-friend-section__title {
        font-size: 36px;
        line-height: 38px;
        letter-spacing: -1px;
    }
}

@media (max-width: 576px) {
    .refer-friend-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .refer-friend-section__title {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.5px;
        margin: 0 0 25px 0;
    }
    .refer-friend-section__image-wrapper {
        border-radius: 12px;
    }
}

@media (max-width: 400px) {
    .refer-friend-section {
        padding: 50px 20px;
        
    }
    .refer-friend-section__title {
        font-size: 28px;
        line-height: 38px;
        letter-spacing: -0.5px;
    }
}
/* ============================================
   REFER A FRIEND PAGE - REFER FORM SECTION
   ============================================ */

.refer-form-section {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.refer-form-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px 0px 20px;
    box-sizing: border-box;
}

.refer-form-section__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.refer-form-section__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 600px;
}

/* ===== HEADING ===== */
.refer-form-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    margin: 0 0 15px 0;
    display: block;
    width: fit-content;
    margin: 0 auto 15px;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .refer-form-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.refer-form-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0 0 30px 0;
}

/* ===== REFER FORM ===== */
.refer-form {
    width: 100%;
    max-width: 541px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.refer-form__row {
    width: 100%;
}

.refer-form__row--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.refer-form__row--button {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.refer-form__field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.refer-form__label {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 4px;
    text-align: left;
}

.refer-form__input,
.refer-form__textarea {
    width: 100%;
    height: 42px;
    padding: 14px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.refer-form__textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
    padding: 14px 16px;
}

.refer-form__input::placeholder,
.refer-form__textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.refer-form__input:focus,
.refer-form__textarea:focus {
    outline: none;
    border-color: #BEAE82;
    box-shadow: 0 0 0 3px rgba(190, 174, 130, 0.2);
}

/* ===== SUBMIT BUTTON ===== */
.refer-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 32px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
    width: auto;
}

.refer-form__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

/* ===== BUTTON ICON - BOLD ===== */
.refer-form__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
}

.refer-form__button-icon i {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

.refer-form__button:hover .refer-form__button-icon {
    transform: translateX(4px);
}

.refer-form__button:hover .refer-form__button-icon i {
    transform: translateX(4px);
}

.refer-form__button:active {
    transform: scale(0.97);
}

/* ===== BOTTOM FULL WIDTH IMAGE ===== */
.refer-form-section__bottom-image {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}

.refer-form-section__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - REFER FORM SECTION
   ============================================ */

@media (max-width: 992px) {
    .refer-form-section {
        padding-top: 60px;
    }
    .refer-form-section__container {
        padding: 0 30px 50px 30px;
    }
    .refer-form-section__title {
        font-size: 42px;
        line-height: 44px;
        letter-spacing: -1.5px;
    }
}

@media (max-width: 768px) {
    .refer-form-section {
        padding-top: 50px;
    }
    .refer-form-section__container {
        padding: 0 20px 40px 20px;
    }
    .refer-form-section__title {
        font-size: 36px;
        line-height: 38px;
        letter-spacing: -1px;
    }
    .refer-form__input,
    .refer-form__textarea {
        height: 42px;
        padding: 12px 14px;
        font-size: 14px;
    }
    .refer-form__textarea {
        min-height: 100px;
    }
    .refer-form__button {
        padding: 12px 28px;
        font-size: 15px;
        min-height: 50px;
    }
}

@media (max-width: 576px) {
    .refer-form-section {
        padding-top: 40px;
    }
    .refer-form-section__container {
        padding: 0 16px 30px 16px;
    }
    .refer-form-section__title {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.5px;
        margin: 0 0 10px 0;
    }
    .refer-form {
        gap: 8px;
    }
    .refer-form__row--two-col {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .refer-form__row--button {
        justify-content: center;
    }
    .refer-form__input,
    .refer-form__textarea {
        height: 42px;
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 6px;
    }
    .refer-form__textarea {
        min-height: 80px;
    }
    .refer-form__button {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        justify-content: center;
        width: 100%;
    }
    .refer-form__button-icon {
        font-size: 1.1rem;
    }
    .refer-form__button-icon i {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .refer-form-section {
        padding-top: 50px;
    }
    .refer-form-section__container {
        padding: 0 20px 50px 20px;
    }
    .refer-form-section__title {
        font-size: 28px;
        line-height: 34px;
    }
    .refer-form__input,
    .refer-form__textarea {
        height: 40px;
        padding: 8px 12px;
        font-size: 13px;
    }
    .refer-form__textarea {
        min-height: 70px;
    }
    .refer-form__button {
        font-size: 13px;
        min-height: 40px;
        padding: 8px 20px;
    }
    .refer-form__button-icon {
        font-size: 1rem;
    }
    .refer-form__button-icon i {
        font-size: 1rem;
    }
}
/* ============================================
   OUR TEAM PAGE - HERO SECTION
   ============================================ */

.our-team-hero {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.our-team-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.our-team-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.our-team-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

/* ===== TITLE ===== */
.our-team-hero__title {
    font-family: 'SF Pro Display', 'SF Pro', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.1;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .our-team-hero__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== SUBTITLE ===== */
.our-team-hero__subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 700px;
    margin: 0;
}

/* ===== BUTTON ===== */
.our-team-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 253px;
    height: 56px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.our-team-hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

/* ===== BUTTON ICON - BOLD ===== */
.our-team-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
}

.our-team-hero__button-icon i {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

.our-team-hero__button:hover .our-team-hero__button-icon {
    transform: translateX(4px);
}

.our-team-hero__button:hover .our-team-hero__button-icon i {
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE - OUR TEAM HERO
   ============================================ */

@media (max-width: 992px) {
    .our-team-hero {
        padding-top: 60px !important;
        padding-right: 40px !important;
        padding-left: 40px !important;
        min-height: 80vh;
        height: auto;
    }
    .our-team-hero__title {
        font-size: 48px;
        line-height: 52px;
    }
    .our-team-hero__subtitle {
        font-size: 16px;
        line-height: 24px;
    }
    .our-team-hero__button {
        width: 220px;
        height: 48px;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .our-team-hero {
        padding: 60px 20px !important;
        min-height: 70vh;
        height: auto;
    }
    .our-team-hero__title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -1px;
    }
    .our-team-hero__subtitle {
        font-size: 15px;
        line-height: 22px;
        max-width: 100%;
    }
    .our-team-hero__button {
        width: 200px;
        height: 46px;
        font-size: 0.8rem;
        padding: 10px 20px;
    }
}

@media (max-width: 576px) {
    .our-team-hero {
        padding: 50px 16px !important;
        min-height: 60vh;
        height: auto;
    }
    .our-team-hero__title {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.5px;
    }
    .our-team-hero__subtitle {
        font-size: 14px;
        line-height: 20px;
    }

    .our-team-hero__button {
        width: 100% !important;
        max-width: 100%;
        height: 50px;
        font-size: 0.85rem;
        padding: 12px 20px;
    }
    .our-team-hero__button-icon {
        font-size: 1.1rem;
    }
    .our-team-hero__button-icon i {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .our-team-hero {
        padding: 50px 20px !important;
        min-height: 50vh;
        height: auto;
    }
    .our-team-hero__title {
        font-size: 28px;
        line-height: 34px;
    }
    .our-team-hero__subtitle {
        font-size: 15px;
        line-height: 20px;
    }
    

    .our-team-hero__button {
        width: 100% !important;
        max-width: 100%;
        height: 44px;
        font-size: 0.8rem;
        padding: 10px 16px;
    }
    .our-team-hero__button-icon {
        font-size: 1rem;
    }
    .our-team-hero__button-icon i {
        font-size: 1rem;
    }
}
/* ============================================
   COMMUNITY-DRIVEN OUR TEAM SECTION
   ============================================ */

.community-driven {
    width: 100%;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #020100;
    box-sizing: border-box;
    overflow: hidden;
}

.community-driven__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== SECTION HEADER ===== */
.community-driven__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.community-driven__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 750;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto 15px;
    /* Gradient */
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .community-driven__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.community-driven__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
}

/* ===== IMAGE WITH GRADIENT BORDER - CENTERED ===== */
.community-driven__image-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid transparent;
    position: relative;
    background-clip: padding-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.community-driven__image-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 18px;
    background: linear-gradient(137.21deg, #B89668 -29.95%, rgba(108, 88, 48, 0) 175.82%);
    z-index: -1;
}

.community-driven__image {
    width: 90%;
    height: auto;
    display: block;
    border-radius: 16px;
    margin: 0 auto;
}

/* ============================================
   RESPONSIVE - COMMUNITY-DRIVEN
   ============================================ */

@media (max-width: 992px) {
    .community-driven {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .community-driven__title {
        font-size: 42px;
        line-height: 50px;
    }
    .community-driven__description {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 768px) {
    .community-driven {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .community-driven__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .community-driven__description {
        font-size: 16px;
        line-height: 24px;
    }
    .community-driven__header {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .community-driven {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .community-driven__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
        margin: 0 auto 10px;
    }
    .community-driven__description {
        font-size: 15px;
        line-height: 22px;
    }
    .community-driven__header {
        margin-bottom: 25px;
    }
    .community-driven__image-wrapper {
        border-radius: 12px;
    }
    .community-driven__image-wrapper::before {
        border-radius: 14px;
    }
    .community-driven__image {
        border-radius: 12px;
        width: 90%;
    }
}

@media (max-width: 400px) {
    .community-driven {
        padding: 50px 20px;
       
    }
    .community-driven__title {
        font-size: 28px;
        line-height: 34px;
    }
    .community-driven__description {
        font-size: 15px;
        line-height: 20px;
    }
    .community-driven__image-wrapper {
        border-radius: 10px;
    }
    .community-driven__image-wrapper::before {
        border-radius: 12px;
    }
    .community-driven__image {
        border-radius: 10px;
        width: 90%;
    }
}
/* ============================================
   ALL TEAM MEMBERS LIST SECTION
   ============================================ */

.team-members-list {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.team-members-list__container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== MAIN SECTION HEADER ===== */
.team-members-list__header {
    text-align: center;
    margin-bottom: 50px;
}

.team-members-list__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .team-members-list__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== SUB SECTION - No Top Border ===== */
.team-members-list__sub-section {
    margin-top: 60px;
    padding-top: 0;
    border-top: none;
    text-align: center;
}

.team-members-list__sub-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
}

/* ===== SUB SECTION HEADING ===== */
.team-members-list__sub-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 46px;
    letter-spacing: -1px;
    text-align: center;
    margin: 0 auto 5px auto;
    display: inline-block;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .team-members-list__sub-heading {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== SUB SECTION SUBHEADING ===== */
.team-members-list__sub-subheading {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #FFFFFF;
    margin: 0 0 30px 0;
}

/* ===== SLIDER WRAPPER ===== */
.team-members-list__slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.team-members-list__slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ===== SLIDES ===== */
.team-members-list__slide {
    display: none;
    animation: slideInRight 0.5s ease forwards;
}

.team-members-list__slide.active {
    display: block;
}

/* Right-to-Left Slide Animation */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Left-to-Right Animation (for previous slide) */
.team-members-list__slide.slide-out-left {
    animation: slideOutLeft 0.5s ease forwards;
}

@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50px);
    }
}

/* ===== TEAM MEMBER BOX ===== */
.team-members-list__box {
	padding: 0px 40px;
    width: 100%;
    height: 400px;
    display: flex;
    border-radius: 25px;
    background: #20201F;
    border: 1.2px solid #B89668;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.5s ease;
}

.team-members-list__box.expanded {
    height: auto;
    min-height: 400px;
    transition: all 0.5s ease;
}

.team-members-list__box > * {
    position: relative;
    z-index: 1;
}

/* ===== LEFT COLUMN - Image (25%) ===== */
.team-members-list__left {
    flex: 0 0 30%;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.team-members-list__image-wrapper {
    width: 100%;
    max-width: 250px;
    border-radius: 16px;
    overflow: hidden;
}

.team-members-list__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== RIGHT COLUMN - Content (75%) - ALL TEXT LEFT ALIGNED ===== */
.team-members-list__right {
    flex: 0 0 70%;
    width: 70%;
    padding: 30px 40px 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.team-members-list__name {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 42px;
    letter-spacing: -1px;
    margin: 0 0 5px 0;
    text-align: left;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .team-members-list__name {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.team-members-list__designation {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0 0 15px 0;
    text-align: left;
}

.team-members-list__description-wrapper {
    margin-bottom: 15px;
    text-align: left;
}

.team-members-list__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
}

.team-members-list__description--full {
    display: none;
    margin-top: 10px;
    text-align: left;
}

.team-members-list__box.expanded .team-members-list__description--full {
    display: block;
}

.team-members-list__box.expanded .team-members-list__description--short {
    display: none;
}

/* ===== READ MORE BUTTON - Matching Website Button Style ===== */
.team-members-list__read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 120px;
    height: 45px;
    padding: 10px 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.team-members-list__read-more:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF !important;
}

.team-members-list__read-more:active {
    transform: scale(0.97);
}

/* ===== NAVIGATION ===== */
.team-members-list__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.team-members-list__nav {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 56px;
    background: linear-gradient(274.43deg, #D0C093 20.43%, #8A794C 98.65%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 12px 16px;
}

.team-members-list__nav:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
}

.team-members-list__nav svg {
    width: 24px;
    height: 24px;
    stroke: #FFFFFF;
    fill: none;
}

.team-members-list__dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-members-list__dot {
    width: 5px;
    height: 5px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.team-members-list__dot.active {
    background: #BEAE82;
    width: 10px;
    border-radius: 6px;
}

.team-members-list__dot:hover {
    background: rgba(190, 174, 130, 0.5);
}

/* ============================================
   RESPONSIVE - TEAM MEMBERS LIST
   ============================================ */

@media (max-width: 992px) {
    .team-members-list {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .team-members-list__title {
        font-size: 42px;
        line-height: 50px;
    }
    .team-members-list__sub-heading {
        font-size: 30px;
        line-height: 38px;
    }
    .team-members-list__sub-subheading {
        font-size: 16px;
        line-height: 24px;
    }
    .team-members-list__box {
        height: auto;
        min-height: 350px;
        flex-direction: column;
        padding: 25px;
        border-radius: 20px;
        background: transparent !important;
        border: 2px solid #FFFFFF;
    }
    .team-members-list__box.expanded {
        min-height: 350px;
    }
    .team-members-list__left {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 0 20px 0;
    }
    .team-members-list__image-wrapper {
        max-width: 250px;
        margin: 0 auto;
    }
    .team-members-list__image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }
    .team-members-list__right {
        flex: 0 0 100%;
        width: 100%;
        padding: 0;
        text-align: left;
    }
    .team-members-list__name {
        font-size: 28px;
        line-height: 36px;
        text-align: left;
    }
    .team-members-list__designation {
        text-align: left;
    }
    .team-members-list__description-wrapper {
        text-align: left;
    }
    .team-members-list__description {
        text-align: left;
    }
    .team-members-list__read-more {
        width: 140px;
        height: 40px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .team-members-list {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .team-members-list__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .team-members-list__header {
        margin-bottom: 30px;
    }
    .team-members-list__sub-heading {
        font-size: 26px;
        line-height: 34px;
    }
    .team-members-list__sub-subheading {
        font-size: 15px;
        line-height: 22px;
    }
    .team-members-list__sub-section {
        margin-top: 40px;
        padding-top: 0;
    }
    .team-members-list__box {
        min-height: 300px;
        padding: 20px;
        border-radius: 18px;
        background: transparent !important;
        border: 2px solid #FFFFFF;
    }
    .team-members-list__box.expanded {
        min-height: 300px;
    }
    .team-members-list__image-wrapper {
        max-width: 200px;
        margin: 0 auto;
    }
    .team-members-list__image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }
    .team-members-list__name {
        font-size: 24px;
        line-height: 32px;
        text-align: left;
    }
    .team-members-list__designation {
        text-align: left;
    }
    .team-members-list__description-wrapper {
        text-align: left;
    }
    .team-members-list__description {
        text-align: left;
    }
    .team-members-list__read-more {
        width: 120px;
        height: 36px;
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .team-members-list {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .team-members-list__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
    }
    .team-members-list__sub-heading {
        font-size: 22px;
        line-height: 30px;
    }
    .team-members-list__sub-subheading {
        font-size: 14px;
        line-height: 22px;
    }
    .team-members-list__sub-section {
        margin-top: 30px;
        padding-top: 0;
    }
    .team-members-list__box {
        min-height: 250px;
        padding: 15px;
        border-radius: 14px;
        background: transparent !important;
        border: 2px solid #FFFFFF;
    }
    .team-members-list__box.expanded {
        min-height: 250px;
    }
    .team-members-list__image-wrapper {
        max-width: 300px;
        margin: 0 auto;
    }
    .team-members-list__image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }
    .team-members-list__name {
        font-size: 20px;
        line-height: 28px;
        text-align: left;
    }
    .team-members-list__designation {
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }
    .team-members-list__description-wrapper {
        text-align: left;
    }
    .team-members-list__description {
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }
    .team-members-list__read-more {
        width: 100px;
        height: 32px;
        font-size: 11px;
        padding: 8px 16px;
        border-radius: 30px;
    }
}

@media (max-width: 400px) {
    .team-members-list {
        padding: 30px 15px;
    }
    .team-members-list__title {
        font-size: 28px;
        line-height: 34px;
    }
    .team-members-list__sub-heading {
        font-size: 20px;
        line-height: 28px;
    }
    .team-members-list__sub-section {
        margin-top: 25px;
        padding-top: 0;
    }
    .team-members-list__box {
        min-height: 200px;
        padding: 12px;
        border-radius: 12px;
        background: transparent !important;
        border: 2px solid #FFFFFF;
    }
    .team-members-list__box.expanded {
        min-height: 200px;
    }
    .team-members-list__image-wrapper {
        max-width: 300px;
        margin: 0 auto;
    }
    .team-members-list__image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }
    .team-members-list__name {
        font-size: 20px;
        line-height: 24px;
        text-align: left;
    }
    .team-members-list__designation {
        font-size: 16px;
        line-height: 20px;
        text-align: left;
    }
    .team-members-list__description-wrapper {
        text-align: left;
    }
    .team-members-list__description {
        font-size: 15px;
        line-height: 20px;
        text-align: left;
    }
    .team-members-list__read-more {
        width: 90px;
        height: 28px;
        font-size: 10px;
        padding: 6px 12px;
        border-radius: 25px;
    }
}
/* ============================================
   ADVANCED DENTAL TECHNOLOGY SECTION
   ============================================ */

.advanced-dental-tech {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.advanced-dental-tech__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== TWO COLUMN LAYOUT ===== */
.advanced-dental-tech__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* ===== LEFT COLUMN ===== */
.advanced-dental-tech__left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* ===== MAIN HEADING (Gradient) ===== */
.advanced-dental-tech__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .advanced-dental-tech__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== SUBHEADING (White) ===== */
.advanced-dental-tech__subheading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    color: #FFFFFF;
    margin: 0;
}

/* ===== DESCRIPTION ===== */
.advanced-dental-tech__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    max-width: 700px;
}

/* ===== RIGHT COLUMN - Image ===== */
.advanced-dental-tech__right {
    display: flex;
    justify-content: right;
    align-items: right;
    width: 100%;
    box-sizing: border-box;
}

.advanced-dental-tech__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.advanced-dental-tech__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - ADVANCED DENTAL TECHNOLOGY
   ============================================ */

@media (max-width: 992px) {
    .advanced-dental-tech {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .advanced-dental-tech__title {
        font-size: 42px;
        line-height: 50px;
    }
    .advanced-dental-tech__subheading {
        font-size: 20px;
        line-height: 28px;
    }
    .advanced-dental-tech__description {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 768px) {
    .advanced-dental-tech {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .advanced-dental-tech__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .advanced-dental-tech__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .advanced-dental-tech__subheading {
        font-size: 18px;
        line-height: 26px;
    }
    .advanced-dental-tech__description {
        font-size: 15px;
        line-height: 22px;
        max-width: 100%;
    }
    .advanced-dental-tech__left {
        align-items: left;
        text-align: left;
    }
    .advanced-dental-tech__title {
        margin: 0 auto;
        text-align: left;
    }
    .advanced-dental-tech__subheading {
        text-align: left;
    }
    .advanced-dental-tech__description {
        text-align: left;
    }
    .advanced-dental-tech__image-wrapper {
        max-width: 400px;
    }
}

@media (max-width: 576px) {
    .advanced-dental-tech {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .advanced-dental-tech__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .advanced-dental-tech__subheading {
        font-size: 16px;
        line-height: 24px;
    }
    .advanced-dental-tech__description {
        font-size: 14px;
        line-height: 20px;
    }
    .advanced-dental-tech__layout {
        gap: 30px;
    }
    .advanced-dental-tech__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .advanced-dental-tech {
        padding: 50px 20px;
        
    }
    .advanced-dental-tech__title {
        font-size: 28px;
        line-height: 34px;
	
    }
    .advanced-dental-tech__subheading {
        font-size: 15px;
        line-height: 22px;
    }
    .advanced-dental-tech__description {
        font-size: 15px;
        line-height: 20px;
    }
}
/* ============================================
   OUR ADVANCED TECHNOLOGIES SECTION
   ============================================ */

.advanced-technologies {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.advanced-technologies__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== TWO COLUMN LAYOUT ===== */
.advanced-technologies__layout {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 60px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

/* ===== LEFT COLUMN ===== */
.advanced-technologies__left {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* ===== SECTION HEADING (Left Aligned) ===== */
.advanced-technologies__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .advanced-technologies__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== TABS WITH CONTENT ===== */
.advanced-technologies__tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.advanced-technologies__tab-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.advanced-technologies__tab-wrapper:last-child {
    margin-bottom: 0;
}

/* ===== TAB BUTTON ===== */
.advanced-technologies__tab {
    display: flex;
    align-items: center;
    gap: 22.69px;
    width: 100%;
    max-width: 323.33px;
    height: 58.34px;
    padding: 8.1px 140.19px 8.91px 10.53px;
    border-radius: 53.48px;
    background: #D9D9D90F;
    border: 0.81px solid transparent;
    position: relative;
    backdrop-filter: blur(16.21px);
    -webkit-backdrop-filter: blur(16.21px);
    background-clip: padding-box;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.advanced-technologies__tab::before {
    content: '';
    position: absolute;
    inset: -0.81px;
    border-radius: 53.48px;
    padding: 0.81px;
    background: linear-gradient(137.21deg, #B89668 -29.95%, rgba(184, 150, 104, 0.59) 175.82%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.advanced-technologies__tab > * {
    position: relative;
    z-index: 1;
}

.advanced-technologies__tab:hover {
    transform: translateX(0);
}

.advanced-technologies__tab.active {
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border-color: transparent;
    transform: translateX(0);
}

.advanced-technologies__tab.active::before {
    display: none;
}

.advanced-technologies__tab-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advanced-technologies__tab-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.advanced-technologies__tab-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    white-space: nowrap;
}

.advanced-technologies__tab.active .advanced-technologies__tab-title {
    color: #FFFFFF;
}

/* ===== TAB CONTENT (Below Tab Button) ===== */
.advanced-technologies__tab-content {
    display: none;
    padding: 15px 0 0 0;
    max-width: 600px;
}

.advanced-technologies__tab-content.active {
    display: block;
}

.advanced-technologies__tab-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* ===== RIGHT COLUMN - Image Only ===== */
.advanced-technologies__right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    min-height: 400px;
    box-sizing: border-box;
}

.advanced-technologies__image-wrapper {
	padding-top: 70px;
    display: none;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.advanced-technologies__image-wrapper.active {
    display: block;
}

.advanced-technologies__image {
	padding-top: 70px;
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - ADVANCED TECHNOLOGIES
   ============================================ */

@media (max-width: 992px) {
    .advanced-technologies {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .advanced-technologies__title {
        font-size: 42px;
        line-height: 50px;
        margin: 0 auto;
        text-align: left;
    }
    .advanced-technologies__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .advanced-technologies__left {
        align-items: center;
        text-align: center;
    }
    .advanced-technologies__tabs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .advanced-technologies__tab {
        max-width: 280px;
        padding-right: 40px;
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab.active {
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab:hover {
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab-content {
        text-align: center;
        max-width: 100%;
    }
    .advanced-technologies__right {
        min-height: auto;
    }
    .advanced-technologies__image-wrapper {
        max-width: 400px;
        margin: 0 auto;
    }
	
	.advanced-technologies__image-wrapper {
	padding-top: 0px;
    display: none;
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

	.advanced-technologies__image-wrapper.active {
		display: block;
	}

	.advanced-technologies__image {
		padding-top: 0px;
		width: 90%;
		height: auto;
		display: block;
	}
}

@media (max-width: 768px) {
    .advanced-technologies {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .advanced-technologies__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .advanced-technologies__tab {
        max-width: 240px;
        height: 52px;
        padding: 6px 20px 6px 12px;
        gap: 15px;
        border-radius: 40px;
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab::before {
        border-radius: 40px;
    }
    .advanced-technologies__tab.active {
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab-icon {
        width: 28px;
        height: 28px;
    }
    .advanced-technologies__tab-title {
        font-size: 13px;
    }
    .advanced-technologies__tab-description {
        font-size: 15px;
        line-height: 22px;
    }
	
	.advanced-technologies__image-wrapper {
	padding-top: 0px;
    display: none;
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

	.advanced-technologies__image-wrapper.active {
		display: block;
	}

	.advanced-technologies__image {
		padding-top: 0px;
		width: 90%;
		height: auto;
		display: block;
	}
}

@media (max-width: 576px) {
    .advanced-technologies {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .advanced-technologies__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }
    .advanced-technologies__layout {
        gap: 30px;
    }
    
    /* LEFT COLUMN FIRST, RIGHT COLUMN SECOND */
    .advanced-technologies__left {
        order: 1;
    }
    .advanced-technologies__right {
        order: 2;
    }
    
    .advanced-technologies__tabs {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .advanced-technologies__tab-wrapper {
        width: 100%;
        max-width: 100%;
    }
    .advanced-technologies__tab {
        max-width: 100%;
        width: 100%;
        height: 48px;
        padding: 6px 14px;
        gap: 12px;
        border-radius: 35px;
        justify-content: flex-start;
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab::before {
        border-radius: 35px;
    }
    .advanced-technologies__tab.active {
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab:hover {
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab-icon {
        width: 24px;
        height: 24px;
    }
    .advanced-technologies__tab-title {
        font-size: 13px;
        white-space: normal;
    }
    .advanced-technologies__tab-content {
        padding: 10px 0 0 0;
        max-width: 100%;
        text-align: left;
    }
    .advanced-technologies__tab-description {
        font-size: 14px;
        line-height: 20px;
    }
    .advanced-technologies__image-wrapper {
        max-width: 100%;
    }
	.advanced-technologies__image-wrapper {
	padding-top: 0px;
    display: none;
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
	align-items: center;
}

	.advanced-technologies__image-wrapper.active {
		display: block;
	}

	.advanced-technologies__image {
		padding-top: 0px;
		width: 90%;
		height: auto;
		display: block;
		align-items: center;
	}
	
}

@media (max-width: 400px) {
    .advanced-technologies {
        padding: 50px 20px;
       
    }
    .advanced-technologies__title {
        font-size: 28px;
        line-height: 34px;
    }
    .advanced-technologies__tab {
        height: 44px;
        padding: 5px 12px;
        gap: 10px;
        border-radius: 30px;
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab::before {
        border-radius: 30px;
    }
    .advanced-technologies__tab.active {
        transform: translateX(0) !important;
    }
    .advanced-technologies__tab-icon {
        width: 20px;
        height: 20px;
    }
    .advanced-technologies__tab-title {
        font-size: 15px;
    }
    .advanced-technologies__tab-description {
        font-size: 15px;
        line-height: 20px;
    }
	
	.advanced-technologies__image-wrapper {
    padding-top: 0px;
    display: none;
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto; /* Centers the container horizontally */
}

	.advanced-technologies__image-wrapper.active {
		display: block;
	}

	.advanced-technologies__image {
		padding-top: 0px;
		width: 100%; /* Changed from 90% to 100% */
		height: auto;
		display: block;
	}
}
/* ============================================
   PATIENT FINANCING & CDCP - HERO SECTION
   ============================================ */

.patient-financing-hero {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.patient-financing-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.patient-financing-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.patient-financing-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 1000px;
    margin: 0 auto;
}

/* ===== TITLE ===== */
.patient-financing-hero__title {
    font-family: 'SF Pro Display', 'SF Pro', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 70px;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .patient-financing-hero__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== SUBTITLE ===== */
.patient-financing-hero__subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    max-width: 1000px;
    margin: 0;
}

/* ===== BUTTON ===== */
.patient-financing-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 253px;
    height: 56px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.patient-financing-hero__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

/* ===== BUTTON ICON - BOLD ===== */
.patient-financing-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
}

.patient-financing-hero__button-icon i {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

.patient-financing-hero__button:hover .patient-financing-hero__button-icon {
    transform: translateX(4px);
}

.patient-financing-hero__button:hover .patient-financing-hero__button-icon i {
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE - PATIENT FINANCING HERO
   ============================================ */

@media (max-width: 992px) {
    .patient-financing-hero {
        padding-top: 60px !important;
        padding-right: 40px !important;
        padding-left: 40px !important;
        min-height: 80vh;
        height: auto;
    }
    .patient-financing-hero__title {
        font-size: 48px;
        line-height: 52px;
    }
    .patient-financing-hero__subtitle {
        font-size: 16px;
        line-height: 24px;
    }
    .patient-financing-hero__button {
        width: 220px;
        height: 48px;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .patient-financing-hero {
        padding: 60px 20px !important;
        min-height: 70vh;
        height: auto;
    }
    .patient-financing-hero__title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -1px;
    }
    .patient-financing-hero__subtitle {
        font-size: 15px;
        line-height: 22px;
        max-width: 100%;
    }
    .patient-financing-hero__button {
        width: 200px;
        height: 46px;
        font-size: 0.8rem;
        padding: 10px 20px;
    }
}

@media (max-width: 576px) {
    .patient-financing-hero {
        padding: 50px 16px !important;
        min-height: 60vh;
        height: auto;
    }
    .patient-financing-hero__title {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.5px;
    }
    .patient-financing-hero__subtitle {
        font-size: 14px;
        line-height: 20px;
    }
    
    /* BUTTON FULL WIDTH ON MOBILE */
    .patient-financing-hero__button {
        width: 100% !important;
        max-width: 100%;
        height: 50px;
        font-size: 0.85rem;
        padding: 12px 20px;
    }
    .patient-financing-hero__button-icon {
        font-size: 1.1rem;
    }
    .patient-financing-hero__button-icon i {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .patient-financing-hero {
        padding: 50px 20px !important;
        min-height: 350px;
        height: auto;
    }
    .patient-financing-hero__title {
        font-size: 28px;
        line-height: 34px;
    }
    .patient-financing-hero__subtitle {
        font-size: 15px;
        line-height: 20px;
    }
    
    /* BUTTON FULL WIDTH ON MOBILE */
    .patient-financing-hero__button {
        width: 100% !important;
        max-width: 100%;
        height: 44px;
        font-size: 0.8rem;
        padding: 10px 16px;
    }
    .patient-financing-hero__button-icon {
        font-size: 1rem;
    }
    .patient-financing-hero__button-icon i {
        font-size: 1rem;
    }
}
/* ============================================
   FINANCING PLANS SECTION
   ============================================ */

.financing-plans {
    width: 100%;
    padding-top: 00px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #010200;
    box-sizing: border-box;
    overflow: hidden;
}

.financing-plans__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== SECTION HEADER ===== */
.financing-plans__header {
    text-align: center;
    margin-bottom: 30px;
}

.financing-plans__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto 15px;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .financing-plans__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.financing-plans__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
    margin: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== SUB HEADING ===== */
.financing-plans__subheading {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #ffffff;
    text-align: center;
    margin: 0 auto 15px;
    max-width: 500px;
    width: 100%;
}

/* ===== SUB DESCRIPTION ===== */
.financing-plans__sub-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
    margin: 0 auto 40px;
    max-width: 700px;
}


.financing-plans__image-wrapper {
    width: 100%;
    max-width: 800px;
    padding: 0;
    box-sizing: border-box;
    margin: 0 auto;
}

.financing-plans__image-border {
    position: relative;
    border-radius: 48.5px;
    padding: 2px;
    border-color: #B89668;
    width: 100%;
    box-sizing: border-box;
}

.financing-plans__image-inner {
    border-radius: 47px;
    overflow: hidden;
    width: 100%;
    
    padding: 25px;
    background: transparent;
}

.financing-plans__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* ============================================
   RESPONSIVE - FINANCING PLANS
   ============================================ */

@media (max-width: 992px) {
    .financing-plans {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .financing-plans__title {
        font-size: 42px;
        line-height: 50px;
    }
    .financing-plans__subheading {
        font-size: 22px;
        line-height: 30px;
    }
    .financing-plans__image-border {
        border-radius: 35px;
    }
    .financing-plans__image-inner {
        border-radius: 33px;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .financing-plans {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .financing-plans__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .financing-plans__description {
        font-size: 15px;
        line-height: 22px;
    }
    .financing-plans__subheading {
        font-size: 20px;
        line-height: 28px;
    }
    .financing-plans__sub-description {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 30px;
    }
    .financing-plans__image-border {
        border-radius: 25px;
    }
    .financing-plans__image-inner {
        border-radius: 23px;
        padding: 15px;
    }
}

@media (max-width: 576px) {
    .financing-plans {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .financing-plans__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
        margin: 0 auto 10px;
    }
    .financing-plans__description {
        font-size: 14px;
        line-height: 20px;
    }
    .financing-plans__subheading {
        font-size: 18px;
        line-height: 26px;
    }
    .financing-plans__sub-description {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 25px;
    }
    .financing-plans__image-border {
        border-radius: 20px;
    }
    .financing-plans__image-inner {
        border-radius: 18px;
        padding: 12px;
    }
}

@media (max-width: 400px) {
    .financing-plans {
        padding: 50px 20px;
       
    }
    .financing-plans__title {
        font-size: 28px;
        line-height: 34px;
    }
    .financing-plans__description {
        font-size: 15px;
        line-height: 20px;
    }
    .financing-plans__subheading {
        font-size: 17px;
        line-height: 25px;
    }
    .financing-plans__sub-description {
        font-size: 15px;
        line-height: 20px;
    }
    .financing-plans__image-border {
        border-radius: 16px;
    }
    .financing-plans__image-inner {
        border-radius: 14px;
        padding: 10px;
    }
}
/* ============================================
   INSURANCE SECTION
   ============================================ */

.insurance-section {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.insurance-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px 0 20px;
    box-sizing: border-box;
}

/* ===== TWO COLUMN LAYOUT ===== */
.insurance-section__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* ===== LEFT COLUMN ===== */
.insurance-section__left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* ===== TITLE (Gradient) ===== */
.insurance-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .insurance-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== DESCRIPTION ===== */
.insurance-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    max-width: 1200px;
}

/* ===== SUBHEADING ===== */
.insurance-section__subheading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    margin: 0px 0 0 0;
}

/* ===== SUB DESCRIPTION ===== */
.insurance-section__sub-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    max-width: 1000px;
}

/* ===== BUTTON ===== */
.insurance-section__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 250px;
    height: 50px;
    padding: 12px 24px;
    margin-top: 10px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.insurance-section__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

.insurance-section__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
}

.insurance-section__button-icon i {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFFFFF;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

.insurance-section__button:hover .insurance-section__button-icon {
    transform: translateX(4px);
}

/* ===== RIGHT COLUMN - Image ===== */
.insurance-section__right {
    display: flex;
    justify-content: right;
    align-items: right;
    width: 100%;
    box-sizing: border-box;
}

.insurance-section__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.insurance-section__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== BOTTOM FULL WIDTH IMAGE - No Space Above ===== */
.insurance-section__bottom-image {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
    margin-top: 0;
}

.insurance-section__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - INSURANCE SECTION
   ============================================ */

@media (max-width: 992px) {
    .insurance-section {
        padding-top: 60px;
    }
    .insurance-section__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .insurance-section__title {
        font-size: 42px;
        line-height: 50px;
    }
    .insurance-section__description {
        max-width: 100%;
    }
    .insurance-section__sub-description {
        max-width: 100%;
    }
    
   
    .insurance-section__left {
        order: 1;
    }
    .insurance-section__right {
        order: 2;
    }
    
    .insurance-section__image-wrapper {
        max-width: 400px;
    }
    .insurance-section__left {
        align-items: center;
        text-align: center;
    }
    .insurance-section__title {
        margin: 0 auto;
    }
    .insurance-section__subheading {
        text-align: center;
    }
    .insurance-section__sub-description {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .insurance-section {
        padding-top: 50px;
    }
    .insurance-section__container {
        padding: 0 20px 0 20px;
    }
    .insurance-section__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .insurance-section__description {
        font-size: 15px;
        line-height: 22px;
    }
    .insurance-section__subheading {
        font-size: 18px;
        line-height: 26px;
    }
    .insurance-section__sub-description {
        font-size: 15px;
        line-height: 22px;
    }
    .insurance-section__button {
        width: 100%;
        max-width: 220px;
        height: 46px;
        font-size: 15px;
    }
    .insurance-section__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .insurance-section {
        padding-top: 40px;
    }
    .insurance-section__container {
        padding: 0 16px 0 16px;
    }
    .insurance-section__layout {
        gap: 30px;
    }
    .insurance-section__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
    }
    .insurance-section__description {
        font-size: 14px;
        line-height: 20px;
    }
    .insurance-section__subheading {
        font-size: 16px;
        line-height: 24px;
    }
    .insurance-section__sub-description {
        font-size: 14px;
        line-height: 20px;
    }
    .insurance-section__button {
        max-width: 100%;
        height: 44px;
        font-size: 14px;
        justify-content: center;
    }
    .insurance-section__button-icon {
        font-size: 1.1rem;
    }
    .insurance-section__button-icon i {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .insurance-section {
		padding-top: 50px;
		padding-right: 20px;
		padding-bottom: 0px;
		padding-left: 20px;
}
    .insurance-section__container {
        padding: 0 12px 0 12px;
    }
    .insurance-section__title {
        font-size: 28px;
        line-height: 34px;
    }
    .insurance-section__description {
        font-size: 15px;
        line-height: 20px;
    }
    .insurance-section__subheading {
        font-size: 17px;
        line-height: 25px;
    }
    .insurance-section__sub-description {
        font-size: 15px;
        line-height: 20px;
    }
    .insurance-section__button {
        height: 40px;
        font-size: 13px;
    }
    .insurance-section__button-icon {
        font-size: 1rem;
    }
    .insurance-section__button-icon i {
        font-size: 1rem;
    }
}
/* ============================================
   CANADIAN DENTAL CARE PLAN SECTION
   ============================================ */

.cdcp-section {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.cdcp-section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== SECTION HEADER ===== */
.cdcp-section__header {
    text-align: center;
    margin-bottom: 40px;
}

.cdcp-section__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0 auto 15px;
	max-width: 550px;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .cdcp-section__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

.cdcp-section__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== IMAGE ===== */
.cdcp-section__image-wrapper {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cdcp-section__image {
    width: 90%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - CDCP SECTION
   ============================================ */

@media (max-width: 992px) {
    .cdcp-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .cdcp-section__title {
        font-size: 42px;
        line-height: 50px;
    }
    .cdcp-section__description {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 768px) {
    .cdcp-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .cdcp-section__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .cdcp-section__description {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }
    .cdcp-section__header {
        margin-bottom: 30px;
    }
    .cdcp-section__image-wrapper {
        border-radius: 12px;
    }
}

@media (max-width: 576px) {
    .cdcp-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .cdcp-section__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
        margin: 0 auto 10px;
    }
    .cdcp-section__description {
        font-size: 15px;
        line-height: 22px;
    }
    .cdcp-section__header {
        margin-bottom: 25px;
    }
    .cdcp-section__image-wrapper {
        border-radius: 10px;
    }
}

@media (max-width: 400px) {
    .cdcp-section {
        padding: 50px 20px;
        
    }
    .cdcp-section__title {
        font-size: 28px;
        line-height: 34px;
    }
    .cdcp-section__description {
        font-size: 15px;
        line-height: 20px;
    }
}
/* ============================================
   WHAT IS CDCP SECTION
   ============================================ */

.what-is-cdcp {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.what-is-cdcp__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== TWO COLUMN LAYOUT ===== */
.what-is-cdcp__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* ===== LEFT COLUMN ===== */
.what-is-cdcp__left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* ===== TITLE (Gradient) ===== */
.what-is-cdcp__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .what-is-cdcp__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== SUBHEADING (White) ===== */
.what-is-cdcp__subheading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #FFFFFF;
    margin: 0;
}

/* ===== DESCRIPTION ===== */
.what-is-cdcp__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    max-width: 1000px;
}

/* ===== RIGHT COLUMN - Image ===== */
.what-is-cdcp__right {
    display: flex;
    justify-content: right;
    align-items: right;
    width: 100%;
    box-sizing: border-box;
}

.what-is-cdcp__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.what-is-cdcp__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - WHAT IS CDCP
   ============================================ */

@media (max-width: 992px) {
    .what-is-cdcp {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .what-is-cdcp__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .what-is-cdcp__title {
        font-size: 42px;
        line-height: 50px;
    }
    .what-is-cdcp__subheading {
        font-size: 20px;
        line-height: 28px;
    }
    .what-is-cdcp__description {
        max-width: 100%;
    }
    

    .what-is-cdcp__left {
        order: 1;
    }
    .what-is-cdcp__right {
        order: 2;
    }
    
    .what-is-cdcp__left {
        align-items: left;
        text-align: left;
    }
    .what-is-cdcp__title {
        margin: 0 auto;
        text-align: left;
    }
    .what-is-cdcp__subheading {
        text-align: left;
    }
    .what-is-cdcp__description {
        text-align: left;
        max-width: 100%;
    }
    .what-is-cdcp__image-wrapper {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .what-is-cdcp {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .what-is-cdcp__container {
        padding: 0 20px;
    }
    .what-is-cdcp__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .what-is-cdcp__subheading {
        font-size: 18px;
        line-height: 26px;
    }
    .what-is-cdcp__description {
        font-size: 15px;
        line-height: 22px;
    }
    .what-is-cdcp__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .what-is-cdcp {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .what-is-cdcp__container {
        padding: 0 16px;
    }
    .what-is-cdcp__layout {
        gap: 30px;
    }
    .what-is-cdcp__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
    }
    .what-is-cdcp__subheading {
        font-size: 16px;
        line-height: 24px;
    }
    .what-is-cdcp__description {
        font-size: 14px;
        line-height: 20px;
    }
    .what-is-cdcp__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .what-is-cdcp {
        padding: 50px 20px;
        
    }
    
    .what-is-cdcp__title {
        font-size: 28px;
        line-height: 34px;
    }
    .what-is-cdcp__subheading {
        font-size: 17px;
        line-height: 22px;
    }
    .what-is-cdcp__description {
        font-size: 15px;
        line-height: 20px;
    }
}
/* ============================================
   WHO QUALIFIES SECTION
   ============================================ */

.who-qualifies {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.who-qualifies__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== SECTION HEADER ===== */
.who-qualifies__header {
    margin-bottom: 50px;
}

.who-qualifies__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .who-qualifies__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== QUALIFY ITEMS LIST ===== */
.who-qualifies__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
}

/* ===== QUALIFY ITEM ===== */
.who-qualifies__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== ITEM HEADING (White) ===== */
.who-qualifies__item-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
}

/* ===== ITEM DESCRIPTION ===== */
.who-qualifies__item-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
    max-width: 700px;
}

/* ============================================
   RESPONSIVE - WHO QUALIFIES
   ============================================ */

@media (max-width: 992px) {
    .who-qualifies {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .who-qualifies__title {
        font-size: 42px;
        line-height: 50px;
    }
    .who-qualifies__header {
        margin-bottom: 40px;
    }
    .who-qualifies__list {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .who-qualifies {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .who-qualifies__container {
        padding: 0 20px;
    }
    .who-qualifies__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .who-qualifies__header {
        margin-bottom: 30px;
        text-align: left;
    }
    .who-qualifies__title {
        margin: 0 auto;
        text-align: left;
    }
    .who-qualifies__list {
        align-items: left;
    }
    .who-qualifies__item {
        align-items: left;
        text-align: left;
        max-width: 600px;
        width: 100%;
    }
    .who-qualifies__item-heading {
        text-align: left;
        font-size: 20px;
        line-height: 28px;
    }
    .who-qualifies__item-description {
        text-align: left;
        font-size: 15px;
        line-height: 22px;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .who-qualifies {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .who-qualifies__container {
        padding: 0 16px;
    }
    .who-qualifies__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
    }
    .who-qualifies__header {
        margin-bottom: 25px;
    }
    .who-qualifies__list {
        gap: 25px;
    }
    .who-qualifies__item-heading {
        font-size: 18px;
        line-height: 26px;
    }
    .who-qualifies__item-description {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (max-width: 400px) {
    .who-qualifies {
        padding: 50px 30px;
        
    }
    .who-qualifies__container {
        padding: 0 0px;
    }
    .who-qualifies__title {
        font-size: 28px;
        line-height: 34px;
    }
    .who-qualifies__list {
        gap: 20px;
    }
    .who-qualifies__item-heading {
        font-size: 17px;
        line-height: 24px;
    }
    .who-qualifies__item-description {
        font-size: 15px;
        line-height: 20px;
    }
}
/* ============================================
   CDCP ELIGIBILITY CRITERIA SECTION
   ============================================ */

.cdcp-eligibility {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.cdcp-eligibility__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== TWO COLUMN LAYOUT ===== */
.cdcp-eligibility__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* ===== LEFT COLUMN ===== */
.cdcp-eligibility__left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* ===== TITLE (Gradient) ===== */
.cdcp-eligibility__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .cdcp-eligibility__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== DESCRIPTION ===== */
.cdcp-eligibility__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    max-width: 500px;
    text-align: left;
}

/* ===== ELIGIBILITY ITEMS LIST ===== */
.cdcp-eligibility__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 5px;
}

/* ===== ELIGIBILITY ITEM ===== */
.cdcp-eligibility__item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ===== ITEM HEADING (White) ===== */
.cdcp-eligibility__item-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
}

/* ===== ITEM DESCRIPTION ===== */
.cdcp-eligibility__item-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
    max-width: 500px;
}

/* ===== RIGHT COLUMN - Image ===== */
.cdcp-eligibility__right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.cdcp-eligibility__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.cdcp-eligibility__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - CDCP ELIGIBILITY
   ============================================ */

@media (max-width: 992px) {
    .cdcp-eligibility {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .cdcp-eligibility__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cdcp-eligibility__title {
        font-size: 42px;
        line-height: 50px;
    }
    .cdcp-eligibility__description {
        max-width: 100%;
        text-align: left;
    }
    .cdcp-eligibility__item-description {
        max-width: 100%;
        text-align: left;
    }
    

    .cdcp-eligibility__left {
        order: 1;
    }
    .cdcp-eligibility__right {
        order: 2;
    }
    
    .cdcp-eligibility__left {
        align-items: flex-start;
        text-align: left;
    }
    .cdcp-eligibility__title {
        margin: 0;
        text-align: left;
    }
    .cdcp-eligibility__item-heading {
        text-align: left;
    }
    .cdcp-eligibility__item-description {
        text-align: left;
    }
    .cdcp-eligibility__image-wrapper {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .cdcp-eligibility {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .cdcp-eligibility__container {
        padding: 0 20px;
    }
    .cdcp-eligibility__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .cdcp-eligibility__description {
        font-size: 15px;
        line-height: 22px;
    }
    .cdcp-eligibility__item-heading {
        font-size: 18px;
        line-height: 26px;
    }
    .cdcp-eligibility__item-description {
        font-size: 15px;
        line-height: 22px;
    }
    .cdcp-eligibility__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .cdcp-eligibility {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .cdcp-eligibility__container {
        padding: 0 16px;
    }
    .cdcp-eligibility__layout {
        gap: 30px;
    }
    .cdcp-eligibility__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
    }
    .cdcp-eligibility__description {
        font-size: 14px;
        line-height: 20px;
    }
    .cdcp-eligibility__list {
        gap: 15px;
    }
    .cdcp-eligibility__item-heading {
        font-size: 16px;
        line-height: 24px;
    }
    .cdcp-eligibility__item-description {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (max-width: 400px) {
    .cdcp-eligibility {
        padding: 50px 20px;
        
    }
    
    .cdcp-eligibility__title {
        font-size: 28px;
        line-height: 34px;
    }
    .cdcp-eligibility__description {
        font-size: 15px;
        line-height: 20px;
    }
    .cdcp-eligibility__item-heading {
        font-size: 17px;
        line-height: 25px;
    }
    .cdcp-eligibility__item-description {
        font-size: 15px;
        line-height: 20px;
    }
}
/* ============================================
   APPLYING FOR THE CDCP SECTION
   ============================================ */

.applying-cdcp {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #000000;
    box-sizing: border-box;
    overflow: hidden;
}

.applying-cdcp__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.applying-cdcp__content {
    max-width: 800px;
}

/* ===== TITLE (Gradient) ===== */
.applying-cdcp__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
	max-width: 1000px;
    width: fit-content;
    margin: 0 0 15px 0;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .applying-cdcp__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== DESCRIPTION ===== */
.applying-cdcp__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0 0 30px 0;
    max-width: 1200px;
    text-align: left;
}

/* ===== BUTTONS ===== */
.applying-cdcp__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

/* ===== PRIMARY BUTTON ===== */
.applying-cdcp__button--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.applying-cdcp__button--primary:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

/* ===== SECONDARY BUTTON (Transparent, No Border) ===== */
.applying-cdcp__button--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background: transparent;
    border: none;
    border-radius: 43px;
    color: #BEAE82;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
}

.applying-cdcp__button--secondary:hover {
    color: #D0C093;
    transform: translateY(-2px);
}

/* ===== BUTTON ICON ===== */
.applying-cdcp__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
    line-height: 1;
    color: inherit;
}

.applying-cdcp__button-icon i {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    color: inherit;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

.applying-cdcp__button--primary:hover .applying-cdcp__button-icon {
    transform: translateX(4px);
}

.applying-cdcp__button--secondary:hover .applying-cdcp__button-icon {
    transform: translateX(4px);
}

/* ===== OPTIONS ===== */
.applying-cdcp__options {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 10px;
}

.applying-cdcp__option {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== OPTION CONTENT ===== */
.applying-cdcp__option-content {
    flex: 1;
}

/* ===== OPTION MAIN HEADING (Gradient) ===== */
.applying-cdcp__option-main-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 15px 0;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
	max-width: 1200px;
}

@supports not (background-clip: text) {
    .applying-cdcp__option-main-heading {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== NESTED SUB ITEMS ===== */
.applying-cdcp__option-sub-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    
}

/* ===== SUB ITEM ===== */
.applying-cdcp__option-sub-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ===== SUB ITEM HEADING (White) ===== */
.applying-cdcp__option-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #FFFFFF;
    margin: 0;
}

/* ===== SUB ITEM DESCRIPTION ===== */
.applying-cdcp__option-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    max-width: 1200px;
    text-align: left;
}

/* ============================================
   RESPONSIVE - APPLYING FOR THE CDCP
   ============================================ */

@media (max-width: 992px) {
    .applying-cdcp {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .applying-cdcp__title {
        font-size: 42px;
        line-height: 50px;
    }
    .applying-cdcp__content {
        max-width: 100%;
    }
    .applying-cdcp__description {
        max-width: 100%;
    }
    .applying-cdcp__option-description {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .applying-cdcp {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .applying-cdcp__container {
        padding: 0 20px;
    }
    .applying-cdcp__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .applying-cdcp__description {
        font-size: 15px;
        line-height: 22px;
    }
    .applying-cdcp__buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    .applying-cdcp__button--primary,
    .applying-cdcp__button--secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .applying-cdcp__options {
        gap: 30px;
    }
    .applying-cdcp__option-main-heading {
        font-size: 24px;
        line-height: 32px;
    }
    .applying-cdcp__option-sub-items {
        padding-left: 15px;
        gap: 15px;
    }
    .applying-cdcp__option-heading {
        font-size: 16px;
        line-height: 24px;
    }
    .applying-cdcp__option-description {
        font-size: 14px;
        line-height: 22px;
    }
}

@media (max-width: 576px) {
    .applying-cdcp {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .applying-cdcp__container {
        padding: 0 16px;
    }
    .applying-cdcp__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
    }
    .applying-cdcp__description {
        font-size: 14px;
        line-height: 20px;
    }
    .applying-cdcp__options {
        gap: 25px;
    }
    .applying-cdcp__option-main-heading {
        font-size: 20px;
        line-height: 28px;
    }
    .applying-cdcp__option-sub-items {
        padding-left: 12px;
        gap: 12px;
    }
    .applying-cdcp__option-heading {
        font-size: 15px;
        line-height: 22px;
    }
    .applying-cdcp__option-description {
        font-size: 14px;
        line-height: 20px;
    }
    .applying-cdcp__button--primary,
    .applying-cdcp__button--secondary {
        max-width: 100%;
        font-size: 14px;
        padding: 12px 24px;
        min-height: 48px;
    }
}

@media (max-width: 400px) {
    .applying-cdcp {
        padding: 50px 20px;
        
    }
    .applying-cdcp__container {
        padding: 0 20px;
    }
    .applying-cdcp__title {
        font-size: 28px;
        line-height: 34px;
    }
    .applying-cdcp__description {
        font-size: 15px;
        line-height: 20px;
    }
    .applying-cdcp__option-main-heading {
        font-size: 24px;
        line-height: 28px;
    }
    .applying-cdcp__option-heading {
        font-size: 17px;
        line-height: 22px;
    }
    .applying-cdcp__option-description {
        font-size: 15px;
        line-height: 20px;
    }
    .applying-cdcp__button--primary,
    .applying-cdcp__button--secondary {
        font-size: 13px;
        padding: 10px 20px;
        min-height: 44px;
    }
}
/* ============================================
   ADVANCED DENTAL TECHNOLOGY SECTION
   ============================================ */

.advanced-dental-tech-pf {
    width: 100%;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    background: #161615;
    box-sizing: border-box;
    overflow: hidden;
}

.advanced-dental-tech-pf__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== TWO COLUMN LAYOUT ===== */
.advanced-dental-tech-pf__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* ===== LEFT COLUMN ===== */
.advanced-dental-tech-pf__left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* ===== TITLE (Gradient) ===== */
.advanced-dental-tech-pf__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-transform: capitalize;
    display: block;
    width: fit-content;
    margin: 0;
    background: linear-gradient(90deg, #463206 0%, #BEAE82 46.63%, #6C5830 93.75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@supports not (background-clip: text) {
    .advanced-dental-tech-pf__title {
        color: #BEAE82;
        background: none;
        -webkit-text-fill-color: #BEAE82;
    }
}

/* ===== SUBHEADING (White) ===== */
.advanced-dental-tech-pf__subheading {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
}

/* ===== DESCRIPTION ===== */
.advanced-dental-tech-pf__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    max-width: 1000px;
    text-align: left;
}

/* ===== RIGHT COLUMN - Image ===== */
.advanced-dental-tech-pf__right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.advanced-dental-tech-pf__image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.advanced-dental-tech-pf__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - ADVANCED DENTAL TECHNOLOGY
   ============================================ */

@media (max-width: 992px) {
    .advanced-dental-tech-pf {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .advanced-dental-tech-pf__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .advanced-dental-tech-pf__title {
        font-size: 42px;
        line-height: 50px;
    }
    .advanced-dental-tech-pf__subheading {
        font-size: 20px;
        line-height: 28px;
    }
    .advanced-dental-tech-pf__description {
        max-width: 100%;
    }
    
    .advanced-dental-tech-pf__left {
        order: 1;
    }
    .advanced-dental-tech-pf__right {
        order: 2;
    }
    
    .advanced-dental-tech-pf__left {
        align-items: flex-start;
        text-align: left;
    }
    .advanced-dental-tech-pf__title {
        margin: 0;
        text-align: left;
    }
    .advanced-dental-tech-pf__subheading {
        text-align: left;
    }
    .advanced-dental-tech-pf__description {
        text-align: left;
        max-width: 100%;
    }
    .advanced-dental-tech-pf__image-wrapper {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .advanced-dental-tech-pf {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .advanced-dental-tech-pf__container {
        padding: 0 20px;
    }
    .advanced-dental-tech-pf__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .advanced-dental-tech-pf__subheading {
        font-size: 18px;
        line-height: 26px;
    }
    .advanced-dental-tech-pf__description {
        font-size: 15px;
        line-height: 22px;
    }
    .advanced-dental-tech-pf__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .advanced-dental-tech-pf {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .advanced-dental-tech-pf__container {
        padding: 0 16px;
    }
    .advanced-dental-tech-pf__layout {
        gap: 30px;
    }
    .advanced-dental-tech-pf__title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.5px;
    }
    .advanced-dental-tech-pf__subheading {
        font-size: 16px;
        line-height: 24px;
    }
    .advanced-dental-tech-pf__description {
        font-size: 14px;
        line-height: 20px;
    }
    .advanced-dental-tech-pf__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .advanced-dental-tech-pf {
        padding: 50px 20px;
       
    }
    .advanced-dental-tech-pf__container {
        padding: 0 20px;
    }
    .advanced-dental-tech-pf__title {
        font-size: 28px;
        line-height: 34px;
    }
    .advanced-dental-tech-pf__subheading {
        font-size: 17px;
        line-height: 24px;
    }
    .advanced-dental-tech-pf__description {
        font-size: 15px;
        line-height: 20px;
    }
}

/* ============================================
   CONTACT FORM STYLES
   ============================================ */

/* Form Container */
.contact-form__row {
    margin-bottom: 20px;
}

.contact-form__row--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form__field-group {
    display: flex;
    flex-direction: column;
}

/* Labels */
.contact-form__label {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -4%;
    color: #ffffff;
    margin-bottom: 8px;
}

.contact-form__label .required {
    color: #dc3545;
}

/* Input Fields */
.contact-form__input,
.contact-form__textarea {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -4%;
    background: transparent !important;
    color: #ffffff;
    
    /* Field styling */
    width: 100%;
    height: 42px;
    padding: 14px 16px;
    gap: 10px;
    border-radius: 6px;
    border-width: 1px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    
    /* Remove default background */
    background-color: transparent !important;
}

/* ============================================
   DROPDOWN / SELECT STYLES - SIMPLIFIED
   ============================================ */

.contact-form__select {
    width: 100%;
    height: 42px;
    padding: 10px 40px 10px 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -4%;
    color: #ffffff;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    transition: all 0.3s ease;
    
    /* Remove default arrow - browser default will show */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Use the browser's default dropdown arrow */
.contact-form__select::-ms-expand {
    display: none;
}

/* Placeholder option (first option with empty value) - 50% opacity white */
.contact-form__select option.placeholder,
.contact-form__select option[value=""],
.contact-form__select option:disabled {
    color: rgba(255, 255, 255, 0.5) !important;
    background: #161615 !important;
}

/* Dropdown options - BLACK text with white background */
.contact-form__select option {
    color: #000000 !important;
    background: #ffffff !important;
    padding: 8px 12px;
    font-size: 16px;
}

/* Dropdown options on hover */
.contact-form__select option:hover {
    background: #f0f0f0 !important;
}

/* Select focus state */
.contact-form__select:focus {
    outline: none;
    border-color: #8A794C;
    box-shadow: 0 0 0 3px rgba(138, 121, 76, 0.1);
}

/* Placeholder styling for input and textarea */
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -4%;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
}

/* Textarea specific */
.contact-form__textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
    padding: 14px 16px;
}

/* Focus state for input and textarea */
.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none;
    border-color: #8A794C;
    box-shadow: 0 0 0 3px rgba(138, 121, 76, 0.1);
    background: transparent !important;
}

/* ============================================
   FORM BUTTON
   ============================================ */

.contact-form__button-wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.contact-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 180px;
    height: 50px;
    padding: 12px 24px;
    margin-top: 20px;
    background: linear-gradient(122.51deg, #8A794C 48.81%, #D0C093 125.36%);
    border: none;
    border-radius: 43px;
    color: #FFFFFF;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.contact-form__button:hover {
    background: linear-gradient(122.51deg, #9A895C 48.81%, #E0D0A3 125.36%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 121, 76, 0.4);
    color: #FFFFFF;
}

/* Font Awesome Arrow Icon */
.contact-form__button .button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 16px;
    color: #FFFFFF;
}

.contact-form__button:hover .button-icon {
    transform: translateX(4px);
}

/* ============================================
   SUCCESS & ERROR MESSAGES
   ============================================ */

/* Success Message */
.form-success {
    padding: 25px;
    background: #665327;
    border-radius: 6px;
    color: #ffffff;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

.form-success p {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -4%;
}

.form-success a {
    display: inline-block;
    color: #8A794C;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

.form-success a:hover {
    color: #6B5D3A;
}

/* Error Messages */
.form-errors {
    padding: 20px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

.form-errors ul {
    margin: 0;
    padding-left: 20px;
    color: #721c24;
}

.form-errors li {
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 12px;
    letter-spacing: -4%;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .contact-form__row--two-col {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .contact-form__button-wrapper {
        justify-content: center;
    }
    
    .contact-form__button {
        width: 100%;
        max-width: 256px;
        justify-content: center;
    }
    
    .contact-form__input,
    .contact-form__select {
        height: 42px;
    }
}

@media (max-width: 576px) {
    .contact-form__input,
    .contact-form__textarea,
    .contact-form__select {
        font-size: 14px;
        padding: 10px 14px;
    }
    
    .contact-form__select {
        padding: 10px 40px 10px 14px;
    }
    
    .contact-form__label {
        font-size: 14px;
        line-height: 14px;
    }
    
    .contact-form__button-wrapper {
        justify-content: center;
    }
    
    .contact-form__button {
        font-size: 14px;
        padding: 12px 24px;
        width: 100%;
        max-width: 100%;
        height: 45px;
    }
    
    .contact-form__button .button-icon {
        font-size: 14px;
    }
    
    .contact-form__input::placeholder,
    .contact-form__textarea::placeholder {
        font-size: 12px;
        line-height: 1.4;
    }
}
/* ============================================
   JOIN SMILE CIRCLE - FORM STYLES
   ============================================ */

/* Form Container */
.qr-join__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 700px;
}

.qr-join__form-row--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.qr-join__form-group {
    display: flex;
    flex-direction: column;
}

/* Labels - Hidden */
.qr-join__label {
    display: none; /* Hide labels */
}

.qr-join__required {
    display: none; /* Hide required asterisk */
}

/* Input Fields - Gradient Background */
.qr-join__input {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -4%;
    color: #3A3224;
    
    /* Field styling */
    width: 100%;
    height: 53px;
    padding: 14px 20px;
    border-radius: 193px;
    border: 1px solid rgba(58, 50, 36, 0.2);
    transition: all 0.3s ease;
    
    /* Gradient Background */
    background: linear-gradient(91.35deg, #EDE2CC 2.87%, #DCC9A8 98.71%);
    box-sizing: border-box;
}

/* Placeholder color */
.qr-join__input::placeholder {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -4%;
    color: #696969;
    opacity: 1;
}

/* Focus state */
.qr-join__input:focus {
    outline: none;
    border-color: #B89668;
    box-shadow: 0 0 0 3px rgba(184, 150, 104, 0.15);
}

/* ===== FORM BUTTON - Centered ===== */
.qr-join__form-row--button {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.qr-join__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 170px;
    height: 50px;
    padding: 16px 24px;
    border-radius: 100px;
    border: 0.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    
    /* Font */
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #352D20;
    letter-spacing: 0.4px;
    
    /* Gradient Background */
    background: linear-gradient(101.91deg, #EDE2CC 0%, #B89668 87.74%);
    
    /* Box Shadow */
    box-shadow: -8px 8px 28px 0px rgba(0, 0, 0, 0.06);
}

/* Border Gradient */
.qr-join__button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    padding: 1px;
    background: linear-gradient(85.19deg, #FFFFFF -0.49%, #999999 98.49%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.qr-join__button-text {
    font-family: 'Sora', sans-serif;
    font-weight: 450;
    font-size: 16px;
    color: #352D20;
    letter-spacing: 0.4px;
}

.qr-join__button:hover {
    transform: translateY(-2px);
    box-shadow: -8px 8px 32px 0px rgba(0, 0, 0, 0.12);
}

.qr-join__button:active {
    transform: scale(0.97);
}

/* ============================================
   SUCCESS & ERROR MESSAGES
   ============================================ */

/* Success Message */
.qr-join .form-success {
    padding: 25px 30px;
    background: #E8F5E9;
    border-radius: 16px;
    border-left: 4px solid #43A047;
    text-align: center;
    font-family: 'Sora', sans-serif;
}

.qr-join .form-success p {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #2E7D32;
    font-weight: 500;
}

.qr-join .form-success a {
    display: inline-block;
    padding: 8px 30px;
    background: linear-gradient(101.91deg, #EDE2CC 0%, #B89668 87.74%);
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 0.5px solid transparent;
    position: relative;
}

.qr-join .form-success a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    padding: 1px;
    background: linear-gradient(85.19deg, #FFFFFF -0.49%, #999999 98.49%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.qr-join .form-success a:hover {
    transform: translateY(-2px);
    box-shadow: -8px 8px 28px 0px rgba(0, 0, 0, 0.12);
}

/* Error Messages */
.qr-join .form-errors {
    padding: 20px 25px;
    background: #FFEBEE;
    border-radius: 16px;
    border-left: 4px solid #E53935;
    margin-bottom: 20px;
}

.qr-join .form-errors ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.qr-join .form-errors li {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    color: #C62828;
    margin-bottom: 5px;
}

.qr-join .form-errors li:last-child {
    margin-bottom: 0;
}

/* ============================================
   RESPONSIVE - JOIN SMILE CIRCLE FORM
   ============================================ */

@media (max-width: 768px) {
    .qr-join__form-row--two-col {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .qr-join__input {
        height: 48px;
        border-radius: 150px;
        padding: 12px 18px;
        font-size: 15px;
    }
    
    .qr-join__input::placeholder {
        font-size: 13px;
    }
    
    .qr-join__button {
        width: 100%;
        max-width: 180px;
        height: 44px;
        padding: 14px 20px;
        font-size: 15px;
    }
    
    .qr-join .form-success p {
        font-size: 16px;
    }
    
    .qr-join .form-success a {
        font-size: 13px;
        padding: 6px 25px;
    }
}

@media (max-width: 576px) {
    .qr-join__input {
        height: 44px;
        border-radius: 120px;
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .qr-join__input::placeholder {
        font-size: 12px;
    }
    
    .qr-join__button {
        max-width: 100%;
        height: 42px;
        padding: 12px 18px;
        font-size: 14px;
        gap: 10px;
    }
    
    .qr-join__button-text {
        font-size: 14px;
    }
    
    .qr-join .form-success {
        padding: 20px;
    }
    
    .qr-join .form-success p {
        font-size: 15px;
    }
    
    .qr-join .form-success a {
        font-size: 12px;
        padding: 5px 20px;
    }
    
    .qr-join .form-errors {
        padding: 15px 18px;
    }
    
    .qr-join .form-errors li {
        font-size: 13px;
    }
}
/* ============================================
   PAGE ID 1259 - BACKGROUND COLOR & HEADER/FOOTER REMOVAL
   ============================================ */

/* Hide Header and Footer for Page ID 1259 */
.page-id-1259 .site-header,
.page-id-1259 .site-footer,
.page-id-1259 .ast-theme-transparent-header .site-header,
.page-id-1259 .ast-header,
.page-id-1259 #ast-header,
.page-id-1259 .ast-header-break-point .site-header {
    display: none !important;
}

/* Remove header and footer from content area */
.page-id-1259 .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Page ID 1259 - Main container */
.page-id-1259,
.page-id-1259 .site,
.page-id-1259 .site-main,
.page-id-1259 #primary,
.page-id-1259 .ast-container,
.page-id-1259 .ast-page-builder-template .site-content,
.page-id-1259 .ast-single-post .site-content {
    background-color: #FFFEFB !important;
}

/* Remove any white backgrounds from Astra on this page */
.page-id-1259 .ast-container,
.page-id-1259 .ast-page-builder-template .site-content,
.page-id-1259 .ast-single-post .site-content {
    background-color: transparent !important;
}

/* Ensure the content area has the background */
.page-id-1259 .site-content {
    background-color: #FFFEFB !important;
}

/* If using Astra with transparent header */
.page-id-1259 .ast-theme-transparent-header .site-header {
    background-color: transparent !important;
    display: none !important;
}

/* Remove Astra default spacing for this page */
.page-id-1259 .site-content,
.page-id-1259 .ast-container,
.page-id-1259 #primary,
.page-id-1259 .site-main,
.page-id-1259 .ast-page-builder-template .site-content,
.page-id-1259 .ast-single-post .site-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Remove any body padding/margin for this page */
.page-id-1259 body {
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove footer widgets if any */
.page-id-1259 .footer-widgets,
.page-id-1259 .ast-footer-widgets,
.page-id-1259 .ast-footer-copyright {
    display: none !important;
}
/* ============================================
   QR WEBSITE - HERO SECTION
   ============================================ */

.qr-hero {
    width: 100%;
    height: 650px;
    background-size: cover !important; /* Force cover */
    background-position: bottom;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 80px;
    border-radius: 0 0 0px 0px;
}

/* Optional overlay for better text readability */
.qr-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 0 0 500px 500px;
}

.qr-hero__container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* Two-Column Grid - Align items to bottom */
.qr-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 640px;
    align-items: end;
    gap: 40px;
}

/* Left Column - Empty */
.qr-hero__col-left {
    /* Intentionally empty */
}

/* Right Column - Content Bottom Aligned */
.qr-hero__col-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px 0 100px 0;
}

/* ===== HEADING ===== */
.qr-hero__heading {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 60px;
    line-height: 67px;
    letter-spacing: -5%;
    margin: 0 0 10px 0;
    
    /* Gradient Text - Exact Specs */
    background: linear-gradient(271.2deg, #3A3224 4%, #B89668 100.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .qr-hero__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* Firefox fallback */
@-moz-document url-prefix() {
    .qr-hero__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* IE/Edge fallback */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .qr-hero__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* ===== BODY TEXT ===== */
.qr-hero__body {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 33px;
    margin: 0 0 20px 0;
    max-width: 400px;
    
    /* Gradient Text - Exact Specs */
    background: #3A3224;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .qr-hero__body {
        color: #3A3224;
        background: none;
        -webkit-text-fill-color: #3A3224;
    }
}

/* Firefox fallback */
@-moz-document url-prefix() {
    .qr-hero__body {
        color: #3A3224;
        background: none;
        -webkit-text-fill-color: #3A3224;
    }
}

/* IE/Edge fallback */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .qr-hero__body {
        color: #3A3224;
        background: none;
        -webkit-text-fill-color: #3A3224;
    }
}

/* ===== BUTTON - Exact Specs ===== */
.qr-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 255px;
    height: 50px;
    padding: 20px 20px;
    border-radius: 66px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
	margin-bottom: 50px;
    
    /* Gradient Background - Exact Specs */
    background: linear-gradient(91.21deg, #CBAA80 -3.38%, #705E3C 105.02%);
    
    /* Box Shadow - Exact Specs */
    box-shadow: -8px 8px 28px 0px rgba(0, 0, 0, 0.06);
    
    /* Font */
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.4px;
}

/* Border Gradient - Exact Specs via Pseudo Element */
.qr-hero__button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 66px;
    padding: 1px;
    background: linear-gradient(70.45deg, #FFFFFF 42.19%, rgba(153, 153, 153, 0) 95.67%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.qr-hero__button-text {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.4px;
}

.qr-hero__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: transform 0.3s ease;
}

.qr-hero__button-icon svg {
    width: 20px;
    height: 20px;
}

.qr-hero__button:hover {
    transform: translateY(-2px);
    box-shadow: -8px 8px 32px 0px rgba(0, 0, 0, 0.12);
}

.qr-hero__button:hover .qr-hero__button-icon {
    transform: translateX(4px);
}

.qr-hero__button:active {
    transform: scale(0.97);
}

/* ============================================
   RESPONSIVE - QR WEBSITE HERO
   ============================================ */

@media (max-width: 1200px) {
    .qr-hero__heading {
        font-size: 80px;
        line-height: 60px;
    }
    
    .qr-hero__body {
        font-size: 26px;
        line-height: 30px;
    }
}

@media (max-width: 992px) {
    .qr-hero {
        border-radius: 0 0 300px 300px;
        height: auto;
        min-height: 500px;
    }
    
    .qr-hero::before {
        border-radius: 0 0 300px 300px;
    }
    
    .qr-hero__grid {
        grid-template-columns: 1fr;
        min-height: 500px;
        gap: 30px;
        align-items: center;
    }
    
    .qr-hero__col-right {
        align-items: center;
        text-align: center;
        justify-content: center;
        padding: 40px 20px 60px 20px;
    }
    
    .qr-hero__heading {
        font-size: 72px;
        line-height: 56px;
        text-align: center;
    }
    
    .qr-hero__body {
        max-width: 100%;
        text-align: center;
        font-size: 24px;
        line-height: 28px;
    }
    
    .qr-hero__button {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .qr-hero {
        min-height: auto;
        padding: 80px 0;
        border-radius: 0 0 150px 150px;
        height: auto;
    }
    
    .qr-hero::before {
        border-radius: 0 0 150px 150px;
    }
    
    .qr-hero__container {
        padding: 0 20px;
    }
    
    .qr-hero__col-right {
        padding: 30px 20px 40px 20px;
    }
    
    .qr-hero__heading {
        font-size: 56px;
        line-height: 44px;
        letter-spacing: -3%;
    }
    
    .qr-hero__body {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -3%;
        margin: 0 0 30px 0;
    }
    
    .qr-hero__button {
        width: 100%;
        max-width: 255px;
        height: 49px;
        padding: 16px 20px;
    }
}

@media (max-width: 576px) {
    .qr-hero {
        padding: 60px 0;
        border-radius: 0 0 80px 80px;
        height: auto;
    }
    
    .qr-hero::before {
        border-radius: 0 0 80px 80px;
    }
    
    .qr-hero__container {
        padding: 0 16px;
    }
    
    .qr-hero__col-right {
        padding: 20px 0 30px 0;
    }
    
    .qr-hero__heading {
        font-size: 40px;
        line-height: 34px;
        letter-spacing: -2%;
        margin: 0 0 15px 0;
    }
    
    .qr-hero__body {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: -2%;
        margin: 0 0 25px 0;
    }
    
    .qr-hero__button {
        max-width: 100%;
        padding: 14px 16px;
        height: 49px;
        gap: 10px;
    }
    
    .qr-hero__button-text {
        font-size: 14px;
    }
    
    .qr-hero__button-icon svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 400px) {
    .qr-hero {
        padding: 50px 20px;
		height: 400px;
        border-radius: 0 0 50px 50px;
        
    }
    
    .qr-hero::before {
        border-radius: 0 0 50px 50px;
    }
    
    .qr-hero__col-right {
        padding: 15px 0 20px 0;
    }
    
    .qr-hero__heading {
        font-size: 32px;
        line-height: 28px;
        letter-spacing: -1%;
    }
    
    .qr-hero__body {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -1%;
    }
    
    .qr-hero__button {
        height: 44px;
        padding: 12px 14px;
        gap: 8px;
		margin-bottom: 150px;
    }
    
    .qr-hero__button-text {
        font-size: 13px;
    }
    
    .qr-hero__button-icon svg {
        width: 16px;
        height: 16px;
    }
}
/* ============================================
   QR WEBSITE - 2ND PART SECTION
   ============================================ */

.qr-second-part {
    width: 85%;
    padding: 0;
    background: transparent;
    position: relative;
    margin-top: -150px;
    margin-left: auto;
    margin-right: auto;
    z-index: 20;
}

.qr-second-part__container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* Wrapper */
.qr-second-part__wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Image - 50% size, left aligned, -250px margin-top */
.qr-second-part__image-wrap {
    width: 50%;
    max-width: 400px;
    margin-left: 100px;
    margin-right: auto;
    margin-top: -250px;
    position: relative;
    z-index: 3;
}

.qr-second-part__image-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    z-index: 4;
}

.qr-second-part__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    object-fit: contain;
    position: relative;
    z-index: 5;
}

/* Text Box - Centered */
.qr-second-part__main-box {
    width: 1200px;
    max-width: 90%;
    height: 200px;
    min-height: 100px;
    padding: 40px 60px;
    border-radius: 58px;
    background: linear-gradient(97.98deg, #DDCAA5 12.01%, #B89668 83.17%);
    border: 1px solid #FFF9EF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    margin-left: auto; /* Center */
    margin-right: auto; /* Center */
    z-index: 2;
    margin-top: -50px;
}

.qr-second-part__main-text {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -5%;
    color: #FFFFFF;
    margin: 0;
    max-width: 800px;
    text-align: center;
    position: relative;
    z-index: 3;
}

/* ============================================
   RESPONSIVE - QR WEBSITE 2ND PART
   ============================================ */

@media (max-width: 1200px) {
    .qr-second-part {
        width: 90%;
        margin-top: -100px;
        z-index: 20;
    }
    
    .qr-second-part__image-wrap {
        width: 45%;
        max-width: 350px;
        margin-top: -180px;
        margin-left: 0;
    }
    
    .qr-second-part__main-box {
        width: 800px;
        height: 220px;
        max-width: 95%;
        min-height: 180px;
        padding: 35px 50px;
        margin-top: -50px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .qr-second-part__main-text {
        font-size: 26px;
        line-height: 32px;
    }
}

@media (max-width: 992px) {
    .qr-second-part {
        width: 95%;
        margin-top: -80px;
        z-index: 20;
    }
    
    .qr-second-part__image-wrap {
        width: 40%;
        max-width: 280px;
        margin-top: -120px;
        margin-left: 0;
    }
    
    .qr-second-part__main-box {
        width: 100%;
        height: auto;
        min-height: 180px;
        max-width: 100%;
        padding: 30px 40px;
        border-radius: 40px;
        margin-top: -40px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .qr-second-part__main-text {
        font-size: 22px;
        line-height: 28px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .qr-second-part {
        width: 100%;
        margin-top: -60px;
        padding: 0;
        z-index: 10;
    }
    
    .qr-second-part__container {
        padding: 0 20px;
    }
    
    .qr-second-part__wrapper {
        align-items: center;
    }
    
    .qr-second-part__image-wrap {
        width: 50%;
        max-width: 220px;
        margin-top: -80px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .qr-second-part__image-wrapper {
        justify-content: center;
    }
    
    .qr-second-part__main-box {
        width: 100%;
        height: auto;
        min-height: 150px;
        max-width: 100%;
        padding: 25px 30px;
        border-radius: 30px;
        margin-top: -30px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .qr-second-part__main-text {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -3%;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .qr-second-part {
        width: 100%;
        margin-top: -40px;
        padding: 0;
        z-index: 10;
    }
    
    .qr-second-part__container {
        padding: 0 16px;
    }
    
    .qr-second-part__image-wrap {
        width: 60%;
        max-width: 180px;
        margin-top: -60px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .qr-second-part__main-box {
        width: 100%;
        height: auto;
        min-height: 120px;
        max-width: 100%;
        padding: 20px 20px;
        border-radius: 24px;
        margin-top: -20px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .qr-second-part__main-text {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -2%;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .qr-second-part {
		padding: 50px 20px;
        width: 100%;
        margin-top: -150px;
        z-index: 10;
		
    }
    
    .qr-second-part__image-wrap {
        width: 60%;
        max-width: 150px;
        margin-top: -50px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .qr-second-part__main-box {
        width: 100%;
        height: auto;
        min-height: 100px;
        max-width: 100%;
        padding: 15px 16px;
        border-radius: 20px;
        margin-top: -15px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .qr-second-part__main-text {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -1%;
        text-align: center;
    }
}
/* ============================================
   QR WEBSITE - JOURNEY SECTION
   ============================================ */

.qr-journey {
    width: 100%;
    padding: 80px 0;
    background: #FFFEFB;
    position: relative;
}

.qr-journey__container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
}

/* ===== SECTION HEADER ===== */
.qr-journey__header {
    text-align: center;
    margin-bottom: 60px;
}

.qr-journey__heading {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 50px;
    line-height: 41px;
    letter-spacing: 0%;
    text-align: center;
    margin: 0 0 20px 0;
    display: inline-block;
    background: linear-gradient(271.2deg, #3A3224 4%, #B89668 100.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .qr-journey__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* Firefox fallback */
@-moz-document url-prefix() {
    .qr-journey__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

.qr-journey__description {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 33px;
    letter-spacing: -5%;
    max-width: 800px;
    margin: 0 auto;
    color: #3A3224;
}

/* ===== 4 SUBSECTION GRID ===== */
.qr-journey__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    justify-items: center;
    align-items: center;
}

/* ===== SUBSECTION ===== */
.qr-journey__subsection {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 24px;
    height: 230px;
    width: 80%;
    max-width: 1175px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}

/* Overlay for better text readability */
.qr-journey__subsection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 1;
}

.qr-journey__subsection-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

/* ===== SUBSECTION HEADING - WHITE ===== */
.qr-journey__subsection-heading--white {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 36px;
    line-height: 41px;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0 0 15px 0;
}

/* ===== SUBSECTION TEXT - WHITE ===== */
.qr-journey__subsection-text--white {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -2%;
    color: #FFFFFF;
    margin: 0;
}

/* ===== SUBSECTION HEADING - GRADIENT ===== */
.qr-journey__subsection-heading--gradient {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 36px;
    line-height: 41px;
    letter-spacing: 0%;
    margin: 0 0 15px 0;
    display: inline-block;
    background: linear-gradient(271.2deg, #3A3224 4%, #B89668 100.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .qr-journey__subsection-heading--gradient {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* ===== SUBSECTION TEXT - GRADIENT ===== */
.qr-journey__subsection-text--gradient {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -2%;
    margin: 0;
    color: #3A3224;
}

/* ============================================
   RESPONSIVE - JOURNEY SECTION
   ============================================ */

@media (max-width: 1200px) {
    .qr-journey__subsection {
        width: 85%;
        min-height: 230px;
        height: auto;
        padding: 35px;
    }
    
    .qr-journey__subsection-heading--white,
    .qr-journey__subsection-heading--gradient {
        font-size: 32px;
        line-height: 38px;
    }
}

@media (max-width: 992px) {
    .qr-journey__heading {
        font-size: 40px;
        line-height: 36px;
    }
    
    .qr-journey__description {
        font-size: 24px;
        line-height: 28px;
    }
    
    .qr-journey__subsection {
        width: 90%;
        min-height: 230px;
        height: auto;
        padding: 30px;
    }
    
    .qr-journey__subsection-heading--white,
    .qr-journey__subsection-heading--gradient {
        font-size: 28px;
        line-height: 34px;
    }
    
    .qr-journey__subsection-text--white,
    .qr-journey__subsection-text--gradient {
        font-size: 16px;
        line-height: 22px;
    }
}

@media (max-width: 768px) {
    .qr-journey {
        padding: 60px 0;
    }
    
    .qr-journey__container {
        padding: 0 20px;
    }
    
    .qr-journey__grid {
        gap: 20px;
    }
    
    .qr-journey__heading {
        font-size: 32px;
        line-height: 30px;
    }
    
    .qr-journey__description {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -3%;
    }
    
    .qr-journey__subsection {
        width: 95%;
        min-height: 200px;
        height: auto;
        padding: 25px;
        border-radius: 20px;
    }
    
    .qr-journey__subsection-heading--white,
    .qr-journey__subsection-heading--gradient {
        font-size: 24px;
        line-height: 28px;
    }
    
    .qr-journey__subsection-text--white,
    .qr-journey__subsection-text--gradient {
        font-size: 15px;
        line-height: 20px;
    }
}

@media (max-width: 576px) {
    .qr-journey {
        padding: 50px 0;
    }
    
    .qr-journey__container {
        padding: 0 16px;
    }
    
    .qr-journey__header {
        margin-bottom: 40px;
    }
    
    .qr-journey__heading {
        font-size: 28px;
        line-height: 28px;
    }
    
    .qr-journey__description {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: -2%;
    }
    
    .qr-journey__grid {
        gap: 15px;
    }
    
    .qr-journey__subsection {
        width: 100%;
        min-height: 180px;
        height: auto;
        padding: 20px;
        border-radius: 16px;
    }
    
    .qr-journey__subsection-content {
        max-width: 100%;
    }
    
    .qr-journey__subsection-heading--white,
    .qr-journey__subsection-heading--gradient {
        font-size: 20px;
        line-height: 24px;
        margin: 0 0 10px 0;
    }
    
    .qr-journey__subsection-text--white,
    .qr-journey__subsection-text--gradient {
        font-size: 14px;
        line-height: 18px;
    }
}

@media (max-width: 400px) {
    .qr-journey {
        padding: 50px 20px;
    }
    
    .qr-journey__heading {
        font-size: 28px;
        line-height: 24px;
    }
    
    .qr-journey__description {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -1%;
    }
    
    .qr-journey__subsection {
        min-height: 150px;
        padding: 20px 30px;
        border-radius: 14px;
    }
    
    .qr-journey__subsection-heading--white,
    .qr-journey__subsection-heading--gradient {
        font-size: 20px;
        line-height: 22px;
    }
    
    .qr-journey__subsection-text--white,
    .qr-journey__subsection-text--gradient {
        font-size: 15px;
        line-height: 17px;
    }
}
/* ============================================
   QR WEBSITE - WHY JOIN SMILE CIRCLE SECTION
   ============================================ */

.qr-why-join {
    width: 100%;
    padding-top: 80px;
    background: transparent;
    position: relative;
}

.qr-why-join__container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
}

/* ===== SECTION HEADER ===== */
.qr-why-join__header {
    text-align: center;
    margin-bottom: 0;
}

.qr-why-join__heading {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 0%;
    text-align: center;
    margin: 0;
    display: inline-block;
    background: linear-gradient(271.2deg, #3A3224 4%, #B89668 100.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .qr-why-join__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* Firefox fallback */
@-moz-document url-prefix() {
    .qr-why-join__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* ===== 3 COLUMN GRID - CENTERED ===== */
.qr-why-join__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: center;
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 0;
    position: relative;
    top: -60px;
}

/* ===== COLUMN 1 & 3 ===== */
.qr-why-join__column--top-radius {
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== COLUMN 2 ===== */
.qr-why-join__column--bottom-radius {
    padding: 0px;
    padding-top: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== ICON BOX - Column 1 & 3 (Top Radius) ===== */
.qr-why-join__column--top-radius .qr-why-join__icon-box {
    text-align: center;
    width: 100%;
    height: 310px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 600px 600px 20px 20px;
    background: linear-gradient(188.85deg, #DDCAA5 3.68%, #B89668 107.42%);
}

/* ===== ICON BOX - Column 2 (Bottom Radius) ===== */
.qr-why-join__column--bottom-radius .qr-why-join__icon-box {
    text-align: center;
    width: 100%;
    height: 310px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px 20px 600px 600px;
    background: linear-gradient(91.35deg, #EDE2CC 2.87%, #DCC9A8 98.71%),
                linear-gradient(188.85deg, #DDCAA5 3.68%, #B89668 107.42%);
    border: 0.5px solid #FFFFFF;
}

/* ===== Column 2 - Title & Text Color #3A3224 ===== */
.qr-why-join__column--bottom-radius .qr-why-join__title {
    color: #3A3224;
}

.qr-why-join__column--bottom-radius .qr-why-join__text {
    color: #3A3224;
}

.qr-why-join__icon-wrapper {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-why-join__icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
}

.qr-why-join__title {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
    color: #FFFFFF;
    margin: 0 0 5px 0;
}

.qr-why-join__text {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
    color: #FFFFFF;
    margin: 0;
    max-width: 300px;
    margin: 0 auto;
}

/* ===== BOTTOM FULL WIDTH IMAGE ===== */
.qr-why-join__bottom-image {
    width: 100vw;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
    margin-top: 0;
}

.qr-why-join__bottom-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - WHY JOIN SECTION
   ============================================ */

@media (max-width: 992px) {
    .qr-why-join__grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        width: 100%;
        max-width: 600px;
        top: 0;
    }
    
    .qr-why-join__column--top-radius,
    .qr-why-join__column--bottom-radius {
        padding: 20px;
    }
    
    .qr-why-join__column--bottom-radius {
        margin-top: 0;
        padding-top: 0;
    }
    
    .qr-why-join__column--bottom-radius {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
    
    .qr-why-join__column--top-radius .qr-why-join__icon-box,
    .qr-why-join__column--bottom-radius .qr-why-join__icon-box {
        height: 280px;
        padding: 25px;
    }
    
    .qr-why-join__column--top-radius .qr-why-join__icon-box {
        border-radius: 80px 80px 5px 5px;
    }
    
    .qr-why-join__column--bottom-radius .qr-why-join__icon-box {
        border-radius: 5px 5px 80px 80px;
    }
    
    .qr-why-join__heading {
        font-size: 40px;
        line-height: 36px;
    }
    
    .qr-why-join__title {
        font-size: 22px;
        line-height: 28px;
    }
    
    .qr-why-join__text {
        font-size: 15px;
        line-height: 22px;
    }
    
    .qr-why-join__icon {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 768px) {
    .qr-why-join {
        padding: 60px 0 0 0;
    }
    
    .qr-why-join__container {
        padding: 0 20px;
    }
    
    .qr-why-join__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
        max-width: 400px;
        top: 0;
        position: relative;
    }
    
    .qr-why-join__column--top-radius,
    .qr-why-join__column--bottom-radius {
        padding: 15px;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .qr-why-join__column--bottom-radius {
        margin-top: 0;
        padding-top: 0;
        grid-column: 1 / 2;
        max-width: 100%;
    }
    
    /* MOBILE: Specific border-radius for each column */
    /* Column 1 - Top radius 500px */
    .qr-why-join__column--top-radius:first-child .qr-why-join__icon-box {
        height: 260px;
        padding: 25px;
        border-radius: 500px 500px 20px 20px !important;
        background: linear-gradient(188.85deg, #DDCAA5 3.68%, #B89668 107.42%);
    }
    
    /* Column 2 - All sides 500px */
    .qr-why-join__column--bottom-radius .qr-why-join__icon-box {
        height: 260px;
        padding: 25px;
        border-radius: 500px 500px 500px 500px !important;
        background: linear-gradient(91.35deg, #EDE2CC 2.87%, #DCC9A8 98.71%),
                    linear-gradient(188.85deg, #DDCAA5 3.68%, #B89668 107.42%);
        border: 0.5px solid #FFFFFF;
    }
    
    /* Column 3 - Bottom radius 500px */
    .qr-why-join__column--top-radius:last-child .qr-why-join__icon-box {
        height: 260px;
        padding: 25px;
        border-radius: 20px 20px 500px 500px !important;
        background: linear-gradient(188.85deg, #DDCAA5 3.68%, #B89668 107.42%);
    }
    
    .qr-why-join__heading {
        font-size: 32px;
        line-height: 30px;
        display: block;
        width: 100%;
    }
    
    .qr-why-join__title {
        font-size: 20px;
        line-height: 26px;
    }
    
    .qr-why-join__text {
        font-size: 14px;
        line-height: 20px;
        max-width: 100%;
    }
    
    .qr-why-join__icon {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 576px) {
    .qr-why-join {
        padding: 50px 0 0 0;
    }
    
    .qr-why-join__container {
        padding: 0 16px;
    }
    
    .qr-why-join__header {
        margin-bottom: 0;
    }
    
    .qr-why-join__grid {
        gap: 15px;
        max-width: 100%;
        top: 0;
    }
    
    .qr-why-join__column--top-radius,
    .qr-why-join__column--bottom-radius {
        padding: 10px;
    }
    
    .qr-why-join__column--bottom-radius {
        padding-top: 0;
    }
    
    /* SMALL MOBILE: Specific border-radius for each column */
    /* Column 1 - Top radius 500px */
    .qr-why-join__column--top-radius:first-child .qr-why-join__icon-box {
        height: 220px;
        padding: 20px;
        border-radius: 500px 500px 20px 20px !important;
    }
    
    /* Column 2 - All sides 500px */
    .qr-why-join__column--bottom-radius .qr-why-join__icon-box {
        height: 220px;
        padding: 20px;
        border-radius: 500px 500px 500px 500px !important;
    }
    
    /* Column 3 - Bottom radius 500px */
    .qr-why-join__column--top-radius:last-child .qr-why-join__icon-box {
        height: 220px;
        padding: 20px;
        border-radius: 20px 20px 500px 500px !important;
    }
    
    .qr-why-join__heading {
        font-size: 28px;
        line-height: 28px;
        display: block;
        width: 100%;
    }
    
    .qr-why-join__title {
        font-size: 18px;
        line-height: 24px;
    }
    
    .qr-why-join__text {
        font-size: 14px;
        line-height: 20px;
    }
    
    .qr-why-join__icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 400px) {
    .qr-why-join {
        padding: 40px 0 0 0;
    }
    
    .qr-why-join__heading {
        font-size: 28px;
        line-height: 24px;
        display: block;
        width: 100%;
		padding-bottom: 50px;
    }
    
    .qr-why-join__grid {
        gap: 12px;
        top: 0;
    }
    
    .qr-why-join__column--bottom-radius {
        padding-top: 0;
    }
    
    /* EXTRA SMALL: Specific border-radius for each column */
    /* Column 1 - Top radius 500px */
    .qr-why-join__column--top-radius:first-child .qr-why-join__icon-box {
        height: 350px;
		width: 250px;
        padding: 16px;
        border-radius: 500px 500px 20px 20px !important;
    }
    
    /* Column 2 - All sides 500px */
    .qr-why-join__column--bottom-radius .qr-why-join__icon-box {
        height: 400px;
		width: 250px;
        padding: 16px;
        border-radius: 500px 500px 500px 500px !important;
    }
    
    /* Column 3 - Bottom radius 500px */
    .qr-why-join__column--top-radius:last-child .qr-why-join__icon-box {
        height: 350px;
		width: 250px;
        padding: 16px;
        border-radius: 20px 20px 500px 500px !important;
    }
    
    .qr-why-join__title {
        font-size: 20px;
        line-height: 24px;
    }
    
    .qr-why-join__text {
		padding-top: 5px;
        font-size: 16px;
        line-height: 20px;
    }
    
    .qr-why-join__icon {
        width: 70px;
        height: 70px;
    }
}
/* ============================================
   QR WEBSITE - WHY WE CREATED THE SMILE CIRCLE
   ============================================ */

.qr-why-created {
    width: 100%;
    padding: 80px 80px;
    background: #FFFEFB;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-why-created__container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

/* ===== TWO COLUMN LAYOUT - 30/70 ===== */
.qr-why-created__layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 0;
    align-items: center;
}

/* ===== LEFT COLUMN - 30% ===== */
.qr-why-created__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding-right: 50px;
    box-sizing: border-box;
}

.qr-why-created__heading {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 50px;
    line-height: 55px;
    letter-spacing: 0%;
    margin: 0;
    background: linear-gradient(271.2deg, #3A3224 4%, #B89668 100.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    width: 100%;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .qr-why-created__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* Firefox fallback */
@-moz-document url-prefix() {
    .qr-why-created__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

.qr-why-created__description {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    color: #3A3224;
    margin: 0;
    width: 100%;
}

/* ===== RIGHT COLUMN - 70% ===== */
.qr-why-created__right {
    display: flex;
    justify-content: flex-end; /* Align image to right */
    align-items: center;
    width: 100%;
}

.qr-why-created__image-wrapper {
    width: 100%;
    max-width: 700px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.qr-why-created__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE - WHY CREATED SECTION
   ============================================ */

@media (max-width: 1200px) {
    .qr-why-created__layout {
        grid-template-columns: 35% 65%;
    }
    
    .qr-why-created__heading {
        font-size: 42px;
        line-height: 50px;
    }
    
    .qr-why-created__description {
        font-size: 17px;
        line-height: 26px;
    }
    
    .qr-why-created__left {
        padding-right: 40px;
    }
}

@media (max-width: 992px) {
    .qr-why-created {
        padding: 60px 40px;
    }
    
    .qr-why-created__layout {
        grid-template-columns: 40% 60%;
    }
    
    .qr-why-created__heading {
        font-size: 38px;
        line-height: 46px;
    }
    
    .qr-why-created__description {
        font-size: 16px;
        line-height: 26px;
    }
    
    .qr-why-created__left {
        padding-right: 30px;
    }
}

@media (max-width: 768px) {
    .qr-why-created {
        padding: 60px 20px;
    }
    
    .qr-why-created__container {
        padding: 0;
    }
    
    .qr-why-created__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .qr-why-created__left {
        order: 1;
        text-align: center;
        align-items: center;
        width: 100%;
        padding-right: 0;
    }
    
    .qr-why-created__right {
        order: 2;
        justify-content: center; /* Center on mobile */
    }
    
    .qr-why-created__heading {
        font-size: 32px;
        line-height: 40px;
        text-align: center;
        width: 100%;
    }
    
    .qr-why-created__description {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        width: 100%;
    }
    
    .qr-why-created__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .qr-why-created {
        padding: 50px 16px;
    }
    
    .qr-why-created__heading {
        font-size: 28px;
        line-height: 34px;
    }
    
    .qr-why-created__description {
        font-size: 15px;
        line-height: 22px;
    }
    
    .qr-why-created__image-wrapper {
        border-radius: 16px;
    }
}

@media (max-width: 400px) {
    .qr-why-created {
        padding: 50px 30px;
    }
    
    .qr-why-created__heading {
        font-size: 24px;
        line-height: 30px;
    }
    
    .qr-why-created__description {
        font-size: 15px;
        line-height: 20px;
    }
}
/* ============================================
   QR WEBSITE - COMMUNITY IMPACT SECTION
   ============================================ */

.qr-community {
    width: 100%;
    padding: 80px 60px;
    background: #FFFEFB;
    position: relative;
    overflow: hidden;
}

.qr-community__container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
}

/* ===== 5 COLUMN GRID ===== */
.qr-community__grid {
    display: grid;
    grid-template-columns: 7.5% 7.5% 70% 7.5% 7.5%;
    gap: 0;
    align-items: end;
    justify-items: center;
}

/* ===== SIDE COLUMNS ===== */
.qr-community__col--side {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding-bottom: 10px;
    width: 100%;
}

.qr-community__image-wrapper {
    width: 100%;
    display: flex;
    align-items: flex-end;
}

/* Column 1 - Image size 90px, 100px Right */
.qr-community__col--side-1 .qr-community__image {
    max-width: 90px;
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

.qr-community__col--side-1 {
    justify-content: flex-end;
    transform: translateX(90px);
}

/* Column 2 - Image size 70px, 100px Right */
.qr-community__col--side-2 .qr-community__image {
    max-width: 70px;
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

.qr-community__col--side-2 {
    justify-content: flex-end;
    transform: translateX(130px);
    margin-left: -30px;
}

/* Column 4 - Image size 70px, 100px Left */
.qr-community__col--side-3 .qr-community__image {
    max-width: 70px;
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

.qr-community__col--side-3 {
    justify-content: flex-start;
    transform: translateX(-130px);
    margin-right: -30px;
}

/* Column 5 - Image size 90px, 100px Left */
.qr-community__col--side-4 .qr-community__image {
    max-width: 90px;
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

.qr-community__col--side-4 {
    justify-content: flex-start;
    transform: translateX(-110px);
}

/* ===== CENTER COLUMN - 70% ===== */
.qr-community__col--center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    grid-column: 3 / 4;
    justify-self: center;
}

.qr-community__content {
    text-align: center;
    width: 100%;
}

.qr-community__heading {
    font-family: 'Sora', sans-serif;
    font-weight: 750;
    font-style: Bold;
    font-size: 90px;
    line-height: 90px;
    letter-spacing: 0%;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    background: linear-gradient(271.2deg, #3A3224 4%, #B89668 100.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .qr-community__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* Firefox fallback */
@-moz-document url-prefix() {
    .qr-community__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* ===== DESCRIPTION SUBSECTION ===== */
.qr-community__description-wrapper {
    max-width: 700px;
    margin: 30px auto 0;
    text-align: center;
}

.qr-community__description {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 0%;
    color: #3A3224;
    margin: 0;
}

/* ============================================
   RESPONSIVE - COMMUNITY IMPACT SECTION
   ============================================ */

@media (max-width: 1200px) {
    .qr-community {
        padding: 60px 40px;
    }

    .qr-community__grid {
        grid-template-columns: 8% 8% 68% 8% 8%;
    }

    .qr-community__heading {
        font-size: 60px;
        line-height: 60px;
    }

    .qr-community__description {
        font-size: 17px;
        line-height: 26px;
    }

    .qr-community__col--side-1,
    .qr-community__col--side-2 {
        transform: translateX(60px);
    }

    .qr-community__col--side-3,
    .qr-community__col--side-4 {
        transform: translateX(-60px);
    }

    .qr-community__col--side-2 {
        margin-left: -20px;
    }

    .qr-community__col--side-3 {
        margin-right: -20px;
    }

    .qr-community__col--side-1 .qr-community__image,
    .qr-community__col--side-4 .qr-community__image {
        max-width: 70px;
        width: 70px;
        height: 70px;
    }

    .qr-community__col--side-2 .qr-community__image,
    .qr-community__col--side-3 .qr-community__image {
        max-width: 50px;
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 992px) {
    .qr-community {
        padding: 60px 30px;
    }

    .qr-community__container {
        padding: 0 20px;
    }

    .qr-community__grid {
        grid-template-columns: 6% 6% 76% 6% 6%;
        align-items: center;
        justify-items: center;
    }

    .qr-community__col--side {
        align-items: center;
        padding-bottom: 0;
        justify-content: center !important;
        transform: none !important;
        margin: 0 !important;
    }

    .qr-community__image-wrapper {
        align-items: center;
        justify-content: center;
    }

    .qr-community__col--center {
        padding: 0 15px;
    }

    .qr-community__heading {
        font-size: 48px;
        line-height: 48px;
    }

    .qr-community__description {
        font-size: 16px;
        line-height: 26px;
    }

    .qr-community__col--side-1 .qr-community__image,
    .qr-community__col--side-4 .qr-community__image {
        max-width: 50px;
        width: 50px;
        height: 50px;
    }

    .qr-community__col--side-2 .qr-community__image,
    .qr-community__col--side-3 .qr-community__image {
        max-width: 40px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 768px) {
    .qr-community {
        padding: 50px 0;
    }

    .qr-community__container {
        padding: 0 20px;
    }

    .qr-community__grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 15px;
        justify-items: center;
        align-items: center;
    }

    .qr-community__col--side {
        align-items: center;
        padding-bottom: 0;
        justify-content: center !important;
        transform: none !important;
        margin: 0 !important;
    }

    .qr-community__image-wrapper {
        align-items: center;
        justify-content: center;
    }

    .qr-community__col--center {
        grid-column: 1 / -1;
        order: 1;
        padding: 10px 0;
        width: 100%;
        justify-self: center;
    }

    .qr-community__heading {
        font-size: 38px;
        line-height: 40px;
        text-align: center;
    }

    .qr-community__col--side-1 {
        grid-column: 1 / 2;
        order: 2;
    }
    .qr-community__col--side-2 {
        grid-column: 2 / 3;
        order: 3;
    }
    .qr-community__col--side-3 {
        grid-column: 3 / 4;
        order: 4;
    }
    .qr-community__col--side-4 {
        grid-column: 4 / 5;
        order: 5;
    }

    /* MOBILE: Column 1 & 4 (side-1 and side-4) - Same size 40px */
    .qr-community__col--side-1 .qr-community__image,
    .qr-community__col--side-4 .qr-community__image {
        max-width: 40px;
        width: 40px;
        height: 40px;
    }

    /* MOBILE: Column 2 & 3 (side-2 and side-3) - Same size 30px */
    .qr-community__col--side-2 .qr-community__image,
    .qr-community__col--side-3 .qr-community__image {
        max-width: 30px;
        width: 30px;
        height: 30px;
    }

    .qr-community__description-wrapper {
        max-width: 100%;
        margin-top: 20px;
        order: 6;
        grid-column: 1 / -1;
        text-align: center;
    }

    .qr-community__description {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 576px) {
    .qr-community {
        padding: 40px 0;
    }

    .qr-community__container {
        padding: 0 16px;
    }

    .qr-community__grid {
        gap: 10px;
    }

    .qr-community__heading {
        font-size: 28px;
        line-height: 30px;
    }

    .qr-community__description {
        font-size: 15px;
        line-height: 22px;
    }

    /* SMALL MOBILE: Column 1 & 4 - Same size 35px */
    .qr-community__col--side-1 .qr-community__image,
    .qr-community__col--side-4 .qr-community__image {
        max-width: 35px;
        width: 35px;
        height: 35px;
    }

    /* SMALL MOBILE: Column 2 & 3 - Same size 25px */
    .qr-community__col--side-2 .qr-community__image,
    .qr-community__col--side-3 .qr-community__image {
        max-width: 25px;
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 400px) {
    .qr-community {
        padding: 50px 20px;
    }

    .qr-community__grid {
        gap: 8px;
    }

    .qr-community__heading {
        font-size: 24px;
        line-height: 26px;
    }

    .qr-community__description {
        font-size: 14px;
        line-height: 20px;
    }

    /* EXTRA SMALL: Column 1 & 4 - Same size 28px */
    .qr-community__col--side-1 .qr-community__image,
    .qr-community__col--side-4 .qr-community__image {
        max-width: 80px;
        width: 80px;
        height: 80px;
    }

    /* EXTRA SMALL: Column 2 & 3 - Same size 20px */
    .qr-community__col--side-2 .qr-community__image,
    .qr-community__col--side-3 .qr-community__image {
        max-width: 60px;
        width: 60px;
        height: 60px;
    }
}
/* ============================================
   QR WEBSITE - JOIN SMILE CIRCLE SECTION
   ============================================ */

.qr-join {
    width: 100%;
    padding: 80px 60px;
    background: #FFFEFB;
    position: relative;
}

.qr-join__container {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

/* ===== SECTION HEADER ===== */
.qr-join__header {
    text-align: center;
    margin-bottom: 50px;
}

.qr-join__heading {
    font-family: 'Sora', sans-serif;
    font-weight: 750;
    font-style: Bold;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 0%;
    text-align: center;
    margin: 0 0 20px 0;
    margin-bottom: 20px;
    background: linear-gradient(271.2deg, #3A3224 4%, #B89668 100.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .qr-join__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

/* Firefox fallback */
@-moz-document url-prefix() {
    .qr-join__heading {
        color: #B89668;
        background: none;
        -webkit-text-fill-color: #B89668;
    }
}

.qr-join__description {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    color: #3A3224;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== FORM WRAPPER ===== */
.qr-join__form-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   RESPONSIVE - JOIN SMILE CIRCLE SECTION
   ============================================ */

@media (max-width: 992px) {
    .qr-join {
        padding: 60px 40px;
    }

    .qr-join__heading {
        font-size: 42px;
        line-height: 50px;
    }

    .qr-join__description {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 768px) {
    .qr-join {
        padding: 50px 20px;
    }

    .qr-join__container {
        padding: 0 10px;
    }

    .qr-join__heading {
        font-size: 36px;
        line-height: 44px;
    }

    .qr-join__description {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 576px) {
    .qr-join {
        padding: 50px 20px;
    }

    .qr-join__heading {
        font-size: 28px;
        line-height: 34px;
    }

    .qr-join__description {
        font-size: 15px;
        line-height: 22px;
    }

    .qr-join__header {
        margin-bottom: 35px;
    }
}

@media (max-width: 400px) {
    .qr-join {
        padding: 30px 12px;
    }

    .qr-join__heading {
        font-size: 28px;
        line-height: 30px;
    }

    .qr-join__description {
        font-size: 14px;
        line-height: 20px;
    }
}
/* ============================================
   QR WEBSITE - FOOTER SECTION
   ============================================ */

.qr-footer-section {
    width: 100%;
    padding: 50px 50px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

/* Overlay for better text readability */
.qr-footer-section__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 254, 251, 0.85); /* Light overlay to keep text readable */
    z-index: 1;
}

.qr-footer-section__container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

/* ===== TWO COLUMN LAYOUT - 40/60 ===== */
.qr-footer-section__layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 60px;
    align-items: center;
    min-height: 400px;
}

/* ===== LEFT COLUMN - 40% ===== */
.qr-footer-section__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
}

.qr-footer-section__heading {
    font-family: 'Sora', sans-serif;
    font-weight: 750;
    font-style: Bold;
    font-size: 45px;
    line-height: 50px;
    letter-spacing: 0%;
    margin: 0;
    color: #3A3224; /* Updated heading color */
}

.qr-footer-section__description {
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    font-style: Regular;
    font-size: 17px;
    line-height: 23px;
    letter-spacing: 0%;
    color: #000000; /* Updated body text color */
    margin: 0;
}

/* ===== BUTTON ===== */
.qr-footer-section__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 250px;
    height: 55px;
    padding: 0 20px;
    border-radius: 66px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.4px;
    
    /* Gradient Background */
    background: linear-gradient(91.21deg, #CBAA80 -3.38%, #705E3C 105.02%);
    box-shadow: -8px 8px 28px 0px rgba(0, 0, 0, 0.06);
}

/* Border Gradient via Pseudo Element */
.qr-footer-section__button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 66px;
    padding: 1px;
    background: linear-gradient(70.45deg, #FFFFFF 42.19%, rgba(153, 153, 153, 0) 95.67%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.qr-footer-section__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: transform 0.3s ease;
}

.qr-footer-section__button-icon svg {
    width: 20px;
    height: 20px;
}

.qr-footer-section__button:hover {
    transform: translateY(-2px);
    box-shadow: -8px 8px 32px 0px rgba(0, 0, 0, 0.12);
}

.qr-footer-section__button:hover .qr-footer-section__button-icon {
    transform: translateX(4px);
}

.qr-footer-section__button:active {
    transform: scale(0.97);
}

/* ===== RIGHT COLUMN - 60% ===== */
.qr-footer-section__right {
    /* Intentionally empty */
}

/* ============================================
   RESPONSIVE - QR WEBSITE FOOTER SECTION
   ============================================ */

@media (max-width: 1200px) {
    .qr-footer-section__heading {
        font-size: 42px;
        line-height: 50px;
    }
    
    .qr-footer-section__description {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 992px) {
    .qr-footer-section {
        padding: 60px 40px;
    }
    
    .qr-footer-section__container {
        padding: 0 20px;
    }
    
    .qr-footer-section__layout {
        grid-template-columns: 1fr;
        gap: 40px;
        min-height: 300px;
    }
    
    .qr-footer-section__left {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }
    
    .qr-footer-section__heading {
        font-size: 38px;
        line-height: 46px;
        text-align: center;
    }
    
    .qr-footer-section__description {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }
    
    .qr-footer-section__button {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .qr-footer-section {
        padding: 50px 20px;
    }
    
    .qr-footer-section__heading {
        font-size: 32px;
        line-height: 40px;
    }
    
    .qr-footer-section__description {
        font-size: 16px;
        line-height: 24px;
    }
    
    .qr-footer-section__button {
        width: 100%;
        max-width: 220px;
        height: 46px;
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .qr-footer-section {
        padding: 40px 16px;
    }
    
    .qr-footer-section__heading {
        font-size: 28px;
        line-height: 34px;
    }
    
    .qr-footer-section__description {
        font-size: 15px;
        line-height: 22px;
    }
    
    .qr-footer-section__button {
        max-width: 100%;
        height: 44px;
        font-size: 14px;
        padding: 0 16px;
    }
    
    .qr-footer-section__button-icon svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 400px) {
    .qr-footer-section {
        padding: 50px 20px;
    }
    
    .qr-footer-section__heading {
        font-size: 24px;
        line-height: 30px;
    }
    
    .qr-footer-section__description {
        font-size: 14px;
        line-height: 20px;
    }
    
    .qr-footer-section__button {
        height: 40px;
        font-size: 13px;
        gap: 10px;
    }
    
    .qr-footer-section__button-icon svg {
        width: 16px;
        height: 16px;
    }
}
/* ============================================
   QR WEBSITE - CUSTOM HEADER
   ============================================ */

.qr-header {
    width: 100%;
    padding: 0 40px;
    background: linear-gradient(269.7deg, #363636 -2.41%, #202020 92.54%);
    position: relative;
    z-index: 100;
    border-radius: 0 0 50px 50px;
    margin-bottom: -50px;
}

.qr-header__container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 12px 0;
    position: relative;
}

/* ===== 3 COLUMN GRID ===== */
.qr-header__grid {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    gap: 0;
    align-items: center;
}

/* ===== COLUMN 1 - LOGO ===== */
.qr-header__col--logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.qr-header__logo-link {
    display: inline-block;
    line-height: 0;
}

.qr-header__logo {
    max-height: 35px;
    width: auto;
    display: block;
}

/* ===== COLUMN 2 - MENU ===== */
.qr-header__col--menu {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.qr-header__nav {
    width: 100%;
}

/* Desktop Menu */
.qr-header__menu {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qr-header__menu li {
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
}

/* Sub-menu (dropdown) on desktop */
.qr-header__menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(269.7deg, #363636 -2.41%, #202020 92.54%);
    padding: 10px 0;
    min-width: 200px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 999;
    list-style: none;
}

.qr-header__menu .sub-menu li {
    list-style: none;
    padding: 0;
}

.qr-header__menu li:hover > .sub-menu {
    display: block;
}

.qr-header__menu .sub-menu li {
    width: 100%;
    text-align: left;
    padding: 0;
}

.qr-header__menu .sub-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.3s ease;
}

.qr-header__menu .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #B89668;
}

.qr-header__menu a {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 8px 0;
    position: relative;
}

.qr-header__menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #B89668;
    transition: width 0.3s ease;
}

.qr-header__menu a:hover {
    color: #B89668;
}

.qr-header__menu a:hover::after {
    width: 100%;
}

/* Menu item with children - arrow indicator */
.qr-header__menu .menu-item-has-children > a::before {
    content: '▾';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #FFFFFF;
    opacity: 0.6;
}

/* ===== COLUMN 3 - BUTTON ===== */
.qr-header__col--button {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.qr-header__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 152px;
    height: 42px;
    padding: 16px 24px;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #352D20;
    letter-spacing: 0.4px;
    background: linear-gradient(101.91deg, #EDE2CC 0%, #B89668 87.74%);
    white-space: nowrap;
}

.qr-header__button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    padding: 1px;
    background: linear-gradient(11.11deg, #FFFFFF 0.5%, #999999 96.19%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ===== MOBILE MENU TOGGLE ===== */
.qr-header__menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
    background: none;
    border: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.qr-header__menu-toggle span {
    width: 28px;
    height: 3px;
    background: #FFFFFF;
    transition: all 0.3s ease;
    display: block;
    border-radius: 3px;
}

.qr-header__menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.qr-header__menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.qr-header__menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ============================================
   RESPONSIVE - QR HEADER
   ============================================ */

@media (max-width: 992px) {
    .qr-header {
        padding: 0 20px;
        border-radius: 0;
        margin-bottom: 0;
    }
    
    .qr-header__container {
        padding: 12px 0;
        position: relative;
    }
    
    .qr-header__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    
    .qr-header__col--logo {
        grid-column: 1 / 2;
        justify-content: flex-start;
    }
    
    .qr-header__col--menu {
        grid-column: 2 / 3;
        justify-content: flex-end;
    }
    
    .qr-header__col--button {
        display: none;
    }
    
    /* Mobile Menu - FULL WIDTH */
    .qr-header__menu {
        display: none !important;
        position: absolute;
        top: calc(100% + 12px);
        left: -20px !important;
        right: -20px !important;
        width: calc(100% + 40px) !important;
        background: linear-gradient(269.7deg, #363636 -2.41%, #202020 92.54%);
        padding: 20px 25px;
        gap: 5px;
        z-index: 1000;
        border-radius: 0 0 12px 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        flex-direction: column;
        align-items: stretch;
        max-height: 80vh;
        overflow-y: auto;
        list-style: none !important;
    }
    
    .qr-header__menu.open {
        display: flex !important;
    }
    
    .qr-header__menu li {
        width: 100%;
        text-align: left;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        list-style: none !important;
    }
    
    .qr-header__menu li:last-child {
        border-bottom: none;
    }
    
    .qr-header__menu a {
        display: block;
        padding: 14px 15px;
        font-size: 16px;
        width: 100%;
        border-radius: 6px;
        text-align: left;
        font-weight: 400;
    }
    
    .qr-header__menu a::after {
        display: none;
    }
    
    .qr-header__menu a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #B89668;
    }
    
    /* ===== MOBILE SUB-MENU - NO LIST ICONS ===== */
    .qr-header__menu .sub-menu {
        display: none !important;
        position: static !important;
        background: rgba(255, 255, 255, 0.06);
        padding: 5px 0;
        border-radius: 8px;
        margin: 2px 10px 5px 10px;
        border: none;
        box-shadow: none;
        width: auto;
        min-width: auto;
        list-style: none !important;
    }
    
    .qr-header__menu .sub-menu.open {
        display: block !important;
    }
    
    .qr-header__menu .sub-menu li {
        width: 100%;
        text-align: left;
        padding: 0;
        border-bottom: none;
        list-style: none !important;
    }
    
    .qr-header__menu .sub-menu a {
        display: block;
        padding: 10px 15px 10px 30px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        text-align: left;
        border-radius: 4px;
        width: 100%;
        text-decoration: none;
    }
    
    .qr-header__menu .sub-menu a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #B89668;
    }
    
    /* Menu item with children - arrow indicator on mobile */
    .qr-header__menu .menu-item-has-children > a::before {
        display: none;
    }
    
    .qr-header__menu .menu-item-has-children > a::after {
        content: ' ▾';
        font-size: 14px;
        color: #FFFFFF !important;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .qr-header__menu .menu-item-has-children > a.open::after {
        content: ' ▴';
        color: #FFFFFF !important;
    }
    
    .qr-header__menu-toggle {
        display: flex;
    }
}

@media (max-width: 576px) {
    .qr-header {
        padding: 0 16px;
        border-radius: 0;
        margin-bottom: 0;
    }
    
    .qr-header__logo {
        max-height: 35px;
    }
    
    .qr-header__menu {
        left: -16px !important;
        right: -16px !important;
        width: calc(100% + 32px) !important;
        padding: 15px 20px;
        border-radius: 0 0 10px 10px;
    }
    
    .qr-header__menu.open a {
        font-size: 15px;
        padding: 12px 12px;
    }
    
    .qr-header__menu .sub-menu a {
        font-size: 13px;
        padding: 8px 12px 8px 25px;
    }
}