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

/* Custom CSS goes here */
.entry-content {
    padding-bottom: 0;
    padding-top: 0;
}

/* XC Top Contact Section (BEM Style) */
.xc-top-contact {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.xc-top-contact__item {
    display: flex;
    align-items: center;
    padding: 14px 0;
}

.xc-top-contact__icon {
    vertical-align: middle;
    max-height: 35px;
    width: auto;
}

.xc-top-contact__content {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.xc-top-contact__content p {
    margin: 0;
    color: #333;
    line-height: 1.3;
}

.xc-top-contact__label {
    text-transform: uppercase;
    font-size: 11px;
}

.xc-top-contact__value {
    font-weight: 600;
}

.xc-top-contact__link {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.xc-top-contact__link:hover {
    color: #e23337;
}

@media screen and (max-width: 991px) {
    .xc-top-contact {
        justify-content: center;
        margin-top: 35px;
    }
}

/* Custom Next/Prev Buttons for Home Slider */
.xc-home-slider .flickity-prev-next-button {
    background: #ffffff !important;
    border-radius: 0 !important;
    width: 40px !important;
    height: 60px !important;
    top: 50% !important;
    margin-top: -30px !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    color: #333 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Remove default circle borders/backgrounds and adjust icon size */
.xc-home-slider .flickity-prev-next-button svg {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    fill: currentColor !important;
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
}

.xc-home-slider .flickity-prev-next-button .arrow {
    border: none !important;
    border-radius: 0 !important;
    fill: currentColor !important;
}

/* Position of buttons */
.xc-home-slider .flickity-prev-next-button.previous {
    left: -40px !important;
    transform: translateY(-50%) !important;
}

.xc-home-slider .flickity-prev-next-button.next {
    right: -40px !important;
    transform: translateY(-50%) !important;
}

/* Hover state of the slider - slide in buttons */
.xc-home-slider:hover .flickity-prev-next-button {
    opacity: 1 !important;
}

.xc-home-slider:hover .flickity-prev-next-button.previous {
    left: 0 !important;
}

.xc-home-slider:hover .flickity-prev-next-button.next {
    right: 0 !important;
}

/* Hover state of the button itself - change arrow color */
.xc-home-slider .flickity-prev-next-button:hover {
    color: #e23337 !important;
    background: #ffffff !important;
}

/* ==========================================================================
   XC Home About Us Section
   ========================================================================== */

/* Section wrapper */
.xc-home-about {
    padding: 50px 0 !important;
}

/* Banner Video aspect ratio and size (original 555x307 is ~55.3%) */
.xc-home-about .banner-video {
    padding-top: 55.3% !important;
    height: auto !important;
    overflow: visible !important;
    background-color: transparent !important;
    background: transparent !important;
}

.xc-home-about .banner-inner {
    overflow: visible !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* Rounded corners for the banner image background (border-radius 8px) */
.xc-home-about .banner-bg {
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: transparent !important;
    background: transparent !important;
}

.xc-home-about .banner-bg img {
    border-radius: 8px !important;
}

/* Video Play Button */
.xc-home-about .video-button-wrapper a.button.open-video {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    min-height: auto !important;
    min-width: auto !important;
    padding: 0 !important;
    padding-left: 5px !important; /* Visual offset to center play icon triangle */
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 100% !important;
    color: #e23337 !important;
    opacity: 0.8 !important;
    transition: all 0.5s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Outer glowing ring for Play Button */
.xc-home-about .video-button-wrapper a.button.open-video::before {
    content: "" !important;
    position: absolute !important;
    border-radius: 100% !important;
    background-color: #ffffff !important;
    opacity: 0.2 !important;
    width: 96px !important;
    height: 96px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Play Icon inside Button */
.xc-home-about .video-button-wrapper a.button.open-video i {
    color: #e23337 !important;
    font-size: 22px !important;
    margin: 0 !important;
    top: 0 !important;
    line-height: 1 !important;
}

/* Hover effect on Play Button */
.xc-home-about .video-button-wrapper a.button.open-video:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* Right Content Area */
.xc-home-about h2.title {
    margin: 20px 0 15px !important;
    color: #e23337 !important;
    font-weight: bold !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
}

.xc-home-about p {
    color: #555 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

/* Read More Button (btn-more) */
.xc-home-about .btn-more {
    display: inline-block !important;
    width: 150px !important;
    height: 45px !important;
    line-height: 45px !important;
    min-height: auto !important;
    padding: 0 !important;
    border: 1px #ebebeb solid !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    color: #fed25a !important;
    background: #e23337 !important;
    text-transform: none !important;
    text-align: center !important;
    margin: 20px 0 !important;
    transition: all 0.5s ease !important;
}

.xc-home-about .btn-more span {
    line-height: 43px !important; /* height - 2px border */
    color: inherit !important;
}

.xc-home-about .btn-more:hover {
    background: #e23337 !important;
    border-color: #e23337 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(226, 51, 55, 0.2) !important;
}

/* Responsive adjustments */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .xc-home-about h2.title {
        margin-top: 0px !important;
    }
    .xc-home-about p {
        margin-bottom: 15px !important;
    }
}

@media screen and (max-width: 767px) {
    .xc-home-about {
        text-align: center !important;
    }
}

/* ==========================================================================
   Global Section Title (xc-section-title)
   ========================================================================== */
.xc-section-title {
    text-align: center !important;
    margin-bottom: 50px !important;
}

.xc-section-title h2.section-title {
    justify-content: center !important;
    border: none !important;
    margin: 0 !important;
}

.xc-section-title h2.section-title b {
    display: none !important; /* Hide left/right lines from Flatsome default */
}

.xc-section-title h2.section-title .section-title-main {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #e23337 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* ==========================================================================
   XC Home Services Section
   ========================================================================== */

.xc-home-services {
    background: #f7f8f9 !important;
    padding: 50px 0 !important;
}

/* Force columns to have equal heights */
.xc-home-services .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

.xc-home-services .col {
    display: flex !important;
    flex-direction: column !important;
}

.xc-home-services .col-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}

/* Service box (card style) */
.xc-home-services .box-service {
    background: #ffffff !important;
    border: 1px solid #cacaca !important;
    padding: 15px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 140px !important; /* Minimum height for consistency */
    box-shadow: 0px 4px 40px rgba(255, 95, 35, 0.08) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Service image */
.xc-home-services .box-service .icon-box-img {
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    margin-right: 15px !important;
    padding: 0 !important;
}

.xc-home-services .box-service .icon-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Service title */
.xc-home-services .box-service h3 {
    font-size: 18px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    color: #111 !important;
    text-transform: none !important;
}

/* Service description */
.xc-home-services .box-service p {
    color: #707070 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* Hover rotation animation on image */
.xc-home-services .box-service:hover .icon-box-img img {
    animation: xc-collection-rotate 2s linear infinite !important;
}

@keyframes xc-collection-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Mobile responsive alignment */
@media (max-width: 767px) {
    .xc-home-services .box-service {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .xc-home-services .box-service .icon-box-img {
        margin-bottom: 15px !important;
        margin-right: 0 !important;
    }
    
    .xc-home-services .box-service .icon-box-text {
        padding-left: 0 !important;
    }
}

/* ==========================================================================
   XC Home Fields Section (Lĩnh vực hoạt động)
   ========================================================================== */

.xc-home-fields {
    padding: 50px 0 !important;
}

/* Make each box card rounded and hide overflow */
.xc-home-fields .box {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Make image square aspect ratio */
.xc-home-fields .image-cover {
    padding-top: 100% !important; /* Square 1:1 */
}

/* Semi-transparent dark overlay on image */
.xc-home-fields .box-image::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.35) !important;
    transition: background 0.5s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.xc-home-fields .box:hover .box-image::after {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* Hover zoom effect on image */
.xc-home-fields .box-image img {
    transition: transform 1s ease !important;
}

.xc-home-fields .box:hover .box-image img {
    transform: scale(1.1) !important;
}

/* Remove default Flatsome blog divider */
.xc-home-fields .is-divider {
    display: none !important;
}

/* Overlay text box inside the image */
.xc-home-fields .box-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 15px 20px !important;
    text-align: center !important;
    border-radius: 8px !important;
    width: auto !important;
    max-width: 90% !important;
    min-width: 70% !important;
    background: #e23337 !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
}

@media (max-width: 767px) {
    .xc-home-fields .box-text {
        padding: 12px 10px !important;
        min-width: 80% !important;
    }
}

/* Title links styling and color */
.xc-home-fields .post-title {
    margin: 0 !important;
    line-height: 1.5 !important;
}

.xc-home-fields .post-title a {
    color: #fed25a !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    display: block !important;
    letter-spacing: 0.5px !important;
}

@media (min-width: 768px) {
    .xc-home-fields .post-title a {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   XC Home Why Choose Us Section (Vì sao chọn chúng tôi)
   ========================================================================== */

.xc-home-why {
    padding: 50px 0 !important;
    background-color: #e23337 !important;
    background-image: url("assets/images/anh-ly-do.jpg") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #ffffff !important;
}

/* Ensure all nested text inside why is white */
.xc-home-why p,
.xc-home-why span,
.xc-home-why div,
.xc-home-why h2,
.xc-home-why .xc-section-title h2.section-title .section-title-main {
    color: #ffffff !important;
}

/* Standard BEM Counter Box */
.xc-why-counter {
    text-align: center !important;
    padding: 15px !important;
}

.xc-why-counter__number {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    font-family: Inter, sans-serif !important;
    display: block !important;
}

.xc-why-counter__label {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    display: block !important;
}

/* Fallback styling for direct p editor content */
.xc-home-why .col-inner p {
    text-align: center !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.xc-home-why .col-inner p span.count-up {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
}

@media (max-width: 767px) {
    .xc-why-counter__number,
    .xc-home-why .col-inner p span.count-up {
        font-size: 36px !important;
    }
    
    .xc-why-counter__label,
    .xc-home-why .col-inner p {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   XC Home FAQ & Blog Section (Hỏi đáp công chứng)
   ========================================================================== */

.xc-home-faq {
    padding-bottom: 30px !important;
}

/* Article card styling */
.xc-home-faq .box {
    border: 1px solid #e0e0e0 !important;
    background: #ffffff !important;
    border-radius: 0 !important; /* Rectangular cards */
    transition: all 0.3s ease !important;
}

/* Post image block relative */
.xc-home-faq .box-image {
    position: relative !important;
    overflow: hidden !important;
}

/* Date badge styling (top-left aligned with semi-transparent blue) */
.xc-home-faq .badge.post-date {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 70px !important;
    height: 80px !important;
    margin: 0 !important;
    z-index: 10 !important;
    border-radius: 0 !important;
}

.xc-home-faq .badge-inner {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(42, 133, 225, 0.7) !important;
    color: #ffffff !important;
    padding: 12px 10px !important;
    border-radius: 0 !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

.xc-home-faq .post-date-day {
    font-weight: bold !important;
    font-size: 20px !important;
    border-bottom: 1px #ffffff solid !important;
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
    display: block !important;
    color: #ffffff !important;
}

.xc-home-faq .post-date-month {
    font-size: 11px !important;
    text-transform: uppercase !important;
    display: block !important;
    color: #ffffff !important;
    font-weight: normal !important;
}

/* Hide Flatsome default post divider */
.xc-home-faq .is-divider {
    display: none !important;
}

/* Content block alignment */
.xc-home-faq .box-text {
    padding: 30px 15px 25px !important;
    border-top: 1px solid #e0e0e0 !important;
    text-align: left !important;
}

.xc-home-faq .box-text-inner {
    text-align: left !important;
}

/* Post title */
.xc-home-faq .post-title {
    font-size: 15px !important;
    margin-bottom: 20px !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
}

.xc-home-faq .post-title a {
    color: #111111 !important;
    font-weight: bold !important;
    transition: color 0.2s ease !important;
}

.xc-home-faq .post-title a:hover {
    color: #e23337 !important;
}

/* Post excerpt */
.xc-home-faq .from_the_blog_excerpt {
    color: #707070 !important;
    min-height: 80px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
    text-align: left !important;
}

/* Read more link styling */
.xc-home-faq .box-text-inner a.button {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
    color: #888888 !important;
    font-weight: bold !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    box-shadow: none !important;
    transition: color 0.3s ease !important;
}

/* Hover triggers color transition on the read more button */
.xc-home-faq .box:hover a.button {
    color: #e23337 !important;
}

/* ==========================================
   CSS TRUNCATION FOR TITLES AND EXCERPTS
   ========================================== */

/* Truncate post titles to exactly 1 line */
.post-title,
.box-text .post-title,
.box-text h5,
.box-text p.name,
.post-item .post-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important; /* Override white-space: nowrap if set */
    text-overflow: ellipsis !important;
}

/* Truncate short descriptions / excerpts to exactly 3 lines */
.from_the_blog_excerpt,
.box-text .from_the_blog_excerpt,
.box-text p.excerpt,
.post-item .excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: auto !important; /* Override static min-heights */
}

/* ==========================================================================
   XC Footer Section (Thông tin, Dịch vụ, Liên kết)
   ========================================================================== */

.xc-footer {
    background-color: #e23337 !important;
    padding: 60px 0 !important;
}

/* Footer Menu Title */
.xc-footer .ux-menu-title {
    color: #ffffff !important;
    font-weight: bold !important;
    padding-bottom: 15px !important;
    margin-bottom: 35px !important;
    position: relative !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    min-height: auto !important;
    border: none !important;
}

.xc-footer .ux-menu-title::after {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    content: '' !important;
    height: 3px !important;
    width: 25px !important;
    background: #ffffff !important;
}

/* Menu item link wrapper list item */
.xc-footer .ux-menu-link {
    padding: 5px 0 !important;
    transition: padding-left 0.3s ease !important;
    border: none !important;
    margin: 0 !important;
}

/* Shifting hover effect for links */
.xc-footer .ux-menu-link:hover {
    padding-left: 10px !important;
}

/* Actual link tags */
.xc-footer .ux-menu-link__link {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0 !important;
    min-height: auto !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    transition: color 0.2s ease !important;
    align-items: flex-start !important;
}

.xc-footer .ux-menu-link__link:hover {
    color: #fed25a !important; /* Gold hover color */
}

/* Icons inside the footer menu links */
.xc-footer .ux-menu-link__icon {
    color: #ffffff !important;
    font-size: 14px !important;
    width: 18px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    line-height: inherit !important;
    display: inline-block !important;
}

/* Responsive adjustments */
@media screen and (max-width: 767px) {
    .xc-footer .col {
        margin-bottom: 30px !important;
    }
    .xc-footer .col:last-child {
        margin-bottom: 0 !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .xc-footer .col:nth-of-type(3),
    .xc-footer .col:nth-of-type(4) {
        margin-top: 30px !important;
    }
}

/* ==========================================================================
   XC Float Contact (Zalo & Hotline Floating Buttons)
   ========================================================================== */

/* Zalo container */
.xc-float-contact__zalo {
    position: fixed !important;
    bottom: 103px !important;
    left: 10px !important;
    width: 65px !important;
    height: 65px !important;
    z-index: 9999 !important;
}

/* Rotating outer ring */
.xc-float-contact__zalo-rotate {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("assets/images/rotate_img.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    animation: xc-rotate 4s linear infinite !important;
}

/* Zalo button link */
.xc-float-contact__zalo-link {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: 10 !important;
    display: block !important;
    width: 50px !important;
    height: 50px !important;
}

.xc-float-contact__zalo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Hotline Call Button */
.xc-float-contact__phone {
    display: inline-flex !important;
    align-items: center !important;
    position: fixed !important;
    bottom: 50px !important;
    left: 15px !important;
    background: rgba(254, 0, 0, 0.8) !important;
    box-shadow: 0 0 5px #dddddd !important;
    z-index: 9999 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    border-radius: 25px !important;
    padding: 2px !important;
    text-decoration: none !important;
    animation: xc-calllink 500ms alternate infinite !important;
    transition: all 0.3s ease !important;
}

.xc-float-contact__phone:hover {
    background: rgba(254, 0, 0, 1) !important;
    box-shadow: 0 0 10px rgba(254, 0, 0, 0.5) !important;
}

.xc-float-contact__phone-img {
    width: 40px !important;
    height: 40px !important;
    padding: 7px !important;
    display: block !important;
    object-fit: contain !important;
}

.xc-float-contact__phone-number {
    margin-right: 10px !important;
    margin-left: 2px !important;
    color: inherit !important;
}

/* Responsive (Mobile width display adjustment) */
@media (max-width: 767px) {
    .xc-float-contact__phone-number {
        display: none !important; /* Hide phone number on small screens like original */
    }
    .xc-float-contact__phone {
        padding: 2px !important;
    }
    .xc-float-contact__phone-img {
        width: 45px !important;
        height: 45px !important;
        padding: 8px !important;
    }
}

/* Keyframes for call link color pulsing */
@keyframes xc-calllink {
    0% { color: #eba11e; }
    50% { color: #ffffff; }
    100% { color: #ebfa48; }
}

/* Keyframes for rotating circle */
@keyframes xc-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   XC Header Bottom Main Navigation (wide-nav)
   ========================================================================== */

#wide-nav {
    background-color: #e23337 !important;
    border-top: 1px #f3f3f3 solid !important;
    min-height: 55px !important;
}

/* Ensure flex containers stretch to full height */
#wide-nav .flex-row {
    align-items: stretch !important;
    height: 100% !important;
}

#wide-nav .flex-col {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}

#wide-nav .nav {
    height: 100% !important;
    align-items: stretch !important;
    display: flex !important;
}

/* Main Navigation items spacing and height stretch */
#wide-nav .nav > li {
    margin: 0 !important;
    padding: 0 35px 0 0 !important; /* Spacing between items */
    height: 55px !important; /* Lock height to match bar min-height */
    position: relative !important;
    overflow: visible !important;
}

#wide-nav .nav > li:last-child {
    padding-right: 0 !important;
}

/* Main navigation top-level links height stretch and centering */
#wide-nav .nav > li > a {
    text-transform: uppercase !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: Inter, sans-serif !important;
    padding: 0 !important; /* Clear vertical padding */
    line-height: 55px !important; /* Vertical centering matching bar height */
    position: relative !important;
    transition: color 0.3s ease !important;
    height: 100% !important;
    display: block !important; /* Block display to prevent absolute positioning bugs */
    overflow: visible !important;
}

/* Active / Current menu item styling */
#wide-nav .nav > li.active > a,
#wide-nav .nav > li.current-menu-item > a,
#wide-nav .nav > li.current-menu-ancestor > a {
    color: #fed25a !important;
}

/* Hover top-level link text color change to gold */
#wide-nav .nav > li:hover > a {
    color: #fed25a !important;
}

/* Hover top-level link indicator line - red color positioned above the header border */
#wide-nav .nav > li > a::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important; /* Positions the line exactly on the header top border */
    height: 3px !important;
    left: 0 !important;
    width: 100% !important;
    background: #e23337 !important; /* Red color matching background to overlay top border */
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 99 !important; /* Overlay the border */
}

#wide-nav .nav > li:hover > a::after,
#wide-nav .nav > li.active > a::after,
#wide-nav .nav > li.current-menu-item > a::after,
#wide-nav .nav > li.current-menu-ancestor > a::after {
    opacity: 1 !important;
}

/* Dropdown/Submenu Container with slide-down transition */
#wide-nav .nav-dropdown {
    background-color: rgba(0, 0, 0, 0.9) !important;
    width: 300px !important;
    padding: 20px 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: -15px !important; /* Starts slightly higher to slide down when showing */
    transition: opacity 0.3s ease, margin-top 0.3s ease, visibility 0.3s ease !important;
}

#wide-nav .nav > li:hover > .nav-dropdown {
    margin-top: 0 !important; /* Slide down to correct position */
}

/* Submenu items list styling */
#wide-nav .nav-dropdown > li {
    padding: 0 15px !important;
    margin: 0 !important;
}

/* Submenu links */
#wide-nav .nav-dropdown > li > a {
    display: block !important;
    padding: 12px 0 !important; /* Increased spacing between items */
    margin: 0 !important; /* Override Flatsome margin */
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2) !important; /* White-grey dashed border separator */
    color: #ffffff !important;
    font-weight: 400 !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease !important;
}

/* Remove bottom border from last sub-menu item */
#wide-nav .nav-dropdown > li:last-child > a {
    border-bottom: none !important;
}

/* Submenu hover text color change to gold */
#wide-nav .nav-dropdown > li:hover > a {
    color: #fed25a !important;
}

/* Search Lightbox icon styling */
#wide-nav .header-search a {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

#wide-nav .header-search a:hover {
    color: #fed25a !important;
}

#wide-nav .header-search i {
    color: inherit !important;
    font-size: 16px !important;
}

