/* =========================================
   K3 BANNER 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;
}

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

body {
    font-family: "DM Sans", sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

p {
    font-size: clamp(1rem, 2.8vw, 1.375rem);  /* 16px to 22px - MEDIUM size, much more readable */
    line-height: 1.6;
    margin: 0;
}

/* Responsive heading sizes - scale smoothly to prevent overwhelming small screens */
h1 {
    font-size: clamp(1.25rem, 4vw, 2rem);  /* 20px to 32px - proportional to p (11-15px) */
    line-height: 1.2;
}

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

h3 {
    font-size: clamp(1.275rem, 3.5vw, 1.625rem);  /* 20px at small screens to 26px at 767px - min +0.4rem, max -1rem */
    font-weight: 800;  /* Bold weight for header appeal */
    line-height: 1.3;
    color: #010115;  /* Very dark blue-black - strong, readable */
}

/* h3 that follows h4 - bump up size by 4px */
h4 + h3 {
    font-size: clamp(1.3125rem, 3.5vw, 1.875rem);  /* 21px to 30px - consistent sizing */
    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;  /* 21px to 30px - consistent sizing */
    font-weight: 600 !important;
    line-height: 1.3;
    color: #1e213a !important;
    letter-spacing: 0.03125rem;  /* 0.5px - same as disc */
}

/* h3 in gallery section - moderate size matching disc */
.gallery_sec .text_section_top h3 {
    font-size: clamp(1.3125rem, 3.5vw, 1.875rem);  /* 21px to 30px - consistent sizing */
    font-weight: 600;
    line-height: 1.3;
    color: #1e213a;
    letter-spacing: 0.03125rem;  /* 0.5px - same as disc */
}

/* h3 grows slowly on desktop (768px+) */
h4 {
    font-size: clamp(0.5625rem, 1.7vw, 0.8125rem);  /* 9px at 230px to 13px at 767px - mobile scaling */
    line-height: 1.4;
}

/* Desktop typography adjustments */
@media screen and (min-width: 768px) {
    h3 {
        font-size: 1.8375rem;  /* Fixed at 29px on desktop - min +0.4rem, effectively max -1rem from original */
    }
    
    /* h3 that follows h4 - bump up size by 4px on desktop too */
    h4 + h3 {
        font-size: clamp(1.3125rem, 3.5vw, 1.875rem);  /* 21px to 30px - consistent sizing */
        color: #1e213a;
        font-weight: 600;
    }
    
    h4 {
        font-size: clamp(0.75rem, 1vw, 0.875rem);  /* 12px at 768px to 14px at larger screens */
    }
    
    /* h3 in 3-column section - matching disc on desktop - CORRECT SELECTOR */
    .text_section:has(.flexible-columns) .text_section_top h3 {
        font-size: clamp(1.3125rem, 3.5vw, 1.875rem) !important;  /* 21px to 30px - consistent sizing across all screens */
        color: #1e213a !important;
        font-weight: 600 !important;
    }
    
    /* h3 in gallery section - matching disc on desktop */
    .gallery_sec .text_section_top h3 {
        font-size: clamp(1.3125rem, 3.5vw, 1.875rem);  /* 21px to 30px - consistent sizing across all screens */
        color: #1e213a;
        font-weight: 600;
    }
}

h5 {
    font-size: clamp(0.8125rem, 2.2vw, 1rem);  /* 13px on mobile to 16px - compact scaling */
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;  /* Poppins for all h5 - friendly, modern feel */
    font-weight: 500;  /* Medium weight - softer than default bold */
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

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: 31.25rem;  /* 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 */
}

.b_profile_banner_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Fill container on desktop */
    object-position: center;
    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;
}

.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 {
    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 {
    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 {
    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 */
}

/* ===== MAIN TABS SECTION ===== */
.b_profile_tabs {
    display: flex;
    justify-content: center;
    position: relative;
    top: -2.4375rem;  /* -39px - overlaps with banner */
    z-index: 999;
    white-space: nowrap;
    margin-bottom: -1.125rem;  /* -18px - compensates for negative top */
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 97, 34, 0.1) transparent;
}

/* White fade overlay on left edge - now on wrapper */
.b_profile_tabs_wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1.5625rem;  /* 25px */
    background: linear-gradient(to right, #fff, transparent);
    z-index: 10;  /* Above ul content */
    pointer-events: none;
    border-radius: 0.875rem 0 0 0.875rem;  /* 14px */
}

/* White fade overlay on right edge - now on wrapper */
.b_profile_tabs_wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1.5625rem;  /* 25px */
    background: linear-gradient(to left, #fff, transparent);
    z-index: 10;  /* Above ul content */
    pointer-events: none;
    border-radius: 0 0.875rem 0.875rem 0;  /* 14px */
}

.b_profile_tabs::-webkit-scrollbar {
    height: 0.125rem;  /* 2px */
}

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

.b_profile_tabs::-webkit-scrollbar-thumb {
    background-color: rgba(242, 97, 34, 0.05);
    border-radius: 0.125rem;  /* 2px */
}

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

/* Wrapper for tabs - provides visible container and fade positioning */
.b_profile_tabs_wrapper {
    width: 81%;
    background: #fff;
    border-radius: 0.875rem 0 0.875rem 0.875rem;  /* 14px - top-right is sharp for sass 😎 */
    padding: 0 1.5625rem 0 1.25rem;  /* Horizontal padding creates indent zones (25px / 20px) */
    position: relative;
    overflow: hidden;  /* Clip overflow to wrapper bounds */
}

.b_profile_tabs ul {
    margin: 0;
    padding: 0 0.4375rem 0 0;  /* 7px right padding */
    display: flex;
    width: 100%;  /* Full width of wrapper */
    gap: clamp(0.9375rem, 3vw, 1.5625rem);  /* Responsive gap: 15px min, scales with viewport, 25px max */
    align-items: left;
    justify-content: space-evenly;
    flex-wrap: nowrap;  /* Prevent wrapping - force single row */
    overflow-x: scroll;  /* Enable horizontal scroll when content overflows */
    -webkit-overflow-scrolling: touch;  /* iOS smooth momentum scrolling */
    scroll-behavior: smooth;  /* Smooth scrolling on all browsers */
}

.b_profile_tabs li {
    list-style: none;
    text-align: center;
}

.b_profile_tabs li a {
    display: block;
    color: #33334C;
    font-size: clamp(0.625rem, 3.5vw, 1rem);  /* Scales from 10px at 230px to 16px */
    font-weight: 700;
    padding: 1.1875rem 0 0.5rem 0.1875rem;  /* 19px / 0 / 8px / 3px */
    border-bottom: transparent;
    transition: 0.3s;
    text-decoration: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    position: relative;
}

.b_profile_tabs li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 77%;  /* Match user's preference */
    height: 0.125rem;  /* 2px */
    background-color: #000;
}

