/**
    Author: Ton Hanchai tonhanchai@gmail.com
*/

/* ======================================================= */
/* Sticky Header                                           */
/* ======================================================= */

.sticky-header {
    position: fixed;
    margin-top: 0px;
    top: 0px;
    width: 100%;
    padding: 10px 16px;
    z-index: 99999;
    background: #fff;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.img-fluid-carousel {
    margin-top: 100px;
    max-width: 100%;
    height: auto;
}

.nav-current {
    font-weight: 500 !important;
    color: #198754 !important;
}

.text-link {
    text-decoration: none !important;
    font-weight: 400 !important;
    color: #198754 !important;
}

.text-link:hover {
    text-decoration: underline !important;
}

/* Padding */
.padding-top-small    { padding-top: 4px !important; }
.padding-top          { padding-top: 8px !important; }
.padding-top-large    { padding-top: 16px !important; }
.padding-top-xlarge   { padding-top: 24px !important; }
.padding-top-xxlarge  { padding-top: 48px !important; }
.padding-top-xxxlarge { padding-top: 8rem !important; }

.padding-bottom-small    { padding-bottom: 4px !important; }
.padding-bottom          { padding-bottom: 8px !important; }
.padding-bottom-large    { padding-bottom: 16px !important; }
.padding-bottom-xlarge   { padding-bottom: 24px !important; }
.padding-bottom-xxlarge  { padding-bottom: 48px !important; }
.padding-bottom-xxxlarge { padding-bottom: 8rem !important; }

.py-5 {
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
}

.width-50-percent  { width: 50% !important; }
.width-60-percent  { width: 60% !important; }
.width-70-percent  { width: 70% !important; }
.width-80-percent  { width: 80% !important; }
.width-90-percent  { width: 90% !important; }
.width-100-percent { width: 100% !important; }

/* ======================================================= */
/* HERO                                                    */
/* height: calc(850px + 100px) gives enough room to show  */
/* her full body. background-position: center 65% frames  */
/* from waist down so legs are visible.                   */
/* ======================================================= */

.hero_container {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: calc(100px + 2.5rem) 5% 2rem 5% !important;
    margin-top: -100px !important;
    height: calc(850px + 100px) !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}

.hero_background_image {
    background-image: url("../img/home-hero.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center 65% !important;
}

/* ======================================================= */
/* HERO CARD                                               */
/* ======================================================= */

.hero_text_container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 460px !important;
    background: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    border-left: 4px solid #0e7b2a !important;
    text-align: left !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16) !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

.hero_eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0e7b2a;
    background: rgba(14, 123, 42, 0.1);
    border-radius: 50px;
    padding: 4px 12px;
    margin-bottom: 0.6rem;
}

.hero_text_container .text_title {
    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #054f18 !important;
    text-shadow: none !important;
}

.hero_text_container .text_body,
.hero_text_container p {
    color: #1a1a1a !important;
    text-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    padding-top: 0.75rem !important;
}

.hero_cta_group {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 1.5rem !important;
    align-items: center !important;
}