/* Hide default Flatsome dropdown arrow icons and triangle pointer indicators */
#wide-nav i.icon-angle-down,
#wide-nav i.icon-angle-right,
#wide-nav .has-dropdown > a > i,
#wide-nav .nav-top-link i,
#wide-nav li.has-dropdown::after,
#wide-nav li.has-dropdown::before,
#wide-nav .nav-dropdown-has-arrow li.has-dropdown::after,
#wide-nav .nav-dropdown-has-arrow li.has-dropdown::before {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   XC Contact List Sidebar Widget (BEM Style)
   ========================================================================== */

.xc-contact-list {
    padding-left: 0 !important;
    list-style: none !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}

.xc-contact-list__item {
    position: relative !important;
    padding: 10px 0 10px 30px !important;
    margin-left: 0 !important; /* Override Flatsome margin-left */
    color: #9b9b9b !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.xc-contact-list__icon {
    position: absolute !important;
    color: #e23337 !important;
    left: 0 !important;
    width: 15px !important;
    height: 15px !important;
    text-align: center !important;
    top: 13px !important;
    line-height: 15px !important;
    font-size: 14px !important;
}

.xc-contact-list__text {
    display: block !important;
    color: inherit !important;
}

.xc-contact-list__link {
    color: #9b9b9b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-weight: 600 !important;
}

