/* =========================================
   UNITY THEME CSS - Clean & Focused
   Banner profile section with flexible column layouts
   =========================================
   
   ARCHITECTURE OVERVIEW:
   
   1. FLEXIBLE COLUMNS SYSTEM:
      - Supports 1, 2, or 3 column layouts
      - Mix text, images, and videos in any combination
      - Auto-height for content fit with max-height limits
      - Scroll indicators for overflow text
   
   2. RESPONSIVE STRATEGY:
      Desktop (768px+): Horizontal rows with fixed alignment heights
      Mobile (< 768px): Vertical stacks with auto heights
   
   3. KEY MEASUREMENTS:
      - 1-col: Image/Video 25.5rem (408px), Text max 20rem (320px)
      - 2-col: Image/Video clamp(18-21rem / 288-336px), Text max same
      - 3-col: Image/Video 14rem (224px), Text max 14rem (224px)
      - Mobile: 4:3 aspect ratio (horizontal rectangles, never vertical)
   
   ========================================= */

/* ===== ROOT VARIABLES ===== */
:root {
    --org: #f26d21;
    --secondary-color: #080b1f;
    --text-color: #333;  /* Darker gray - stronger contrast */
    --light-bg: #f8f9fa;

    /* Nav base contract tokens */
    --nav-gap: 0;
    --nav-transition: all 0.2s ease;
    --nav-focus-color: var(--k3-primary-light, #a855f7);
    --nav-cta-lift: -3px;
    --nav-active-weight: 600;
}

/* ===== SCOPED BASE STYLES ===== */
/* Scoped to Unity layout classes to prevent leaking into other themes.
   Uses .b_wrap (Unity page wrapper) and .chl-theme-unity (component wrapper). */

.b_wrap,
.chl-theme-unity {
    font-family: "DM Sans", sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    box-sizing: border-box;
}

.b_wrap *,
.chl-theme-unity * {
    box-sizing: border-box;
}

.b_wrap p,
.chl-theme-unity p {
    font-size: clamp(1rem, 2.8vw, 1.375rem);  /* 16px to 22px */
    line-height: 1.6;
    margin: 0;
}

/* Responsive heading sizes - scoped to Unity layout */
.b_wrap h1, .chl-theme-unity h1 {
    font-size: clamp(1.25rem, 4vw, 2rem);  /* 20px to 32px */
    line-height: 1.2;
}

.b_wrap h2, .chl-theme-unity h2 {
    font-size: clamp(1.125rem, 3.5vw, 1.75rem);  /* 18px to 28px */
    line-height: 1.3;
}

.b_wrap h3, .chl-theme-unity h3 {
    font-size: clamp(1.275rem, 3.5vw, 1.625rem);  /* 20px to 26px */
    font-weight: 800;
    line-height: 1.3;
    color: #010115;
}

/* h3 that follows h4 - bump up size */
.b_wrap h4 + h3, .chl-theme-unity h4 + h3 {
    font-size: clamp(1.3125rem, 3.5vw, 1.875rem);  /* 21px to 30px */
    color: #1e213a;
    font-weight: 600;
}

/* h3 in 3-column section - moderate size matching disc */
.text_section:has(.flexible-columns) .text_section_top h3 {
    font-size: clamp(1.3125rem, 3.5vw, 1.875rem) !important;
    font-weight: 600 !important;
    line-height: 1.3;
    color: #1e213a !important;
    letter-spacing: 0.03125rem;
}

/* h3 in gallery section */
.gallery_sec .text_section_top h3 {
    font-size: clamp(1.3125rem, 3.5vw, 1.875rem);
    font-weight: 600;
    line-height: 1.3;
    color: #1e213a;
    letter-spacing: 0.03125rem;
}

.gallery_sec .text_section_top h3 span {
    color: var(--org);
    font-size: inherit !important;
}

.b_wrap h4, .chl-theme-unity h4 {
    font-size: clamp(0.75rem, 1.7vw, 0.875rem);  /* 12px to 14px */
    line-height: 1.4;
}

/* Desktop typography adjustments */
@media screen and (min-width: 768px) {
    .b_wrap h3, .chl-theme-unity h3 {
        font-size: 1.8375rem;  /* Fixed at 29px on desktop */
    }

    .b_wrap h4 + h3, .chl-theme-unity h4 + h3 {
        font-size: clamp(1.3125rem, 3.5vw, 1.875rem);
        color: #1e213a;
        font-weight: 600;
    }

    .b_wrap h4, .chl-theme-unity h4 {
        font-size: clamp(0.75rem, 1vw, 0.875rem);  /* 12px to 14px */
    }

    .text_section:has(.flexible-columns) .text_section_top h3 {
        font-size: clamp(1.3125rem, 3.5vw, 1.875rem) !important;
        color: #1e213a !important;
        font-weight: 600 !important;
    }

    .gallery_sec .text_section_top h3 {
        font-size: clamp(1.3125rem, 3.5vw, 1.875rem);
        color: #1e213a;
        font-weight: 600;
    }
}

.b_wrap h5, .chl-theme-unity h5 {
    font-size: clamp(0.8125rem, 2.2vw, 1rem);  /* 13px to 16px */
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.b_wrap h6, .chl-theme-unity h6 {
    font-size: clamp(0.75rem, 2.25vw, 0.9375rem);  /* 12px to 15px */
    line-height: 1.5;
}

.b_wrap a, .chl-theme-unity a {
    text-decoration: none;
    color: inherit;
}

.b_wrap ul, .chl-theme-unity ul {
    list-style: none;
}

.b_wrap img, .chl-theme-unity img {
    max-width: 100%;
    height: auto;
}

/* ===== LAYOUT & CONTAINERS ===== */
.main_wraper {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

.inner-container {
    max-width: 100%;
    margin: 0 auto;
}

/* Fixed width container for screens higher than 1360px */
@media (min-width: 1361px) {
    .inner-container {
        max-width: 1360px;
        margin: 0 auto;
    }
}

.b_wrap {
    max-width: 85rem;  /* 1360px */
    margin: 0 auto;
    padding: 0 1.25rem;  /* 20px */
}

/* ===== HEADER STYLES REMOVED ===== */

/* ===== MAIN CONTENT ===== */
.main_content {
    padding: 6.25rem 0 1.25rem 0;  /* 100px top, 20px bottom - TEST DIRECT */
    transition: padding 0.3s ease;
}

/* =========================================
   TOP BANNER SECTION
   Profile header with social icons, curved shadow,
   organization details and stats
   ========================================= */

/* ===== PROFILE HEADER SECTION ===== */
.b_profile {
    height: 40rem;  /* 640px - TALLER banner to show more content (increased from 500px) */
    width: 100%;
    border-radius: 2.5rem 0 2.5rem 0;  /* 40px */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;  /* Clip image to border-radius */
    
    /* Universal background-image handling - works for all image sizes */
    background-size: cover;  /* Fills entire container - no empty space */
    background-position: center top;  /* Shows top portion first, crops bottom if needed */
    background-repeat: no-repeat;
}

.b_profile_banner_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Fills container for <img> tag */
    object-position: center top;  /* Shows top portion first */
    z-index: 0;  /* Behind content */
}

.b_profile > *:not(.b_profile_banner_img) {
    position: relative;  /* Above the image */
    z-index: 1;
}

.b_profile_social {
    display: flex;
    padding: 1.25rem;  /* 20px */
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.b_profile_social div {
    display: flex;
    gap: 0.625rem;  /* 10px */
}

.b_profile_social a {
    background: #00000033;
    height: 3rem;  /* 48px */
    width: 3rem;  /* 48px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

.b_profile_social a i {
    font-size: 1.3125rem;  /* 21px */
    color: #fff;
}

.b_profile_detail {
    backdrop-filter: blur(6px);
    background: #00000080;
    clip-path: polygon(
        0% 0%,
        95% 0%,
        96% 0.5%,
        97% 1.5%,
        97.5% 2.5%,
        98% 4%,
        98.5% 6%,
        99% 8.5%,
        99.3% 11%,
        99.6% 14%,
        99.8% 17%,
        100% 20%,
        100% 100%,
        0% 100%
    );
    width: 90.5%;
    padding: 2.3rem 0.3125rem 2.5rem;  /* 37px / 5px / 40px */
    display: flex;
    align-items: center;
    justify-content: space-between;  /* Matches backup */
}

.b_profile_detail_img {
    display: flex;
    gap: 0.1875rem;  /* 3px */
    align-items: center;
    padding-left: clamp(1rem, 3vw, 1.875rem);  /* 16px to 30px - responsive left spacing */
}

.b_profile_detail_img img {
    width: 5.625rem;  /* 90px */
    height: 5.625rem;  /* 90px */
    border-radius: 100%;
}

.b_profile_detail_img h3 {
    color: #fff;
    margin-bottom: 0;
    /* Font size and weight inherit from global h3 */
    letter-spacing: 0.6px;
    padding: 0 0.625rem;  /* 10px */
}

.b_profile_detail_img h4 {
    color: #fff;
    margin-bottom: 0;
    font-weight: 400;
    letter-spacing: 0.6px;
}

.b_profile_likes ul {
    padding: 0;
    margin-bottom: 0;
}

.b_profile_likes li {
    display: inline-block;  /* Matches backup - allows natural wrapping */
}

.b_profile_likes a {
    padding: 0.125rem 1.25rem;  /* 2px / 20px */
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 0.9375rem;  /* 15px */
    font-weight: 300;
    border-left: 0.0625rem solid #fff;  /* 1px */
    gap: 0.5rem;  /* 8px */
}

/* =========================================
   MAIN TABS NAVIGATION
   Profile navigation tabs with underline effect
   ========================================= */

/* ===== TABBED DISC WRAPPER ===== */
.b_profile_disc_Wrap {
    width: 100%;
    margin-top: clamp(1.5rem, 3vw, 2rem);  /* 24px to 32px - responsive spacing */
}

.b_profile_disc_Wrap .text_section_top {
    margin-bottom: 1.5rem;  /* 24px spacing before tabs */
}

.b_profile_disc_Wrap .b_profile_tabs,.b_profile_disc_Wrap .b_profile_tabs1 {
    top: -1.4375rem;  /* -23px - pull up closer to header */
    margin-bottom: 0.875rem;  /* 14px spacing before content */
    padding-right: 1rem;  /* 16px - right padding for better spacing */
}

/* Tabbed disc section - responsive tabs */
.b_profile_disc_Wrap .b_profile_tabs ul,.b_profile_disc_Wrap .b_profile_tabs1 ul {
    gap: clamp(0.5rem, 2vw, 1.25rem);  /* Responsive gap: 8px to 20px */
    justify-content: space-evenly;  /* Evenly spaced on desktop too! */
}


.b_profile_disc_Wrap .b_profile_tabs li a,.b_profile_disc_Wrap .b_profile_tabs1 li a {
    font-size: clamp(0.5625rem, 2.5vw, 0.875rem);  /* 9px to 14px - compact for 5 tabs */
    padding: clamp(0.625rem, 2vw, 1rem) clamp(0.5rem, 1.5vw, 0.75rem);  /* Responsive padding */
    letter-spacing: clamp(0.3px, 0.5vw, 0.6px);  /* Responsive letter spacing */
}

.b_profile_disc.tabs_contae {
    display: none;  /* Hidden by default */
}

.b_profile_disc.tabs_contae.active {
    display: flex;  /* Show when active */
}

.scroll_limit_botton {
    max-height: 21.37rem;  /* 342px - perfect height to keep buttons visible */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    
    /* Custom scrollbar - hidden by default */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.scroll_limit_botton:hover,
.scroll_limit_botton.scrolling {
    scrollbar-color: rgba(249, 115, 22, 0.15) #f0f0f0;  /* Show on hover/scroll */
}

.scroll_limit_botton::-webkit-scrollbar {
    width: 0.5rem;  /* 8px */
}

.scroll_limit_botton::-webkit-scrollbar-track {
    background: transparent;  /* Hidden by default */
}

.scroll_limit_botton::-webkit-scrollbar-thumb {
    background: transparent;  /* Hidden by default */
    border-radius: 0.625rem;  /* 10px */
}

.scroll_limit_botton:hover::-webkit-scrollbar-track {
    background: #f0f0f0;  /* Show on hover */
}

.scroll_limit_botton:hover::-webkit-scrollbar-thumb,
.scroll_limit_botton.scrolling::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.15);  /* Show on hover/scroll */
}

.scroll_limit_botton::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.4);  /* More visible on hover */
}

/* K3 TABS BLOCK REMOVED — ~145 lines of unscoped .b_profile_tabs rules
   (white bg, negative top, uppercase, underlines) were bleeding into Unity/Editorial.
   Canonical K3 tab styles live in bpges/css/grit.css scoped under .k3-nav-tabs. */






/* =========================================
   FLEXIBLE COLUMNS SECTION  
   ========================================= */

.flexible-columns {
    margin-top: 1.5rem;  /* 24px - matches text_section padding for consistent spacing */
}

.flexible-columns .container-fluid {
    padding: 0 clamp(1.25rem, 4vw, 3rem);  /* Responsive: 20px at small to 48px at large - smoother transition */
}

/* Remove Bootstrap's column padding */
.flexible-columns .column-customize {
    padding-left: 0;
    padding-right: 0;
}

/* ===== 2 COLUMN SPECIFIC STYLES ===== */
/* Target sections with col-lg-6 (2 columns) */
.row:has(.col-lg-6) {
    gap: 1.375rem;  /* 22px gap for 2 columns */
}

.row:has(.col-lg-6) ~ .flexible-columns,
.flexible-columns:has(.col-lg-6) {
    margin: 1.875rem 1.875rem 0 1.875rem;  /* 30px sides, 30px top, 0 bottom */
}

/* 2 column - auto height to fit content */
.col-lg-6 .column-item {
    height: auto;  /* Auto height - fits content */
    max-height: none;  /* No constraint - let content control */
}

/* 2-column IMAGE and VIDEO - responsive horizontal rectangle height */
.col-lg-6 .column-image,
.col-lg-6 .column-video {
    height: clamp(22rem, 23vw + 1rem, 26rem) !important;  /* 352px at 768px to 416px at 1200px+ - taller */
    width: 100% !important;  /* Full width */
    flex-grow: 0;
    flex-shrink: 0;
}

/* 2-column IMAGE and VIDEO content - full width */
.col-lg-6 .column-image img,
.col-lg-6 .column-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;  /* Show full image within container without cropping */
}

/* 2-column IMAGE and VIDEO containers - no padding */
.col-lg-6 .column-image,
.col-lg-6 .column-video {
    padding: 0 !important;  /* No padding - content fills entire container */
    margin: 0 !important;  /* No margin */
    overflow: hidden !important;  /* No scroll on image/video containers */
}

