/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif:ital, wght@0, 100..900;1, 100..900&display=swap');

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Define original brand colors and font variables */
:root {--main-cl: #0b437a; /* Slate/Royal Blue */
  --sub-cl: #c5a059;  /* Corporate Gold Accent */
}

/* Header height matching production */
.header-main {height: 90px;
}

.stuck .header-main {height: 70px !important;
}

.stuck #logo img {max-height: 70px !important;
}

.stuck .header-main .nav > li > a {line-height: 50px;
}

/* Stuck state: dark text on white background */
.stuck #masthead .header-nav-main > li.menu-item > a {color: #333;
}

/* Spacing and alignments of menu items within Flatsome's header structure */
header#header .logo-center .logo {margin: 0 1.5625rem !important;
}

header#header #logo {width: 10.417rem;
}

#logo img {max-height: 4rem !important;
}

header#header #masthead .header-nav-main.nav-left > li.menu-item {margin-right: 2rem !important;
    margin-left: 0 !important;
}

header#header #masthead .header-nav-main.nav-left > li.menu-item:first-child {margin-right: 0 !important;
}

header#header #masthead .header-nav-main.nav-right > li.menu-item {margin-right: 2.5rem !important;
    margin-left: 0 !important;
}

/* Menu Item Typography and Colors (Restored native padding and removed forced color to prevent sticking & coloring conflicts) */
header#header #masthead .header-nav-main > li.menu-item > a {font-family: "Noto Serif", serif;
    font-weight: 400;
    font-size: 1.146rem;
    line-height: 1.4;
    text-transform: initial;
    transition: all 0.4s ease-in-out;
}

/* Support nav-dark / transparent header text color (Light Text on Transparent Header) */
header#header #masthead.nav-dark .header-nav-main > li.menu-item > a {color: #fff;
}

/* Hover and active color transitions */
header#header #masthead .header-nav-main > li.menu-item:hover > a, header#header #masthead .header-nav-main > li.menu-item.active > a {color: #c5a059 !important;
}

/* Home menu item special home icon style */
header#header #masthead .header-nav-main > li.menu-item-home {position: relative;
    margin-right: 0 !important;
}

header#header #masthead .header-nav-main > li.menu-item-home > a {opacity: 0;
}

header#header #masthead .header-nav-main > li.menu-item-home:before {content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    background-image: url('assets/images/home_light.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.stuck header#header #masthead .header-nav-main > li.menu-item-home:before,
header#header .stuck #masthead .header-nav-main > li.menu-item-home:before {background-image: url('assets/images/home_dark.svg');
}

/* Submenu dropdown styles matching original - scoped to prevent breaking general Flatsome dropdowns */
ul.sub-menu.nav-dropdown.nav-dropdown-default {min-width: 13rem;
    border-radius: 0.625rem;
    border: none;
    padding: 1rem 0.7rem;
    margin-top: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before {content: unset;
}

ul.sub-menu.nav-dropdown.nav-dropdown-default li {width: 100% !important;
    white-space: unset !important;
    display: block !important;
}

ul.sub-menu.nav-dropdown.nav-dropdown-default li > a {width: 100%;
    color: #333;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.4;
    border-bottom: 0;
    margin: 0;
    padding: .57rem 0;
    text-transform: initial;
    text-align: left;
    justify-content: flex-start;
    transition: .4s all;
}

ul.sub-menu.nav-dropdown.nav-dropdown-default li > a:hover {color: #c5a059;
}

ul.sub-menu.nav-dropdown.nav-dropdown-default li:last-child > a {border: none;
}

/* Language selector dropdown - scoped strictly to .header-language-dropdown */
.header-language-dropdown .nav-dropdown {padding: 0;
    border: none;
}

.header-language-dropdown.has-dropdown {position: relative !important;
}

.header-language-dropdown > a {display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.417rem 0.833rem;
    border-radius: 5px;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
}

.flag-icon {width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.flag-icon img {width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

.header-language-dropdown .nav-dropdown {position: absolute;
    top: 100%;
    left: 0 !important;
    right: unset;
    min-width: unset;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
    margin-left: 0 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    overflow: hidden;
}

.header-language-dropdown.has-dropdown:hover .nav-dropdown {opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-language-dropdown .nav-dropdown li {border-bottom: 1px solid #f0f0f0;
}

.header-language-dropdown .nav-dropdown li:last-child {border-bottom: none;
}

.header-language-dropdown .nav-dropdown li a {display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.header-language-dropdown .nav-dropdown li a:hover {color: #c5a059;
    background-color: #f5f5f5;
}

.language-item-flag {width: 1.5rem;
    height: auto;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.language-item-flag img {width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

/* Header divider line below navigation */
.top-divider {border-top: 1px solid rgba(255, 255, 255, 0.15);
}

header#header:not(.transparent) .top-divider {border-top-color: rgba(0, 0, 0, 0.08);
}

/* Search Lightbox styling */
#search-lightbox .search-lightbox-title {font-family: "Noto Serif", serif;
    font-weight: 400;
    font-size: 1.2em;
    margin-bottom: 1.2em;
    color: #fff;
}

#search-lightbox .search-keywords {margin-top: 1.5em;
}

#search-lightbox .search-keywords a {display: inline-block;
    padding: 0.4em 1em;
    margin: 0.3em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.6em;
    transition: all 0.3s ease;
}

#search-lightbox .search-keywords a:hover {background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Responsive Overrides */
@media only screen and (max-width: 48em) {/*************** ADD MOBILE ONLY CSS HERE  ***************/
    
    header#header #masthead #logo {padding: 0.8rem 0;
    }
    
    #logo img {max-height: 3rem !important;
    }
    
    /* Mobile menu icon: white SVG by default (transparent header) */
    [data-open="#main-menu"] {background-image: url('assets/images/icon_menu.svg');
        width: 2.5rem;
        height: 2.5rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
    
    /* Mobile menu icon: dark SVG when stuck */
    .stuck [data-open="#main-menu"] {background-image: url('assets/images/icon_menu_dark.svg');
    }
    
    /* Hide native Flatsome icon font, replaced by SVG */
    [data-open="#main-menu"] i.icon-menu,
    .nav > li > a > i.icon-menu {display: none !important;
    }
    
    /* Mobile search icon: white by default, dark when stuck */
    .nav-right .icon-search {font-size: 1.5rem !important;
        padding-right: 0.5rem;
        color: #fff;
        transition: color 0.3s ease;
    }
    
    .stuck .nav-right .icon-search {color: #333;
    }
}

/* ==========================================================================
   Home Section 1 (xc-home-about) styling to match the original design
   ========================================================================== */

/* Section Padding & Background Sizing */
.xc-home-about {padding: 5.208rem 0 2rem !important;
}

@media (max-width: 911px) {.xc-home-about {padding-top: 3rem !important;
    }
}

/* Heading / Lead Paragraph Styling */
.xc-home-about p.lead {font-family: "Noto Serif", serif !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #0b437a !important;
    font-size: 3.646rem !important;
    margin-bottom: 2rem !important;
}

@media (max-width: 1199px) {.xc-home-about p.lead {font-size: 2.708rem !important;
    }
}

@media (max-width: 911px) {.xc-home-about p.lead {font-size: 1.8rem !important;
    }
}

@media (max-width: 767px) {.xc-home-about p.lead {font-size: 1.4rem !important;
        line-height: 1.5 !important;
    }
}

/* Base Paragraphs in Content Area */
.xc-home-about p:not(.lead) {font-family: "Inter", sans-serif !important;
    color: #333 !important;
    line-height: 1.6 !important;
    margin-bottom: 1.3em !important;
}

/* Button Styling (With transition and hover arrow effect) */
.xc-home-about .button {display: inline-flex !important;
    align-items: center !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    border-radius: 5px !important;
    border: 1px solid #0b437a !important;
    padding: 0.55rem 1.5rem 0.65rem !important;
    background-color: transparent !important;
    color: #0b437a !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: all 0.4s ease-in-out !important;
    margin-bottom: 2rem !important;
}

.xc-home-about .button span {transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transform: translateX(0.625rem) !important;
    display: inline-block !important;
    line-height: 1.6 !important;
}

.xc-home-about .button::after {content: '' !important;
    display: inline-block !important;
    width: 1.5rem !important;
    height: 0.625rem !important;
    margin-left: 0.5rem !important;
    background-image: url("data:image/svg+xml, %3Csvg width='25' height='10' viewBox='0 0 25 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.25H23.5L14 0.75' stroke='%230b437a' stroke-width='1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    opacity: 0 !important;
    transform: translateX(-0.833rem) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.xc-home-about .button:hover {background-color: #0b437a !important;
    color: #fff !important;
    border-color: #0b437a !important;
}

.xc-home-about .button:hover span {transform: translateX(0) !important;
    color: #fff !important;
}

.xc-home-about .button:hover::after {opacity: 1 !important;
    transform: translateX(0) !important;
    background-image: url("data:image/svg+xml, %3Csvg width='25' height='10' viewBox='0 0 25 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.25H23.5L14 0.75' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") !important;
}

/* Counters Row & Columns Styling */
#row-1401177811 {border-top: 1px solid #C2C2C2 !important;
    padding-top: 1.042rem !important;
    margin-top: 4.53125rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.xc-home-about .icon-box.featured-box.box-number {margin-bottom: 0 !important;
}

.xc-home-about .icon-box.featured-box.box-number .icon-box-text h5 {font-family: "Noto Serif", serif !important;
    font-weight: 500 !important;
    font-size: 3.646rem !important;
    line-height: 1.4 !important;
    color: #0b437a !important;
    text-transform: none !important;
    margin-bottom: 0.2rem !important;
    white-space: nowrap !important;
}

.xc-home-about .icon-box.featured-box.box-number .icon-box-text h6 {font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    color: #333 !important;
    text-transform: none !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
    letter-spacing: normal !important;
}

@media (max-width: 911px) {#row-1401177811 {margin-top: 2.5rem !important;
    }
    .xc-home-about .icon-box.featured-box.box-number .icon-box-text h5 {font-size: 2.6rem !important;
    }
    .xc-home-about .icon-box.featured-box.box-number .icon-box-text h6 {font-size: 0.8rem !important;
    }
}

@media (max-width: 767px) {#row-1401177811 {margin-top: 2rem !important;
    }
    .xc-home-about .icon-box.featured-box.box-number .icon-box-text h6 {font-size: 1.3rem !important;
    }
}

/* Image zoom effect on hover */
.xc-home-about #image_634777747 {overflow: hidden !important;
    position: relative !important;
}

.xc-home-about #image_634777747 img {transition: all 0.4s ease-in-out !important;
    object-fit: cover !important;
}

