@charset "utf-8";
/* Navigation styles */
.top-nav {
    background-color: transparent;
}

.navbar {
    background-color: #990000;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Ensures content respects rounded corners */
}

.top-nav .navbar-brand,
.top-nav .nav-link {
    color: #FFCC99;
    padding: 0.25rem 0.5rem;
    font-family: Arial, sans-serif;
}

.top-nav .navbar {
    justify-content: center;
    background-color: #990000;
    border-radius: 8px;
    margin-bottom: 15px;
}
body {
	background-color: #FF3334;
    color: white;
    padding-top: 0;
}
.style2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FF0000;
}
a:link {
	color: #FFCC99;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFCC99;
}
a:hover {
	text-decoration: none;
	color: #FFFFCC;
}
a:active {
	text-decoration: none;
	color: #FFFFCC;
}
.style3 {
	color: #FFCC99;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 15px;
	font-weight: bold;
	border: 1px dashed #FFCC99;
	font-style: italic;
	background-color: #9C0000;
	line-height: 28px;
	text-align: center;
}

.style3 p {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
}

.style3 span, .style3 a {
    display: inline !important;
}

.style33 {
	color: #FFCC99;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: bold;
	border: 1px dashed #FFCC99;
	font-style: italic;
	background-color: #9C0000;
	line-height: 20px;
}
.style12 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FF0000;
}
.style13 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 14px;
	font-style: italic;
	text-decoration: none;
}
.style17 {
	font-size: 18;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	color: #990000;
}
.style20 {
	font-size: 18px;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bolder;
	color: #990000;
}
.style22 {font-size: 14; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style23 {font-size: 14px}
.style25 {font-size: 18px}
.style26 {
	font-size: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: normal;
	font-weight: bold;
	color: #FFFFCC;
}
.heading {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: italic;
	color: #FF0000;
	font-weight: bold;
}
/* .textstyle is now defined in the Velvet Wall heading styles section above */
.textstylehead {
	font-family: 'Montserrat', 'Roboto', sans-serif;
	font-size: 18px;
	font-style: italic;
	color: #FFCC99;
}
.forprovince {
	font-family: 'Montserrat', 'Roboto', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFCC99;
}
.formenubar {
	font-family: 'Montserrat', 'Roboto', sans-serif;
	font-style: normal;
	font-weight: bold;
	color: #FFCC99;
	font-size: 14px;
	background-image: url(image/picture/menutile.png);
	background-repeat: repeat-x;
}
.formenubar1 {
	font-family: 'Montserrat', 'Roboto', sans-serif;
	font-style: italic;
	font-weight: bold;
	color: #000000;
	font-size: 12px;
	border-bottom-color: #FFCC99;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
}
.H2 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #FFCC99;
	text-transform: none;
	background-color: #9C0000;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FFCC99;
	border-right-color: #FFCC99;
	border-bottom-color: #FFCC99;
	border-left-color: #FFCC99;
}
.pole {
	border: 1px solid #FFCC99;
}
.arawnd {
	margin: 5px;
	padding: 5px;
}

.arawnd1 {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
}
.arawnd4 {
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
}
.pole1 {
	border: 2px solid #FFCC99;
}
.arawd2 {
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 5px;
}
.arawdtable {
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 15px;
}
.girlsname {
	background-color: #CC0000;
	border: 1px dashed #FFCC99;
	font-family: 'Montserrat', 'Roboto', sans-serif;
	font-size: 18px;
	font-style: italic;
	font-weight: bold;
	color: #FFFFCC;
}
.detpage {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFCC;
}

.advet {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #FFFFCC;
	background-image: url(image/picture/advet.png);
	background-repeat: no-repeat;
	background-position: right top;
	border: 1px outset #FFFF00;
	background-color: #CC0000;
}

/*the bright gold/yellow*/
.H1 {  
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	color: #FFFFCC;
	font-weight: bold;
}
.H1black {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	color: #000;
	font-weight: bold;
	background-image: url(image/picture/escorts_gautrain.jpg);
	background-repeat: no-repeat;
	background-position: center;
	padding-left: 5px;
}
.style27 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF0000;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
}

.style28 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FF0000;
	text-decoration: none;
}

.style30 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 16px;
	color: #FFFFFF;
	text-decoration: none;
}

.style31 {
	color: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-decoration: none;
}

.style131 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 14px;
	font-style: italic;
	text-align: center;
	text-decoration: none;
}
.forsearch {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: italic;
	line-height: 30px;
	font-weight: bold;
	color: #FFCC99;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #FFCC99;
}



.detelhead
{
    font-family: Georgia, "Times New Roman" , Times, serif;
    font-size: 14px;
    font-style: italic;
    color: #FFF;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #FC9;
    border-bottom-color: #FFF;
    border-left-color: #FC9;
    font-weight: bold;
}
.nextpreviousbutton
{
    border: thin double #990000;
    margin: 1px;
    padding: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFCC;
    white-space: nowrap;
    line-height: 16px;
    background-color: #CC0000;
    display: inline;
}
.numericbutton
{
    padding: 3px;
    margin: 1px;
    border-width: thin;
    border-color: #990033;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFCC99;
    background-color: #990000;
}
.bgsidemenu {
	background-image: url(image/picture/bgside.png);
	background-repeat: repeat-y;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
}
.featuregerls {
	/*background-image: url(image/picture/fetures_gerls_bg.png);*/
	background-size: 100% 100%;
	background-repeat: repeat-y;
}
.smallwhitetext {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #FFF;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    display: block;
}
.sidediv {
	width: 165px;
}
.divlink {
	height: 40px;
	width: 165px;
	padding-top: 20px;
}
.textline {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FC6;
	text-decoration: underline;
	font-weight: bold;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
}

.poleMessages
{
    border: 2px solid #FFCC99;
    padding-right: 5px;
    padding-left: 5px;
}

.live
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-style: italic;
    color: #FFFFCC;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* ======================================
   VELVET WALL HEADING STYLES
   ====================================== */

/* UNIVERSAL VELVET WALL STYLES - All headings and blocks centralized */