.hero_btn_primary {
    background-color: #0e7b2a !important;
    color: #fff !important;
    padding: 11px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(14, 123, 42, 0.35) !important;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.hero_btn_primary:hover {
    background-color: #054f18 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(14, 123, 42, 0.45) !important;
}

.hero_btn_secondary {
    background-color: transparent !important;
    border: 2px solid rgba(14, 123, 42, 0.65) !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.hero_btn_secondary:hover {
    background-color: rgba(14, 123, 42, 0.08) !important;
    border-color: #0e7b2a !important;
}

.hero_btn_secondary_label {
    color: #054f18 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

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

@media (max-width: 1024px) {
    .hero_container {
        height: calc(750px + 100px) !important;
        padding: calc(100px + 2rem) 5% 2rem 5% !important;
    }
    .hero_background_image {
        background-position: center 65% !important;
    }
}

@media (max-width: 900px) {
    .hero_container {
        height: calc(620px + 100px) !important;
        padding: calc(100px + 2rem) 4% 2rem 4% !important;
    }
    .hero_background_image {
        background-position: center 65% !important;
    }
    .hero_text_container {
        max-width: 420px !important;
    }
}

@media (max-width: 768px) {
    .hero_container {
        height: auto !important;
        min-height: calc(560px + 100px) !important;
        padding: calc(100px + 1.5rem) 4% 2.5rem 4% !important;
    }
    .hero_background_image {
        background-position: center 65% !important;
    }
    .hero_text_container {
        max-width: 100% !important;
        width: 95% !important;
        padding: 1.5rem !important;
    }
    .hero_text_container .text_title {
        font-size: 28px !important;
    }
    .hero_cta_group {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .hero_btn_primary,
    .hero_btn_secondary {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .hero_container {
        min-height: calc(500px + 100px) !important;
        padding: calc(100px + 1.25rem) 4% 2rem 4% !important;
    }
    .hero_eyebrow {
        font-size: 10px !important;
    }
    .hero_text_container {
        width: 100% !important;
        padding: 1.25rem !important;
        border-radius: 8px !important;
    }
    .hero_text_container .text_title {
        font-size: 26px !important;
    }
}

@media (max-width: 380px) {
    .hero_container {
        min-height: calc(460px + 100px) !important;
        padding: calc(100px + 1rem) 3% 1.5rem 3% !important;
    }
    .hero_text_container .text_title {
        font-size: 24px !important;
    }
}

/* ======================================================= */
/* Typography scaling                                      */
/* ======================================================= */

@media all and (min-width: 1025px) and (max-width: 1600px) {
    .text_title { font-size: 36px !important; }
}
@media all and (min-width: 1601px) {
    .text_title { font-size: 38px !important; }
}

/* ======================================================= */
/* STICKY HEADER                                           */
/* ======================================================= */

header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #fff;
    z-index: 99999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

body {
    padding-top: 100px !important;
}

/* ======================================================= */
/* NAV ICON COLOR                                          */
/* ======================================================= */

.fa-bars, .nav_icon {
    color: #009e4f !important;
    font-size: 32px !important;
}
.fa-bars:hover, .nav_icon:hover {
    color: #054f18 !important;
}

/* ======================================================= */
/* MOBILE MENU DROPDOWN                                    */
/* ======================================================= */

#nav_mobile {
    position: fixed !important;
    top: 100px !important;
    left: 0;
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    max-height: 0;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 2px solid #009e4f;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: max-height 0.3s ease-out;
}

@media (min-width: 815px) {
    #nav_mobile {
        display: none !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #mobile_menu, #mobile_menu_x {
        display: none !important;
    }
}

/* ======================================================= */
/* PULSOR BOTTOM IMAGE DIVIDER                             */
/* ======================================================= */

.pulsor_divider {
    width: 100%;
    height: 600px;
    overflow: hidden;
    display: block;
    line-height: 0;
}

.pulsor_divider_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    display: block;
}

@media (max-width: 768px) {
    .pulsor_divider { height: 380px; }
    .pulsor_divider_img { object-position: center 60%; }
}

/* ======================================================= */
/* GOLD/BROWN CTA BUTTONS                                  */
/* ======================================================= */

.btn_gold {
    display: inline-block;
    padding: 10px 24px;
    background: #b89a5a;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.btn_gold:hover {
    background: #a3864d;
    transform: translateY(-1px);
    text-decoration: none !important;
    color: #fff !important;
}

.btn_gold_sm {
    display: inline-block;
    padding: 8px 20px;
    background: transparent;
    color: #b89a5a !important;
    text-decoration: none !important;
    border: 2px solid #b89a5a;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.btn_gold_sm:hover {
    background: #b89a5a;
    color: #fff !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}