/* 2-column TEXT - matches image/video height when mixed */
.col-lg-6 .column-text {
    height: auto;  /* Auto height - fits content */
    max-height: clamp(22rem, 23vw + 1rem, 26rem) !important;  /* Grows with screen to match image/video - taller */
    overflow-y: auto !important;  /* Ensure scrolling works */
    overflow-x: hidden !important;
    flex: 0 1 auto;  /* Allow shrinking to content size */
}

/* ===== 3 COLUMN SPECIFIC STYLES ===== */
/* Target sections with col-lg-4 (3 columns) */
.row:has(.col-lg-4) {
    gap: 0.875rem;  /* 14px gap for 3 columns - proportionally smaller */
}

.row:has(.col-lg-4) ~ .flexible-columns,
.flexible-columns:has(.col-lg-4) {
    margin: 1.25rem 1.25rem 0 1.25rem;  /* 20px sides - proportionally smaller */
}

/* Horizontal padding for multi-column layouts on desktop/tablet (768px+) */
@media screen and (min-width: 768px) {
    /* Large padding only for 1-column layout */
    .flexible-columns:has(.col-lg-12) .container-fluid {
        padding: 0 clamp(2.5rem, 8vw, 6rem);  /* 40px to 96px - larger padding for single column */
    }
    
    /* Minimal padding for 2-column and 3-column layouts */
    .flexible-columns:has(.col-lg-6) .container-fluid,
    .flexible-columns:has(.col-lg-4) .container-fluid {
        padding: 0 clamp(1.25rem, 2vw, 2rem);  /* 20px to 32px - minimal but responsive */
    }
}

/* 3 column - auto height to fit content */
.col-lg-4 .column-item {
    height: auto;  /* Auto height - fits content */
    max-height: none;  /* No constraint - let content control */
}

/* 3-column IMAGE and VIDEO - fixed height */
.col-lg-4 .column-image,
.col-lg-4 .column-video {
    height: 14rem !important;  /* 224px - matches text max-height for alignment */
    width: 100% !important;  /* Full width */
    flex: 0 0 14rem !important;
}

/* 3-column IMAGE and VIDEO content - full width */
.col-lg-4 .column-image img,
.col-lg-4 .column-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;  /* Restore original: fill container, crop if needed */
}

/* 3-column IMAGE and VIDEO containers - no padding, no scroll */
.col-lg-4 .column-image,
.col-lg-4 .column-video {
    padding: 0 !important;  /* No padding - content fills entire container */
    margin: 0 !important;  /* No margin */
    overflow: hidden !important;  /* No scroll on image/video containers */
    overflow-y: hidden !important;  /* Specifically no vertical scroll */
    overflow-x: hidden !important;  /* Specifically no horizontal scroll */
}

/* 3-column IMAGE and VIDEO content - no scroll inheritance */
.col-lg-4 .column-image img,
.col-lg-4 .column-video video {
    overflow: hidden !important;  /* No scroll on content itself */
    overflow-y: hidden !important;  /* No vertical scroll */
    overflow-x: hidden !important;  /* No horizontal scroll */
}

/* 3-column TEXT - matches image/video height when mixed */
.col-lg-4 .column-text {
    height: auto;  /* Auto height - fits content */
    max-height: 14rem !important;  /* 224px max - same as image/video */
    overflow-y: auto !important;  /* Ensure scrolling works */
    overflow-x: hidden !important;
    flex: 0 1 auto;  /* Allow shrinking to content size */
}

/* 3-column SPECIFIC - Override any inherited scroll behavior for image/video */
.col-lg-4 .column-item:has(.column-image),
.col-lg-4 .column-item:has(.column-video) {
    overflow: hidden !important;  /* No scroll on parent container */
    overflow-y: hidden !important;  /* No vertical scroll */
    overflow-x: hidden !important;  /* No horizontal scroll */
}

/* ===== 1 COLUMN SPECIFIC STYLES ===== */
/* Target sections with col-lg-12 (1 column) */
.row:has(.col-lg-12) ~ .flexible-columns,
.flexible-columns:has(.col-lg-12) {
    margin: 1.875rem 1.875rem 0 1.875rem;  /* 30px sides - bigger margins like original */
}

/* 1 column - auto height to fit content */
.col-lg-12 .column-item {
    height: auto;  /* Auto height for single column - fits content */
    max-height: none;  /* No max-height constraint - let content (text/image/video) control their own heights */
}

.column-item {
    padding: 0.5rem 1rem 0.5rem 1rem;  /* top: 8px, sides: 16px, bottom: 16px */
    border-radius: 0.625rem;  /* 10px */
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);  /* 0 2px 10px */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Remove card styling from outer column-item (on column-customize) */
.column-customize.column-item {
    padding: 0;  /* Remove padding */
    border-radius: 0;  /* Remove border radius */
    box-shadow: none;  /* Remove shadow */
}

/* Remove card borders for column-items with images or videos */
.column-item:has(.column-image),
.column-item:has(.column-video) {
    padding: 0;  /* Remove padding */
    border-radius: 0;  /* Remove border radius */
    box-shadow: none;  /* Remove shadow */
}

.row:has(.column-image) .column-item,
.row:has(.column-video) .column-item {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.column-item:hover {
    transform: translateY(-0.3125rem);  /* -5px */
}

/* Only hover effect on inner column-item, not the outer one */
.column-customize.column-item:hover {
    transform: none;  /* Remove hover effect from outer */
}

/* Scroll indicator for column-text */
.column-text .scroll-indicator {
    position: sticky;  /* Stays fixed while scrolling */
    bottom: 0.625rem;  /* 10px from bottom */
    float: right;  /* Align to right */
    margin-right: 0.625rem;  /* 10px from right edge */
    width: 1.25rem;  /* 20px - reduced from 30px */
    height: 1.25rem;  /* 20px - reduced from 30px */
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    display: block;  /* Ensure it's visible by default */
    animation: bounce 2s infinite;  /* Add bounce animation for column scroll indicator */
    background-color: transparent;  /* Transparent background */
}

.column-text:hover .scroll-indicator {
    opacity: 1;
}

.column-text .scroll-indicator img {
    width: 100%;
    height: 100%;
    background-color: transparent;  /* Transparent background */
}

.column-text::-webkit-scrollbar {
    width: 0.5rem;  /* 8px */
}

.column-text::-webkit-scrollbar-track {
    background: transparent;  /* Hidden by default */
}

.column-text::-webkit-scrollbar-thumb {
    background: transparent;  /* Hidden by default */
    border-radius: 0.625rem;  /* 10px */
}

.column-text:hover::-webkit-scrollbar-track {
    background: #f0f0f0;  /* Show on hover */
}

.column-text:hover::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.15);  /* Show on hover */
}

.column-text::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.4);  /* More visible orange when hovering scrollbar */
}

.column-text.scrolling::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.15);  /* Very transparent orange */
}

.column-text.scrolling::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.4);  /* More visible on hover */
}

.column-heading {
    font-size: clamp(1rem, 1.5vw, 1.125rem);  /* 16px to 18px - reduced from 18-21px */
    font-weight: 700;
    margin-bottom: -0.2rem;  /* 7px */
    color: #333;  /* Darker gray - stronger contrast */
    text-align: center;
}

.thrivebar {
    height: 0.072rem;  /* 2px - increased from 1px for better visibility */
    width: 7.5rem;  /* 120px */
    margin: 0.375rem auto 0 auto;  /* 6px auto 0 auto */
    background: linear-gradient(to right, transparent, #f97316 50%, transparent);
}

.thrivebar-custom {
    margin-bottom: 0.625rem;  /* 10px - spacing before column-item card */
}

/* Base column-text styles */
.column-text {
    position: relative;  /* For scroll indicator positioning */
    font-size: clamp(0.875rem, 2.5vw, 1rem);  /* 14px to 16px - same as check section, smaller than main p */
    line-height: 1.6;
    color: #333;  /* Darker gray - stronger contrast */
    overflow-y: auto;  /* Enable vertical scrolling */
    overflow-x: hidden;  /* Hide horizontal overflow */
    flex: 0 0 auto;  /* Don't grow or shrink, use fixed height */
    padding: 0 0 0.625rem 0;  /* 10px top/bottom - equal spacing, no redundancy */
    margin: 0;  /* No margin - padding handles spacing */
    scrollbar-width: thin;
    scrollbar-color: transparent #f0f0f0;
}

/* Default height for 1-column layout - TEXT only (no scrolling on desktop) */
.col-lg-12 .column-text {
    height: auto;  /* Auto height - fits content for single column */
    max-height: none;  /* No max-height - full content display */
    overflow: visible;  /* No scrolling - show all content */
    flex: 0 1 auto;  /* Allow shrinking to content size */
    padding: 1rem 1.5rem;  /* 16px vertical, 24px horizontal - breathing room for text */
}

/* Fixed height for 1-column IMAGE and VIDEO - NOT text */
.col-lg-12 .column-image,
.col-lg-12 .column-video {
    height: 25.5rem !important;  /* 408px - fixed height for single column image/video */
    flex: 0 0 25.5rem !important;  /* Don't grow, fixed size */
}

.column-image {
    width: 100%;
    height: 12.5rem;  /* 200px - wider than tall for better visual balance */
    aspect-ratio: 4 / 3;  /* Horizontal squarish rectangle - same as video */
    object-fit: contain;  /* Show full image within container without cropping */
    object-position: center;
    border-radius: 0.5rem;  /* 8px */
    padding-top: 5px;  /* 5px top padding */
}

.column-video {
    position: relative;
    width: 100%;
    height: 12.5rem;  /* 200px - wider than tall for better visual balance */
    aspect-ratio: 4 / 3;  /* Same as image - squarish, less wide */
    border-radius: 0.5rem;  /* 8px */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding-top: 5px;  /* 5px top padding */
}

.column-video a {
    color: white;
    font-size: 3.75rem;  /* 60px */
    text-decoration: none;
    transition: all 0.3s ease;
}

.column-video a:hover {
    transform: scale(1.1);
}

/* Desktop - Multiple columns in a ROW */
.three-column-customize {
    display: flex;
    flex-direction: row;  /* Horizontal layout */
    justify-content: center;
    align-items: stretch;  /* Makes all columns same height */
    gap: 0.375rem;  /* 6px - minimal spacing */
    flex-wrap: wrap;  /* Allow wrapping on smaller screens */
}

.column-customize {
    display: flex;  /* Enable flex for inner content */
    flex: 1;  /* Columns grow equally */
    min-width: 0;  /* Prevents overflow */
}

/* =========================================
   PROFILE DISC SECTION
   Split layout: Image left, scrollable content right
   ========================================= */

/* ===== PROFILE DISC LAYOUT ===== */
.text_section {
    padding: 3rem 0 0 0;  /* 24px top only - reduced spacing */
}

/* Additional spacing specifically for 3col section */
.text_section:has(.flexible-columns) {
    margin-top: clamp(1.5rem, 3vw, 2rem);  /* 24px to 32px - responsive spacing */
}

/* Fallback for browsers that don't support :has() */
.flexible-columns {
    margin-top: clamp(1.5rem, 3vw, 2rem);  /* 24px to 32px - responsive spacing (fallback) */
}

/* Remove double spacing when :has() is supported */
.text_section:has(.flexible-columns) .flexible-columns {
    margin-top: 0;  /* Reset since parent already has spacing */
}


/* Additional spacing specifically for media/podcast section */
.text_section:has(.vid_section) {
    margin-top: clamp(1.5rem, 3vw, 2rem);  /* 24px to 32px - responsive spacing */
}

/* Additional spacing specifically for gallery section */
.section_space:has(.gallery_sec) {
    margin-top: clamp(1.5rem, 3vw, 2rem);  /* 24px to 32px - responsive spacing */
}

.b_profile_disc {
    align-items: stretch;  /* Both children stretch to the tallest child */
    display: flex;
    gap: 2%;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}

.b_profile_disc_img {
    flex: 0 0 45%;
    overflow: hidden;
    display: flex;
    border-radius: 1.5rem;  /* 24px */
    /* No explicit height/min/max - stretches to match content via align-items: stretch */
}

.b_profile_disc_img img,
.b_profile_disc_img video {
    width: 100%;
    height: 100%;  /* Fill the stretched container */
    border-radius: 1.5rem;
    object-fit: cover;  /* Fill without letterboxing */
    object-position: center;
}

.b_profile_disc_content {
    flex: 0 0 53%;  /* 45% + 2% gap + 53% = 100% */
    position: relative;
    min-width: 0;  /* Prevents text overflow */
    overflow: hidden;
    max-height: clamp(22rem, 5vw + 18rem, 30rem);  /* 352px → 480px - content drives the height, scales with viewport */
}

.b_profile_disc_content h4 {
    text-transform: uppercase;
    color: var(--org);
    letter-spacing: 0.125rem;  /* 2px */
    font-weight: 600;
}

.b_profile_disc_content h3 {
    color: #1e213a;
    letter-spacing: 0.03125rem;  /* 0.5px */
    font-size: clamp(1.3125rem, 3.5vw, 1.57rem);  /* 21px to 30px - consistent with other section h3s */
    font-weight: 600;
}

.b_profile_disc_content p {
    letter-spacing: 0.03125rem;  /* 0.5px */
    font-size: clamp(1rem, 2.8vw, 1.125rem);  /* 16px to 18px - MEDIUM size */
    font-weight: 400;
    color: #33334C;
    margin-bottom: 0;
}

/* Scrollable content area */
.limit_scroll_new {
    max-height: 17.35rem;  /* ~277px - aligns with image */
    overflow: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;  /* Hidden by default */
}

/* Show scrollbar when scrolling class is added */
.limit_scroll_new.scrolling {
    scrollbar-color: rgba(242, 97, 34, 0.3) rgba(242, 97, 34, 0.1);
}

.limit_scroll_new::-webkit-scrollbar {
    width: 0.375rem;  /* 6px */
}

.limit_scroll_new::-webkit-scrollbar-track {
    background: transparent;  /* Hidden by default */
    border-radius: 0.625rem;  /* 10px */
}

.limit_scroll_new::-webkit-scrollbar-thumb {
    background-color: transparent;  /* Hidden by default */
    border-radius: 0.625rem;  /* 10px */
    transition: background-color 0.3s;
}

/* Show scrollbar thumb when scrolling */
.limit_scroll_new.scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(242, 97, 34, 0.3);
}

.limit_scroll_new::-webkit-scrollbar-thumb:hover {
    background-color: rgba(242, 97, 34, 0.5);
}