/* Activity container - used for content sections */
.activity-container {
    background-color: #CE0000;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Activity header - used for section headers with gradient background */
.activity-header {
    background: linear-gradient(to bottom, #CC0000, #9C0000);
    padding: 15px;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 204, 153, 0.3);
}

/* UNIVERSAL HEADING STYLES - Apply to ALL heading classes */
.modelname, 
h1.modelname,
.sidebar h1.modelname,
.sidebar .modelname,
.textstyle,
h2.textstyle,
.gallery-header h2.textstyle,
.style3 h2.textstyle,
.activity-header h1,
.activity-header h1.modelname,
.activity-header h2,
.activity-header h2.textstyle {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #FFFFCC !important;
    text-transform: uppercase !important;
    margin: 0 !important; /* Zero all margins - Bootstrap override */
    padding: 0 !important; /* Zero all padding - Bootstrap override */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
    font-style: normal !important; /* Remove italics */
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Override Bootstrap mb-0, mt-2, etc classes in activity-header */
.activity-header .mb-0 {
    margin-bottom: 0 !important;
}

.activity-header .mt-2 {
    margin-top: 10px !important;
}

.container {
    
    position: relative;
    
}


.over {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background : url("/image/picture/nothing.gif") center;
       
}
    .over {
    z-index: 11;
}
.blackBackground
{
    background-color: #000000;
}

.advertising
        {
            font-family: "Times New Roman", Times, serif;
            font-size: large;
            font-weight: bold;
            font-style: italic;
            color: #FFFF66;
        }

/* Fix for layering issues with background image */
.main-container {
    background-image: url('/image/picture/baground.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #FF3334;
    background-size: contain;
    position: relative;
    z-index: 0;
}

/* Container styles */
.logo-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.content-wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.nav-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.header-space {
    height: 200px;
}

/* Navigation styles */
.top-nav {
    background-color: transparent;
}

.navbar {
    background-color: #990000;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Ensures content respects rounded corners */
}

.top-nav .navbar-brand,
.top-nav .nav-link {
    color: #FFCC99;
    padding: 0.5rem 0.5rem;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.top-nav .navbar {
    justify-content: center;
    background-color: #990000;
    border-radius: 8px;
    margin-bottom: 15px;
}

.nav-link:hover {
    color: white;
}

.dropdown-menu {
    background-color: #CC0000;
}

.dropdown-item {
    color: white;
}

.dropdown-item:hover {
    background-color: #990000;
    color: #FFCC99;
}

/* Sidebar Navigation */
/* Sidebar Navigation Styles - Now handled by Site1.Master */

/* Content area styles */
.content-area {
    background-color: #FF3031;
}

.sidebar {
    background-color: #FF3334;
}

.escort-gallery {
    background-color: #CE0000;
}

.gallery-header {
    background-color: #9C0000;
    padding: 10px;
    text-align: center;
}

.escort-card {
    margin-bottom: 20px;
}

.escort-info {
    background-color: #990000 !important;
    border: none !important;
    margin-top: 8px !important;
    width: 100% !important;
    border-radius: 8px !important;
}

.escort-info .card-body {
    padding: 8px !important;
    width: 100% !important;
}

/* Escort image styling with rounded corners and responsive behavior */
.escort-image {
    border: none;
    width: 100%;
    height: auto;
    border-radius: 8px;
    position: relative;
    display: block;
}

.escort-image:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Escort card text styling - standardized across all pages with modern fonts */
.escort-card .escort-info a,
.escort-card .escort-info .an-text-gold,
.escort-card .an-text-gold {
    color: #FFCC99 !important;
    text-decoration: none !important;
    font-weight: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
}

.escort-card .escort-info a:hover,
.escort-card .an-text-gold:hover {
    color: #FFFFCC !important;
}

.escort-card .escort-info div {
    margin-bottom: 2px;
    font-family: Arial, Helvetica, sans-serif !important;
    color: #FFCC99;
    font-size: 14px;
}

/* Minutes ago text styling */
.an-text-minutes,
.escort-card .minutes-ago {
    font-size: 0.8rem !important;
    color: #FFFFFF !important;
    margin-top: 4px !important;
}

/* UNIVERSAL LAYOUT CONSISTENCY - Ensures all pages align properly */
/* Force consistent layout for all content pages */
@media (min-width: 992px) {
    /* Ensure all container-fluid elements respect the 75% width constraint */
    .content-wrapper .container-fluid {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure all direct div containers also respect the constraint */
    .content-wrapper > div > div:first-child {
        max-width: 100% !important;
    }
    
    /* Standardize sidebar width across all pages */
    .col-md-3, .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    
    /* Standardize main content width across all pages */
    .col-md-9, .col-lg-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    
    .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Remove any conflicting margins from Bootstrap rows */
.content-wrapper .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure consistent padding for all page content */
.content-wrapper [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* UNIVERSAL SIDEBAR STYLING - Centralized sidebar navigation styles */
/* Apply to all sidebar containers across all pages */
.sidebar {
    background-color: #FF3334 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    padding: 0 !important; /* Remove default padding, let Bootstrap grid handle it */
}

/* Universal text containment for sidebar content */
.sidebar p, 
.sidebar div, 
.sidebar a, 
.sidebar span,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar h5,
.sidebar h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis;
}

/* Universal sidebar card body styling */
.sidebar .card-body {
    padding: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Universal sidebar list styling */
.sidebar ul {
    padding-left: 15px !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.sidebar ul li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

/* UNIVERSAL SIDEBAR NAVIGATION STYLING */
/* Standardized sidebar navigation across all pages */
.sidebar-nav {
    list-style: none !important;
    padding-left: 0 !important;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.sidebar-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background-color 0.2s ease;
}

.sidebar-nav li:last-child {
    border-bottom: none !important;
}

.sidebar-nav li:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-nav a {
    display: block !important;
    padding: 10px 15px !important; /* Consistent padding across all pages */
    color: #FFCC99 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.sidebar-nav a:hover {
    color: white !important;
    padding-left: 18px !important;
    background-color: transparent !important; /* Let parent li handle background */
}

.sidebar-nav a strong {
    transition: color 0.2s ease;
    font-weight: bold !important;
}

.sidebar-nav a:hover strong {
    color: #FFFFCC !important;
}

/* UNIVERSAL FEATURED SECTIONS */
/* Standardized featured content styling */
.featured-girls-container {
    background: linear-gradient(135deg, #990000, #CC0000) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
}

.featured-girls-header {
    text-align: center !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    padding: 0 !important;
}

.featured-girls-header img {
    width: 80% !important;
    height: auto !important;
    border-radius: 10px !important;
}

.featured-girls-item {
    margin-bottom: 15px !important;
    border-bottom: 1px solid rgba(255, 204, 153, 0.3) !important;
    padding-bottom: 15px !important;
}

.featured-girls-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* UNIVERSAL RESPONSIVE ADJUSTMENTS - Mobile optimizations for 98% screen width */
@media (max-width: 991.98px) {
    /* Universal mobile layout - 98% screen width usage */
    .content-wrapper [class*="col-"] {
        padding-left: 1vw !important; /* 1% of viewport width */
        padding-right: 1vw !important; /* Total = 2% margins, 98% content */
    }
    
    /* Universal container padding removal for mobile */
    .content-wrapper .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure all rows use full width on mobile */
    .content-wrapper .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Red escort gallery blocks - reduce padding significantly */
    .escort-gallery, .massage-gallery {
        padding: 5px !important; /* Reduced from 15px to 5px */
        margin-bottom: 15px !important; /* Reduced from 20px to 15px */
    }
    
    /* Gallery headers - reduce padding */
    .gallery-header {
        padding: 5px !important; /* Reduced from 10px to 5px */
        margin-bottom: 10px !important; /* Reduced from 15px to 10px */
    }
    
    /* UNIVERSAL escort card styling with minimal padding - applies to ALL card types */
    .escort-card,
    .available-now .escort-card,
    .featured-escorts .escort-card,
    .feature_listview .escort-card {
        padding-left: 0.5px !important; /* Even tighter than before */
        padding-right: 0.5px !important;
        margin-bottom: 10px !important; /* Reduced from 20px */
    }
    
    .escort-card .card-body,
    .available-now .escort-card .card-body,
    .featured-escorts .escort-card .card-body,
    .feature_listview .escort-card .card-body {
        padding: 1px !important; /* Reduced from 2px */
    }
    
    .escort-card .escort-info .card-body,
    .available-now .escort-card .escort-info .card-body,
    .featured-escorts .escort-card .escort-info .card-body,
    .feature_listview .escort-card .escort-info .card-body {
        padding: 3px !important; /* Reduced from 4px */
    }
    
    /* Mobile: 2 cards per row (50% width) with tighter spacing - applies ONLY to escort card containers, NOT sidebar content */
    .content-area .col-6,
    .content-area .col-lg-4,
    .content-area .col-md-6,
    .content-area .col-sm-6,
    .escort-gallery .col-6,
    .escort-gallery .col-lg-4,
    .available-now .col-6,
    .available-now .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 0.5vw !important; /* Back to original tight spacing */
        padding-right: 0.5vw !important;
    }
    
    /* Sidebar content should use full width on mobile */
    .sidebar .col-6,
    .sidebar .col-lg-12,
    .sidebar .recently-viewed-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 1vw !important;
        padding-right: 1vw !important;
    }
    
    /* Ensure mobile sidebar and content take full width with tighter margins */
    .col-md-3, .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 1vw !important; /* Reduced from 2vw */
        padding-right: 1vw !important;
    }
    
    .col-md-9, .col-lg-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 1vw !important; /* Reduced from 2vw */
        padding-right: 1vw !important;
    }
    
    /* Force all sidebar content to use full width on mobile */
    .sidebar .card,
    .sidebar .city-info-section,
    .sidebar .featured-escorts,
    .sidebar .events-panel,
    .sidebar .recently-viewed-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure sidebar itself uses full container width */
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1vw !important;
        padding-right: 1vw !important;
    }
    
    /* Sidebar specific mobile adjustments */
    .sidebar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Featured sections mobile adjustments */
    .featured-girls-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 5px !important; /* Reduced from 10px */
    }
    
    /* Featured girls items - tighter spacing */
    .featured-girls-item {
        margin-bottom: 10px !important; /* Reduced from 15px */
        padding-bottom: 10px !important; /* Reduced from 15px */
    }
    
         /* Events panel mobile adjustments */
    .events-panel {
        margin-bottom: 15px !important; /* Reduced from 20px */
    }
    
    .events-panel .card-header {
        padding: 8px !important; /* Reduced from 15px */
    }
    
    .events-panel .card-body {
        padding: 8px !important; /* Reduced from 15px */
    }
    
    .events-panel .event-item {
        margin-bottom: 10px !important; /* Reduced from 15px */
        padding: 8px !important; /* Reduced from 15px */
    }
}

/* UNIVERSAL CARD LAYOUT - Standardized across all pages */
/* Mobile: Escort card types use 50% width (2 per row) with minimal padding - EXCLUDING sidebar content */
@media (max-width: 991.98px) {
    /* Standard escort card columns - main escort cards (ONLY in main content areas) */
    .content-area .col-6, .content-area .col-sm-6, .content-area .col-md-6, .content-area .col-lg-4, .content-area .col-md-4,
    .escort-gallery .col-6, .escort-gallery .col-sm-6, .escort-gallery .col-md-6, .escort-gallery .col-lg-4, .escort-gallery .col-md-4,
    .available-now .col-6, .available-now .col-sm-6, .available-now .col-md-6, .available-now .col-lg-4, .available-now .col-md-4,
    /* Mixed column classes used across different pages (ONLY in main content areas) */
    .content-area .col-lg-4.col-6, .content-area .col-6.col-lg-4, .content-area .col-md-4.col-6, .content-area .col-6.col-md-4,
    .escort-gallery .col-lg-4.col-6, .escort-gallery .col-6.col-lg-4, .escort-gallery .col-md-4.col-6, .escort-gallery .col-6.col-md-4,
    /* Small card columns - area links, menu items (ONLY in main content areas) */
    .content-area .col-lg-2, .content-area .col-md-3, .content-area .col-sm-4, .content-area .col-lg-3,
    /* Mixed small column classes (ONLY in main content areas) */
    .content-area .col-lg-2.col-md-3.col-sm-4.col-6, .content-area .col-lg-3.col-md-3.col-sm-6.col-6 {
        /* Force 50% width for 2 cards per row on mobile */
        flex: 0 0 50% !important;
        max-width: 50% !important;
        /* Minimal padding for maximum screen usage */
        padding-left: 0.5vw !important;
        padding-right: 0.5vw !important;
    }
    
    /* Exception: Full width cards (like featured messages) */
    .col-12, .col-sm-6.col-md-10, .col-12.col-sm-6.col-md-10 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 1vw !important;
        padding-right: 1vw !important;
    }
    
    /* Sidebar content: All columns should be full width */
    .sidebar .col-6, .sidebar .col-sm-6, .sidebar .col-md-6, .sidebar .col-lg-4, .sidebar .col-md-4,
    .sidebar .col-lg-12, .sidebar .col-12,
    .sidebar .col-lg-4.col-6, .sidebar .col-6.col-lg-4, .sidebar .col-md-4.col-6, .sidebar .col-6.col-md-4,
    .sidebar .col-lg-2, .sidebar .col-md-3, .sidebar .col-sm-4, .sidebar .col-lg-3,
    .sidebar .col-lg-2.col-md-3.col-sm-4.col-6, .sidebar .col-lg-3.col-md-3.col-sm-6.col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 1vw !important;
        padding-right: 1vw !important;
    }
}

/* UNIVERSAL CARD STYLING - Centralized from all ASPX pages */
/* Remove all inline styles and centralize here */

/* City card images - standardized border radius */
.escort-card .img-fluid,
.city-card .img-fluid {
    border-radius: 10px !important;
}

/* Area link styling - remove inline styles */
.area-link {
    color: #FFCC99 !important;
    white-space: nowrap !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
}

.area-link:hover {
    color: white !important;
}

/* Area text styling */
.area-text {
    color: #FFCC99 !important;
}

/* Fetish link styling */
.fetish-link {
    color: #FFCC99 !important;
    white-space: nowrap !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
}

.fetish-link:hover {
    color: white !important;
}

/* Desktop responsive escort card styling */
@media (min-width: 992px) {
    /* Desktop: 3 cards per row (33.33% width) - main escort cards */
    .col-lg-4, .col-md-4,
    .col-lg-4.col-6, .col-6.col-lg-4, .col-md-4.col-6, .col-6.col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Desktop: 6 cards per row (16.66% width) - small area/menu cards */
    .col-lg-2 {
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    /* Desktop: 4 cards per row (25% width) - medium cards */
    .col-lg-3, .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
    
    /* Desktop: Mixed small column classes maintain their responsive behavior */
    .col-lg-2.col-md-3.col-sm-4.col-6 {
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    .col-lg-3.col-md-3.col-sm-6.col-6 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
    

}

/* Ensure consistent card spacing */
.card.mb-3 .row > div[class*="col-"] {
    margin-bottom: 1rem;
}

/* Available Now specific styling (used in home page and availablenow page) */
.available-now .escort-card .escort-info {
    background-color: #990000 !important;
    border: none !important;
    border-radius: 8px !important;
}

/* Available Now section container padding adjustments */
.available-now .card-body {
    padding: 15px !important; /* Standard padding for desktop */
}

@media (max-width: 991.98px) {
    /* Mobile: Available Now section gets same tight padding as other sections */
    .available-now .card-body {
        padding: 5px !important; /* Match other gallery sections */
    }
    
    /* Apply Available Now styling to city cards and top Available Now */
    /* City cards sections (Johannesburg, Pretoria, Durban, Cape Town) */
    .card-body:not(.available-now .card-body) {
        padding: 5px !important; /* Same as Available Now */
    }
    
    /* Top Available Now section (Panel1) - make it match bottom Available Now */
    #Panel1 .card-body {
        padding: 5px !important; /* Same as bottom Available Now */
    }
}

/* Available Now card text styling - consistent with regular escort cards */
.available-now .escort-card .escort-info a,
.available-now .escort-card .escort-info .an-text-gold,
.available-now .escort-card .an-text-gold {
    color: #FFCC99 !important;
    text-decoration: none !important;
    font-weight: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
}

.available-now .escort-card .escort-info a:hover,
.available-now .escort-card .an-text-gold:hover {
    color: #FFFFCC !important;
}

.available-now .escort-card .escort-info div {
    margin-bottom: 2px;
    font-family: Arial, Helvetica, sans-serif !important;
    color: #FFCC99;
    font-size: 14px;
}

/* Featured escort cards (sidebar) */
.featured-escorts .escort-card .escort-info,
.feature_listview .escort-card .escort-info {
    background: linear-gradient(to bottom, #990000, #660000) !important;
}

/* Recently viewed cards */
.recently-viewed-item .img-fluid {
    border: 1px solid #FFCC99 !important;
}

/* Area listing styles - Shared across all escort pages */
.area-section-header {
    background-color: #9C0000 !important;
    color: white !important;
}

.area-section-body {
    background-color: #9C0000 !important;
}

.area-link {
    color: #FFCC99;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.area-link:hover {
    color: white;
}

.area-text {
    color: #FFCC99;
}

/* Mobile layout for Area Sections - Force 2 columns across all pages */
@media (max-width: 767.98px) {
    /* Target all area sections - comprehensive approach */
    .area-section-body .col-6,
    .area-section-body .col-lg-2,
    .area-section-body .col-md-3,
    .area-section-body .col-sm-4,
    .areas-section .col-6,
    .areas-section .col-lg-2,
    .areas-section .col-md-3,
    .areas-section .col-sm-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Additional specificity for stubborn elements */
    .areas-section [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Pagination styles */
.pager-container {
    text-align: center;
    padding: 10px 0;
    overflow-x: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100%;
}

/* Custom pager buttons with dark red background and gold text */
.btn-dark {
    background-color: #990000 !important;
    border-color: #990000 !important;
    color: #FFCC99 !important;
}

.btn-dark:hover {
    background-color: #800000 !important;
    border-color: #800000 !important;
}

.btn-light {
    background-color: #800000 !important;
    border-color: #800000 !important;
    color: white !important;
}

.pager-container .btn {
    margin: 0 !important;
    flex-shrink: 0;
    padding: 0.15rem !important;
    font-size: 0.8rem !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

.nav-arrow {
    font-weight: 700;
}

/* Mobile Pagination Optimization */
@media (max-width: 576px) {
    .pager-container {
        gap: 1px !important;
        padding: 5px 0;
    }
    
    .pager-container .btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        padding: 0.1rem !important;
    }
}

/* Footer styles */
.footer-ad {
    text-align: center;
    margin: 15px 0;
}

.footer-container {
    margin-top: 20px;
}

.footer-text {
    text-align: right;
    padding: 10px;
}

/* Panel styles */
.recently-viewed-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.recently-viewed-header {
    text-align: center;
    padding: 10px 0;
}

.recently-viewed-item {
    margin-bottom: 15px;
    text-align: center;
}

.events-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.events-header {
    text-align: center;
    padding: 10px 0;
}

.events-item {
    padding: 10px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #990000, #660000);
    text-align: center;
}

/* Events Section - Comprehensive Styling */
.events-panel {
    background-color: #9C0000 !important;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    width: 100% !important;
}

.events-panel .card-header {
    background-color: #9C0000 !important;
    border-bottom: 2px solid rgba(255, 204, 153, 0.3) !important;
    text-align: center;
    padding: 15px;
}

.events-panel .card-header img {
    max-width: 120px;
}

.events-panel .card-header h6 {
    color: #FFCC99;
    margin-bottom: 0;
    margin-top: 10px;
    font-weight: bold;
}

.events-panel .card-body {
    background-color: #9C0000 !important;
    padding: 15px;
}

.events-panel .event-item {
    margin-bottom: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #990000, #660000);
    border-radius: 8px;
    border: 1px solid rgba(255, 204, 153, 0.3);
    text-align: center;
    width: 100%;
}

.events-panel .event-item:last-child {
    margin-bottom: 0;
}

.events-panel .event-title {
    color: #FFCC99 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    display: block !important;
    margin-bottom: 8px;
}

.events-panel .event-date {
    color: #FFCC99 !important;
    font-size: 12px !important;
    margin-bottom: 8px;
}

.events-panel .event-author {
    color: #FFCC99 !important;
    font-size: 11px !important;
    margin-bottom: 8px;
}

.events-panel .event-author a {
    color: #FFCC99 !important;
    text-decoration: none;
}

.events-panel .event-author a:hover {
    color: #FFFFCC !important;
}

.events-panel .event-description {
    color: white !important;
    font-size: 10px !important;
    line-height: 1.3;
    word-wrap: break-word;
    display: block !important;
}

/* Responsive adjustments for events */
@media (max-width: 768px) {
    .events-panel .event-item {
        padding: 10px;
    }
    
    .events-panel .event-title {
        font-size: 13px !important;
    }
}

/* Offcanvas menu styles - Updated with higher z-index values */
.offcanvas-menu {
    background-color: #990000 !important;
    width: 280px;
    z-index: 9999999 !important; /* Extremely high z-index */
}

.offcanvas-backdrop {
    z-index: 9999998 !important; /* Just below the menu but still very high */
}

.offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #990000;
    color: white;
}

.offcanvas-body {
    padding: 0;
    background-color: #990000;
}

.mobile-nav-link {
    color: white;
    padding: 12px 15px;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.mobile-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFCC99;
}

/* Mobile header styles - Lowered z-index values */
@media (max-width: 768px) {
    /* Mobile fixed header with much lower z-index */
    .mobile-header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10/*1030*/; /* Lower than offcanvas */
        background-color: #FF3334;
    }
    
    /* Logo container also with lower z-index */
    .logo-container {
        z-index: 5 !important; /* Lower than mobile header */
    }
    
    /* Nav container with lower z-index */
    .nav-container {
        z-index: 5 !important; /* Same as logo container */
    }
    
    /* Ensure all content has very low z-index */
    .content-wrapper {
        z-index: 1 !important;
    }
    
    /* Main container with lowest z-index */
    .main-container {
        z-index: 0 !important;
    }
    
    /* Apply highest z-index to Bootstrap offcanvas */
    .offcanvas {
        z-index: 99999 !important;
    }
    
    /* Hamburger button - above header but below offcanvas */
    .mobile-hamburger {
        position: relative;
        z-index: 15 !important;
        border: none;
        background: transparent;
        color: white;
    }
}

/* Mobile header styles - Ensure these have lower z-index than the offcanvas menu */
@media (max-width: 768px) {
    .mobile-header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10/*1030*/; /* Lower than offcanvas */
        background-color: #FF3334;
    }
    
    /* Ensure offcanvas menu appears above header */
    .offcanvas {
        z-index: 9999999 !important;
    }
}

/* Mobile hamburger button styling */
.mobile-hamburger {
    border: none;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1040; /* Higher than header but lower than offcanvas */
}

/* Desktop styles */
@media (min-width: 769px) {
    .logo-container {
        width: 90%;
    }
    
    .content-wrapper {
        width: 75%;
    }
    
    .nav-container {
        width: 75%;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    /* Mobile background and header space */
    .main-container {
        background-image: url('/image/picture/mobile_banner_small.jpg');
        background-position: top center;
        background-size: contain;
        background-attachment: scroll;
    }
    
    .header-space {
        height: 20vw; /* Dynamic height based on viewport width */
        min-height: 60px; /* Reduced from 80px to 60px */
    }
    
    /* Mobile fixed header */
    .mobile-header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10/*1030*/;
        background-color: #FF3334;
    }

    
    /* Logo container with reduced height */
    .mobile-header-wrapper .logo-container {
        height: 60px; /* Reduced from 80px to 60px for shorter appearance */
        background-image: url('/image/picture/mobile_banner_small.jpg');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: contain;
        margin-bottom: 5px; /* Reduced from 10px to 5px */
    }
    
    /* Mobile navigation styling */
    .mobile-header-wrapper .top-nav {
        background-color: transparent;
    }
    
    .mobile-header-wrapper .nav-container {
        width: 100%;
        margin: 0 auto;
    }
    
    .mobile-header-wrapper .top-nav .d-flex {
        border-radius: 0.375rem;
        background-color: #990000;
        margin-bottom: 5px; /* Reduced from 10px */
        padding-top: 0.25rem !important; /* Reduced from 0.375rem */
        padding-bottom: 0.25rem !important; /* Reduced from 0.375rem */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    /* Body padding to compensate for fixed header */
    body {
        padding-top: 90px; /* Reduced from 120px to match shorter header */
    }
    
    /* Content area adjustments */
    .content-wrapper {
        padding-top: 10px;
        margin-top: 0;
    }
    
    /* Ensure offcanvas menu appears above header */
    .offcanvas {
        z-index: 99999 !important;
    }
    
    .offcanvas-backdrop {
        z-index: 99990 !important;
    }
    
    /* Mobile content layout - only target main layout columns */
    .col-md-3.sidebar,
    .col-lg-3.sidebar {
        order: 2;
    }
    
    .col-md-9.content-area,
    .col-lg-6 {
        order: 1;
    }
    
    /* Right sidebar on home page - Featured Escorts section */
    .col-lg-3:not(.sidebar) {
        order: 3;
    }

}

/* Offcanvas menu styles - ensure extremely high z-index */
.offcanvas,
.offcanvas-menu {
    background-color: #990000 !important;
    width: 280px;
    z-index: 99999 !important; /* Extremely high z-index */
}

.offcanvas-backdrop {
    z-index: 99990 !important; /* Just below the menu but still very high */
}

/* Mobile header styles - much lower z-index values */
@media (max-width: 768px) {
    /* Mobile fixed header with much lower z-index */
    .mobile-header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10 !important; /* Very low z-index */
        background-color: #FF3334;
    }
    
    /* Logo container also with lower z-index */
    .logo-container {
        z-index: 5 !important; /* Lower than mobile header */
    }
    
    /* Nav container with lower z-index */
    .nav-container {
        z-index: 5 !important; /* Same as logo container */
    }
    
    /* Ensure all content has very low z-index */
    .content-wrapper {
        z-index: 1 !important;
    }
    
    /* Main container with lowest z-index */
    .main-container {
        z-index: 0 !important;
    }
    
    /* Apply highest z-index to Bootstrap offcanvas */
    .offcanvas {
        z-index: 99999 !important;
    }
    
    /* Hamburger button - above header but below offcanvas */
    .mobile-hamburger {
        position: relative;
        z-index: 15 !important;
        border: none;
        background: transparent;
        color: white;
    }
}

/* Force layering styles for additional Bootstrap classes */
.modal-backdrop {
    z-index: 99980 !important;
}

.modal {
    z-index: 99985 !important;
}

/* Clean up conflicting z-index styles and fix mobile header shifting */

/* Offcanvas menu styles - consistent z-index */
.offcanvas,
.offcanvas-menu {
    background-color: #990000 !important;
    width: 280px;
    z-index: 1090 !important; /* High but realistic z-index */
}

.offcanvas-backdrop {
    z-index: 1089 !important; /* Just below the menu */
}

/* Mobile header styles - z-index hierarchy */
@media (max-width: 768px) {
    /* Mobile fixed header */
    .mobile-header-wrapper {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1050 !important;
        background-color: #FF3334;
        width: 100%;
        /* Prevent movement when offcanvas opens */
        transform: none !important;
        transition: none !important;
    }
    
    /* Logo container */
    .mobile-header-wrapper .logo-container {
        height: 80px;
        background-image: url('/image/picture/mobile_banner_small.jpg');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: contain;
        margin-bottom: 0;
        width: 100%;
        z-index: 1 !important; /* Low within the header wrapper */
        position: relative !important;
        /* Prevent movement */
        transform: none !important;
        transition: none !important;
    }
    
    /* Navigation container */
    .mobile-header-wrapper .nav-container {
        margin-top: -5px;
        position: relative !important;
        z-index: 1 !important; /* Same as logo container */
        /* Prevent movement */
        transform: none !important;
        transition: none !important;
    }
    
    /* Mobile hamburger button */
    .mobile-hamburger {
        border: none;
        background: transparent;
        color: white;
        position: relative;
        z-index: 1055 !important; /* Above header but below offcanvas */
    }
    
    /* Override Bootstrap offcanvas backdrop behavior that might affect positioning */
    body.offcanvas-open {
        overflow: auto !important;
        padding-right: 0 !important;
    }
    
    /* Ensure main container and content stay below */
    .main-container {
        z-index: 0 !important;
    }
    
    .content-wrapper {
        z-index: 1 !important;
    }
}

/* Additional fix to prevent Bootstrap from adding padding to body */
body {
    overflow-y: auto !important;
}

/* Fix for backdrop affecting fixed elements */
.modal-open .fixed-top,
.modal-open .mobile-header-wrapper,
.offcanvas-open .mobile-header-wrapper {
    padding-right: 0 !important;
}

/* Clean up redundant z-index declarations */
/* Remove other z-index declarations at 9999 levels that are causing issues */

/* Z-index hierarchy for proper layering */
/* This clean consolidated section replaces all the fragmented z-index declarations */

/* Offcanvas menu - highest z-index */
.offcanvas,
.offcanvas-menu {
    background-color: #990000 !important;
    width: 280px; /* Default width for larger screens */
    max-width: 280px; /* Ensure it doesn't exceed this on larger screens */
    z-index: 1090 !important; /* Highest in our hierarchy */
}

/* Mobile devices - full width offcanvas */
@media (max-width: 768px) {
    .offcanvas,
    .offcanvas-menu {
        width: 100vw !important; /* Full viewport width on mobile */
        max-width: 100vw !important;
    }
}

/* For screens larger than 768px, maintain standard width */
@media (min-width: 769px) {
    .offcanvas,
    .offcanvas-menu {
        width: 280px !important;
        max-width: 280px !important;
    }
}

.offcanvas-backdrop {
    z-index: 1089 !important; /* Just below offcanvas */
}

/* Mobile menu responsive scaling for very small screens */
@media (max-width: 320px) {
    /* Force mobile menu to scale down properly - stronger selectors */
    .offcanvas.offcanvas-start,
    .offcanvas-menu.offcanvas-start,
    .offcanvas,
    .offcanvas-menu {
        width: 95vw !important; /* Use viewport width instead of fixed width */
        max-width: 300px !important;
        min-width: 250px !important; /* Ensure minimum usable width */
    }
    
    /* Remove all fixed spacing from offcanvas container */
    .offcanvas,
    .offcanvas-menu {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Target all navigation links and buttons - make very compact */
    .offcanvas .mobile-nav-link,
    .offcanvas-menu .mobile-nav-link,
    .offcanvas a,
    .offcanvas button,
    .mobile-nav-link,
    .accordion-button {
        padding: 3px 6px !important; /* Very minimal padding */
        margin: 0 !important; /* Remove margins */
        font-size: 11px !important; /* Smaller font */
        line-height: 1.0 !important; /* Very tight line height */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border: none !important; /* Remove all borders */
        border-bottom: none !important; /* Specifically remove bottom borders */
        min-height: auto !important; /* Remove min-height constraints */
        height: auto !important; /* Allow natural height */
        vertical-align: top !important;
    }
    
    /* Remove bottom borders between menu items */
    .offcanvas .mobile-nav-link,
    .offcanvas-menu .mobile-nav-link,
    .mobile-nav-link {
        border-bottom: none !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    /* VIP accordion button scaling - stronger selectors */
    .offcanvas .mobile-nav-link[data-bs-toggle="collapse"],
    .offcanvas-menu .mobile-nav-link[data-bs-toggle="collapse"],
    .mobile-nav-link[data-bs-toggle="collapse"],
    .accordion-button {
        padding: 2px 4px !important; /* Minimal padding */
        font-size: 10px !important;
        min-height: auto !important;
        height: auto !important;
        line-height: 1.0 !important;
    }
    
    /* Accordion body items - stronger selectors */
    .offcanvas .accordion-body .mobile-nav-link,
    .offcanvas-menu .accordion-body .mobile-nav-link,
    .accordion-body .mobile-nav-link,
    .accordion-body a {
        padding: 2px 4px 2px 8px !important; /* Minimal indent and padding */
        font-size: 10px !important;
        margin: 0 !important;
        line-height: 1.0 !important;
        border: none !important;
    }
    
    /* Accordion body container - remove all spacing */
    .offcanvas .accordion-body,
    .offcanvas-menu .accordion-body,
    .accordion-body {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    
    /* Accordion item containers - no spacing */
    .offcanvas .accordion-item,
    .offcanvas-menu .accordion-item,
    .accordion-item {
        margin: 0 !important;
        border: none !important;
        padding: 0 !important;
    }
    
    /* Accordion collapse area - no spacing */
    .offcanvas .accordion-collapse,
    .offcanvas-menu .accordion-collapse,
    .accordion-collapse {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Offcanvas header scaling - minimal */
    .offcanvas .offcanvas-header,
    .offcanvas-menu .offcanvas-header,
    .offcanvas-header {
        padding: 3px 6px !important;
        margin: 0 !important;
        min-height: auto !important;
        height: auto !important;
        border-bottom: none !important;
    }
    
    .offcanvas .offcanvas-body,
    .offcanvas-menu .offcanvas-body,
    .offcanvas-body {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Remove any border spacing */
    .offcanvas *,
    .offcanvas-menu * {
        border-spacing: 0 !important;
        border-collapse: collapse !important;
    }
    
    /* Target any dividers or separators - make invisible */
    .mobile-menu-divider,
    .offcanvas hr,
    .offcanvas .divider {
        margin: 0 !important;
        height: 0 !important;
        display: none !important; /* Hide dividers completely */
    }
    
    /* Remove list styling if any */
    .offcanvas ul,
    .offcanvas-menu ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    /* Target Bootstrap classes directly used in Site1.Master */
    #mobileNavOffcanvas {
        width: 95vw !important;
        max-width: 300px !important;
    }
    
    /* Override inline styles from Site1.Master accordion buttons */
    #mobileNavOffcanvas button[style*="font-size: 1rem"] {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }
    
    /* Target VIP section specifically by ID */
    #vipAccordion .mobile-nav-link,
    #cityAccordion .mobile-nav-link {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }
    
    /* Bootstrap padding classes override */
    .offcanvas .ps-4,
    .offcanvas-menu .ps-4,
    #mobileNavOffcanvas .ps-4 {
        padding-left: 8px !important; /* Reduce from Bootstrap's 1.5rem */
    }
    
    /* Target bi (Bootstrap icons) to make them smaller */
    .offcanvas .bi,
    .offcanvas-menu .bi,
    #mobileNavOffcanvas .bi {
        font-size: 8px !important;
    }
    
    /* Force smaller text in offcanvas title */
    .offcanvas-title,
    #mobileNavOffcanvasLabel {
        font-size: 12px !important;
    }
    
    /* Override w-100 class to prevent excessive width */
    .offcanvas .w-100,
    .offcanvas-menu .w-100,
    #mobileNavOffcanvas .w-100 {
        width: auto !important;
    }
    
    /* Target text-start class specifically */
    .offcanvas .text-start,
    .offcanvas-menu .text-start {
        text-align: left !important;
        font-size: 10px !important;
    }
    
    .offcanvas li,
    .offcanvas-menu li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
}

/* Additional scaling for extremely small screens */
@media (max-width: 280px) {
    .offcanvas.offcanvas-start,
    .offcanvas-menu.offcanvas-start,
    .offcanvas,
    .offcanvas-menu {
        width: 98vw !important;
        max-width: 270px !important;
        min-width: 240px !important;
    }
    
    /* Even more aggressive spacing reduction */
    .offcanvas .mobile-nav-link,
    .offcanvas-menu .mobile-nav-link,
    .offcanvas a,
    .offcanvas button,
    .mobile-nav-link,
    .accordion-button {
        padding: 4px 6px !important;
        font-size: 11px !important;
        line-height: 1.0 !important;
        margin: 0 !important;
    }
    
    .offcanvas .mobile-nav-link[data-bs-toggle="collapse"],
    .offcanvas-menu .mobile-nav-link[data-bs-toggle="collapse"],
    .mobile-nav-link[data-bs-toggle="collapse"],
    .accordion-button {
        padding: 3px 5px !important;
        font-size: 10px !important;
    }
    
    .offcanvas .accordion-body .mobile-nav-link,
    .offcanvas-menu .accordion-body .mobile-nav-link,
    .accordion-body .mobile-nav-link,
    .accordion-body a {
        padding: 3px 5px 3px 10px !important;
        font-size: 10px !important;
    }
    
    .offcanvas .offcanvas-header,
    .offcanvas-menu .offcanvas-header,
    .offcanvas-header {
        padding: 4px 6px !important;
    }
    
    /* Target Bootstrap classes for 280px screens */
    #mobileNavOffcanvas {
        width: 98vw !important;
        max-width: 270px !important;
    }
    
    /* More aggressive font size reduction */
    #mobileNavOffcanvas button[style*="font-size: 1rem"] {
        font-size: 9px !important;
        padding: 1px 3px !important;
    }
    
    #vipAccordion .mobile-nav-link,
    #cityAccordion .mobile-nav-link {
        font-size: 9px !important;
        padding: 1px 3px !important;
    }
    
    /* Smaller Bootstrap padding */
    .offcanvas .ps-4,
    .offcanvas-menu .ps-4,
    #mobileNavOffcanvas .ps-4 {
        padding-left: 6px !important;
    }
    
    /* Tiny icons */
    .offcanvas .bi,
    .offcanvas-menu .bi,
    #mobileNavOffcanvas .bi {
        font-size: 7px !important;
    }
    
    /* Smaller title */
    .offcanvas-title,
    #mobileNavOffcanvasLabel {
        font-size: 10px !important;
    }
    
    /* Override text styling */
    .offcanvas .text-start,
    .offcanvas-menu .text-start {
        font-size: 9px !important;
    }
}