.xc-home-about #image_634777747:hover img {transform: scale(1.05) !important;
}

/* Entrance Animate On Scroll (AOS) emulation styling */
@keyframes xc-fade-in-up {from {opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.xc-home-about .col {opacity: 0;
    animation: xc-fade-in-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Sequenced animation delays for visual polish */
.xc-home-about #col-776234293 {animation-delay: 0.1s;
}
.xc-home-about #col-875279237 {animation-delay: 0.3s;
}
.xc-home-about #col-160900898 {animation-delay: 0.5s;
}

/* ==========================================================================
   Home Section 2 (xc-home-cta) styling to match the original design
   ========================================================================== */

/* Section Padding */
.xc-home-cta {padding: 3.385rem 0 !important;
}

@media (max-width: 1199px) {.xc-home-cta {padding-bottom: 5rem !important;
    }
}

@media (max-width: 911px) {.xc-home-cta {padding-bottom: 2rem !important;
    }
}

/* Row alignment - force bottom vertical alignment on desktop */
.xc-home-cta .row {align-items: flex-end !important;
    justify-content: space-between !important;
}

/* Button Column Alignment */
.xc-home-cta .col:nth-child(2) .col-inner {display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

@media (max-width: 767px) {.xc-home-cta .col:nth-child(2) .col-inner {justify-content: flex-start !important;
    }
}

/* Heading / Lead Paragraph Styling (White color) */
.xc-home-cta p.lead {font-family: "Noto Serif", serif !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    font-size: 3.646rem !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1199px) {.xc-home-cta p.lead {font-size: 2.4rem !important;
    }
}

@media (max-width: 911px) {.xc-home-cta p.lead {font-size: 1.7rem !important;
        line-height: 1.5 !important;
        padding-bottom: 2rem !important;
    }
}

@media (max-width: 767px) {.xc-home-cta p.lead {font-size: 1.5rem !important;
    }
}

/* Button Styling (White border, transparent background, shifts to solid white on hover) */
.xc-home-cta .button {display: inline-flex !important;
    align-items: center !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    border-radius: 5px !important;
    border: 1px solid #fff !important;
    padding: 0.55rem 1.5rem 0.65rem !important;
    background-color: transparent !important;
    color: #fff !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: all 0.4s ease-in-out !important;
    margin-bottom: 0 !important;
}

.xc-home-cta .button span {transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transform: translateX(0.625rem) !important;
    display: inline-block !important;
    line-height: 1.6 !important;
}

.xc-home-cta .button::after {content: '' !important;
    display: inline-block !important;
    width: 1.5rem !important;
    height: 0.625rem !important;
    margin-left: 0.5rem !important;
    background-image: url("data:image/svg+xml, %3Csvg width='25' height='10' viewBox='0 0 25 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.25H23.5L14 0.75' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    opacity: 0 !important;
    transform: translateX(-0.833rem) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.xc-home-cta .button:hover {background-color: #fff !important;
    color: #0b437a !important; /* Turns to slate/royal blue (#0b437a) */
    border-color: #fff !important;
}

.xc-home-cta .button:hover span {transform: translateX(0) !important;
    color: #0b437a !important;
}

.xc-home-cta .button:hover::after {opacity: 1 !important;
    transform: translateX(0) !important;
    background-image: url("data:image/svg+xml, %3Csvg width='25' height='10' viewBox='0 0 25 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.25H23.5L14 0.75' stroke='%230b437a' stroke-width='1.5'/%3E%3C/svg%3E") !important;
}

/* Entrance animation delays for xc-home-cta columns */
.xc-home-cta .col {opacity: 0;
    animation: xc-fade-in-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.xc-home-cta .col:nth-child(1) {animation-delay: 0.1s;
}

.xc-home-cta .col:nth-child(2) {animation-delay: 0.3s;
}

/* ==========================================================================
   Home Section 3 (xc-home-services) styling to match the original design
   ========================================================================== */

/* Section Padding & Spacing */
.xc-home-services {padding-top: 3.542rem !important;
    padding-bottom: 2rem !important;
}

/* Service Tab Container Styles */
.xc-home-services ul.nav {display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 1.458rem !important;
    padding-bottom: 3.49rem !important;
    margin-bottom: 0 !important;
    border: none !important;
    list-style: none !important;
}

/* Flatsome default indicator lines removal */
.xc-home-services ul.nav-line > li > a:before {display: none !important;
    content: unset !important;
}

.xc-home-services ul.nav > li.tab {margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: unset !important;
}

/* Base Tab Item Link Styling */
.xc-home-services ul.nav > li.tab > a {background: #fff !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    color: #0b437a !important;
    border: 1px solid #0b437a !important;
    border-radius: 5px !important;
    padding: 0.6rem 1.2rem !important;
    cursor: pointer !important;
    text-transform: none !important;
    transition: all 0.4s ease-in-out !important;
}

/* Tab Hover & Active States */
.xc-home-services ul.nav > li.tab.active > a, .xc-home-services ul.nav > li.tab:hover > a {background-color: #0b437a !important;
    color: #fff !important;
    border-color: #0b437a !important;
}

/* Services Grid Wrap & Layout Gap */
.xc-home-services .tab-panels .row {column-gap: 1.302rem !important;
    row-gap: 1.042rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Individual Card (Flatsome's col-inner) */
.xc-home-services .tab-panels .col {padding: 0 !important;
    margin: 0 !important;
    width: calc(25% - 0.9765rem) !important;
    flex-basis: calc(25% - 0.9765rem) !important;
    max-width: calc(25% - 0.9765rem) !important;
}

.xc-home-services .tab-panels .col-inner {background: #E9F1F9 !important;
    padding: 1.5625rem !important;
    border-radius: 0.521rem !important;
    height: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.4s ease-in-out !important;
}

/* Reset default Flatsome accordion layouts and borders */
.xc-home-services .accordion {border: none !important;
    background: transparent !important;
    margin: 0 !important;
}

.xc-home-services .accordion-item {border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Card Heading & Accordion Title */
.xc-home-services .accordion-title {display: flex !important;
    flex-direction: row-reverse !important; /* Reverses order: Text left, Toggle icon right */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #333 !important;
    font-family: "Noto Serif", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.042rem !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: all 0.4s ease-in-out !important;
}

/* Scoped Title text and truncation */
.xc-home-services .accordion-title > span:not(.icon) {overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    width: 80% !important;
    flex: 0 0 auto !important;
}

/* Service Card Hover Effect on Title text */
.xc-home-services .tab-panels .col-inner:hover .accordion-title {color: #c5a059 !important;
}

/* Plus/Minus Circular Icon Styling from Flatsome Toggle */
.xc-home-services .accordion-title button.toggle {position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.8rem !important;
    height: 1.8rem !important;
    min-width: 1.8rem !important; /* Force exact round width */
    min-height: 1.8rem !important; /* Force exact round height */
    border-radius: 50% !important;
    border: 1px solid #333 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    left: unset !important;
    top: unset !important;
    pointer-events: none !important; /* Click actions handled by the wrapper <a> tag */
    flex: 0 0 auto !important; /* Prevent warping or shrinking inside the flex title row */
    box-sizing: border-box !important;
    transition: all 0.4s ease-in-out !important;
}

/* Hide Flatsome's default chevron icons */
.xc-home-services .accordion-title button.toggle i {display: none !important;
}

/* Draw horizontal bar of Plus icon */
.xc-home-services .accordion-title button.toggle::before {content: '' !important;
    position: absolute !important;
    width: 10px !important;
    height: 1.5px !important;
    background-color: #333 !important;
    transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out !important;
}

/* Draw vertical bar of Plus icon */
.xc-home-services .accordion-title button.toggle::after {content: '' !important;
    position: absolute !important;
    width: 1.5px !important;
    height: 10px !important;
    background-color: #333 !important;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out !important;
}

/* Morph active states (+ to -) by fading out the vertical bar */
.xc-home-services .accordion-title.active button.toggle::after, .xc-home-services .accordion-title[aria-expanded="true"] button.toggle::after {opacity: 0 !important;
    transform: scaleY(0) !important;
}

/* Content Area inside Card */
.xc-home-services .accordion-inner {padding: 0 !important;
    margin-top: 0.78125rem !important;
    background: transparent !important;
    border: none !important;
}

.xc-home-services .accordion-inner p {font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.833rem !important;
    line-height: 1.4 !important;
    color: #333 !important;
    margin-bottom: 0.625rem !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;
}

/* "Xem thêm" Button Styling */
.xc-home-services .accordion-inner a.button {display: inline-flex !important;
    align-items: center !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.833rem !important;
    line-height: 1.4 !important;
    color: #0b437a !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0.625rem 0 0 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    min-height: unset !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-home-services .accordion-inner a.button span {line-height: 1.4 !important;
    transition: color 0.4s ease-in-out !important;
}

.xc-home-services .accordion-inner a.button::after {content: '' !important;
    display: inline-block !important;
    width: 1.354rem !important;
    height: 0.521rem !important;
    margin-left: 0.417rem !important;
    background-image: url("data:image/svg+xml, %3Csvg width='26' height='10' viewBox='0 0 26 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.25H23.5L14 0.75' stroke='%230B437A' stroke-width='1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    transition: transform 0.4s ease-in-out, background-image 0.4s ease-in-out !important;
}

/* Button Hover State */
.xc-home-services .accordion-inner a.button:hover {color: #c5a059 !important;
    background: transparent !important;
}

.xc-home-services .accordion-inner a.button:hover span {color: #c5a059 !important;
}

.xc-home-services .accordion-inner a.button:hover::after {transform: translateX(0.3rem) !important;
    background-image: url("data:image/svg+xml, %3Csvg width='26' height='10' viewBox='0 0 26 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.25H23.5L14 0.75' stroke='%23BFA67B' stroke-width='1.5'/%3E%3C/svg%3E") !important;
}

/* Responsive Styles for Services Grid */
@media (max-width: 1199px) {.xc-home-services .tab-panels .col {width: calc(33.3333333333% - 0.868rem) !important;
        flex-basis: calc(33.3333333333% - 0.868rem) !important;
        max-width: calc(33.3333333333% - 0.868rem) !important;
    }
    
    .xc-home-services .accordion-title {font-size: 1.3rem !important;
    }
    
    .xc-home-services .accordion-inner p {font-size: 1rem !important;
    }
    
    .xc-home-services .accordion-inner a.button {font-size: 1.2rem !important;
    }
}

@media (max-width: 911px) {.xc-home-services .tab-panels .col {width: calc(50% - 0.651rem) !important;
        flex-basis: calc(50% - 0.651rem) !important;
        max-width: calc(50% - 0.651rem) !important;
    }
    
    .xc-home-services ul.nav {gap: 0.9rem !important;
        padding-bottom: 2rem !important;
    }
    
    .xc-home-services ul.nav > li.tab > a {font-size: 0.85rem !important;
    }
    
    .xc-home-services .accordion-title {font-size: 1.15rem !important;
    }
}

@media (max-width: 767px) {.xc-home-services .tab-panels .col {width: 100% !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    
    .xc-home-services ul.nav > li.tab {width: 100% !important;
        text-align: center !important;
    }
    
    /* Mobile Segmented Pill Bar */
    .xc-home-services ul.nav {border-radius: 1.55rem !important;
        background: #F2F2F2 !important;
        padding: 4px !important;
        backdrop-filter: blur(14px) !important;
        margin-bottom: 2rem !important;
        gap: 4px !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .xc-home-services ul.nav > li.tab > a {width: 100% !important;
        display: block !important;
        text-align: center !important;
        border-radius: 5.208rem !important;
        border: none !important;
        background: none !important;
        font-size: 1.125rem !important;
        padding: 0.6rem !important;
    }
    
    .xc-home-services ul.nav > li.tab.active > a, .xc-home-services ul.nav > li.tab:hover > a {background: #0b437a !important;
        color: #fff !important;
        border-color: #0b437a !important;
    }
}

/* ==========================================================================
   Home Section 4 (xc-home-marquee) styling to match the original design
   ========================================================================== */

/* Section Padding */
.xc-home-marquee {padding-top: 4.271rem !important;
    padding-bottom: 4.271rem !important;
}

@media (max-width: 1199px) {.xc-home-marquee {padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* Marquee Container Styles */
.xc-home-marquee .marquee-container {width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    display: block !important; /* Forces block context in case of paragraph wraps */
}

/* Marquee Content Sliding Wrapper */
.xc-home-marquee .marquee-content {display: inline-block !important;
    white-space: nowrap !important; /* Absolutely prevents text wrapping and vertical stacking */
    animation: xc-scroll-left 60s linear infinite !important;
    -webkit-animation: xc-scroll-left 60s linear infinite !important; /* Enforces compatibility on Webkit engines (iOS Safari/older Chrome) */
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* Individual Marquee Text Item */
.xc-home-marquee .marquee-item {display: inline-block !important;
    white-space: nowrap !important; /* Force items to stay inline */
    margin-right: 3.28125rem !important; /* 63px based on 19.2px base font size */
    color: rgba(0, 69, 137, 0.2) !important;
    transition: color 0.4s ease-in-out !important;
    cursor: default !important;
}

/* Heading Sizes for Marquee Text */
.xc-home-marquee .heading_0 {font-size: 4.167rem !important; /* 80px based on 19.2px base font size */
}

@media (max-width: 911px) {.xc-home-marquee .heading_0 {font-size: 2.8rem !important;
    }
}

@media (max-width: 767px) {.xc-home-marquee .heading_0 {font-size: 2.2rem !important;
    }
}

/* Hover effects */
.xc-home-marquee .marquee-item:hover {color: #0b437a !important; /* Transitions to brand royal blue #0b437a */
}

.xc-home-marquee .marquee-container:hover .marquee-content {animation-play-state: paused !important; /* Pauses scrolling on hover */
    -webkit-animation-play-state: paused !important;
}

/* Hide automatically injected br tags inside marquee container */
.xc-home-marquee .marquee-container br,
.xc-home-marquee .marquee-content br {
    display: none !important;
}


/* Seamless infinite scroll keyframes - prefixed and uniquely named to prevent overrides */
@keyframes xc-scroll-left {0% {transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    100% {transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
}

@-webkit-keyframes xc-scroll-left {0% {-webkit-transform: translateX(0);
    }
    100% {-webkit-transform: translateX(-50%);
    }
}

/* ==========================================================================
   Home Section 5 (xc-home-why) styling to match the original design
   ========================================================================== */

.xc-home-why {padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
}

/* Main Column Gap Layout (Left 41.67%, Right 50% with space-between = 8.33% Gap) */
@media (min-width: 850px) {.xc-home-why > .section-content > .row {display: flex !important;
        justify-content: space-between !important;
    }
    .xc-home-why > .section-content > .row > .col:first-child {flex-basis: 41.6666666667% !important;
        max-width: 41.6666666667% !important;
    }
    .xc-home-why > .section-content > .row > .col:nth-child(2) {flex-basis: 50% !important;
        max-width: 50% !important;
    }
}

/* Organic Mask Frame for Left Column Image */
.xc-home-why .img-inner {-webkit-mask-image: url('assets/images/mask.png') !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-image: url('assets/images/mask.png') !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
}

.xc-home-why .img-inner img {transition: transform 0.4s ease-in-out !important;
}

.xc-home-why .img-inner:hover img {transform: scale(1.03) !important;
}

/* Title & Description */
.xc-home-why h2, .xc-home-why .group_heading h2 {font-family: 'Noto Serif', serif !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #0b437a !important;
    font-size: 3.646rem !important;
    margin-bottom: 0.208rem !important;
}

.xc-home-why .col-inner > p, .xc-home-why .group_heading .desc {font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.042rem !important;
    line-height: 1.4 !important;
    color: #333 !important;
    margin-bottom: 0 !important;
}

/* Criteria List Rows and Columns Layout */
.xc-home-why .col-inner > .row {display: flex !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.xc-home-why .col-inner > .row:first-of-type {margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
}

.xc-home-why .col-inner > .row + .row {margin-top: 1.823rem !important;
    margin-bottom: 0 !important;
}

.xc-home-why .col-inner > .row > .col {padding: 0 !important;
    width: calc(50% - 3.5156rem) !important;
    flex-basis: calc(50% - 3.5156rem) !important;
    max-width: calc(50% - 3.5156rem) !important;
}

/* Giant Number Styling */
.xc-home-why .icon-box-text h5, .xc-home-why .list_criteria .title {width: fit-content !important;
    font-family: 'Noto Serif', sans-serif !important;
    font-weight: 500 !important;
    font-size: 7.8125rem !important;
    line-height: normal !important;
    background: linear-gradient(180deg, #0B437A 6%, rgba(11, 67, 122, 0) 74%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    margin-bottom: 0 !important;
    text-transform: uppercase !important;
}

/* Descriptive Text Styling with Overlap Offset */
.xc-home-why .icon-box-text h6, .xc-home-why .list_criteria .content_inner {font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.042rem !important;
    line-height: 1.4 !important;
    color: #333 !important;
    margin-top: -3rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    opacity: 1 !important;
}

/* Responsive Overrides */
@media (max-width: 1199px) {.xc-home-why h2, .xc-home-why .group_heading h2 {font-size: 2.708rem !important;
    }
    
    .xc-home-why .icon-box-text h5, .xc-home-why .list_criteria .title {font-size: 10rem !important;
    }
    
    .xc-home-why .icon-box-text h6, .xc-home-why .list_criteria .content_inner {font-size: 1.2rem !important;
    }
}

@media (max-width: 911px) {.xc-home-why h2, .xc-home-why .group_heading h2 {font-size: 1.8rem !important;
        text-align: center !important;
    }
    
    .xc-home-why .col-inner > p, .xc-home-why .group_heading .desc {text-align: center !important;
    }
    
    /* Reverse columns to place text on top of image on mobile/tablet */
    .xc-home-why > .section-content > .row {justify-content: center !important;
    }
    
    .xc-home-why > .section-content > .row > .col:nth-child(2) {order: -1 !important;
    }
    
    .xc-home-why .col-inner > .row {justify-content: center !important;
    }
    
    .xc-home-why .icon-box {text-align: center !important;
    }
    
    .xc-home-why .icon-box-text h5, .xc-home-why .list_criteria .title {font-size: 8rem !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    
    .xc-home-why .icon-box-text h6, .xc-home-why .list_criteria .content_inner {font-size: 1rem !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {.xc-home-why {padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .xc-home-why h2 {font-size: 2rem !important;
        text-align: left !important;
        line-height: 1.5 !important;
    }
    
    .xc-home-why .col-inner > p {font-size: 1.125rem !important;
        text-align: left !important;
    }
    
    .xc-home-why .col-inner > .row {margin-top: 0 !important;
    }
    
    .xc-home-why .col-inner > .row > .col {width: calc(50% - 1rem) !important;
        flex-basis: calc(50% - 1rem) !important;
        max-width: calc(50% - 1rem) !important;
    }
    
    .xc-home-why .icon-box {text-align: left !important;
    }
    
    .xc-home-why .icon-box-text h5 {font-size: 6.5rem !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .xc-home-why .icon-box-text h6 {text-align: left !important;
    }
}

/* ==========================================================================
   WYSIWYG "Xem thêm" / "Thu gọn" Collapse Feature
   ========================================================================== */

.xc-wysiwyg {transition: max-height 0.5s ease-in-out !important;
}

.xc-wysiwyg.is-collapsed {max-height: 450px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Fading gradient overlay at the bottom of the collapsed block */
.xc-wysiwyg.is-collapsed::after {content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 120px !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease-in-out !important;
    z-index: 2 !important;
}

.xc-wysiwyg.is-expanded {max-height: 5000px !important; /* Extremely high limit to allow transition to full height */
    transition: max-height 0.8s ease-in-out !important;
}

/* Hide gradient overlay when expanded */
.xc-wysiwyg.is-expanded::after {display: none !important;
}

/* Toggle Button Wrapper and Buttons */
.xc-wysiwyg-toggle-btn-wrapper {text-align: center !important;
    width: 100% !important;
    margin-top: 15px !important;
}

.xc-wysiwyg-toggle-btn {display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 20px auto 0 !important;
    padding: 10px 30px !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.052rem !important;
    color: #0b437a !important;
    border: 1px solid #0b437a !important;
    background-color: #fff !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-wysiwyg-toggle-btn:hover {background-color: #0b437a !important;
    color: #fff !important;
}

/* Dynamic CSS embedded SVG icon arrows */
.xc-wysiwyg-toggle-btn::after {content: '' !important;
    display: inline-block !important;
    width: 12px !important;
    height: 8px !important;
    margin-left: 8px !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    transition: transform 0.4s ease-in-out !important;
}

.xc-wysiwyg-toggle-btn.btn-collapsed::after {background-image: url("data:image/svg+xml, %3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230B437A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.xc-wysiwyg-toggle-btn.btn-collapsed:hover::after {background-image: url("data:image/svg+xml, %3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.xc-wysiwyg-toggle-btn.btn-expanded::after {background-image: url("data:image/svg+xml, %3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 6.5L6 1.5L1 6.5' stroke='%230B437A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.xc-wysiwyg-toggle-btn.btn-expanded:hover::after {background-image: url("data:image/svg+xml, %3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 6.5L6 1.5L1 6.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   Location Section Background Override
   ========================================================================== */
.xc-section.xc-section--location {background: none !important;
    background-color: transparent !important;
}

/* ==========================================================================
   Subdivision Section Left Alignment ("Căn trái")
   ========================================================================== */
#section-subdivision {text-align: left !important;
}

#section-subdivision .xc-section__title {text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ==========================================================================
   Home Section 6 (Lawyers Team) - dev site active sections
   ========================================================================== */

/* 1. Main Header & Background Section */
.xc-home-staff-main {margin-top: 7.96875rem !important;
    position: relative !important;
    padding-top: 6rem !important;
    padding-bottom: 12rem !important; /* Leave bottom breathing room for founder card overlap */
    overflow: visible !important;
}

.xc-home-staff-main .section-bg {height: 100% !important;
    min-height: 34rem !important;
    overflow: visible !important;
}

.xc-home-staff-main .section-bg img.bg {width: 100% !important;
    height: 100% !important;
    min-height: 34rem !important;
    object-fit: cover !important;
}

.xc-home-staff-main .section-content {margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Make top row much wider to prevent text wrapping and vertical cut-offs */
.xc-home-staff-main > .section-content > .row {max-width: 1420px !important;
    width: 100% !important;
}

.xc-home-staff-main h2 {font-family: 'Noto Serif', serif !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    font-size: 3.646rem !important;
    margin-bottom: 0 !important;
}

.xc-home-staff-main p {font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.5625rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
    margin-bottom: 0 !important;
}

/* 2. Highlighted VIP Founder Card Section */
.box-luat-su-main {position: relative !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 480px !important; /* Correct width to match original site card scale */
}

.box-luat-su-main .box-image {width: 100% !important;
    height: fit-content !important;
    background: linear-gradient(270deg, #F0D5A5 0%, #9F7C4A 50.55%, #F5DBB1 100%) !important;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    margin-bottom: 1.25rem !important;
    position: relative !important;
    border-radius: 10px !important;
    overflow: visible !important;
}

.box-luat-su-main .box-image, .box-luat-su-main .box-image > div {overflow: visible !important;
    height: auto !important;
}

.box-luat-su-main .box-image > div {width: 100% !important;
    margin-top: -3.5rem !important; /* Scale crop frame upwards exactly like original site */
    padding: 0 2.833rem !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
}

.box-luat-su-main .box-image > div img {width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 0 0 10px 10px !important;
}

/* Pseudo-elements for the golden background SVG pattern overlay */
.box-luat-su-main .box-image::before, .box-luat-su-main .box-image::after {content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('assets/images/graphic_lawyers_0.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 22rem !important;
    opacity: 0.2 !important;
    transition: 0.4s all !important;
    z-index: 1 !important;
}

.box-luat-su-main:hover .box-image::before, .box-luat-su-main:hover .box-image::after {opacity: 1 !important;
}

.box-luat-su-main .box-text h4 {font-family: 'Noto Serif', serif !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #0b437a !important;
    font-size: 2.083rem !important;
    margin-bottom: 0.4rem !important;
    text-transform: none !important;
}

.box-luat-su-main .box-text p {font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.9375rem !important;
    color: #333 !important;
    margin-bottom: 0 !important;
}

/* 3. Slide Lawyers Team Section */
.box-staff {position: relative !important;
    width: 100% !important;
}

.box-staff .box-image {margin-bottom: 0.833rem !important;
    background: #88889C !important;
    display: flex !important;
    align-items: flex-start !important; /* Align from the top to prevent faces from being cut off */
    justify-content: center !important;
    height: 18rem !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}

.box-staff .box-image img {object-fit: cover !important; /* Use cover to fill container completely, matching original site */
    object-position: top center !important; /* Position image from the top */
    height: 100% !important;
    width: 100% !important;
    transition: transform 0.4s ease-in-out !important;
}

.box-staff:hover .box-image img {transform: scale(1.05) !important;
}

.box-staff .box-text h4 {font-family: 'Noto Serif', serif !important;
    font-weight: 500 !important;
    font-size: 1.302rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    color: #0b437a !important;
    text-transform: none !important;
}

.box-staff .box-text p {font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.833rem !important;
    line-height: 1.4 !important;
    color: #333 !important;
    margin-bottom: 0 !important;
}

/* Flickity Row Slider Navigation & Adjustment Styles */
.xc-home-staff {overflow: hidden !important;
}

.xc-home-staff .flickity-viewport {overflow: visible !important;
}

.xc-home-staff > .section-content > .row, .row-slider-image-box {max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8.5rem !important; /* Slide peek: 8.5rem padding cuts off first/last slides by exactly 50% at screen edges */
    padding-right: 8.5rem !important;
    box-sizing: border-box !important;
}

/* Lock slide dimensions to perfectly match original website's 293px widths */
.xc-home-staff > .section-content > .row .col, .row-slider-image-box .col {width: 293px !important;
    max-width: 293px !important;
    flex: 0 0 293px !important;
    margin-right: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.xc-home-staff > .section-content > .row .flickity-page-dots, .row-slider-image-box .flickity-page-dots {display: none !important; /* Hide pagination dots by default */
}

/* Hide next/previous buttons completely as requested */
.xc-home-staff .flickity-prev-next-button, .row-slider-image-box .flickity-prev-next-button {display: none !important;
}

/* Adjust colors and alignment of arrow icons inside buttons */
.xc-home-staff > .section-content > .row .flickity-button-icon, .row-slider-image-box .flickity-button-icon {fill: #0b437a !important;
    width: 30% !important;
    height: 30% !important;
}

/* Responsive Overrides */
@media (max-width: 1199px) {.xc-home-staff-main {margin-top: 4rem !important;
        padding-top: 4rem !important;
        padding-bottom: 10rem !important;
    }
    
    .xc-home-staff-main .section-bg {min-height: 26rem !important;
    }

    .xc-home-staff-main .section-bg img.bg {height: 100% !important;
        min-height: 26rem !important;
    }
    
    .xc-home-staff-main h2 {font-size: 2.708rem !important;
    }
    
    .xc-home-staff-main p {font-size: 1.2rem !important;
    }
    
    .box-luat-su-main {max-width: 400px !important;
    }
    
    .box-luat-su-main .box-image::before, .box-luat-su-main .box-image::after {background-size: 20rem !important;
    }

    .box-luat-su-main .box-text h4 {font-size: 1.8rem !important;
    }
    
    .box-staff .box-text h4 {font-size: 1.2rem !important;
    }
}

@media (max-width: 911px) {.xc-home-staff-main {padding-top: 3rem !important;
        padding-bottom: 8rem !important;
    }

    .xc-home-staff-main .section-bg {min-height: 22rem !important;
    }

    .xc-home-staff-main .section-bg img.bg {height: 100% !important;
        min-height: 22rem !important;
    }
    
    .xc-home-staff-main h2 {font-size: 2.2rem !important;
        text-align: center !important;
    }
    
    .xc-home-staff-main p {font-size: 1.1rem !important;
        text-align: center !important;
    }
    
    .box-luat-su-main {max-width: 360px !important;
    }
    
    .box-luat-su-main .box-image::before, .box-luat-su-main .box-image::after {background-size: 16rem !important;
    }

    .box-luat-su-main .box-text h4 {font-size: 1.5rem !important;
    }
    
    .box-staff .box-text h4 {font-size: 1.102rem !important;
    }
}

@media (max-width: 767px) {.xc-home-staff-main {margin-top: 2rem !important;
        padding-top: 2.5rem !important;
        padding-bottom: 6rem !important;
    }
    
    .xc-home-staff-main .section-bg {min-height: 20rem !important;
    }

    .xc-home-staff-main .section-bg img.bg {height: 100% !important;
        min-height: 20rem !important;
    }
    
    .xc-home-staff-main h2 {font-size: 1.8rem !important;
        text-align: center !important;
    }
    
    .xc-home-staff-main p {font-size: 1rem !important;
        text-align: center !important;
    }
    
    .box-luat-su-main {max-width: 320px !important;
    }
    
    .box-luat-su-main .box-image::before, .box-luat-su-main .box-image::after {background-size: 12rem !important;
    }
    
    .box-luat-su-main .box-image > div {margin-top: -2.5rem !important;
        padding: 0 1.5rem !important;
    }

    .box-luat-su-main .box-text h4 {font-size: 1.3rem !important;
    }
    
    .box-staff {padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .box-staff .box-text h4 {font-size: 1.1rem !important;
    }
    
    .box-staff .box-text p {font-size: 0.85rem !important;
    }
    
    /* Lock mobile slide column widths and gaps */
    .xc-home-staff > .section-content > .row .col, .row-slider-image-box .col {width: 260px !important;
        max-width: 260px !important;
        flex: 0 0 260px !important;
        margin-right: 15px !important;
    }
}

/* ==========================================================================
   Global Site Layout Width Override
   Sets container and row max-width to match the original website's 1778px wide grid.
   ========================================================================== */
.container, .container-width, .row {max-width: 1778px !important;
}

/* ==========================================================================
   Home Section 8 (Publications / Ấn phẩm) - .xc-home-publications
   ========================================================================== */
.xc-home-publications {margin-top: 6.771rem !important;
    padding: 6.927rem 0 5.208rem !important;
    position: relative !important;
    overflow: hidden !important;
}

.xc-home-publications .flickity-viewport {overflow: visible !important;
}

.xc-home-publications .section-bg img.bg {width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.xc-home-publications h2 {font-family: "Noto Serif", serif !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    font-size: 4.167rem !important;
    margin-bottom: 0.5em !important;
}

.xc-home-publications .row:first-child p {font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.5625rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
    margin-bottom: 0 !important;
}

/* Lock slide dimensions to perfectly match original website's 708px widths on desktop */
@media (min-width: 912px) {.xc-home-publications > .section-content > .row:nth-child(2) {width: 100% !important;
        max-width: 1778px !important; /* Not full width row, locks to standard container grid! */
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* Force crop at container edge */
    }

    .xc-home-publications > .section-content > .row:nth-child(2) .col {width: 708px !important;
        max-width: 708px !important;
        flex: 0 0 708px !important;
        margin-right: 42px !important; /* Spacing between slides matching the original */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 911px) {.xc-home-publications > .section-content > .row:nth-child(2) {padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .xc-home-publications > .section-content > .row:nth-child(2) .col {width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 20px !important;
    }
}

/* Hide Flickity page dots completely as requested */
.xc-home-publications .flickity-page-dots {display: none !important;
}

/* Horizontal Publication Cards */
.box-publications {display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: rgba(0, 103, 204, 0.2) !important; /* background: #0067CC33 */
    backdrop-filter: blur(20px) !important;
    border-radius: 10px !important;
    padding: 1.042rem 1.354rem !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s ease-in-out !important;
    border: none !important;
    text-align: left !important;
}

.box-publications .box-image {width: 50% !important;
    flex: 0 0 50% !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.box-publications .box-image > div {width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.box-publications .box-image img {width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    transition: transform 0.4s ease-in-out !important;
}

.box-publications:hover .box-image img {transform: scale(1.05) !important;
}

.box-publications .box-text {width: 50% !important;
    flex: 0 0 50% !important;
    padding: 0 !important;
    padding-left: 2.604rem !important; /* Matches pad 2.604rem of original site */
    text-align: left !important;
    background: transparent !important;
}

.box-publications .box-text-inner {padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.box-publications .date {font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.box-publications .title {font-family: "Noto Serif", serif !important;
    font-weight: 700 !important;
    font-size: 1.5625rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
    margin-top: 0 !important;
    margin-bottom: 0.8rem !important;
    transition: 0.4s all ease-in-out !important;
}

.box-publications .desc {font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
    margin-bottom: 1.667rem !important;
}

.box-publications:hover .title {color: #f0d5a5 !important; /* Gold text hover */
}

/* Custom Circular White SVG Arrow Button replacing standard "Tải về" button */
.box-publications .button {margin-top: 1.5rem !important; /* Spacing from description */
    margin-left: auto !important; /* Align to the right side of the card */
    align-self: flex-end !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-right: 0 !important;
    width: 59px !important;
    height: 59px !important;
    border-radius: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: transparent !important;
    overflow: hidden !important;
    position: relative !important;
}

.box-publications .button span {display: none !important; /* Hide text */
}

.box-publications .button::before {content: '' !important;
    display: block !important;
    width: 59px !important;
    height: 59px !important;
    background-image: url("data:image/svg+xml, %3Csvg width='59' height='59' viewBox='0 0 59 59' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='57' height='57' rx='28.5' stroke='white' stroke-width='0.5'%3E%3C/rect%3E%3Cpath d='M22 37L37 22' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M24.8125 22H37V34.1875' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.4s ease-in-out !important;
}

.box-publications .button:hover::before {transform: rotate(45deg) !important;
}

/* Publications Responsive Overrides */
@media (max-width: 1199px) {.xc-home-publications {margin-top: 4rem !important;
        padding: 4rem 0 !important;
    }
    
    .xc-home-publications h2 {font-size: 3.8rem !important;
    }
    
    .xc-home-publications .row:first-child p {font-size: 1.3rem !important;
    }
    
    .box-publications .box-text {padding-left: 1.5rem !important;
    }
    
    .box-publications .button {width: 45px !important;
        height: 45px !important;
        margin-top: 1rem !important;
    }
    
    .box-publications .button::before {width: 45px !important;
        height: 45px !important;
    }
    
    .box-publications .title {font-size: 1.3rem !important;
    }
    
    .desc_30 {font-size: 1.2rem !important;
    }
}

@media (max-width: 911px) {.xc-home-publications h2 {font-size: 2.8rem !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }
    
    .xc-home-publications .row:first-child p {font-size: 1rem !important;
        text-align: center !important;
    }
    
    .xc-home-publications .row:first-child .col {padding-bottom: 0.625rem !important;
    }
    
    .desc_30 {font-size: 1rem !important;
    }
}

@media (max-width: 767px) {.box-publications {flex-direction: column !important;
        padding: 1rem !important;
    }
    
    .box-publications .box-image {width: 100% !important;
        flex: 0 0 auto !important;
        height: 15rem !important;
        margin-bottom: 1rem !important;
    }
    
    .box-publications .box-text {width: 100% !important;
        flex: 0 0 auto !important;
        padding-left: 0 !important;
    }
    
    .box-publications .desc {margin-bottom: 0.8rem !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 5 !important;
    }
}

/* ==========================================================================
   Home Section 9 (Success Stories / Câu chuyện thành công) - .xc-home-story
   ========================================================================== */

.xc-home-story{
    margin-top: 0 !important;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: transparent !important;
}

/* Force layout grid to match standard 1778px grid container */
.xc-home-story > .section-content > .row{
    max-width: 1778px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Header Columns Overrides to match 33% / 58% columns split */
@media screen and (min-width: 850px) {
    .xc-home-story > .section-content > .row:first-child > .col:first-child{
        flex-basis: 33.3333333333% !important;
        max-width: 33.3333333333% !important;
    }
    .xc-home-story > .section-content > .row:first-child > .col:nth-child(2){
        flex-basis: 58.3333333333% !important;
        max-width: 58.3333333333% !important;
    }
}

.xc-home-story h2{
    font-family: "Noto Serif", serif !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #0b437a !important;
    font-size: 5rem !important;
    margin-bottom: 1.5rem !important;
    text-transform: none !important;
}

.xc-home-story .row:first-child p{
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.375rem !important;
    line-height: 1.41 !important;
    color: #333 !important;
    margin-bottom: 2rem !important;
}

/* Styled Primary Action Buttons */
.xc-home-story .row:first-child .button,
.xc-home-story .row:first-child a.button{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    border: 1px solid #0b437a !important;
    border-radius: 5px !important;
    padding: 0.55rem 1.2rem 0.65rem !important;
    color: #0b437a !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    text-transform: none !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-home-story .row:first-child .button:hover,
.xc-home-story .row:first-child a.button:hover{
    background-color: #0b437a !important;
    color: #fff !important;
    border-color: #0b437a !important;
}

/* Arrow SVG element mockup inside the button via ::after on hover or text padding */
.xc-home-story .row:first-child .button span,
.xc-home-story .row:first-child a.button span{
    transform: translateX(0.625rem) !important;
    transition: all 0.4s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
}

.xc-home-story .row:first-child .button span::after,
.xc-home-story .row:first-child a.button span::after{
    content: '' !important;
    display: inline-block !important;
    width: 25px !important;
    height: 10px !important;
    margin-left: 8px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='10' viewBox='0 0 25 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.25H23.5L14 0.75' stroke='%230B437A' stroke-width='1'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    opacity: 0 !important;
    transform: translateX(-0.833rem) !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-home-story .row:first-child .button:hover span,
.xc-home-story .row:first-child a.button:hover span{
    transform: translateX(0) !important;
}

.xc-home-story .row:first-child .button:hover span::after,
.xc-home-story .row:first-child a.button:hover span::after{
    opacity: 1 !important;
    transform: translateX(0) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='10' viewBox='0 0 25 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.25H23.5L14 0.75' stroke='white' stroke-width='1'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* 2. Carousel row styling */
.xc-home-story .flickity-viewport{
    overflow: visible !important;
}

.xc-home-story > .section-content > .row:nth-child(2){
    width: 100% !important;
    max-width: 1778px !important; /* Locks to standard container grid width instead of screen edge */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 4.583rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Force crop at container edge */
}

/* Success Stories cell dimensions (Mimicking Swiper slidesPerView: 2.3) */
.xc-home-story .row-slider .col{
    width: calc((100% - 80.6px) / 2.3) !important;
    max-width: calc((100% - 80.6px) / 2.3) !important;
    flex: 0 0 calc((100% - 80.6px) / 2.3) !important;
    margin-right: 62px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Slider Pagination dots aligned left (dot left) */
.xc-home-story .flickity-page-dots{
    display: flex !important;
    justify-content: flex-start !important; /* Align dots to the left side */
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5rem 0 0 0 !important;
    position: static !important;
}

.xc-home-story .flickity-page-dots .dot{
    width: 0.833rem !important;
    height: 0.833rem !important;
    background: transparent !important;
    border: 1px solid #0b437a !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    margin: 0 8px 0 0 !important; /* Spacing between dots */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.xc-home-story .flickity-page-dots .dot.is-selected{
    background: #0b437a !important;
}

/* Hide Flickity navigation arrow buttons completely */
.xc-home-story .flickity-prev-next-button{
    display: none !important;
}

/* 3. Horizontal post card transform */
.xc-home-story .box-blog-post{
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    gap: 0.417rem !important;
}

/* Text on LEFT, Image on RIGHT */
.xc-home-story .box-blog-post .box-text{
    order: 1 !important;
    width: 60% !important;
    flex: 0 0 60% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 2.5rem !important;
    text-align: left !important;
    background: transparent !important;
    border: 1px solid #0B437A !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    transition: border-color 0.4s ease-in-out !important;
    position: relative !important;
}

/* Make .box-text-inner flex column to push author+button to bottom */
.xc-home-story .box-blog-post .box-text-inner{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.xc-home-story .box-blog-post .box-image{
    order: 2 !important;
    width: 40% !important;
    flex: 0 0 40% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.xc-home-story .box-blog-post .image-cover{
    padding-top: 0 !important;
    height: 100% !important;
}

.xc-home-story .box-blog-post .image-cover img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease-in-out !important;
}

.xc-home-story .box-blog-post:hover .image-cover img{
    transform: scale(1.05) !important;
}

/* Hide standard publish date badge */
.xc-home-story .post-date{
    display: none !important;
}

/* Hide standard blog category, divider, comments, and Flatsome readmore button */
.xc-home-story .box-blog-post .box-text-inner .cat-links,
.xc-home-story .box-blog-post .box-text-inner .cat-label,
.xc-home-story .box-blog-post .box-text-inner .is-divider,
.xc-home-story .box-blog-post .box-text-inner .from_the_blog_comments,
.xc-home-story .box-blog-post .box-text-inner > a.button{
    display: none !important;
}

/* Post Title — clamped to 3 lines */
.xc-home-story .box-blog-post .post-title{
    font-family: "Noto Serif", serif !important;
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    line-height: 1.45 !important;
    color: #0b437a !important;
    margin-top: 0 !important;
    margin-bottom: 0.8rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.xc-home-story .box-blog-post .post-title a{
    color: #0b437a !important;
    text-decoration: none !important;
}

/* Post excerpt — clamped to 3 lines */
.xc-home-story .box-blog-post .from_the_blog_excerpt{
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
    color: #4a4a4a !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ── Divider between excerpt and author ── */
.xc-home-story .xc-story-divider{
    border-top: 1px solid #BEBEBE !important;
    margin: 1rem 0 !important;
    flex-shrink: 0 !important;
    margin-top: auto !important; /* push divider + below to bottom */
}

/* ── Author Block (in flow) ── */
.xc-home-story .xc-story-author{
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-shrink: 0 !important;
    margin-bottom: 0.8rem !important;
}

.xc-home-story .xc-story-author__avatar{
    width: 2.96875rem !important;
    height: 2.96875rem !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex: 0 0 2.96875rem !important;
    background: #6A6D74 !important;
}

.xc-home-story .xc-story-author__avatar img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
}

.xc-home-story .xc-story-author__info{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.xc-home-story .xc-story-author__role{
    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #666 !important;
    margin-bottom: 0.3rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.xc-home-story .xc-story-author__name{
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
    color: #333 !important;
}

/* ── "Xem chi tiết" Button (in flow) ── */
.xc-home-story .xc-story-btn{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    align-self: flex-start !important;
    margin-top: 1rem !important;
    background-color: transparent !important;
    border: 1px solid #0b437a !important;
    border-radius: 5px !important;
    padding: 0.55rem 0.65rem 0.65rem !important;
    color: #0b437a !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    transition: all 0.4s ease-in-out !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.xc-home-story .xc-story-btn:hover{
    background-color: #0b437a !important;
    color: #fff !important;
    border-color: #0b437a !important;
}

.xc-home-story .xc-story-btn__text{
    transform: translateX(0.625rem) !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-home-story .xc-story-btn__icon{
    display: flex !important;
    align-items: center !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    opacity: 0 !important;
    transform: translateX(-0.833rem) !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-home-story .xc-story-btn__icon svg{
    width: 100% !important;
    height: 100% !important;
}

.xc-home-story .xc-story-btn:hover .xc-story-btn__text{
    transform: translateX(0) !important;
}

.xc-home-story .xc-story-btn:hover .xc-story-btn__icon{
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Centering the section button on mobile */
@media (max-width: 767px) {
    .xc-home-story .row:first-child a.button{
        margin: 0 auto !important;
    }
}

/* Responsive Overrides */
@media (max-width: 1199px) {
    .xc-home-story{
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .xc-home-story h2{
        font-size: 2.708rem !important;
    }

    .xc-home-story .row:first-child p{
        font-size: 1.2rem !important;
    }

    .xc-home-story > .section-content > .row:nth-child(2){
        padding-top: 2rem !important;
    }

    .xc-home-story .row-slider .col{
        width: calc((100% - 20px) / 2) !important;
        max-width: calc((100% - 20px) / 2) !important;
        flex: 0 0 calc((100% - 20px) / 2) !important;
        margin-right: 20px !important;
    }

    .xc-home-story .box-blog-post .box-text{
        padding: 1.8rem !important;
    }

    .xc-home-story .box-blog-post .post-title{
        font-size: 1.125rem !important;
    }

    .xc-home-story .xc-story-author__name{
        font-size: 0.85rem !important;
    }

    .xc-home-story .xc-story-author__role{
        font-size: 0.75rem !important;
    }

    .xc-home-story .box-blog-post .from_the_blog_excerpt{
        font-size: 1rem !important;
    }
}

@media (max-width: 911px) {
    .xc-home-story{
        padding-top: 3rem !important;
    }

    .xc-home-story h2{
        font-size: 3.1rem !important;
    }

    .xc-home-story .row:first-child{
        justify-content: center !important;
    }

    .xc-home-story .row:first-child .col:first-child{
        text-align: center !important;
    }

    .xc-home-story .row:first-child p{
        text-align: center !important;
    }

    .xc-home-story .flickity-page-dots{
        justify-content: center !important;
    }

    .xc-home-story .box-blog-post{
        flex-direction: column !important;
        height: auto !important;
    }

    .xc-home-story .box-blog-post .box-text{
        width: 100% !important;
        flex: 0 0 auto !important;
        order: 1 !important;
    }

    .xc-home-story .box-blog-post .box-image{
        width: 100% !important;
        flex: 0 0 auto !important;
        order: 2 !important;
        height: 200px !important;
    }
}

@media (max-width: 767px) {
    .xc-home-story h2{
        font-size: 2.4rem !important;
    }

    .xc-home-story .row:first-child p{
        font-size: 1.2rem !important;
    }

    .xc-home-story .box-blog-post{
        gap: 1.3rem !important;
    }

    .xc-home-story .box-blog-post .box-text{
        padding: 2rem !important;
    }

    .xc-home-story .box-blog-post .box-image{
        display: none !important;
    }

    .xc-home-story > .section-content > .row:nth-child(2){
        padding-top: 0 !important;
    }

    .xc-home-story > .section-content > .row:nth-child(2) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .xc-home-story .row-slider .col{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-right: 0 !important;
    }
}
/* ==========================================================================
   Custom Post Type 'luat-su' (Single Lawyer Page) Styles
   ========================================================================== */

.single-luat-su .breadcrumb a {
    transition: color 0.2s ease;
}
.single-luat-su .breadcrumb a:hover {
    color: #0b437a !important;
}

/* 2-Column Header Banner */
.lawyer-portrait {
    transition: all 0.3s ease-in-out;
}
.lawyer-portrait:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 40px rgba(11, 67, 122, 0.15) !important;
}

/* Sticky Table of Contents */
.details_toc.custom::-webkit-scrollbar {
    width: 6px;
    border-radius: 5px;
}
.details_toc.custom::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.details_toc.custom::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}
.details_toc.custom::-webkit-scrollbar-thumb:hover {
    background: #0b437a;
}
.details_toc.custom li a {
    transition: all 0.2s ease;
    display: inline-block;
    padding: 4px 0;
}
.details_toc.custom li a:hover {
    color: #0b437a !important;
    font-weight: 600 !important;
    transform: translateX(4px);
}

/* Biography General Section */
.post_details_general {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01) !important;
}
.item_content_lawyers h2.heading_4 {
    font-family: 'Noto Serif', serif !important;
    font-size: 1.8rem !important;
    color: #0b437a !important;
    font-weight: 600 !important;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}
.item_content_lawyers p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: #334155 !important;
    margin-bottom: 20px;
}
.item_content_lawyers strong {
    color: #0b437a !important;
    font-weight: 600 !important;
}
.item_content_lawyers ul {
    margin-bottom: 25px;
    padding-left: 20px;
}
.item_content_lawyers li {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: #334155 !important;
    margin-bottom: 8px;
}

/* Related Lawyers Section Card styling */
.item_lawyers {
    transition: all 0.3s ease-in-out !important;
}
.item_lawyers:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(11, 67, 122, 0.08) !important;
    border-color: #0b437a !important;
}
.item_lawyers:hover .box_img img {
    transform: scale(1.05);
}
.item_lawyers .title {
    transition: color 0.2s ease;
}
.item_lawyers:hover .title {
    color: #0b437a !important;
}

/* Responsive Overrides */
@media (max-width: 767px) {
    .single-luat-su .entry-title {
        font-size: 2.2rem !important;
    }
    .post_details_general {
        padding: 25px !important;
    }
    .lawyer-portrait {
        max-width: 280px;
        margin: 0 auto;
    }
}

/* Custom entry-content padding overrides */
.entry-content {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Hide absolute-footer section */
.absolute-footer {
    display: none !important;
}

/* ==========================================================================
   Section: Đăng ký tư vấn 1:1 (.xc-footer-advisory)
   ========================================================================== */

.xc-footer-advisory {
    background-color: #00284E !important;
    padding-top: 2.396rem !important;
    padding-bottom: 2.396rem !important;
}

/* Row wrapper locking to standard width */
.xc-footer-advisory > .section-content > .row {
    max-width: 1778px !important;
}

/* Row Columns Overrides */
@media screen and (min-width: 850px) {
    .xc-footer-advisory > .section-content > .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .xc-footer-advisory #col-398504356 {
        flex-basis: 40% !important;
        max-width: 40% !important;
        padding-bottom: 0 !important;
    }
    .xc-footer-advisory #col-1964276493 {
        flex-basis: 60% !important;
        max-width: 60% !important;
        padding-bottom: 0 !important;
    }
}

/* Typography styles matching target */
.xc-footer-advisory h5 {
    font-family: "Noto Sans Display", sans-serif !important;
    font-weight: 500 !important;
    font-size: 2.865rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
    margin-top: 0 !important;
    margin-bottom: 0.729rem !important;
}

.xc-footer-advisory p {
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.042rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
    margin: 0 !important;
}

/* BEM: xc-form-email */
.xc-form-email {
    width: 100%;
}

.xc-form-email__inner {
    position: relative !important;
    display: block;
    width: 100%;
}

.xc-form-email__input {
    min-width: unset !important;
    width: 100% !important;
    height: 3.125rem !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.833rem !important;
    line-height: 1.4 !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    padding: 0 4.5rem 0 1.500rem !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border-radius: 5.208rem !important;
    -webkit-border-radius: 5.208rem !important;
    -moz-border-radius: 5.208rem !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-form-email__input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}

.xc-form-email__input:focus {
    border-color: #c5a059 !important;
}

.xc-form-email__submit-wrapper {
    width: 2.4rem !important;
    height: 2.4rem !important;
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    background: #fff !important;
    border-radius: 5.208rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: .4s all !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

.xc-form-email__submit-wrapper:hover {
    background: #c5a059 !important;
}

.xc-form-email__submit-wrapper:hover .xc-form-email__icon path {
    stroke: #fff !important;
}

.xc-form-email__button-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.xc-form-email__submit {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    z-index: 3 !important;
    cursor: pointer !important;
}

.xc-form-email__icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    width: 25px !important;
    height: 25px !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-form-email__icon path {
    stroke: #0b437a !important;
    transition: all 0.4s ease-in-out !important;
}

/* Contact Form 7 native spinner wrapper absolute position overlay */
.xc-form-email .wpcf7-spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-100%, -50%) !important;
    margin: 0 !important;
    z-index: 4 !important;
}

.xc-form-email .wpcf7-response-output {
    color: #fff !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 911px) {
    .xc-footer-advisory h5 {
        font-size: 1.8rem !important;
    }
    .xc-footer-advisory p {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 767px) {
    .xc-footer-advisory > .section-content > .row {
        flex-direction: column !important;
    }
    .xc-footer-advisory #col-398504356 {
        text-align: center !important;
        margin-bottom: 2rem !important;
    }
    .xc-footer-advisory h5 {
        font-size: 2.2rem !important;
    }
    .xc-footer-advisory p {
        font-size: 1rem !important;
    }
    .xc-footer-advisory #col-1964276493 {
        width: 100% !important;
        max-width: 100% !important;
    }
    .xc-form-email__input {
        height: 3.5rem !important;
        font-size: 1.1rem !important;
    }
}

/* ==========================================================================
   Section: Footer Contact (.xc-footer-contact)
   ========================================================================== */

.xc-footer-contact {
    position: relative !important;
    background-color: #00284E !important;
    padding-top: 3.646rem !important;
    padding-bottom: 3.646rem !important;
}

/* Background image overlay tint */
.xc-footer-contact .section-bg {
    opacity: 1 !important;
}
.xc-footer-contact .section-bg::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 40, 78, 0.85) !important;
    z-index: 1 !important;
}
.xc-footer-contact .section-bg img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Row 1: Slogan container spacing & border */
.xc-footer-contact > .section-content > .row:first-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 3rem !important;
    max-width: 1778px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Row 2: Columns wrapper locking to standard width */
.xc-footer-contact > .section-content > .row:nth-of-type(2) {
    max-width: 1778px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media screen and (min-width: 850px) {
    .xc-footer-contact > .section-content > .row:nth-of-type(2) > .col {
        padding-right: 2rem !important;
    }
    .xc-footer-contact > .section-content > .row:nth-of-type(2) > .col:first-child {
        padding-right: 7.8125rem !important;
    }
    .xc-footer-contact > .section-content > .row:nth-of-type(2) > .col:last-child {
        padding-right: 0 !important;
    }
}

/* Lead slogan styling */
.xc-footer-contact .lead {
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 2.34375rem !important;
    line-height: 1.5 !important;
    color: #fff !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}

/* Column titles */
.xc-footer-contact h5.widget-title {
    font-family: "Noto Serif", sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.823rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
    margin-top: 0 !important;
    margin-bottom: 1.667rem !important;
    position: relative !important;
}

.xc-footer-contact h5.widget-title::after {
    content: '' !important;
    display: block !important;
    width: 3rem !important;
    height: 1px !important;
    background: #EBEBEB !important;
    margin-top: 0.625rem !important;
}

/* Body and link styling */
.xc-footer-contact p,
.xc-footer-contact .content_info,
.xc-footer-contact .ux-menu-link__text {
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.146rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
}

.xc-footer-contact p strong {
    font-weight: 700 !important;
}

.xc-footer-contact p {
    margin-bottom: 0.8rem !important;
}

.xc-footer-contact p:last-child {
    margin-bottom: 0 !important;
}

/* Flatsome CPT Menu link styles */
.xc-footer-contact .ux-menu {
    gap: 0 !important;
}

.xc-footer-contact .ux-menu-link {
    margin: 0 !important;
    padding: 0 !important;
}

.xc-footer-contact .ux-menu-link:not(:last-child) {
    margin-bottom: 0.8rem !important;
}

.xc-footer-contact .ux-menu-link a {
    color: #fff !important;
    font-weight: 400 !important;
    font-size: 1.146rem !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    background: transparent !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-footer-contact .ux-menu-link a:hover {
    color: #c5a059 !important;
    padding-left: 4px !important;
}

/* Circular Social Icons elements */
.xc-footer-contact .social-icons a,
.xc-footer-contact .follow_menu a {
    width: 2.396rem !important;
    height: 2.396rem !important;
    border-radius: 5.208rem !important;
    border: 1px solid #FFF !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    color: #fff !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-footer-contact .social-icons a:hover,
.xc-footer-contact .follow_menu a:hover {
    transform: scale(0.9) !important;
    background: #c5a059 !important;
    border-color: #c5a059 !important;
}

.xc-footer-contact .social-icons a img,
.xc-footer-contact .follow_menu a img {
    max-height: 1.1rem !important;
    width: auto !important;
}

.xc-footer-contact .social-icons a i,
.xc-footer-contact .follow_menu a i {
    color: #fff !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.xc-footer-contact .social-icons a:hover i,
.xc-footer-contact .follow_menu a:hover i {
    color: #fff !important;
}

/* Responsive Custom Adjustments */
@media (max-width: 1199px) {
    .xc-footer-contact .lead {
        font-size: 2rem !important;
    }
    .xc-footer-contact p,
    .xc-footer-contact .content_info,
    .xc-footer-contact .ux-menu-link a {
        font-size: 1.3rem !important;
        line-height: 1.55 !important;
    }
    .xc-footer-contact > .section-content > .row:nth-of-type(2) > .col:first-child {
        padding-right: 2rem !important;
    }
}

@media (max-width: 911px) {
    .xc-footer-contact .lead {
        font-size: 1.2rem !important;
        padding: 0 3rem !important;
    }
    .xc-footer-contact p,
    .xc-footer-contact .content_info,
    .xc-footer-contact .ux-menu-link a {
        font-size: 1rem !important;
    }
    .xc-footer-contact h5.widget-title {
        font-size: 1.3rem !important;
    }
    .xc-footer-contact .social-icons a,
    .xc-footer-contact .follow_menu a {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}




@media (max-width: 767px) {
    .xc-footer-contact .lead {
        padding: 0 !important;
    }
    .xc-footer-contact > .section-content > .row:nth-of-type(2) > .col {
        padding-right: 1rem !important;
        margin-bottom: 2rem !important;
    }
}

/* ==========================================================================
   Section: Privacy Menu Horizontal Align (.menu-privacy)
   ========================================================================== */

/* Row 3: Copyright and Privacy Menu alignment & top border */
.xc-footer-contact > .section-content > .row:nth-of-type(3) {
    border-top: 1px solid #FFFFFF26 !important;
    padding-top: 1.302rem !important;
    margin-top: 1.4rem !important;
    max-width: 1778px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
}

/* General Footer Links */
.xc-footer-contact a {
    font-weight: 400 !important;
    font-size: 1.042rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
    font-style: normal !important;
    text-decoration: none !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-footer-contact a:hover,
.xc-footer-contact .ux-menu-link a:hover {
    color: #bfa67b !important;
    font-style: normal !important;
    padding-left: 0 !important;
    transform: none !important;
}

/* Specific Copyright text */
.xc-footer-contact .copyright {
    font-family: "Inter", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 23px !important;
    color: rgb(255, 255, 255) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force Right Alignment on Row 3's 2nd Column */
.xc-footer-contact > .section-content > .row:nth-of-type(3) .col:nth-child(2) {
    display: flex !important;
    justify-content: flex-end !important;
}

.xc-footer-contact > .section-content > .row:nth-of-type(3) .col:nth-child(2) .col-inner {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

/* Privacy Menu / Link Page (Bulletproof Inline-Block Layout) */
.xc-footer-contact .stack.menu-privacy,
.xc-footer-contact .ux-menu.menu-privacy,
.xc-footer-contact .menu-privacy {
    display: block !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

.xc-footer-contact .menu-privacy.stack-col > .ux-menu-link,
.xc-footer-contact .menu-privacy .ux-menu-link,
.xc-footer-contact .menu-privacy .ux-menu-link.flex {
    display: inline-block !important;
    width: auto !important;
    margin: 0 0 0 2rem !important;
    padding: 0 !important;
    vertical-align: middle !important;
    float: none !important;
    max-width: none !important;
}

.xc-footer-contact .menu-privacy .ux-menu-link:first-child {
    margin-left: 0 !important;
}

/* Override Flatsome margins */
.xc-footer-contact .menu-privacy.stack-col > .ux-menu-link + .ux-menu-link,
.xc-footer-contact .menu-privacy .ux-menu-link + .ux-menu-link {
    margin-top: 0 !important;
}

.menu-privacy .ux-menu-link a {
    font-family: "Inter", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 23px !important;
    color: rgb(255, 255, 255) !important;
    padding: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.menu-privacy .ux-menu-link a:hover {
    color: #bfa67b !important;
}

/* Responsive Rules mapped from original */
@media (max-width: 1199px) {
    .xc-footer-contact a {
        font-size: 1.3rem !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 911px) {
    .xc-footer-contact a {
        font-size: 1rem !important;
    }
    .xc-footer-contact .stack.menu-privacy,
    .xc-footer-contact .ux-menu.menu-privacy,
    .xc-footer-contact .menu-privacy,
    .xc-footer-contact .copyright {
        text-align: center !important;
        justify-content: center !important;
        float: none !important;
        margin: 0 auto !important;
    }
    .xc-footer-contact > .section-content > .row:nth-of-type(3) .col:nth-child(1) {
        padding-bottom: 0.6rem !important;
    }
}

@media (max-width: 767px) {
    .xc-footer-contact > .section-content > .row:nth-of-type(3) .col:nth-child(1) {
        padding-top: 0.4rem !important;
        padding-bottom: 1rem !important;
        margin-top: 1rem !important;
    }
    .xc-footer-contact .menu-privacy .ux-menu-link a,
    .xc-footer-contact .copyright {
        font-size: 1rem !important;
    }
    .xc-footer-contact .menu-privacy.stack-col > .ux-menu-link,
    .xc-footer-contact .menu-privacy .ux-menu-link {
        display: block !important;
        margin: 0.2rem 0 !important;
    }
    .xc-footer-contact > .section-content > .row:nth-of-type(3) {
        padding-bottom: 5rem !important;
    }
}


/* ==========================================================================
   Section: Floating Contact Buttons (.xc-float-contact)
   ========================================================================== */

/* Wrapper container - fixed to right edge, vertically centered */
.xc-float-contact {
    position: fixed;
    top: 50%;
    right: 1.7rem;
    transform: translateY(-50%);
    z-index: 9999;
}

.xc-float-contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each contact item row */
.xc-float-contact__item {
    position: relative;
}

.xc-float-contact__item:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Circular icon button */
.xc-float-contact__item > a {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #0b437a;
    border-radius: 50%;
    z-index: 1;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
}

/* First item (Gmail) uses gold accent color */
.xc-float-contact__item:first-child > a {
    background-color: #c5a059;
}

/* Icon image inside button */
.xc-float-contact__item > a img {
    max-width: 50%;
    max-height: 50%;
    width: auto;
    height: auto;
    z-index: 1;
    transition: all 0.4s ease-in-out;
}

/* Pulse ring - always rendered but hidden, animated on hover */
.xc-float-contact__item > a::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #0b437a;
    border-radius: 50%;
    z-index: 0;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
}

.xc-float-contact__item:first-child > a::before {
    background-color: #c5a059;
}

/* On hover: trigger the pulse animation */
.xc-float-contact__item:hover > a::before {
    animation: xc-pulse-border 1000ms ease-out infinite;
}

@keyframes xc-pulse-border {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Text label container - hidden by default, slides in from right on hover */
.xc-float-contact__item > div {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
    padding-right: 1rem;
    pointer-events: none;
    opacity: 0;
    transition: 0.5s all;
}

/* On hover: show the text label */
.xc-float-contact__item:hover > div {
    opacity: 1;
    pointer-events: unset;
}

/* Text label pill background */
.xc-float-contact__item > div ul {
    display: flex;
    background-color: #0b437a;
    border-radius: 5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.xc-float-contact__item:first-child > div ul {
    background-color: #c5a059;
}

.xc-float-contact__item > div ul li {
    min-width: max-content;
    margin: 0;
}

/* Text label link */
.xc-float-contact__item > div ul a {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2rem;
    color: #fff;
    text-align: center;
    background: transparent;
    padding: 0.4rem 1rem;
    transition: 0.5s all;
    text-decoration: none;
    white-space: nowrap;
}

/* ===== Mobile: bottom bar layout ===== */
@media (max-width: 767px) {
    .xc-float-contact {
        width: 100%;
        top: unset;
        right: unset;
        bottom: 0;
        left: 0;
        transform: unset;
        background: #c5a059;
        padding: 0.5rem 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    }

    .xc-float-contact__list {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .xc-float-contact__item {
        margin-bottom: 0 !important;
        flex: 1;
        text-align: center;
    }

    .xc-float-contact__item > a {
        background: none !important;
        margin: 0 auto;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .xc-float-contact__item > a::before {
        display: none !important;
    }

    .xc-float-contact__item > a img {
        max-width: 100%;
        max-height: 100%;
        width: 2rem;
        height: auto;
    }

    .xc-float-contact__item > div {
        position: unset;
        opacity: 1;
        padding-right: 0;
        transform: unset;
        pointer-events: unset;
    }

    .xc-float-contact__item > div ul,
    .xc-float-contact__item:first-child > div ul {
        background-color: transparent;
        display: block;
    }

    .xc-float-contact__item > div ul a {
        padding-bottom: 0;
        padding-top: 0;
        font-size: 0.75rem;
    }
}