/* Check items with icons */
.b_profile_disc_Check {
    display: flex;
    align-items: start;
    gap: 0.625rem;  /* 10px */
    margin: 0.3rem 0 0 0;  /* Tighter spacing between items */
}

.b_profile_disc_Check.first-check {
    margin-top: 1.3125rem;  /* 21px for first item */
}

.b_profile_disc_Check img {
    width: clamp(0.9rem, 2vw, 1.5rem);  /* 14.4px on small to 24px on large - responsive */
    height: auto;  /* Maintain aspect ratio */
}

.b_profile_disc_Check h5 {
    font-family: "Catamaran", sans-serif;  /* Match H4 font for consistent thinness */
    font-weight: 500;  /* Medium weight - same as H4 in b_profes_in */
    /* Font size inherits from global h5 - 12px mobile, 13.5px at 768px, 14px desktop */
    line-height: 1.25rem;  /* 20px */
    vertical-align: middle;
    text-transform: capitalize;
    margin-bottom: 0.0625rem;  /* 1px */
    display: flex;
    align-items: center;
    gap: 0.5rem;  /* 8px */
}

.b_profile_disc_Check h5 span {
    font-family: DM Sans;
    font-weight: 400;
    font-size: clamp(0.75rem, 2vw, 0.8125rem);  /* 12px to 13px */
    color: #33334C;
}

.b_profile_disc_Check p {
    font-family: "Catamaran", sans-serif;
    font-weight: 700;  /* Bold */
    font-size: clamp(1rem, 2.8vw, 1.625rem);  /* 16px to 26px - LARGER size */
    margin-bottom: 0.375rem;  /* 6px */
}

/* Action buttons */
.b_profile_disc_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;  /* 10px */
    margin-top: 1rem;  /* 16px */
}

.b_profile_disc_buttons a {
    width: fit-content;
    border-radius: clamp(0.6875rem, 2vw, 0.9375rem);  /* 11px to 15px - scales with screen */
    padding: clamp(0.4375rem, 1.5vw, 0.625rem) clamp(0.6875rem, 2vw, 0.9375rem);  /* Scales: 7px/11px to 10px/15px */
    display: flex;
    border: 0.0625rem solid var(--org);  /* 1px */
    color: var(--org);
    transition: 0.5s;
    gap: clamp(0.625rem, 2vw, 1.25rem);  /* 10px to 20px - scales with screen */
    align-items: center;
    font-size: clamp(1rem, 2.8vw, 1.125rem);  /* 16px to 18px - MEDIUM size */
    white-space: nowrap;
    flex-shrink: 0;
    flex-grow: 0;
}

.b_profile_disc_buttons a:hover,
.b_profile_disc_buttons a.bold {
    background: var(--org);
    color: #fff;
}

/* Text spacing helper */
.jd-mspacing {
    margin-bottom: 0.9375rem;  /* 15px */
    font-size: clamp(1rem, 2.8vw, 1.125rem);  /* 16px to 18px - MEDIUM size */
    line-height: 1.9;
}

/* Check section text - smaller than paragraph above */
.b_profile_disc_Check .jd-mspacing {
    font-size: clamp(0.875rem, 2.5vw, 1rem);  /* 14px to 16px - SMALLER than main p */
    font-weight: 400;  /* Regular weight */
}

/* Scroll indicator */
.scroll-indicator {
    opacity: 1;
    animation: bounce 2s infinite;
    position: sticky;
    bottom: 0;
    right: 0;
    float: right;
    text-align: right;
}

.scroll-indicator img {
    width: 1.5625rem;  /* 25px */
    background-color: #fff;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-0.625rem);  /* -10px */
    }
    60% {
        transform: translateY(-0.3125rem);  /* -5px */
    }
}

/* =========================================
   RESPONSIVE BREAKPOINT STRATEGY
   ========================================= 
   
   DESKTOP/TABLET (768px+):
   - Multi-column layouts in horizontal rows
   - Heights ensure alignment when mixing text/image/video
   - 1-col: Text max 20rem (320px), Image/Video 25.5rem (408px)
   - 2-col: Text/Image/Video clamp(18-21rem / 288-336px) - grows with screen
   - 3-col: Text/Image/Video 14rem (224px), or 12rem (192px) at 768-850px
   
   MOBILE (below 767px):
   - All columns stack vertically
   - Text: Full height, no scroll, overflow visible
   - Images/Videos: 4:3 aspect ratio (horizontal rectangles, never vertical)
   - Width: Smooth transition from ~95% (420px) to 80% (767px)
   
   ========================================= */