/* Mobile header styles with correct z-index hierarchy */
@media (max-width: 768px) {
    /* Mobile fixed header */
    .mobile-header-wrapper {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1050 !important; /* Below offcanvas but above content */
        background-color: #FF3334;
        width: 100%;
        /* Prevent shifting when offcanvas opens */
        transform: none !important;
        transition: none !important;
    }
    
    /* Logo container */
    .mobile-header-wrapper .logo-container {
        height: 80px;
        background-image: url('/image/picture/mobile_banner_small.jpg');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: contain;
        margin-bottom: 0;
        width: 100%;
        z-index: 1 !important; /* Low within the header wrapper */
        position: relative !important;
        /* Prevent movement */
        transform: none !important;
        transition: none !important;
    }
    
    /* Navigation container */
    .mobile-header-wrapper .nav-container {
        margin-top: -5px;
        position: relative !important;
        z-index: 1 !important; /* Same as logo container */
        /* Prevent movement */
        transform: none !important;
        transition: none !important;
    }
    
    /* Mobile hamburger button - must be above header components */
    .mobile-hamburger {
        border: none;
        background: transparent;
        color: white;
        position: relative;
        z-index: 1055 !important; /* Above header */
        cursor: pointer;
    }
    
    /* Main container layers */
    .main-container {
        z-index: 0 !important; /* Bottom layer */
    }
    
    .content-wrapper {
        z-index: 1 !important; /* Above main container */
    }
}