.xc-contact-list__link:hover {
    color: #e23337 !important;
}

/* ==========================================================================
   XC Breadcrumb Section (BEM Style)
   ========================================================================== */

.xc-breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    border-bottom: solid 1px #ebebeb !important;
}

/* Row 1: Full-width Title Banner with Background */
.xc-breadcrumb__banner {
    position: relative !important;
    background-image: url("assets/images/bg-breadcrum.png") !important;
    background-position: center center !important;
    background-color: #4d4f4e !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    min-height: 120px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.xc-breadcrumb__title {
    text-align: center !important;
    font-size: 24px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Row 2: Breadcrumbs Navigation container */
.xc-breadcrumb__nav-wrapper {
    padding: 10px 0 !important;
    background-color: #ffffff !important;
}

/* Rank Math breadcrumbs container styling */
.xc-breadcrumb__nav {
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
}

/* Reset inner margins and paddings to ensure perfectly even top/bottom padding */
.xc-breadcrumb__nav p,
.xc-breadcrumb__nav ul,
.xc-breadcrumb__nav ol,
.xc-breadcrumb__nav li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: inline-block !important;
}

/* Handle lists inside Rank Math breadcrumbs or fallback */
.xc-breadcrumb__nav ul,
.xc-breadcrumb__nav span {
    font-weight: bold !important;
    font-size: 12px !important;
    color: #898989 !important;
}