/* ===== RESPONSIVE - MEDIUM MOBILE (500px - 767px) ===== */
@media screen and (min-width: 500px) and (max-width: 767px) {
    .b_profile_detail_img h3 {
        padding: 0 clamp(0.625rem, 4vw, 5.625rem);  /* Grows from 10px to 90px between 500px-767px */
    }
    
    /* Smooth transition: consistent margin without fluctuation */
    .flexible-columns {
        margin: 1.275rem clamp(0.4rem, 3vw, 2rem) 0 clamp(0.4rem, 3vw, 2rem) !important;  /* Smooth: 6.4px to 32px - no fluctuation */
    }
    
    .column-customize {
        width: 100%;  /* Full width - controlled by container margins */
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== RESPONSIVE - TABLET (768px - 850px) - Tighter 3-column height ===== */
@media screen and (min-width: 768px) and (max-width: 850px) {
    /* Reduce 3-column height to avoid longer look */
    .col-lg-4 .column-item {
        height: auto;  /* Auto height - fits content */
        max-height: none;  /* No constraint - let content control */
    }
    
    /* 3-column IMAGE and VIDEO on narrow tablet */
    .col-lg-4 .column-image,
    .col-lg-4 .column-video {
        height: 12rem !important;  /* 192px - slightly reduced for tighter space */
        flex: 0 0 12rem !important;
    }
    
    .col-lg-4 .column-text {
        height: auto;  /* Auto height - fits content */
        max-height: 12rem !important;  /* 192px - matches image/video */
        flex: 0 1 auto;  /* Allow shrinking to content size */
    }
    
    .column-heading {
        font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);  /* 15px to 17px - smaller for tight space */
    }
}

/* ===== RESPONSIVE - SMALL TABLET (639px - 767px) ===== */
@media screen and (min-width: 639px) and (max-width: 767px) {
    /* Flexible columns - Drop to single column */
    .three-column-customize {
        flex-direction: column;  /* Stack vertically */
        align-items: center;  /* Center horizontally */
    }
    
    .column-customize {
        width: 100%;  /* Full width for single column */
        max-width: 100%;  /* No width constraint */
    }
}

/* ===== RESPONSIVE - TABLET (768px - 1100px) ===== */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    /* Flexible columns - STAY in 2 or 3 columns, just scale smaller */
    .three-column-customize {
        flex-direction: row;  /* Keep horizontal */
        justify-content: center;
        flex-wrap: nowrap;  /* DON'T wrap - stay in original layout */
    }
    
    .column-customize {
        flex: 1;  /* All columns shrink equally */
        min-width: 0;  /* Allow shrinking below content size */
    }
    
    .column-heading {
        font-size: clamp(1rem, 2vw, 1.125rem);  /* 16px to 18px - responsive heading */
    }
    
    /* 1 column - auto height to fit content */
    .col-lg-12 .column-item {
        height: auto;  /* Auto height for single column - fits content */
        max-height: none;  /* No max-height constraint - let content control their own heights */
    }
    
    .col-lg-12 .column-text {
        height: auto;  /* Auto height - fits content for single column TEXT */
        max-height: none;  /* No max-height - full content display on tablet */
        overflow: visible;  /* No scrolling - show all content */
        flex: 0 1 auto;  /* Allow shrinking to content size */
        padding: 1rem 1.5rem;  /* 16px vertical, 24px horizontal - breathing room for text */
        /* Font size inherits from desktop - 0.9375rem (15px) */
    }
    
    /* Fixed height for 1-column IMAGE and VIDEO on tablet - override auto */
    .col-lg-12 .column-image,
    .col-lg-12 .column-video {
        height: 25.5rem !important;  /* Fixed height for image/video */
        flex: 0 0 25.5rem !important;  /* Don't grow */
    }
    
    /* 2 column - auto height to fit content */
    .col-lg-6 .column-item {
        height: auto;  /* Auto height - fits content */
        max-height: none;  /* No constraint - let content control */
    }
    
    /* 2-column IMAGE and VIDEO on tablet */
    .col-lg-6 .column-image,
    .col-lg-6 .column-video {
        height: clamp(22rem, 23vw + 1rem, 26rem) !important;  /* Responsive - taller like desktop */
        width: 100% !important;  /* Full width */
        flex-grow: 0;
        flex-shrink: 0;
    }
    
    /* 2-column IMAGE and VIDEO content on tablet - full width */
    .col-lg-6 .column-image img,
    .col-lg-6 .column-video video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
    
    /* 2-column IMAGE and VIDEO containers on tablet - no padding */
    .col-lg-6 .column-image,
    .col-lg-6 .column-video {
        padding: 0 !important;  /* No padding - content fills entire container */
        margin: 0 !important;  /* No margin */
        overflow: hidden !important;  /* No scroll on image/video containers */
    }
    
    .col-lg-6 .column-text {
        height: auto;  /* Auto height - fits content */
        max-height: clamp(22rem, 23vw + 1rem, 26rem) !important;  /* Responsive - matches image/video - taller */
        overflow-y: auto !important;  /* Ensure scrolling works */
        overflow-x: hidden !important;
        flex: 0 1 auto;  /* Allow shrinking to content size */
        /* Font size inherits from desktop - 0.9375rem (15px) */
    }
    
    /* 3 column - auto height to fit content */
    .col-lg-4 .column-item {
        height: auto;  /* Auto height - fits content */
        max-height: none;  /* No constraint - let content control */
    }
    
    /* 3-column IMAGE and VIDEO on tablet */
    .col-lg-4 .column-image,
    .col-lg-4 .column-video {
        height: 14rem !important;  /* Same as desktop */
        flex: 0 0 14rem !important;
    }
    
    .col-lg-4 .column-text {
        height: auto;  /* Auto height - fits content */
        max-height: 14rem !important;  /* 224px max - matches image/video */
        overflow-y: auto !important;  /* Ensure scrolling works */
        overflow-x: hidden !important;
        flex: 0 1 auto;  /* Allow shrinking to content size */
        /* Font size inherits from desktop - 0.9375rem (15px) */
    }
    
    /* Image/Video: Scale proportionally */
    .column-image {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    
    .column-video {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    
    .column-heading {
        font-size: clamp(1rem, 2vw, 1.125rem);  /* Scale down heading */
    }
    
    .b_profile_detail_img {
        flex-shrink: 1;  /* Allows title to shrink */
    }
    
    .b_profile_likes {
        flex-shrink: 0;  /* Prevents likes from shrinking */
    }
    
    /* Profile disc - h4 and h3 inherit from global - scale continuously */
    
    .b_profile_disc_content p {
        font-size: clamp(1rem, 2.8vw, 1.125rem);  /* 16px to 18px - MEDIUM size */
    }
    
    .b_profile_disc_Check p {
        font-size: clamp(1rem, 2.8vw, 1.625rem);  /* 16px to 26px - LARGER size */
    }
    
    /* jd-mspacing uses base style (0.9rem max) - no override needed */
    
    /* h5 inherits from global - scales continuously from mobile to desktop */
    
    .b_profile_disc_Check {
        margin: 0.25rem 0 0 0;  /* Tighter spacing - 4px */
    }
    
    .b_profile_disc_Check.first-check {
        margin-top: 1rem;  /* Reduced from 1.3125rem */
    }
    
    /* Button scaling handled by global clamp values */
}

/* Disc image height handled in main mobile query below */

/* ===== RESPONSIVE - SMALL TABLET / LARGE MOBILE (below 767px) ===== */
@media screen and (max-width: 767px) {
    /* Flexible columns - Drop to single column */
    .three-column-customize {
        flex-direction: column;  /* Stack vertically */
        align-items: center;  /* Center horizontally */
    }
    
    /* Add spacing between stacked columns */
    .column-customize {
        margin-bottom: 1rem;  /* 32px spacing between stacked columns */
    }
    
    .column-item {
        width: 100%;  /* Full width within container */
        max-height: none !important;  /* Let content control height */
    }
    
    /* Override fixed heights on column-item - let content determine height */
    .col-lg-12 .column-item,
    .col-lg-6 .column-item,
    .col-lg-4 .column-item {
        height: auto !important;  /* Fit content height */
        max-height: none !important;  /* Remove max-height constraint on container */
    }
    
    /* Override fixed heights on column-text - full height on mobile, no scrolling */
    .col-lg-12 .column-text,
    .col-lg-6 .column-text,
    .col-lg-4 .column-text {
        height: auto !important;  /* Fit content height */
        min-height: auto !important;  /* Remove min-height constraint */
        max-height: none !important;  /* Remove max-height - no limit on stacked mobile */
        overflow: visible !important;  /* Disable scroll - show full content */
        flex: 0 1 auto !important;  /* Allow shrinking to content size */
        padding: 0 !important;  /* Remove padding on mobile for cleaner stacked look */
    }
    
    /* Hide scroll indicators on mobile when columns are stacked */
    .column-text .scroll-indicator {
        display: none !important;  /* Hide scroll indicator on stacked mobile */
    }
    
    /* Images and videos - horizontal rectangles (4:3 aspect ratio) */
    .column-image,
    .col-lg-12 .column-image,
    .col-lg-6 .column-image,
    .col-lg-4 .column-image {
        height: auto !important;  /* Auto height based on aspect ratio */
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;  /* Horizontal squarish rectangle */
        object-fit: cover;
        flex: 0 0 auto !important;
        padding-top: 5px;  /* 5px top padding restored */
    }
    
    .column-video,
    .col-lg-12 .column-video,
    .col-lg-6 .column-video,
    .col-lg-4 .column-video {
        height: auto !important;  /* Auto height based on aspect ratio */
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;  /* Horizontal squarish rectangle */
        flex: 0 0 auto !important;
        padding-top: 5px;  /* 5px top padding restored */
    }
    
    /* Column heading responsive for smaller screens */
    .column-heading {
        font-size: clamp(0.875rem, 2.5vw, 1rem);  /* 14px to 16px - smaller on stacked mobile */
    }
    
    /* Container padding for mobile */
    .flexible-columns .container-fluid {
        padding: 0 1.25rem;  /* 20px fixed padding on mobile */
    }
    
    /* b_profile_disc responsive styles - h4 and h3 inherit from global - scale continuously */
    
    .b_profile_disc_content p {
        font-size: clamp(1rem, 2.8vw, 1.125rem);  /* 16px to 18px - MEDIUM size */
    }
    
    .b_profile_disc_Check p {
        font-size: clamp(1rem, 2.8vw, 1.625rem);  /* 16px to 26px - LARGER size */
    }
    
    /* jd-mspacing uses base style (0.9rem max) - no override needed */
    
    /* h5 inherits from global - scales continuously from mobile to desktop */
    
    .b_profile_disc_Check {
        margin: 0.25rem 0 0 0;  /* Tighter spacing - 4px */
    }
    
    .b_profile_disc_Check.first-check {
        margin-top: 1rem;  /* Reduced spacing */
    }
    
    /* Button scaling handled by global clamp values */
    
    /* Profile disc - Mobile layout */
    .b_profile_disc {
        flex-direction: column;  /* Stack vertically on mobile */
    }

    .b_profile_disc_img {
        width: 100%;
    }

    .b_profile_disc_img img {
        width: 100%;
        height: clamp(18rem, 50vw, 25rem);  /* 288px → 400px - scales smoothly with viewport */
        object-fit: cover;
        object-position: center;
    }

    .b_profile_disc_content {
        max-height: none;  /* No height cap when stacked */
        margin-top: 1.3rem;
    }
    
    /* Banner - responsive height on mobile */
    .b_profile {
        height: clamp(24rem, 56vw, 32rem);  /* 384px to 512px - responsive, 20% reduction */
        background-size: cover;
        background-position: center top;
    }
    
    .b_profile_banner_img {
        object-fit: cover;
        object-position: center top;
    }
    
    /* Disable scroll on mobile - full height content */
    .limit_scroll_new {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    
    /* Hide scroll indicator on mobile */
    .limit_scroll_new .scroll-indicator {
        display: none;
    }
    
    .b_profile_disc_buttons {
        flex-direction: row;  /* Keep horizontal on mobile */
        justify-content: flex-start;  /* Left aligned */
        margin-bottom: 2rem !important;  /* 32px - ensure buttons show above next section */
        position: relative;  /* Ensure proper stacking context */
        z-index: 1;  /* Above next section */
    }
    
    /* Ensure dynamic-buttons specifically have proper spacing on mobile */
    .b_profile_disc_buttons.dynamic-buttons {
        margin-bottom: 2rem !important;  /* 32px - prevent hiding behind next section */
        padding-bottom: 1rem !important;  /* 16px - extra padding for safety */
    }
}

/* ===== RESPONSIVE - MOBILE WIDTH (below 420px) - 95% width ===== */
@media screen and (max-width: 420px) {
    /* Set specific margin on flexible-columns to control width */
    .flexible-columns {
        margin: 1.275rem 0.4rem 0 0.4rem !important;  /* Small side margins (6.4px) to achieve ~95% width effect */
    }
    
    /* Remove container padding constraints */
    .flexible-columns .container-fluid {
        padding: 0 !important;  /* Remove padding to maximize width */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .column-customize {
        width: 100% !important;  /* Full width within container */
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .column-item {
        width: 100% !important;  /* Full width within the column-customize */
    }
}

/* ===== RESPONSIVE - MOBILE (below 640px) ===== */
@media screen and (max-width: 640px) {
    /* Column heading - even smaller on very small screens */
    .column-heading {
        font-size: clamp(0.8125rem, 3vw, 0.9375rem);  /* 13px to 15px - very small screens */
    }
    
    /* Social icons - Responsive scaling */
    .b_profile_social {
        padding: clamp(0.625rem, 3vw, 1.25rem);  /* 10px to 20px */
    }
    
    .b_profile_social div {
        gap: clamp(0.3125rem, 2vw, 0.625rem);  /* 5px to 10px */
    }
    
    .b_profile_social a {
        height: clamp(1.9375rem, 10vw, 3rem);  /* 31px to 48px (35% reduction) */
        width: clamp(1.9375rem, 10vw, 3rem);
    }
    
    .b_profile_social a i {
        font-size: clamp(0.875rem, 4.5vw, 1.3125rem);  /* 14px to 21px (35% reduction) */
    }
    
    /* Profile detail - Mobile overrides - BANNER ONLY */
    .b_profile .b_profile_detail {
        clip-path: none;  /* Remove angled shadow on mobile */
        width: 100%;
        flex-direction: column;
        align-content: center;
        padding: 0 0.3125rem 0.5625rem;  /* 0 / 5px / 9px - no top padding */
    }
    
    .b_profile_detail_img {
        flex-direction: column;  /* Stack vertically on mobile */
        position: relative;
        bottom: 1.5625rem;  /* 25px */
    }
    
    .b_profile_detail_img h3 {
        text-align: center;  /* Center text on mobile */
        font-size: clamp(1.525rem, 4.5vw, 1.875rem) !important;  /* 24px to 30px - min +0.4rem */
    }
    
    .b_profile_detail_img h4 {
        text-align: center;  /* Center text on mobile */
    }
    
    .b_profile_likes {
        width: 100%;
        display: flex;  /* Flex for mobile - horizontal row */
        justify-content: space-around;
    }
    
    .b_profile_likes ul {
        display: flex;  /* Flex for mobile - horizontal row */
        gap: 0;
    }
    
    .b_profile_likes li {
        display: inline-block;  /* Inline for mobile - horizontal */
    }
    
    .b_profile_likes a {
        padding: clamp(0.125rem, 0.5vw, 0.125rem) clamp(1rem, 4vw, 1.25rem);  /* 2px / 16px to 20px (20% reduction) */
        padding-left: 0.3125rem;  /* 5px */
        font-size: clamp(0.75rem, 3.5vw, 0.9375rem);  /* 12px to 15px (20% reduction) */
        gap: clamp(0.375rem, 2vw, 0.5rem);  /* 6px to 8px (20% reduction) */
    }
    
    /* Main tabs - Mobile overrides */
    .b_profile_tabs {
        top: 0;  /* Reset negative positioning */
        margin-top: 0.9375rem;  /* 15px spacing */
        margin-bottom: 0.9375rem;  /* 15px spacing */
    }
    
    /* Wrapper adjustments for mobile */
    .b_profile_tabs_wrapper {
        /* width: 90%;   Wider on mobile
       /* padding: 0 1.25rem 0.5rem 0;   Right padding for fade (20px), bottom (8px), left is 0 */
        width: 100%;  /* Full width on mobile to allow proper scrolling */
        padding: 0;  /* Remove all padding to allow full scroll range */
        overflow: visible;  /* Allow content to scroll - critical for mobile */
        
    }
    
    /* Hide left fade overlay on mobile, keep right fade */
    .b_profile_tabs_wrapper::before {
        display: none;
    }
    
    /* Right fade overlay for mobile */
    .b_profile_tabs_wrapper::after {
        right: 0;  /* Align with wrapper right edge */
        width: 1.875rem;  /* 30px */
    }
    
    .b_profile_tabs ul {
        gap: clamp(0.5rem, 2vw, 0.625rem);  /* Responsive gap on mobile: 8px min, 10px max */
        padding: 0 1.25rem 0 1.25rem;  /* Add equal padding left and right for proper scroll */
        overflow-x: auto;  /* Ensure scrolling works */
        overflow-y: hidden;  /* Hide vertical overflow */
    }
    
    .b_profile_tabs li:first-child {
        margin-left: 0;  /* Ensure first item starts at the left edge */
    }
    
    .b_profile_tabs li a {
        padding: 0.625rem 0.9375rem;  /* More compact padding (10px / 15px) */
        min-width: max-content;  /* Prevent text wrap */
        border-bottom: transparent;
    }
    
    .b_profile_tabs li a::after {
        width: 77%;  /* Same as desktop - full width */
        left: 50%;  /* Same as desktop - centered */
        transform: translateX(-50%);  /* Same as desktop - centered */
        height: 0.125rem;  /* 2px - Same as desktop */
    }
    
    /* Tabbed disc section - mobile overrides */
    .b_profile_disc_Wrap .b_profile_tabs {
        top: -0.75rem;  /* Less negative pull on mobile */
        margin-bottom: 0.5rem;  /* Tighter spacing */
    }
    
    .b_profile_disc_Wrap .b_profile_tabs ul {
        gap: clamp(0.375rem, 1.5vw, 0.625rem);  /* Tighter gap on mobile: 6px to 10px */
        padding-left: 0.5rem;  /* Small left padding */
        padding-right: 1.1rem;  /* 15px right padding for better spacing */
        justify-content: flex-start;  /* Left align on mobile for better UX */
    }
    
    .b_profile_disc_Wrap .b_profile_tabs li a {
        /*font-size: clamp(0.5rem, 2vw, 0.6875rem);   Smaller on mobile: 8px to 11px */
        font-size: clamp(1rem, 2.8vw, 1.125rem);  /* Same as jd-mspacing: 16px to 18px - caps will make it look bigger */
        padding: 0.5rem 0.375rem;  /* Compact padding: 8px / 6px */
        letter-spacing: 0.3px;  /* Tighter letter spacing */
    }
    
    /* Reduce section spacing on mobile for video and gallery */
    .text_section:has(.vid_section) {
        margin-top: 0.9rem !important;  /* 14.4px - tighter spacing on mobile */
    }
    
    .section_space:has(.gallery_sec) {
        margin-top: 0.9rem !important;  /* 14.4px - tighter spacing on mobile */
    }
}

/* =========================================
   VIDEO SECTION (MEDIA)
   ========================================= */

.vid_section {
    display: flex;
    gap: 2%;
    max-height: 30rem;  /* 480px - matches disc section */
        width: 100%;
    max-width: 100%;
    margin: 0 auto;  /* Center and respect parent constraints */
}

.vide_embed {
    flex: 0 0 clamp(58%, 62vw, 67%);  /* Shrinks slower - maintains more width */
    max-height: 30rem;
    overflow: hidden;
    border-radius: 1.5rem;  /* 8px */
    display: flex;  /* Enable centering */
    align-items: center;  /* Center vertically */
    justify-content: center;  /* Center horizontally */
    background: #000;  /* Black background for video */
    position: relative;  /* Ensure proper positioning context */
}

.vide_embed iframe,
.vide_embed img {
        width: 100%;
    height: 100%;
    object-fit: contain;  /* Show full video without cropping */
        object-position: center;
    margin: auto;  /* Center both horizontally and vertically */
    display: block;  /* Ensure margin auto works */
    flex-shrink: 0;  /* Prevent shrinking */
}

/* YouTube error message styling - ensures it fills container */
.vide_embed iframe {
    background: #000;  /* Match video background */
}
    
.vide_meta {
    flex: 1;  /* Takes remaining space - shrinks faster */
    min-width: 15rem;  /* Minimum 240px to stay functional */
    max-width: calc(42% - 1rem);  /* Accounts for gap and border */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;  /* Prevent horizontal scroll */
    max-height: 30rem;  /* 480px - ensures scrolling works */
    padding: 0;  /* Remove padding - handled by sticky header and content */
    border: 1px solid #EAEAEA;
    border-radius: 1.5rem;  /* 24px */
    box-sizing: border-box;  /* Include border in width calculation */
    will-change: scroll-position;  /* Optimize for sticky rendering */
    position: relative;  /* Create positioning context for sticky children */
    /* Custom scrollbar styling - hidden by default */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;  /* Hidden on page load */
}

.vide_meta:hover,
.vide_meta.scrolling {
    scrollbar-color: rgba(249, 115, 22, 0.15) #f0f0f0;  /* Show on hover/scroll */
}

/* Webkit scrollbar for vide_meta */
.vide_meta::-webkit-scrollbar {
    width: 0.625rem;  /* 10px */
}

.vide_meta::-webkit-scrollbar-track {
    background: transparent;  /* Hidden by default */
    border-radius: 0.625rem;
}

.vide_meta::-webkit-scrollbar-thumb {
    background: transparent;  /* Hidden by default */
    border-radius: 0.625rem;
}

.vide_meta:hover::-webkit-scrollbar-track,
.vide_meta.scrolling::-webkit-scrollbar-track {
    background: #f0f0f0;  /* Show on hover/scroll */
}

.vide_meta:hover::-webkit-scrollbar-thumb,
.vide_meta.scrolling::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.15);  /* Show on hover/scroll */
}

.vide_meta::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.4);  /* More visible orange when hovering scrollbar */
}

/* Scroll indicator for video list */
.vide_meta .scroll-indicator {
    position: sticky;
    bottom: 0.5rem;  /* Fixed at bottom */
    right: 0;
    margin-top: 0;
    float: right;
    background: transparent;
    padding: 0 1rem 0.5rem 0;  /* Right padding to align with content */
    z-index: 5;  /* Below sticky tabs/progress bar */
}

.vide_meta .scroll-indicator img {
    width: 1.5rem;  /* 24px */
        height: auto;
}

.vide_meta_top {
    display: flex;
    gap: 0;  /* Remove gap - use divider instead */
    margin-bottom: 0;
    position: sticky !important;  /* Stay at top when scrolling */
    top: 0;
    background: white;  /* Solid background so content scrolls under it */
    z-index: 10;
    padding: 1.25rem 1.25rem 0.75rem 1.25rem;  /* Top/sides match container, bottom for spacing */
    border-radius: 1.5rem 1.5rem 0 0;  /* Match container top radius */
    will-change: transform;  /* Optimize sticky rendering */
    backface-visibility: hidden;  /* Prevent flickering */
    transform: translateZ(0);  /* Force GPU acceleration */
   /* border-bottom: 1px solid #e0e0e0;*/
}

/* Center divider between tabs */
.vide_meta_top::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 1.25rem;
    bottom: 0.75rem;
    width: 1px;
    background: #B9B9B9;
    transform: translateX(-50%);
}

.podcast-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;  /* Fixed small gap - equal for both tabs */
    padding: 0.75rem clamp(0.5rem, 2vw, 1rem);  /* Responsive padding */
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    flex: 1 1 50%;  /* Equal width tabs with flexibility */
    position: relative;
    min-width: 0;  /* Allow shrinking */
    text-align: center;
    /* Font size inherits from global a */
}

.podcast-tab span {
    white-space: nowrap;  /* Prevent text wrapping */
}

.podcast-tab i {
    flex-shrink: 0;  /* Icons don't shrink */
}

.podcast-tab.active {
    border-bottom-color: transparent;  /* Hide full border */
    color: var(--org);
}

.podcast-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;  /* Align with bottom edge */
    left: 50%;
    transform: translateX(-50%);
    width: 70%;  /* 70% width border */
    height: 2px;
    background: var(--org);
    transition: all 0.3s;
}

.podcast-tab:hover {
    color: var(--org);
}