/* Fix body padding for Bootstrap offcanvas */
body {
    overflow-y: auto !important;
}

/* Fix for elements shifting when modal/offcanvas is opened */
body.modal-open,
body.offcanvas-open {
    overflow-y: auto !important;
    padding-right: 0 !important;
}

.modal-open .fixed-top,
.modal-open .mobile-header-wrapper,
.offcanvas-open .mobile-header-wrapper {
    padding-right: 0 !important;
}

/* Set modal z-indices properly */
.modal-backdrop {
    z-index: 1088 !important;
}

.modal {
    z-index: 1089 !important;
}

/* City Information Section - Centralized Styling for All City Pages */
.city-info-section {
    background: linear-gradient(135deg, #990000, #CC0000, #990000);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: none;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.city-info-section .card-body {
    padding: 1rem; /* Match home page card-body padding */
}

/* Main content container with internal margins like Site Info section */
.city-info-section .city-content-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.city-info-section .city-brand-header {
    text-align: center;
    margin-bottom: 1rem;
}

.city-info-section .city-brand-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.city-info-section .city-brand-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFCC99, white, #FFCC99, transparent);
    border-radius: 2px;
    margin: 0 auto;
    width: 70%;
}

.city-info-section .city-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #FFCC99;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.city-info-section .city-description {
    color: white;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
    font-weight: 400;
}