/* Rank Math breadcrumb wrapper text/links styling */
.xc-breadcrumb__nav a {
    color: #898989 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.xc-breadcrumb__nav a:hover {
    color: #e23337 !important;
}

/* Separator styling */
.xc-breadcrumb__nav .separator {
    margin: 0 10px !important;
    color: #898989 !important;
    font-weight: normal !important;
    display: inline-block !important;
}

/* Separator image styling */
.xc-breadcrumb__nav img.xc-breadcrumb__separator-img,
.xc-breadcrumb__nav .separator img {
    position: relative !important;
    bottom: 2px !important;
    margin: 0 10px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    border: none !important;
    box-shadow: none !important;
    max-height: 10px !important;
    width: auto !important;
}

/* Last active item (current page) */
.xc-breadcrumb__nav .last,
.xc-breadcrumb__nav span.active,
.xc-breadcrumb__nav span:last-child {
    color: #e23337 !important;
}

/* ==========================================================================
   XC Title Page Section (BEM / Category Header Style)
   ========================================================================== */

.title-page {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.title-page h1.page-title {
    font-size: 32px !important;
    font-weight: bold !important;
    color: #e23337 !important;
    text-transform: uppercase !important;
    font-family: Arial, sans-serif !important;
    position: relative !important;
    padding-bottom: 15px !important;
    margin: 20px 0 25px !important;
    display: inline-block !important; /* Center absolute element correctly */
}

/* Underline indicator with gradient */
.title-page h1.page-title::after {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    margin-left: -12.5px !important; /* Width is 25px, so offset is -12.5px */
    content: '' !important;
    height: 3px !important;
    width: 25px !important;
    background: linear-gradient(to left, #2260bf, #03bcca) !important;
}

.title-page .page-description {
    color: #888888 !important;
    width: 66% !important;
    margin: 0 auto !important;
    margin-bottom: 40px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

@media screen and (max-width: 479px) {
    .title-page .page-description {
        width: 100% !important;
    }
    .title-page h1.page-title {
        font-size: 25px !important;
    }
}

/* ==========================================================================
   XC Sidebar Styling (Sapo Replication)
   ========================================================================== */

/* Spacing between sidebar widgets */
#secondary.widget-area .widget {
    margin-bottom: 40px !important;
}

/* 1. Category/Article Navigation Menu Widget styling */
#secondary.widget-area .widget_nav_menu {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

#secondary.widget-area .widget_nav_menu .menu-menu-category-container {
    padding: 0 !important;
}

#secondary.widget-area .widget_nav_menu ul.menu {
    position: relative !important;
    padding-top: 3px !important;
    border: 1px #ebebeb solid !important;
    border-bottom: none !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

#secondary.widget-area .widget_nav_menu ul.menu::before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    content: '' !important;
    height: 3px !important;
    width: 100% !important;
    background: linear-gradient(to left, #2260bf, #03bcca) !important;
}

/* Reset default list elements */
#secondary.widget-area .widget_nav_menu ul.menu > li {
    position: relative !important;
    border-bottom: 1px #ebebeb solid !important;
    padding: 20px 20px 20px 30px !important;
    margin: 0 !important;
    list-style: none !important;
    transition: all .5s !important;
}