.b_profile_tabs li a:hover,
.b_profile_tabs li.active a {
    border-color: transparent;
    color: var(--org);
}

.b_profile_tabs li a:hover::after,
.b_profile_tabs li.active a::after {
    background-color: var(--org);
}

/* =========================================
   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: cover;
}

/* 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;
}

/* 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: cover;
    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: 1.5rem 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;
    display: flex;
    gap: 2%;
    margin-bottom: 0;  /* No bottom margin - reduced spacing */
    max-height: 30rem;  /* 450px - shorter than banner (500px) */
    width: 100%;  /* Constrain to parent width */
    max-width: 100%;  /* Prevent overflow */
}

.b_profile_disc_img {
    flex: 0 0 45%;
    overflow: hidden;  /* Prevent image overflow */
    display: flex;  /* Make container flex to control image */
    border-radius: 1.5rem;  /* 24px - clip video/image to rounded corners */
}

.b_profile_disc_img img,
.b_profile_disc_img video {
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    object-fit: cover;
    object-position: center;
}

.b_profile_disc_content {
    flex: 0 0 53%;  /* Reduced from 55% - accounts for 2% gap (45% + 2% + 53% = 100%) */
    position: relative;
    min-width: 0;  /* Allows content to shrink and prevents overflow */
    overflow: hidden;  /* Prevents text from overflowing container */
}

.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-weight: 500;  /* Medium weight - consistent with global h5 */
    /* 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 */
        max-width: 6.25rem;  /* 100px */
    }
    
    /* 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 */
}

/* ===== RESPONSIVE - DISC IMAGE HEIGHT FIX (316px - 767px) ===== */
@media screen and (min-width: 316px) and (max-width: 767px) {
    .b_profile_disc_img img {
        height: clamp(18rem, 15vw + 10rem, 25rem) !important;  /* 288px to 400px - responsive, not too tall on small screens */
        max-height: 25rem !important;  /* Cap at 400px */
        min-height: 18rem !important;  /* Minimum 288px - similar to gallery */
    }
}

/* ===== 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 (moved from 640px) */
    .b_profile_disc {
        flex-direction: column;  /* Stack vertically on mobile */
        max-height: none;  /* Remove height constraint on mobile */
    }
    
    .b_profile_disc_img {
        max-height: none;  /* Remove height constraint */
        width: 100%;  /* Full width on mobile */
    }
    
    .b_profile_disc_img img {
        width: 100%;
        height: 25rem;  /* Auto height - maintains aspect ratio */
        max-height: 25rem;  /* 400px - taller for mobile to show properly */
        min-height: 15.625rem;  /* 250px - minimum height */
        object-fit: cover;
        object-position: center;
    }
    
    .b_profile_disc_content {
        margin-top: 1.3rem;  /* 10px spacing after image */
    }
    
    /* Banner - increase height to show more of image on mobile */
    .b_profile {
        height: clamp(25rem, 65vw, 35rem);  /* 400px to 560px - taller to show more */
    }
    
    .b_profile_banner_img {
        object-fit: cover;
        object-position: center 30%;  /* Focus on upper-middle - shows more important content */
    }
    
    /* 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 */
    }
}

/* ===== 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: 1.3rem 0.3125rem 0.5625rem;  /* 21px / 5px / 9px - top banner only */
    }
    
    .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: 1.5rem 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, 583px) !important;
        aspect-ratio: unset !important;
        display: block;
    }
}

/* 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: 583px !important;  /* 1050px ÷ 1.8 = 583px - maintains 1.8:1 ratio */
        min-height: 583px !important;
        max-height: 583px !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 */
}

.b_profes_in h4 {
    color: #fff;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0.625rem;  /* 10px */
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.b_profile_disc_content h4:first-of-type,
.text_section_top h4:first-of-type,
.b_profes_in h4:first-of-type,
.b_profes_in h4:nth-of-type(2) {
    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 */
}

.text_section_top h4:first-of-type {
    text-transform: uppercase;  /* Match disc section style */
    color: var(--org);  /* Orange color */
    letter-spacing: 0.125rem;  /* 2px */
    font-weight: 600;
}

.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 {
    color: #fff;
    font-weight: 500;  /* Medium weight on larger screens */
    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 {
        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 */
    }
}

/* Large Desktop */
@media screen and (min-width: 1201px) {
    .b_profes_in.customized_b_profes_in {
        width: 772.78px !important;  /* Reduced from 972.78px - narrower focused card */
        max-width: 772.78px !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);
}

.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;
    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);
}

.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;
}

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