.city-info-section .city-description p {
    margin-bottom: 1rem;
}

.city-info-section .city-description p:last-child {
    margin-bottom: 0;
}

/* Remove trust indicators - not part of Site Info section */
.city-info-section .trust-indicators {
    display: none;
}

.city-info-section .city-features {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,204,153,0.3);
    margin-bottom: 0.75rem;
}

.city-info-section .city-features-flex {
    display: flex;
    justify-content: space-between;
    text-align: center;
    gap: 0.2rem;
}

.city-info-section .city-feature-item {
    flex: 1;
}

.city-info-section .city-feature-title {
    color: #FFCC99;
    font-weight: 700;
    font-size: 0.75rem;
}

.city-info-section .city-feature-subtitle {
    color: white;
    font-size: 0.65rem;
    opacity: 0.9;
}

/* Responsive adjustments for city info section */
@media (max-width: 768px) {
    .city-info-section .city-brand-title {
        font-size: 1rem;
    }
    
    .city-info-section .city-subtitle {
        font-size: 0.9rem;
    }
    
    .city-info-section .city-description {
        font-size: 0.85rem;
    }
    
    .city-info-section .city-feature-title {
        font-size: 0.7rem;
    }
    
    .city-info-section .city-feature-subtitle {
        font-size: 0.6rem;
    }
}