.vide_meta_progr {
    padding: 1rem 1.25rem 0.75rem 1.25rem;  /* Extra top padding to clear tab border */
    margin: 0;
    position: sticky !important;
    top: calc(1.25rem + 0.75rem + 2.5rem);  /* Calculate: tab top padding + bottom padding + approx tab height */
    z-index: 9;  /* Below tabs (z-index: 10) so border shows */
    background: white;  /* White background for sticky area */
    display: block;  /* Visible for testing */
    will-change: transform;  /* Optimize sticky rendering */
    backface-visibility: hidden;  /* Prevent flickering */
    transform: translateZ(0);  /* Force GPU acceleration */
}

.vide_meta_progr.playing {
    display: block;  /* Show when playing */
}

.vide_meta_progr > span {
    display: block;
    height: 6px;  /* Track height */
    background: #f0f0f0;  /* Light gray track - matches scrollbar */
    border-radius: 3px;
    overflow: visible;  /* Allow glow to show */
    position: relative;
}

.vide_meta_progr .progress {
    display: block;
    height: 6px;
    width: 0%;  /* Starts at 0% - fills as video plays */
    background: rgba(249, 115, 22, 0.15);  /* Light transparent orange - matches scrollbar */
    transition: width 0.5s ease;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 0;
}

.vide_meta_progr:hover .progress {
    background: rgba(249, 115, 22, 0.4);  /* More visible on hover - matches scrollbar hover */
}

.podcast-content {
        display: none;
    }
    
.podcast-content.active {
    display: block;
    padding: 0 0 1.25rem 0;  /* No side padding - content fills width */
}

.vide_meta_social {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.3s;
    align-items: center;
}

.vide_meta_social:hover {
    background: #f5f5f5;
}

.vide_meta_social img {
    width: 2rem;  /* 64px */
    height: 2rem;
    border-radius: 0.375rem;
    object-fit: cover;
    flex-shrink: 0;
}

.vide_meta_social div {
    flex: 1;
}

.vide_meta_social h4 {
    margin-bottom: 0.25rem;
    font-size: clamp(0.5rem, 2.6vw, 1.3125rem) !important;  /* 8px at 230px to 21px at 767px - smooth scaling for video section only */
}

/* Video section h4 on desktop */
@media screen and (min-width: 768px) {
    .vide_meta_social h4 {
        font-size: clamp(0.8125rem, 0.4vw + 0.778rem, 0.875rem) !important;  /* 13px at 768px to 14px at 1124px - smooth scaling */
    }
}

.vide_meta_social span {
    font-size: clamp(0.6875rem, 2vw, 0.8125rem);  /* 11px to 13px */
    color: #666;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.vide_meta_link {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #e0e0e0;
}

.vide_meta_link:first-of-type {
    margin-top: 1rem;
}

.vide_meta_link a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #333;  /* Darker gray - stronger contrast */
    transition: color 0.3s;
}

.vide_meta_link a:hover {
    color: var(--org);
}

.vide_meta_link i {
    color: var(--org);
}

/* =========================================
   GALLERY SECTION
   ========================================= */

.section_space {
    padding: 3rem 0 0 0;  /* Same spacing as text_section */
}

.gallery_sec {
    width: 100%;
}

.img_gallery {
    max-width: 96%;  /* Default width for mobile/small screens */
    margin: 1.5rem auto 0;
}

/* Desktop: Smooth transition from 768px to 1400px - maintains 1.8:1 ratio throughout */
@media screen and (min-width: 768px) {
    .img_gallery {
        max-width: clamp(75%, -0.585vw + 83.19%, 78.7%);  /* 78.7% at 768px to 75% at 1400px - smooth reduction */
    }
    
    .gallery-left {
    height: clamp(336px, 39.08vw + 35.9px, 583px) !important;  /* Fixed height */
    overflow: hidden !important;
    }
    
    .gallery-left img {
    width: 100%;
    height: 100% !important;  /* Fill container completely */
    min-height: 100% !important;  /* Ensure full fill */
    aspect-ratio: unset !important;
    object-fit: cover !important;  /* Crop to fit container */
    object-position: center !important;  /* Center the crop */
    border-radius: 1.5rem;
    display: block;  /* Remove inline spacing */
    }
    
    .gallery-right img {
        width: 100%;
        height: clamp(126px, 14.67vw + 13.5px, 219px) !important;  /* Proportional to main image - smooth growth */
        aspect-ratio: unset !important;
        object-fit: cover;
        border-radius: 1.5rem;
        display: block;
    }
    
    /*  .gallery-last img {
        height: clamp(196px, 24.41vw + 8.4px, 350px) !important; Perfect alignment: grows in sync with main image 
        aspect-ratio: unset !important;
    }*/
    .gallery-last img {
    height: clamp(196px, 24.41vw + 8.4px, 350px) !important;
    min-height: clamp(196px, 24.41vw + 8.4px, 350px) !important;
    max-height: clamp(196px, 24.41vw + 8.4px, 350px) !important;
    object-fit: cover !important;
    object-position: center !important;
}
    
    .img_gallery.single-slider-mode .gallery-left {
        height: auto !important;
        overflow: visible !important;
    }
    
    .img_gallery.single-slider-mode .gallery-left img {
        height: clamp(336px, 39.08vw + 35.9px, 500px) !important;
        aspect-ratio: unset !important;
        display: block;
    }

    /* Ensure generic gallery-left image sizing does not override single slider */
    .img_gallery:not(.single-slider-mode) .gallery-left img {
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Increase specificity so single slider height always wins when active */
    .img_gallery.single-slider-mode .gallery-left > img.d-block.w-100 {
        height: clamp(336px, 39.08vw + 35.9px, 500px) !important;
        min-height: unset !important;
        max-height: unset !important;
    }
}

/* Lock at final values from 1400px upwards - maintains 1.8:1 ratio */
@media screen and (min-width: 1400px) {
    .img_gallery {
        max-width: 75% !important;  /* Fixed at 75% for 1.8:1 ratio */
    }
    
    .gallery-left img,
    .img_gallery.single-slider-mode .gallery-left img {
        height: 500px !important;  /* 1050px ÷ 1.8 = 583px - maintains 1.8:1 ratio */
        min-height: 500px !important;
        max-height: 500px !important;
    }
    
    .gallery-right img {
        height: 219px !important;  /* Small top images */
        min-height: 219px !important;
        max-height: 219px !important;
    }
    
    .gallery-last img {
        height: 350px !important;  /* Fixed at 350px at 1400px+ - perfect bottom alignment */
        min-height: 350px !important;
        max-height: 350px !important;
    }
}

.img_gallery .row {
    margin: 0;
}

.gallery-left {
    padding: 0 !important;
}

.gallery-right {
    padding-left: 0.875rem !important;  /* 14px gap */
    padding-right: 0 !important;
}

.gallery-right .row {
   /* margin-bottom: 0.875rem;   14px gap */
}

.gallery-right .row:last-child {
    margin-bottom: 0;
}

.gallery-right .col-md-6 {
    padding: 0 0.4375rem 0 0;  /* 7px gap between images */
}

.gallery-right .col-md-6:last-child {
    padding: 0 0 0 0.4375rem;
}

.gallery-last {
    padding: 0 !important;
}

/* Gallery image styles controlled by breakpoints (desktop 768px+ and mobile 767px-) */

.pagination-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1rem);  /* 8px to 16px - responsive gap */
    margin-top: clamp(1rem, 3vw, 1.5rem);  /* 16px to 24px - responsive margin */
}

/* Arrow buttons in pagination */
.pagination-dots > span {
    width: clamp(0.85rem, 6vw, 2rem) !important;  /* 32px to 48px - more visible scaling */
    height: clamp(0.85rem, 6vw, 2rem) !important;
    min-width: 0.85rem;
    min-height: 0.85rem;
    border-radius: 50%;
    background: var(--org);  /* Orange background */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;  /* White icon */
    font-size: clamp(0.5rem, 2.5vw, 1.25rem);  /* Icon size scales */
    flex-shrink: 0;  /* Don't shrink */
}

.pagination-dots > span:hover {
    background: #ea580c;  /* Darker orange on hover */
    transform: scale(1.1);
}

.pagination-dots > span:active {
    background: #fff;  /* Inverted on click */
    color: var(--org);  /* Orange icon on white */
    border: 2px solid var(--org);
}

.pagination-dots .dotsad {
    display: flex;
    gap: clamp(0.25rem, 1vw, 0.5rem);  /* 4px to 8px - responsive gap between dots */
    align-items: center;
    justify-content: center;
}

.pagination-dots button {
    width: clamp(0.3rem, 1.5vw, 0.75rem);  /* 4.8px to 12px - responsive dot size */
    height: clamp(0.3rem, 1.5vw, 0.75rem);
    min-width: 0.3rem;
    min-height: 0.3rem;
    border-radius: 50%;
    background: var(--org);  /* All orange by default */
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0.5;  /* Semi-transparent for inactive */
    position: relative;
}

.pagination-dots button.active {
    opacity: 1;  /* Full opacity for active */
    transform: scale(1.3);  /* Larger for active */
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);  /* Orange glow for active */
}

.pagination-dots button:hover {
    opacity: 0.8;  /* Medium opacity on hover */
    transform: scale(1.15);
}

.pagination-dots button:active {
    transform: scale(0.9);  /* Shrink on click for feedback */
}

.page-counter {
    display: inline-block;
    padding: clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 3vw, 1.5rem);  /* Responsive padding */
    background: white;  /* White background */
    color: var(--org);  /* Orange text */
    border-radius: 0.5rem;  /* Rectangular, not round */
    font-size: clamp(0.8125rem, 2vw, 0.9375rem);  /* 13px to 15px - responsive */
    font-weight: 600;
    letter-spacing: 0.5px;
    min-width: clamp(4rem, 10vw, 5rem);  /* Responsive minimum width */
    text-align: center;
}

/* Single slider mode - when 3 or fewer images on desktop */
.img_gallery.single-slider-mode .gallery-left {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.img_gallery.single-slider-mode .gallery-right {
    display: none !important;  /* Hide small images grid */
}

/* ===== RESPONSIVE - MOBILE (below 767px) ===== */
@media screen and (max-width: 767px) {
    .vid_section {
        flex-direction: column;
        max-height: none;
        gap: 1rem;  /* Gap between stacked video and list */
    }
    
    .vide_embed {
        flex: 0 0 auto;
        height: auto;  /* Auto height - controlled by aspect ratio */
        width: 100%;
        aspect-ratio: 1.5 / 1;  /* 1.5:1 ratio - wider to prevent taking up too much vertical space */
        max-height: 28rem;  /* Cap at 448px - increased for better visibility */
        display: flex !important;  /* Enable centering */
        align-items: center !important;  /* Center vertically */
        justify-content: center !important;  /* Center horizontally */
        background: #000;  /* Black background for letterboxing */
        position: relative !important;  /* Ensure proper positioning context */
    }
    
    .vide_embed iframe,
    .vide_embed img {
        height: 100% !important;  /* Fill container */
        width: 100% !important;
        aspect-ratio: 1.5 / 1 !important;  /* Match container ratio - wider/flatter */
        object-fit: contain !important;  /* Show full video without cropping */
        object-position: center !important;
        margin: auto !important;  /* Center both directions */
        display: block !important;  /* Ensure margin auto works */
        flex-shrink: 0 !important;  /* Prevent shrinking */
    }
    
    .vide_meta {
        width: 100% !important;  /* Full width - same as video */
        max-width: 100% !important;  /* Override desktop max-width */
        min-width: auto !important;  /* Remove desktop min-width */
        max-height: 29rem;  /* 368px - matches video height */
        padding: 0;  /* Reset padding */
    }
    
    .vide_meta_social {
        gap: 0.7rem;  /* Reduced gap on mobile */
    }
    
    .vide_meta_social img {
        width: clamp(1.3rem, 8.615vw + 0.062rem, 2rem) !important;  /* 1.3rem at 230px, grows to 2rem at 360px, stays 2rem until 767px */
        height: clamp(1.3rem, 8.615vw + 0.062rem, 2rem) !important;  /* Matches width for square images */
    }
    
    .vide_meta_link a,
    .vide_meta_link span {
        font-size: clamp(0.6875rem, 1.0582vw + 0.554rem, 2rem) !important;  /* 11px at 230px, scales to 12px at 360px, then to 16px at 767px */
    }
    
    /* Gallery - Single image slider on mobile */
    .img_gallery {
        max-width: 96% !important;  /* Wider on mobile - override desktop values */
    }
    
    .gallery-left {
        padding: 0 !important;
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .gallery-right {
        display: none !important;  /* Hide small images grid on mobile - show only main slider */
    }
    
    .gallery-left img {
        height: auto !important;  /* Auto height - controlled by aspect ratio */
        width: 100% !important;
        aspect-ratio: 1.2 / 1 !important;  /* 1.2:1 ratio on mobile - wider than tall but more compact than desktop */
        object-fit: cover;
        max-height: 21rem;  /* Cap at 336px to match desktop transition at 768px */
        border-radius: 1.5rem;  /* 24px - larger radius on mobile for softer look */
    }
    
    .img_gallery .row {
        display: block;  /* Override Bootstrap grid on mobile */
    }
}

/* ===== RESPONSIVE - SMALL MOBILE (below 400px) ===== */
@media screen and (max-width: 400px) {
    .podcast-tab {
        gap: 0.25rem;  /* Tighter gap on small screens */
        padding: 0.75rem 0.5rem;  /* Reduced padding */
    }
    
    .podcast-tab span {
        font-size: clamp(0.625rem, 3vw, 0.75rem);  /* 10px to 12px - smaller on tiny screens */
    }
    
    .podcast-tab i {
        font-size: clamp(0.875rem, 3.5vw, 1rem);  /* 14px to 16px - icons scale too */
    }
}

/* =========================================
   B_PROFES SECTION (Call-to-Action with Checks)
   ========================================= */

.b_profes {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.5rem, 3vw, 2rem);  /* 24px to 32px - responsive spacing */
    padding: 0;
}

.b_profes_in {
    background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #F97316 100%);  /* Orange gradient - replaces pattern */
    background-size: cover;
    border-radius: 1.5rem;  /* 24px */
    background-position: center;
    width: 56%;  /* Reduced from 70% - narrower for better focus */
    padding: 3rem;  /* 48px */
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.2);  /* Soft orange shadow for depth */
}

/* H4 in b_profes_in and customized_b_profes_in - white version of text_section_top h4 styling */
.b_profes_in h4,
.customized_b_profes_in h4 {
    color: #fff;
    font-family: "Catamaran", sans-serif;
    font-size: 0.9375rem;  /* 15px */
    font-weight: 500;
    letter-spacing: 0.04375rem;  /* 0.7px */
    margin-bottom: 0.9375rem;  /* 15px */
    text-transform: uppercase;
}