/* Caret-right icon using Font Awesome */
#secondary.widget-area .widget_nav_menu ul.menu > li::before {
    display: inline-block !important;
    font-family: FontAwesome !important;
    font-size: 14px !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    content: "\f0da" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 20px !important;
    opacity: 1 !important;
    color: #555555 !important;
    margin-right: 0 !important;
    transition: all .5s !important;
}

/* Hover & Active item transitions */
#secondary.widget-area .widget_nav_menu ul.menu > li:hover {
    padding-left: 35px !important;
}

#secondary.widget-area .widget_nav_menu ul.menu > li:hover::before {
    left: 25px !important;
    color: #e23337 !important;
}

#secondary.widget-area .widget_nav_menu ul.menu > li.current-menu-item::before,
#secondary.widget-area .widget_nav_menu ul.menu > li.current-menu-ancestor::before {
    color: #e23337 !important;
}

/* Item Links */
#secondary.widget-area .widget_nav_menu ul.menu > li > a {
    color: #555555 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    font-family: Arial, sans-serif !important;
    text-decoration: none !important;
    transition: color 0.5s !important;
    display: inline-block !important;
    padding: 0 !important;
}

#secondary.widget-area .widget_nav_menu ul.menu > li:hover > a,
#secondary.widget-area .widget_nav_menu ul.menu > li.current-menu-item > a,
#secondary.widget-area .widget_nav_menu ul.menu > li.current-menu-ancestor > a {
    color: #e23337 !important;
}