@media (max-width: 576px) {
    .city-info-section .card-body {
        padding: 0.75rem;
    }
    
    .city-info-section .city-brand-title {
        font-size: 0.95rem;
    }
    
    .city-info-section .city-subtitle {
        font-size: 0.85rem;
    }
    
    .city-info-section .city-description {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    
    .city-info-section .city-features-flex {
        gap: 0.1rem;
    }
    
    .city-info-section .city-feature-title {
        font-size: 0.65rem;
    }
    
    .city-info-section .city-feature-subtitle {
        font-size: 0.55rem;
    }
}

/* City section headers styling - for main content area headings */
.city-section-header {
    font-size: 1.0rem;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    margin-bottom: 0;
}

.city-section-header a {
    color: #FFCC99;
    text-decoration: none;
}

.city-section-header a:hover {
    color: #FFFFCC;
}

/* City Information Section - Centralized Styling for All City Pages */

/* Digital Content Overlay Label Styling */
.overlayLabel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    padding: 5px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 10;
}

.image-container {
    position: relative;
    width: 100%;
    display: block;
}

.escort-image {
    width: 100%;
    display: block;
    position: relative;
}

/* Responsive overlay adjustments */
@media (max-width: 768px) {
    .overlayLabel {
        font-size: 12px;
        padding: 3px;
    }
}



/* Responsive overlay adjustments */
@media (max-width: 768px) {
    .overlayLabel {
        font-size: 12px;
        padding: 3px;
    }
}