/* Add spacing to jd-mspacing in b_profes_in and customized_b_profes_in sections */
.b_profes_in .jd-mspacing,
.customized_b_profes_in .jd-mspacing {
    margin-top: 0.9375rem;  /* 15px - consistent with h4 margin-bottom */
    padding-top: 0.3125rem;  /* 5px - extra breathing room */
}

.b_profile_disc_content h4:first-of-type {
    font-family: 'Poppins', sans-serif;  /* Poppins for intro h4s - friendly, impactful feel */
    font-size: clamp(0.8rem, 1vw, 1.275rem) !important;  /* 12.8px to 20.4px - override Bootstrap */
    text-transform: uppercase;  /* Ensure uppercase */
}

/* H4 in text_section_top and dynamic-slogan - consistent orange styling */
.text_section_top h4,
h4.dynamic-slogan {
    color: var(--org);
    font-family: "Catamaran", sans-serif;
    font-size: 0.9375rem;  /* 15px */
    font-weight: 500;
    letter-spacing: 0.04375rem;  /* 0.7px */
    margin-bottom: 0.9375rem;  /* 15px */
    text-transform: uppercase;  /* Match disc section style */
}

.b_profes_in h3 {
    color: #fff;
    font-size: clamp(1.3125rem, 3.5vw, 1.875rem);  /* 21px to 30px - consistent sizing */
    font-weight: 600;
    margin-bottom: 0.75rem;  /* 12px */
}

.b_profes .jd-mspacing {
    color: white;
    margin-bottom: clamp(0.5rem, 1.5vw, 1rem);  /* 8px to 16px - responsive spacing */
}

.b_profes_in .b_profile_disc_scroll {
    max-height: clamp(18rem, 5vw + 14rem, 25rem);  /* 288px to 400px - responsive max-height */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.625rem;  /* 10px - space for scrollbar */
    margin-bottom: 0.75rem;  /* 12px spacing before scroll indicator */
    
    /* Custom scrollbar - hidden by default */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;  /* Hidden on page load */
}

.b_profes_in .b_profile_disc_scroll:hover {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;  /* Show on hover */
}

/* At 906px and above - content fits, no scroll needed */
@media screen and (min-width: 906px) {
    .b_profes_in .b_profile_disc_scroll {
        max-height: none !important;  /* Remove max-height - let content fit naturally */
        overflow-y: visible !important;  /* No scroll */
        padding-right: 0 !important;  /* No scrollbar space needed */
    }
    
    .b_profes_in .scroll-indicator {
        display: none !important;  /* Hide scroll indicator when not needed */
    }
    
    .b_profes_in .b_profile_disc_scroll::-webkit-scrollbar {
        display: none !important;  /* Hide scrollbar on webkit browsers */
    }
}

.b_profes_in .b_profile_disc_scroll::-webkit-scrollbar {
    width: 0.375rem;  /* 6px */
}

.b_profes_in .b_profile_disc_scroll::-webkit-scrollbar-track {
    background: transparent;  /* Hidden by default */
}

.b_profes_in .b_profile_disc_scroll::-webkit-scrollbar-thumb {
    background: transparent;  /* Hidden by default */
    border-radius: 0.1875rem;  /* 3px */
}

.b_profes_in .b_profile_disc_scroll:hover::-webkit-scrollbar-track {
    background: transparent;  /* Stay transparent */
}

.b_profes_in .b_profile_disc_scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);  /* Show white scrollbar on hover */
}

.b_profes_in .b_profile_disc_scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);  /* More visible when hovering scrollbar */
}

.b_profes_in .b_profile_disc_Check {
    margin-bottom: 1.25rem;  /* 20px */
}

.b_profes_in .b_profile_disc_Check:last-child {
    margin-bottom: 0;
}

.b_profes_in .b_profile_disc_Check img {
    background: #fff;
    border-radius: 0.25rem;  /* 4px */
}

.b_profes_in .b_profile_disc_Check h5,
.customized_b_profes_in .b_profile_disc_Check h5 {
    font-family: "Catamaran", sans-serif;  /* Match H4 font for consistent thinness */
    color: #fff;
    font-weight: 500;  /* Medium weight on larger screens - same as H4 */
    text-transform: uppercase;
    letter-spacing: clamp(0.01rem, 0.8vw + 0.012rem, 0.072rem);  /* Responsive: 0.01rem on small to 0.072rem on large */
}

/* Lighter font-weight on very small screens only */
@media screen and (max-width: 359px) {
    .b_profes_in .b_profile_disc_Check h5,
    .customized_b_profes_in .b_profile_disc_Check h5 {
        font-weight: 300;  /* Lighter on screens below 360px */
    }
}

.b_profes_in .b_profile_disc_Check .jd-mspacing {
    color: #fff;
    margin-bottom: clamp(-0.625rem, 1.125vw, -0.25rem);  /* Negative margin: pulls content tighter on large screens, less tight on small */
}

.b_profes_in .scroll-indicator {
    display: block;
    text-align: right;
    margin: 0 0 0.75rem 0;  /* 12px bottom spacing */
    padding: 0;
    color: #fff !important;  /* White text */
}

.b_profes_in .scroll-indicator img {
    background-color: transparent !important;  /* Transparent background on image */
    filter: brightness(0) invert(1);  /* Makes arrow white */
    width: 1.5rem;  /* 40px - fixed size on desktop */
    height: auto;
    display: inline-block;
}

.button_org_bg_Se {
    margin-top: 1.7rem;  /* 8px - reduced from 20px for tighter spacing */
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;  /* 10px */
}

.button_org_bg_Se a {
    border: 1px solid #fff;
    color: #fff;
    padding: 0.5rem 1.5625rem;  /* 8px 25px */
    border-radius: 0.875rem;  /* 14px */
    margin-right: 0.625rem;  /* 10px */
    font-size: 0.8125rem;  /* 13px */
    text-decoration: none;
    transition: 0.15s;
    background: transparent;
}

.our_projects:hover,
.our_projects1:hover {
    color: #F26022;  /* Orange text */
    background-color: white;  /* White background */
}

/* Mobile Responsive */
@media screen and (max-width: 767px) {
    .section_space.primary-section.lazy-section:has(.b_profes) {
        padding-top: 0 !important;
        margin-top: -1.875rem !important;  /* Pull up 30px */
    }
    
    .b_profes {
        margin-top: 5.3rem !important;  /* 80px spacing on mobile */
        padding: 0;
    }
    
    .b_profes_in {
        width: 93% !important;
        padding: 2rem 1.5rem;  /* 32px 24px - tighter on mobile */
    }
}

/* Small Mobile - Button Responsiveness */
@media screen and (max-width: 713px) {
    .b_profes_in .button_org_bg_Se {
        margin-top: 1.5rem;  /* Keep consistent spacing */
        gap: 0.5rem;  /* Tighter gap */
    }
    
    .b_profes_in .button_org_bg_Se a {
        padding: clamp(0.375rem, 1.5vw, 0.5rem) clamp(0.75rem, 4vw, 1.5625rem);  /* Responsive padding: shrinks smoothly */
        font-size: clamp(0.6875rem, 2.5vw, 0.8125rem);  /* 11px to 13px - scales down on tiny screens */
        margin-right: 0.3125rem;  /* Reduce margin */
        border-radius: clamp(0.625rem, 2vw, 0.875rem);  /* Slightly smaller border-radius */
    }
    
    .b_profes_in .b_profile_disc_scroll {
        max-height: clamp(15rem, 8vw + 10rem, 18rem);  /* Reduce max-height on small screens */
        margin-bottom: 0.5rem;  /* Tighter spacing */
    }
    
    .b_profes_in .scroll-indicator {
        margin: 0 0 0.5rem 0;  /* Tighter spacing on small screens */
    }
    
    .b_profes_in .scroll-indicator img {
        width: clamp(1rem, 4vw, 1.5rem);  /* 16px at 230px, grows to 2.5rem at 713px - shrinks on small screens */
    }
}

/* Tablet and Small Desktop */
@media screen and (min-width: 768px) and (max-width: 1200px) {
    .b_profes_in {
        width: 67%;  /* Reduced from 85% - proportional to base width reduction */
    }
    
    /* Tabbed disc section - tablet adjustments */
    .b_profile_disc_Wrap .b_profile_tabs ul {
        gap: clamp(0.75rem, 2vw, 1rem);  /* Medium gap on tablet: 12px to 16px */
    }
    
    .b_profile_disc_Wrap .b_profile_tabs li a {
        font-size: clamp(0.6875rem, 1.5vw, 0.8125rem);  /* Medium size on tablet: 11px to 13px */
        padding: clamp(0.75rem, 1.5vw, 0.9375rem) clamp(0.625rem, 1vw, 0.6875rem);  /* Medium padding */
    }

    /* Disc section - tablet height scaling */
    .b_profile_disc_content {
        max-height: clamp(20rem, 5vw + 16rem, 26rem);  /* 320px → 416px on tablet */
    }
}

/* Large Desktop */
@media screen and (min-width: 1201px) {
    .b_profes_in.customized_b_profes_in {
        width: 57.42375rem !important;  /* 918.78px converted to rem (918.78 / 16 = 57.42375rem) */
        max-width: 57.42375rem !important;
    }
}

/* =========================================
   B_ADDRESS SECTION ("Who We Are")
   ========================================= */

.b_address {
    display: flex;
    justify-content: space-between;
    gap: 3%;
    margin-top: clamp(1.5rem, 3vw, 2rem);  /* 24px to 32px - responsive spacing */
}

.b_address_con {
    width: 62%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.b_address_con h3 {
    color: #1e213a;
    letter-spacing: 0.5px;
    font-size: clamp(1.3125rem, 3.5vw, 1.875rem);  /* 21px to 30px - consistent sizing */
    font-weight: 600;
    margin-bottom: clamp(1rem, 3vw, 1.5625rem);  /* 16px to 25px - responsive spacing */
    width: 100%;
    flex-basis: 100%;
}

.b_address_con h3 span {
    color: var(--org);
    font-size: inherit !important;  /* Inherit parent H3 size - ensures orange span matches "Who" text size */
}

.b_address_con_para {
    width: 52%;
    overflow: auto;
    height: 17.5rem;  /* 280px */
    position: relative;
    
    /* Custom scrollbar - hidden by default */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.b_address_con_para p,
.b_address_con_para div,
.b_address_con_para span {
    font-size: 1rem !important;  /* 16px - fixed size for address section only */
}

.b_address_con_para:hover,
.b_address_con_para.scrolling {
    scrollbar-color: rgba(249, 115, 22, 0.15) #f0f0f0;
}

.b_address_con_para::-webkit-scrollbar {
    width: 0.5rem;  /* 8px */
}

.b_address_con_para::-webkit-scrollbar-track {
    background: transparent;
}

.b_address_con_para::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0.625rem;
}

.b_address_con_para:hover::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.b_address_con_para:hover::-webkit-scrollbar-thumb,
.b_address_con_para.scrolling::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.15);
}

.b_address_con_para::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.4);
}

.amenities-wrapper {
    width: 40%;
    overflow: auto;
    height: 17.5rem;  /* 280px */
    display: flex;
    gap: 0;  /* No gap between check sections */
    flex-direction: column;
    position: relative;
    
    /* Custom scrollbar - hidden by default */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.amenities-wrapper:hover,
.amenities-wrapper.scrolling {
    scrollbar-color: rgba(249, 115, 22, 0.15) #f0f0f0;
}

.amenities-wrapper::-webkit-scrollbar {
    width: 0.5rem;
}

.amenities-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.amenities-wrapper::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0.625rem;
}

.amenities-wrapper:hover::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.amenities-wrapper:hover::-webkit-scrollbar-thumb,
.amenities-wrapper.scrolling::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.15);
}

.amenities-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.4);
}

.b_address_con_check {
    margin-bottom: 1.25rem;  /* 20px */
}

.b_address_con_check h4 {
    font-weight: 700;
    font-size: clamp(0.875rem, 1.5vw, 1rem);  /* 14px to 16px */
    color: #212529;
    margin-bottom: 0.8125rem;  /* 13px */
}

.b_address_con_check ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9375rem;  /* 15px */
}

.b_address_con_check li {
    list-style: none;
    color: var(--org);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);  /* 13px to 15px */
    margin-bottom: 0;  /* Gap handles spacing */
    display: flex;
    align-items: center;
    text-transform: capitalize;
    gap: 0.3125rem;  /* 5px between icon and text */
}