/* Remove border-top separator from Flatsome */
#secondary.widget-area .widget_nav_menu ul.menu > li + li {
    border-top: none !important;
}

/* 2. Contact Sidebar Widget Title underline & hide Flatsome default dividers */
#secondary.widget-area .widget-title {
    font-weight: bold !important;
    font-size: 18px !important;
    position: relative !important;
    padding-bottom: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    display: block !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    color: #333333 !important;
    font-family: Arial, sans-serif !important;
}

#secondary.widget-area .widget-title::after {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    content: '' !important;
    height: 3px !important;
    width: 25px !important;
    background: linear-gradient(to left, #2260bf, #03bcca) !important;
    margin: 0 !important;
}

/* Hide Flatsome default divider line */
#secondary.widget-area .is-divider {
    display: none !important;
}

/* 3. Map iframe sizing */
#secondary.widget-area aside#custom_html-3 iframe {
    width: 100% !important;
    height: 300px !important;
}

/* 4. Desktop Sticky Sidebar */
@media (min-width: 992px) {
    #secondary.widget-area {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 75px !important; /* Avoid header overlap */
        background: #ffffff !important;
        z-index: 10 !important;
    }
}

/* ==========================================================================
   XC Category / Archive Page Customization
   ========================================================================== */

/* Hide date badge on archive/category post grids */
.archive .post-item .post-date {
    display: none !important;
}

/* Hide divider line on archive/category post grids */
.archive .post-item .is-divider {
    display: none !important;
}

/* Image Zoom Hover Effect */
.archive .post-item .box-image {
    overflow: hidden !important;
}

.archive .post-item .box-image img {
    transition: transform 0.5s ease !important;
}

.archive .post-item:hover .box-image img {
    transform: scale(1.08) !important;
}

/* Post Title Color & Transition */
.archive .post-item h5.post-title {
    transition: transform 0.3s ease !important;
}

.archive .post-item h5.post-title a {
    color: #333333 !important;
    transition: color 0.3s ease !important;
}

/* Hover effects */
.archive .post-item:hover h5.post-title {
    transform: translateY(-2px) !important;
}

.archive .post-item:hover h5.post-title a,
.archive .post-item h5.post-title a:hover {
    color: #e23337 !important;
}