.b_address_detail {
    width: 35%;
    background: url(../images/new/social_bg.png), linear-gradient(135deg, #F97316 0%, #FB923C 50%, #F97316 100%);  /* Image on top, gradient fallback */
    background-size: cover, cover;
    background-position: center, center;
    border-radius: 0.875rem;  /* 14px */
    display: flex;
    align-items: start;
    padding: 0.9375rem 1.875rem;  /* 15px 30px */
    flex-direction: column;
    justify-content: center;
    margin-top: 3.8125rem;  /* 61px - aligns with text content */
    height: 18.3125rem;  /* 293px */
}

.b_address .b_address_detail {
    gap: unset !important;  /* Override any default gap */
}

.b_address_detail ul {
    margin: 0;
    padding: 0;
}

.b_address_detail ul:first-child {
    margin-top: 0.9375rem;  /* 15px - top margin for first ul to equal bottom spacing */
}

.b_address_detail ul:last-child {
    margin-bottom: 0.3125rem;  /* 5px - bottom margin for last ul to equal top spacing */
}

.b_address_detail li {
    list-style: none;
    margin-bottom: 0.625rem;  /* 10px */
    line-height: 1.4;
}

.b_address_detail li:last-child {
    margin-bottom: 0;
}

.b_address_detail a {
    color: #fff;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);  /* 12px to 14px */
    letter-spacing: 0.3px;
    display: flex;
    gap: 0.625rem;  /* 10px */
    align-items: flex-start;  /* Align icon at top for long text */
    line-height: 1.3;
    text-decoration: none;
    word-break: break-word;  /* Break long words without spaces */
    overflow-wrap: break-word;  /* Additional support for text wrapping */
}

.b_address_detail a span {
    width: 1.375rem;  /* 22px */
    height: 1.375rem;  /* 22px */
    border-radius: 0.1875rem;  /* 3px */
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.b_address_detail a span i {
    color: var(--org);
    font-size: 0.8125rem;  /* 13px */
    line-height: 1;
}

.b_address_detail a span i.fa,
.b_address_detail a span i.ba {
    width: 0.8125rem;  /* 13px */
    height: 0.8125rem;  /* 13px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Amenities wrapper specific spacing */
.b_address .amenities-wrapper li {
    margin: 0;
}

.b_address .amenities-wrapper ul {
    row-gap: 0.625rem;  /* 10px */
}

.ct_about__card_social ul {
    display: flex;
    flex-wrap: wrap;  /* Allow social icons to wrap to next line on smaller screens */
    gap: 0.625rem;  /* 10px */
    margin: 0;
    padding: 0;
}

.ct_about__card_social ul li {
    list-style: none;
}

.ct_about__card_social ul li a {
    width: 1.75rem;  /* 28px */
    height: 1.75rem;  /* 28px */
    border-radius: 0.1875rem;  /* 3px */
    background: #fff;
    display: flex;
    align-items: center;
    color: var(--org);
    justify-content: center;
    text-decoration: none;
}

/* =========================================
   B_CONTACT SECTION ("Keep In Touch")
   ========================================= */

.b_contact {
    padding: 0;
    margin-top: clamp(1.5rem, 3vw, 2rem);  /* 24px to 32px - responsive spacing */
}

.b_contact h3 {
    color: #1e213a;
    letter-spacing: 0.5px;
    font-size: clamp(1.3125rem, 3.5vw, 1.875rem);  /* 21px to 30px - consistent sizing */
    font-weight: 600;
    text-align: center;
    margin-bottom: clamp(1rem, 3vw, 1.875rem);  /* 16px to 30px - responsive spacing */
}

.b_contact h3 span {
    color: var(--org);
    font-size: inherit !important;  /* Inherit parent H3 size - ensures orange span matches main text - !important to beat column classes */
}

.b_contact_box {
    border-radius: 0.75rem;  /* 12px */
    padding: 1.875rem;  /* 30px */
    border: 1px solid #EAEAEA;
    display: flex;
    justify-content: space-between;
    gap: 4%;
}

.b_contact_box_input {
    width: 48%;
}

.b_contact_box_map {
    width: 48%;
    min-height: clamp(20rem, 30vw, 25rem);  /* 320px to 400px - responsive height */
    aspect-ratio: 16 / 9;  /* Maintain horizontal rectangle on desktop */
}

.b_contact_box_divid {
    display: flex;
    gap: 1.875rem;  /* 30px */
    justify-content: space-between;
}

.round_input {
    margin-bottom: 1.25rem;  /* 20px */
    width: 100%;
}

.round_input label {
    font-weight: 700;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);  /* 12px to 14px */
    color: #212529;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;  /* 8px */
    display: block;
}

.round_input input,
.round_input textarea {
    width: 100%;
    height: clamp(2.5rem, 5vw, 3rem);  /* 40px to 48px - responsive height */
    border-radius: 0.375rem;  /* 6px - same as textarea */
    padding: clamp(0.5rem, 1.5vw, 0.5625rem) clamp(1.25rem, 3vw, 1.6875rem);  /* Responsive: 8-9px / 20-27px */
    border: 1px solid #EAEAEA;
    font-size: clamp(0.75rem, 1.5vw, 0.9375rem);  /* 12px to 15px - responsive */
}

.round_input textarea {
    height: auto;
    resize: vertical;
    min-height: clamp(5.5rem, 10vw, 7.2rem);  /* 88px to 115.2px - responsive */
}

.b_contact_box_map iframe {
    border-radius: 0.375rem;  /* 6px */
    width: 100%;
    height: 100%;
}

.b_contact_box_button {
    display: flex;
    justify-content: center;  /* Center buttons */
    gap: clamp(0.75rem, 2vw, 1.25rem);  /* Responsive gap: 12px to 20px */
    flex-wrap: wrap;  /* Allow wrapping when buttons reach minimum width */
}

.b_contact_box_button button {
    width: auto;  /* Auto width based on content */
    flex: 0 1 auto;  /* Don't grow, can shrink, auto basis */
    min-width: 6rem;  /* 96px - minimum before wrapping */
    padding: clamp(0.5rem, 1.5vw, 0.625rem) clamp(1.25rem, 3vw, 2rem);  /* Responsive: 8px-10px / 20px-32px */
    border: 1px solid var(--org);
    background: var(--org);
    color: #fff;
    display: flex;
    justify-content: center;
    gap: 0.625rem;  /* 10px */
    align-items: center;
    letter-spacing: 0.5px;
    border-radius: 0.875rem;  /* 14px */
    height: clamp(2.5rem, 5vw, 3rem);  /* 40px to 48px - responsive height */
    font-size: clamp(0.75rem, 1.8vw, 0.9375rem);  /* 12px to 15px - slightly larger minimum */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;  /* Prevent text wrapping */
}

.b_contact_box_button button:hover {
    background: darken(var(--org), 10%);
}

.b_contact_box_button a {
    width: auto;  /* Auto width based on content */
    flex: 0 1 auto;  /* Don't grow, can shrink, auto basis */
    min-width: 8rem;  /* 128px - minimum before wrapping (larger than "Send" due to longer text) */
    padding: clamp(0.5rem, 1.5vw, 0.625rem) clamp(1.25rem, 3vw, 2rem);  /* Responsive: 8px-10px / 20px-32px */
    border-radius: 0.875rem;  /* 14px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1.25rem);  /* Responsive gap: 8px to 20px */
    text-decoration: none;
    font-size: clamp(0.75rem, 1.8vw, 0.9375rem);  /* 12px to 15px - same as button */
    font-weight: 600;
    transition: all 0.3s;
    height: clamp(2.5rem, 5vw, 3rem);  /* 40px to 48px - same as button */
    white-space: nowrap;  /* Prevent text wrapping */
}

.borOne {
    border: 1px solid var(--org) !important;
    background: #fff !important;
    color: var(--org) !important;
}

.borOne:hover {
    background: var(--org) !important;
    color: #fff !important;
}

/* Mobile Responsive for b_address and b_contact */
@media screen and (max-width: 767px) {
    .b_address {
        flex-direction: column;
    }
    .b_profile_disc_Wrap, .b_address, .b_contact, .flexible-columns, .gallery_sec {
        margin-top: 1.2rem;
    }

    .b_address_con {
        width: 100%;
        margin-bottom: 1.25rem;  /* 20px */
        flex-direction: column;
    }
    
    .b_address_con h3 {
        margin-bottom: 0.6rem;  /* Remove bottom margin on mobile */
    }
    
    .b_address_con_para {
        width: 100%;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .b_address_con_para .scroll-indicator {
        display: none;  /* Hide scroll indicator on mobile */
    }
    
    .amenities-wrapper {
        width: 100%;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .amenities-wrapper .scroll-indicator {
        display: none;  /* Hide scroll indicator on mobile */
    }
    
    .b_address_detail {
        width: 85% !important;
        max-width: 31.25rem !important;  /* 500px */
        min-width: clamp(14rem, 40vw, 17.5rem) !important;  /* 224px to 280px - responsive min-width */
        margin: 0 auto !important;
        height: auto !important;
        padding: clamp(1rem, 3vw, 1.25rem) clamp(1.25rem, 4vw, 1.5625rem) !important;  /* Responsive: 16-20px / 20-25px */
    }
    
    .b_contact_box {
        padding: 1.25rem;  /* 20px */
        flex-direction: column;
        gap: 1.25rem;  /* 20px */
    }
    
    .b_contact_box_input {
        width: 100%;
    }
    
    .b_contact_box_map {
        width: 100%;
        height: auto !important;  /* Auto height - controlled by aspect ratio */
        min-height: unset !important;  /* Remove min-height */
        aspect-ratio: 1.5 / 1 !important;  /* 1.5:1 ratio - same as mobile video (horizontal rectangle) */
        max-height: 24.375rem !important;  /* Cap at 390px */
    }
    
    .b_contact_box_map iframe {
        width: 100%;
        height: 100% !important;
        aspect-ratio: 1.5 / 1 !important;  /* Match container ratio */
    }
    
    .b_contact_box_divid {
        flex-direction: column;
        gap: 0;
    }
    
    .b_contact_box_button {
        flex-direction: row;
        gap: clamp(0.5rem, 3vw, 0.75rem);  /* Responsive gap: 8px to 12px */
        justify-content: center;  /* Center buttons on mobile */
        flex-wrap: wrap;  /* Allow wrapping on very small screens */
    }
    
    .b_contact_box_button button,
    .b_contact_box_button a {
        width: auto !important;  /* Auto width based on content */
        flex: 1 1 auto !important;  /* Grow equally, can shrink */
        min-width: 5.5rem !important;  /* 88px - minimum before wrapping to next row */
        margin-bottom: 0;
        padding: clamp(0.4rem, 2vw, 0.5rem) clamp(0.8rem, 3.5vw, 1.2rem) !important;  /* Compact on mobile: 6.4-8px / 12.8-19.2px - balanced */
        font-size: clamp(0.6875rem, 2.2vw, 0.8125rem) !important;  /* 11px to 13px on mobile - better balance */
        height: clamp(2.25rem, 5.5vw, 2.75rem) !important;  /* 36px to 44px - more room for text */
    }
}

/* Very small screens - additional adjustments */
@media screen and (max-width: 450px) {
    .b_address_detail {
        width: clamp(85%, 2vw + 85%, 95%) !important;  /* 85% to 95% - grows on very small screens */
        min-width: clamp(12rem, 50vw, 14rem) !important;  /* 192px to 224px - shrinks on tiny screens */
        padding: clamp(0.875rem, 3vw, 1.125rem) clamp(1rem, 4vw, 1.25rem) !important;  /* Responsive: 14-18px / 16-20px */
    }
    
    .b_address_detail a {
        font-size: clamp(0.6875rem, 2vw, 0.8125rem) !important;  /* 11px to 13px - responsive */
    }
    
    /* Contact buttons - ensure they can stack vertically if needed */
    .b_contact_box_button button,
    .b_contact_box_button a {
        min-width: 4.5rem !important;  /* 72px - smaller minimum for very small screens */
        max-width: 100% !important;  /* Allow full width if needed */
    }
}

/* ===== 3-COLUMN SECTION STYLES ===== */
.three-col-section {
	margin: 2rem 0;
	padding: 2rem 0;
}

.three-col-section h3 {
	color: var(--primary);
	margin-bottom: 1.5rem;
	text-align: center;
}

.content-card {
	background: white;
	border: 1px solid #e0e0e0;
	border-radius: 0.75rem;
	padding: 1.5rem;
	height: 100%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: transform 0.2s, box-shadow 0.2s;
	margin-bottom: 1rem;
}

.content-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.content-card h6 {
	color: var(--primary);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.content-card h6 i {
	font-size: 1.2rem;
}

.text-content p {
	margin-bottom: 1rem;
	line-height: 1.6;
}

.text-content ul {
	margin: 1rem 0;
	padding-left: 1.5rem;
}

.text-content li {
	margin-bottom: 0.5rem;
	color: #666;
}

.video-container {
	margin-bottom: 1rem;
	border-radius: 0.5rem;
	overflow: hidden;
}

.video-container video {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.video-description {
	font-size: 0.9rem;
	color: #666;
	line-height: 1.5;
}

.image-container {
	margin-bottom: 1rem;
	border-radius: 0.5rem;
	overflow: hidden;
}

.image-container img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.image-description {
	font-size: 0.9rem;
	color: #666;
	line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.three-col-section {
		margin: 1.5rem 0;
		padding: 1.5rem 0;
	}
	
	.content-card {
		padding: 1rem;
		margin-bottom: 1rem;
	}
	
	.video-container video,
	.image-container img {
		height: 150px;
	}
}

/* ===== RESPONSIVE FIX - 421px to 499px RANGE ===== */
@media screen and (min-width: 421px) and (max-width: 499px) {
    /* Force 2-column layout to stay in column format in this range */
    .two-column-customize {
        flex-direction: column !important;  /* Force column layout */
        align-items: center !important;  /* Center horizontally */
    }
    
    .col-lg-6 {
        width: 100% !important;  /* Full width for single column */
        max-width: 100% !important;  /* No width constraint */
    }
}

/* ===== FINAL OVERRIDE - ALL VIDEO/IMAGE NO SCROLL, NO PADDING ===== */
/* This rule comes last to ensure it overrides any conflicting rules */
.col-lg-4 .column-image,
.col-lg-4 .column-video,
.col-lg-4 .column-image img,
.col-lg-4 .column-video video,
.col-lg-6 .column-image,
.col-lg-6 .column-video,
.col-lg-6 .column-image img,
.col-lg-6 .column-video video,
.col-lg-12 .column-image,
.col-lg-12 .column-video,
.col-lg-12 .column-image img,
.col-lg-12 .column-video video {
	overflow: hidden !important;
	overflow-y: hidden !important;
	overflow-x: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	box-sizing: border-box !important;
}

/* ===== 3-COLUMN SPECIFIC - REMOVE PADDING FROM VIDEO/IMAGE COLUMN-ITEMS ===== */
/* Remove padding from column-item when it contains video or image in 3-column section */
.three-column-customize .column-item {
	padding: 0 !important;
}

/* But keep padding for text columns */
.three-column-customize .column-text {
	padding: 0.5rem 1rem 0.5rem 1rem !important;
}

/* ===== RESPONSIVE FONT SIZES FOR TEXT COLUMNS ===== */
/* 3-column text - SMALLEST font size */
.three-column-customize .column-text,
.three-column-customize .column-text p,
.three-column-customize .column-text li,
.three-column-customize .column-text span,
.three-column-customize .column-text div {
	font-size: clamp(0.875rem, 2.5vw, 0.8125rem) !important; /* 14px to 13px - SMALLEST, reduced by 3px */
	line-height: 1.6 !important;
}

.three-column-customize .column-text h5,
.three-column-customize h5 {
	font-size: clamp(0.75rem, 1vw, 1rem) !important; /* 12px to 16px */
}

.three-column-customize .column-text h6,
.three-column-customize h6 {
	font-size: clamp(0.6875rem, 0.9vw, 0.9rem) !important; /* 11px to 14.4px */
}

/* 2-column text - MEDIUM font size (larger than 3-col) */
.two-column-customize .column-text,
.two-column-customize .column-text p,
.two-column-customize .column-text li,
.two-column-customize .column-text span,
.two-column-customize .column-text div {
	font-size: clamp(0.875rem, 2.5vw, 0.875rem) !important; /* 14px to 14px - reduced by 3px */
	line-height: 1.6 !important;
}

.two-column-customize .column-text h5,
.two-column-customize h5 {
	font-size: clamp(0.8rem, 1.1vw, 1.1rem) !important; /* 12.8px to 17.6px */
}

.two-column-customize .column-text h6,
.two-column-customize h6 {
	font-size: clamp(0.75rem, 1vw, 1rem) !important; /* 12px to 16px */
}

/* 1-column text - LARGEST font size (but still smaller than main p outside columns) */
.single-column-customize .column-text,
.single-column-customize .column-text p,
.single-column-customize .column-text li,
.single-column-customize .column-text span,
.single-column-customize .column-text div {
	font-size: clamp(0.9375rem, 2.5vw, 1rem) !important; /* 15px to 16px - reduced by 3px */
	line-height: 1.6 !important;
}

.single-column-customize .column-text h5,
.single-column-customize h5 {
	font-size: clamp(0.8rem, 1.2vw, 1.2rem) !important; /* 12.8px to 19.2px */
}

.single-column-customize .column-text h6,
.single-column-customize h6 {
	font-size: clamp(0.75rem, 1.1vw, 1.1rem) !important; /* 12px to 17.6px */
}

/* ===== 2-COLUMN SPECIFIC - REMOVE PADDING FROM VIDEO/IMAGE COLUMN-ITEMS ===== */
/* Remove padding from column-item when it contains video or image in 2-column section */
.two-column-customize .column-item {
	padding: 0 !important;
}

/* But keep padding for text columns */
.two-column-customize .column-text {
	padding: 0.5rem 1rem 0.5rem 1rem !important;
}

/* ===== 1-COLUMN SPECIFIC - REMOVE PADDING FROM VIDEO/IMAGE COLUMN-ITEMS ===== */
/* Remove padding from column-item when it contains video or image in 1-column section */
.single-column-customize .column-item {
	padding: 0 !important;
}

/* But keep padding for text columns */
.single-column-customize .column-text {
	padding: 0.5rem 1rem 0.5rem 1rem !important;
}

/* ===== GRID ITEM OVERRIDE - 3 ITEMS PER ROW ===== */
.griding_data .grid_item {
	flex: 0 0 calc(33% - 10px) !important;
	max-width: calc(33% - 10px) !important;
}

/* ============================
   CHL Hero Header (Unity v2)
   Parallax-lite + Video fallback
   Scope: .chl-hero.unity
   ============================ */

.chl-hero.unity{
  --h-text: #ffffff;
  --h-muted: rgba(255,255,255,0.78);
  --h-border: rgba(255,255,255,0.18);
  --h-accent: rgba(255,255,255,0.92);
  --h-radius: 18px;

  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 18px 70px rgba(2, 6, 23, 0.20);
}

/* Background container (parallax target) */
.chl-hero.unity .hero-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateY(var(--hero-parallax, 0px)) scale(1.04);
  will-change: transform;
}

/* Image layer */
.chl-hero.unity .hero-bg-img{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

/* Video layer */
.chl-hero.unity .hero-bg video{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}

/* Gentle vignette + gradient overlay for readability */
.chl-hero.unity .hero-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 520px at 20% 30%, rgba(0,0,0,0.46), transparent 60%),
    radial-gradient(900px 420px at 75% 20%, rgba(0,0,0,0.24), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.22) 45%, rgba(0,0,0,0.70));
}

/* Content container */
.chl-hero.unity .hero-inner{
  position: relative;
  width: min(1040px, calc(100% - 28px));
  padding: 28px;
}

/* Glass card */
.chl-hero.unity .hero-card{
  border: 1px solid var(--h-border);
  border-radius: calc(var(--h-radius) + 6px);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
  padding: 22px;
}

/* Logo in hero */
.chl-hero.unity .hero-logo{
  margin-bottom: 16px;
}

.chl-hero.unity .hero-logo img{
  max-height: 80px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* Title + subtitle */
.chl-hero.unity .hero-title{
  margin: 0;
  color: var(--h-text);
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.chl-hero.unity .hero-sub{
  margin: 14px 0 0;
  color: var(--h-muted);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.55;
  max-width: 60ch;
}

/* Pills */
.chl-hero.unity .hero-pills{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chl-hero.unity .hero-pill{
  border: 1px solid var(--h-border);
  color: var(--h-accent);
  background: rgba(255,255,255,0.07);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Buttons */
.chl-hero.unity .hero-actions{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.chl-hero.unity .hero-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--h-border);
  background: rgba(255,255,255,0.09);
  color: var(--h-text);
  font-weight: 850;
  font-size: 13px;
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.chl-hero.unity .hero-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.30);
}

.chl-hero.unity .hero-btn.primary{
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,0.95);
  border-color: rgba(255,255,255,0.92);
}
.chl-hero.unity .hero-btn.primary:hover{
  background: rgba(255,255,255,1);
}

/* Icon bubble */
.chl-hero.unity .hero-ic{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.24);
  font-size: 14px;
}

/* Scroll hint becomes a link */
.chl-hero.unity a.hero-scroll{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display:grid;
  place-items:center;
  gap: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select:none;
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 14px;
}

.chl-hero.unity .hero-mouse{
  width: 28px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  position: relative;
}
.chl-hero.unity .hero-mouse::after{
  content:"";
  position:absolute;
  top: 10px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  transform: translateX(-50%);
  animation: chlScrollDot 1.3s infinite ease-in-out;
}
@keyframes chlScrollDot{
  0% { transform: translateX(-50%) translateY(0); opacity: 0.95; }
  70% { transform: translateX(-50%) translateY(14px); opacity: 0.35; }
  100% { transform: translateX(-50%) translateY(0); opacity: 0.95; }
}

/* Mobile + accessibility */
@media (max-width: 520px){
  .chl-hero.unity{ min-height: 88vh; border-radius: 18px; }
  .chl-hero.unity .hero-inner{ padding: 16px; }
  .chl-hero.unity .hero-card{ padding: 16px; }
  .chl-hero.unity .hero-btn{ width: 100%; justify-content: center; }
  .chl-hero.unity .hero-logo img{ max-height: 60px; }
}

/* Disable parallax for reduced motion users */
@media (prefers-reduced-motion: reduce){
  .chl-hero.unity .hero-bg{ transform: translateY(0px) scale(1.04); }
  .chl-hero.unity .hero-mouse::after{ animation: none; }
}

/* =========================================
   UNITY ABOUT SECTION (Overview Component)
   Modern split-layout about section with media and features
   Balanced design with floating stats on media side
   ========================================= */

.unity-about {
    padding: 80px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.unity-about::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--k3-primary, #6366f1) 0%, transparent 70%);
    opacity: 0.08;
    border-radius: 50%;
}

.unity-about__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.unity-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start; /* Top-align so both columns start at same level */
}

/* Media Side - vertically centered */
.unity-about__media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px; /* Space for floating stats that overlap below */
}

.unity-about__media-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 100%;
}

.unity-about__media-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--k3-primary, #6366f1) 0%, var(--k3-primary-light, #818cf8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.unity-about__media-wrapper:hover::before {
    opacity: 0.1;
}

/* Placeholder style for no image */
.unity-about__media-wrapper--placeholder {
    background: linear-gradient(135deg, var(--k3-primary, #6366f1), var(--k3-primary-light, #818cf8));
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unity-about__media-wrapper--placeholder i {
    font-size: 48px;
    color: rgba(255,255,255,0.5);
}

.unity-about__image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.unity-about__media-wrapper:hover .unity-about__image {
    transform: scale(1.03);
}

.unity-about__video-container {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
}

.unity-about__video {
    width: 100%;
    height: 100%;
    border: none;
}

.unity-about__video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.unity-about__video-overlay:hover {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0.5));
}

.unity-about__play-btn {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--k3-primary, #6366f1), var(--k3-primary-light, #818cf8));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5);
    transition: all 0.3s ease;
}

.unity-about__video-overlay:hover .unity-about__play-btn {
    transform: scale(1.1);
    box-shadow: 0 16px 50px rgba(99, 102, 241, 0.6);
}

/* Decorative elements - more visible */
.unity-about__decor {
    position: absolute;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--k3-primary, #6366f1), var(--k3-primary-light, #818cf8));
    border-radius: 16px;
    z-index: -1;
}

.unity-about__decor--top {
    top: -20px;
    left: -20px;
    opacity: 0.2;
}

.unity-about__decor--bottom {
    bottom: -20px;
    right: -20px;
    opacity: 0.25;
}

/* Floating Stats on Media Side - Overlays bottom of image */
.unity-about__floating-stats {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.unity-about__floating-stat {
    background: white;
    border-radius: 12px;
    padding: 12px 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    flex: 1;
    max-width: 140px;
}

.unity-about__floating-stat-number {
    font-size: 1.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--k3-primary, #6366f1), var(--k3-primary-light, #818cf8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--k3-primary, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.unity-about__floating-stat-number i {
    font-size: 0.875rem;
    -webkit-text-fill-color: var(--k3-primary, #6366f1);
    color: var(--k3-primary, #6366f1);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .unity-about__floating-stat-number {
        color: transparent;
    }
}

.unity-about__floating-stat-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Content Side */
.unity-about__content {
    position: relative;
}

.unity-about__tag {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, var(--k3-primary, #6366f1), var(--k3-primary-light, #818cf8));
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.unity-about__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0 0 16px;
}

/* Title highlight with gradient - with browser fallback */
.unity-about__title span {
    background: linear-gradient(135deg, var(--k3-primary, #6366f1), var(--k3-primary-light, #818cf8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--k3-primary, #6366f1);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .unity-about__title span {
        color: transparent;
    }
}

.unity-about__desc {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0 0 24px;
}

/* Features - Compact Style with height limit */
.unity-about__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Scrollbar styling for features */
.unity-about__features::-webkit-scrollbar {
    width: 4px;
}
.unity-about__features::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.unity-about__features::-webkit-scrollbar-thumb {
    background: var(--k3-primary, #6366f1);
    border-radius: 4px;
    opacity: 0.5;
}

.unity-about__feature {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.unity-about__feature:hover {
    background: white;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    transform: translateX(4px);
}

.unity-about__feature-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--k3-primary, #6366f1), var(--k3-primary-light, #818cf8));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.unity-about__feature-icon i {
    color: white;
    font-size: 14px;
}

.unity-about__feature-icon img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.unity-about__feature-content {
    padding-top: 2px;
}

.unity-about__feature-content h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px;
}

.unity-about__feature-content p {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Buttons */
.unity-about__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.unity-about__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.unity-about__btn--primary {
    background: linear-gradient(135deg, var(--k3-primary, #6366f1), var(--k3-primary-light, #818cf8));
    color: white;
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.3);
}

.unity-about__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(99, 102, 241, 0.4);
    color: white;
}

.unity-about__btn--secondary {
    background: #f1f5f9;
    color: #0f172a;
    border: 2px solid transparent;
}

.unity-about__btn--secondary:hover {
    background: white;
    border-color: var(--k3-primary, #6366f1);
    color: var(--k3-primary, #6366f1);
}

/* Legacy stats bar - kept for backwards compatibility but now hidden by default */
.unity-about__stats {
    display: none;
}

/* Unity About Responsive */
@media (max-width: 1024px) {
    .unity-about__grid {
        gap: 48px;
    }
}

@media (max-width: 900px) {
    .unity-about {
        padding: 60px 0;
    }

    .unity-about__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .unity-about__media {
        order: -1;
        max-width: 480px;
        margin: 0 auto;
    }

    .unity-about__floating-stats {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        justify-content: center;
        margin-top: 16px;
    }

    .unity-about__media {
        margin-bottom: 0;
    }

    .unity-about__floating-stat {
        max-width: 120px;
        padding: 10px 16px;
    }

    .unity-about__features {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 600px) {
    .unity-about {
        padding: 48px 0;
    }

    .unity-about__features {
        gap: 8px;
    }

    .unity-about__feature {
        padding: 10px 12px;
    }

    .unity-about__feature-icon {
        width: 32px;
        height: 32px;
    }

    .unity-about__feature-icon i {
        font-size: 12px;
    }

    .unity-about__actions {
        flex-direction: column;
    }

    .unity-about__btn {
        justify-content: center;
    }

    .unity-about__floating-stats {
        gap: 8px;
    }

    .unity-about__floating-stat {
        padding: 8px 12px;
        max-width: none;
        flex: 1;
    }

    .unity-about__floating-stat-number {
        font-size: 1.1rem;
    }

    .unity-about__floating-stat-label {
        font-size: 0.65rem;
    }

    .unity-about__decor {
        display: none;
    }
}

/* ============================================
   NAV TABS (standalone tab bar)
   (extracted from unity/nav_section.php)
   ============================================ */
.unity-nav-tabs {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    /* Neutralize .b_profile_tabs rules from haseeb/css/style.css */
    top: auto;
    z-index: auto;
    position: relative;
    white-space: normal;
    margin-bottom: 0;
}
/* Sticky only inside header hero context — standalone nav_section stays static
   to avoid sliding behind the CHL fixed header (z-index 1000).
   DO NOT add .bpage-header-nav here — nav_section.php itself has that class. */
.bpage-header-hero .unity-nav-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
}
/* Override b_profile_tabs_wrapper white background inside unity nav tabs */
.unity-nav-tabs .b_profile_tabs_wrapper,
.unity-nav-tabs .nav-container.b_profile_tabs_wrapper {
    background: transparent !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 0 20px !important;
    overflow: visible !important;
}
.unity-nav-tabs .b_profile_tabs_wrapper::before,
.unity-nav-tabs .b_profile_tabs_wrapper::after {
    display: none !important;
}
.unity-nav-tabs .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.unity-nav-tabs ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
    /* Neutralize .b_profile_tabs ul { background:#fff } from haseeb/css/style.css */
    background: transparent;
    width: 100%;
    border-radius: 0;
}
.unity-nav-tabs li {
    margin: 0;
}
.unity-nav-tabs li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    position: relative;
}
/* Kill K3 ::after pseudo-element underline (k3.css .b_profile_tabs li a::after).
   Unity uses border-bottom instead — the ::after creates a second "longer" underline. */
.unity-nav-tabs li a::after {
    display: none;
}
.unity-nav-tabs li a:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.05);
    border-bottom-color: var(--k3-primary-light, #a855f7);
}
.unity-nav-tabs li.active a {
    color: var(--k3-primary-light, #a855f7);
    border-bottom-color: var(--k3-primary-light, #a855f7);
}
.unity-nav-tabs li a i {
    font-size: 13px;
    opacity: 0.8;
}
@media (max-width: 768px) {
    .unity-nav-tabs ul {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 10px;
    }
    .unity-nav-tabs ul::-webkit-scrollbar {
        display: none;
    }
    .unity-nav-tabs li a {
        padding: 14px 16px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* ===== END OF CSS ===== */