/* ============================================



   COMPREHENSIVE RESPONSIVE CSS



   HeyDay Realty - Full Website Responsive Support



   ============================================ */




/* ============================================



   BASE RESPONSIVE SETTINGS



   ============================================ */







/* Prevent horizontal scrolling globally */



html, body {



    overflow-x: hidden;


    max-width: 100%;



}


* {



    max-width: 100%;



    box-sizing: border-box;



}



/* Responsive images */



img {



    max-width: 100%;



    height: auto;



    object-fit: cover;



}



/* Responsive videos */



iframe, embed, object, video {



    max-width: 100%;



    /* height: auto; */



}




/* ============================================



   MOBILE MENU TOGGLE (Global)



   ============================================ */







.mobile-menu-toggle {



    display: none;



    position: fixed;



    top: 20px;



    left: 20px;



    z-index: 1001;



    background: linear-gradient(135deg, #004526 0%, #006638 100%);



    color: white;



    border: none;



    border-radius: 8px;



    padding: 12px 16px;



    cursor: pointer;



    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);



    font-size: 1.25rem;



    transition: all 0.3s ease;



}







.mobile-menu-toggle:hover {



    transform: scale(1.05);



    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);



}







/* ============================================



   SMALL TABLETS (577px - 768px)



   ============================================ */







@media (max-width: 768px) {



    .mobile-menu-toggle {



        display: block;



    }







    /* Container adjustments */



    .container, .container-fluid {



        padding-left: 15px;

        padding-top: 0;

        padding-right: 15px;



    }







    /* Typography scaling */



    h1 { font-size: 1.75rem; }



    h2 { font-size: 1.5rem; }



    h3 { font-size: 1.25rem; }



    h4 { font-size: 1.1rem; }



    h5 { font-size: 1rem; }



    h6 { font-size: 0.9rem; }







    /* Button adjustments */



    .btn {



        padding: 10px 20px;



        font-size: 12px;



    }







    .btn-sm {



        padding: 8px 16px;



        font-size: 12px;



    }







    .btn-lg {



        padding: 12px 24px;



        font-size: 1rem;



    }







    /* Card adjustments */



    .card {



        margin-bottom: 1rem;



    }







    .card-body {



        padding: 1.25rem;



    }







    .card-header {



        padding: 1rem 1.25rem;



    }




    /* Form adjustments */



    .form-control, .form-select {



        font-size: 0.95rem;



        padding: 0.625rem 0.875rem;



    }







    .form-label {



        font-size: 12px;



        margin-bottom: 0.5rem;



    }







    /* Badge adjustments */



    .badge {



        font-size: 0.75rem;



        padding: 0.35rem 0.65rem;



    }







    /* Alert adjustments */



    .alert {



        padding: 1rem;



        font-size: 12px;



    }







    /* Table adjustments */



    .table {



        font-size: 0.875rem;



    }







    .table th, .table td {



        padding: 0.75rem 0.5rem;



    }







    /* Modal adjustments */



    .modal-dialog {



        max-width: 90vw;



        margin: 1rem auto;



    }







    .modal-content {



        border-radius: 12px;



    }







    .modal-body {



        padding: 1.25rem;



    }







    .modal-header, .modal-footer {



        padding: 1rem;



    }







    /* Pagination */



    .pagination {



        flex-wrap: wrap;



        justify-content: center;



    }







    .page-link {



        padding: 0.5rem 0.75rem;



        font-size: 0.875rem;



    }







    /* Breadcrumb */



    .breadcrumb {



        flex-wrap: wrap;



        font-size: 0.875rem;



    }







    /* Navbar adjustments for public pages */



    .navbar-brand img {



        height: 60px;



    }







    .navbar-collapse {



        background: white;



        padding: 1rem;



        margin-top: 0.5rem;



        border-radius: 12px;



        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);



    }







    .navbar-nav {



        flex-direction: column;



        width: 100%;



    }







    .nav-item {



        width: 100%;



        margin-bottom: 0.25rem;



    }







    .nav-link {



        padding: 0.75rem 1rem;



        text-align: center;



    }







    /* Hero section adjustments */



    .hero-section {



        padding: 60px 0;



        min-height: auto;



    }







    .hero-headline {



        font-size: 2.5rem;



        line-height: 1.2;



    }







    .hero-subheadings {



        font-size: 12px;



    }







    .hero-buttons {



        flex-direction: column;



        width: 100%;



    }







    .hero-buttons .btn {



        width: 100%;



        text-align: center;



    }







    /* Inner hero */



    .inner-hero {



        height: 400px;



    }







    .inner-hero-title {



        font-size: 1.75rem;



    }







    /* Footer adjustments */



    .footer {



        padding-top: 3rem;



    }







    .footer-container {



        flex-direction: column;



        gap: 2rem;



    }







    .footer-column {



        width: 100%;



    }







    .copyright-bar .container {



        flex-direction: column;



        gap: 1rem;



        text-align: center;



    }







    /* Property cards */



    .property-card {



        margin-bottom: 1.5rem;



    }







    /* Value prop cards */



    .value-prop-card {



        margin-bottom: 1rem;



    }







    /* Counters section */



    .counter-number {



        font-size: 2.5rem;



    }







    .counter-label {



        font-size: 12px;



    }







    /* Investment cards */



    .investment-card {



        margin-bottom: 1rem;



    }







    /* Category cards */



    .category-card {



        height: 200px;



    }







    /* Newsletter box */



    .newsletter-box {



        flex-direction: column;



    }







    .newsletter-box input {



        margin-bottom: 0.5rem;



    }







    .newsletter-box button {



        width: 100%;



    }







    /* Social icons */



    .social-icons a {



        width: 36px;



        height: 36px;



        font-size: 1rem;



    }







    /* WhatsApp float */



    .whatsapp-float {



        bottom: 20px;



        right: 20px;



        width: 50px;



        height: 50px;



        font-size: 1.5rem;



    }







    /* Stat cards */



    .stat-card {



        margin-bottom: 1rem;



    }







    .stat-icon {



        width: 48px;



        height: 48px;



        font-size: 1.25rem;



    }







    /* Activity items */



    .activity-item {



        padding-left: 1rem;



    }







    /* KPI cards grid */



    .kpi-cards-grid {



        grid-template-columns: repeat(2, 1fr);



        gap: 1rem;



    }







    .kpi-card {



        padding: 1.5rem;



    }







    .kpi-value {



        font-size: 1.5rem;



    }







    .kpi-label {



        font-size: 0.8rem;



    }







    /* Dashboard grid */



    .dashboard-main-grid {



        grid-template-columns: 1fr;



        gap: 1.5rem;



    }







    /* Leads section */



    .leads-header {



        flex-direction: column;



        align-items: flex-start;



        gap: 1rem;



    }







    .leads-controls {



        flex-wrap: wrap;



        width: 100%;



    }







    .leads-search {



        flex: 1;



        min-width: 200px;



    }







    /* Analytics widget */



    .analytics-widget {



        padding: 1.5rem;



    }







    .analytics-widget-header {



        flex-direction: column;



        align-items: flex-start;



        gap: 1rem;



    }







    .property-stats-grid {



        grid-template-columns: 1fr;



    }







    /* Profile dropdown */



    .profile-dropdown {



        min-width: 200px;



    }







    /* Notification dropdown */



    .notification-dropdown {



        min-width: 280px;



        right: 0;



        left: auto;



    }







    /* Search box */



    .search-box {



        display: none;



    }







    /* Header adjustments */



    .header-right {



        gap: 10px;



        padding: 10px;



    }







    .icon-btn {



        font-size: 1.1rem;



    }







    .profile-toggle {



        gap: 8px;



    }







    .profile-avatar {



        width: 32px;



        height: 32px;



    }







    .profile-info {



        display: none;



    }







    /* Quick add button */



    .quick-add-btn {



        padding: 8px 16px;



        font-size: 12px;



    }







    /* Breadcrumb */



    .breadcrumb {



        font-size: 0.8rem;



    }



    /* CTA button adjustments for mobile */



    .cta-banner-buttons {



        gap: 10px;



    }



    .btn-cta-yellow,



    .btn-cta-outline {



        padding: 9px 15px;



        font-size: 12px;



        line-height: 1.2;



        min-height: 40px;



    }



}







/* ============================================



   MOBILE (≤576px)



   ============================================ */







@media (max-width: 576px) {



    /* Container adjustments */



    .container, .container-fluid {



        padding-left: 12px;



        padding-right: 12px;


        padding-top: 6px;
       

    }







    /* Typography scaling */



    h1 { font-size: 1.5rem; }



    h2 { font-size: 1.3rem; }



    h3 { font-size: 1.15rem; }



    h4 { font-size: 1rem; }



    h5 { font-size: 0.9rem; }



    h6 { font-size: 0.85rem; }







    /* Section heading */



    .section-heading {



        font-size: 1.5rem;



        line-height: 1.2;



    }







    /* Button adjustments */



    .btn {



        padding: 8px 16px;



        font-size: 12px;



        width: 100%;



        margin-bottom: 0.5rem;



    }







    .btn-group {



        display: flex;



        flex-direction: column;



        width: 100%;



    }







    .btn-group .btn {



        margin-bottom: 0.5rem;



        border-radius: 6px;



    }







    .btn-group-vertical .btn {



        width: 100%;



    }







    /* Card adjustments */



    .card {



        margin-bottom: 0.75rem;



        border-radius: 10px;



    }







    .card-body {



        padding: 1rem;



    }







    .card-header {



        padding: 0.875rem 1rem;



        font-size: 0.95rem;



    }







    .card-footer {



        padding: 0.875rem 1rem;



    }







    /* Form adjustments */



    .form-control, .form-select {



        font-size: 12px;



        padding: 0.5rem 0.75rem;



        border-radius: 8px;



    }







    .form-label {



        font-size: 12px;



        margin-bottom: 0.4rem;



    }







    .form-check {



        margin-bottom: 0.5rem;



    }







    .form-check-input {



        width: 1.1rem;



        height: 1.1rem;



    }







    .form-check-label {



        font-size: 12px;



    }







    /* Input group */



    .input-group-text {



        font-size: 12px;



        padding: 0.5rem 0.75rem;



    }







    /* Badge adjustments */



    .badge {



        font-size: 0.7rem;



        padding: 0.3rem 0.6rem;



    }







    /* Alert adjustments */



    .alert {



        padding: 0.875rem;



        font-size: 12px;



        border-radius: 8px;



    }







    /* Table adjustments */



    .table-responsive {



        border-radius: 8px;



        margin-bottom: 1rem;



    }







    .table {



        font-size: 0.8rem;



        min-width: 500px;



    }







    .table th, .table td {



        padding: 0.5rem 0.4rem;



        font-size: 0.75rem;



    }







    .table thead th {



        font-size: 0.75rem;



        padding: 0.5rem 0.4rem;



    }







    /* Modal adjustments */



    .modal-dialog {



        max-width: 95vw;



        margin: 0.5rem auto;



    }







    .modal-content {



        border-radius: 10px;



    }







    .modal-body {



        padding: 1rem;



        font-size: 12px;



    }







    .modal-header, .modal-footer {



        padding: 0.875rem;



    }







    .modal-title {



        font-size: 1.3rem;



    }







    /* Pagination */



    .pagination {



        gap: 0.25rem;



    }







    .page-link {



        padding: 0.4rem 0.6rem;



        font-size: 0.8rem;



    }







    .page-item {



        margin-bottom: 0.25rem;



    }







    /* Breadcrumb */



    .breadcrumb {



        font-size: 0.8rem;



        padding: 0.5rem;



    }







    .breadcrumb-item a {



        font-size: 0.8rem;



    }







    /* Navbar adjustments */



    .navbar-brand img {



        height: 50px;



    }







    .navbar-brand {



        font-size: 1rem;



    }







    /* Hero section adjustments */



    .hero-section {



        padding: 40px 0;



        min-height: auto;



    }







    .hero-headline {



        font-size: 1.5rem;



        line-height: 1.1;



        margin-bottom: 1rem;



    }







    .hero-tag {



        font-size: 0.75rem;



        padding: 8px 14px;



        margin-bottom: 1rem;



    }







    .hero-subheadings {



        font-size: 12px;



        margin-bottom: 1.5rem;



    }







    .hero-subheadings li {



        padding-left: 28px;



        margin-bottom: 0.75rem;



    }







    .hero-buttons {



        flex-direction: column;



        gap: 0.75rem;



    }







    .hero-buttons .btn {



        padding: 14px 28px;



        font-size: 12px;



    }







    .hero-search-bar {



        padding: 1rem;



        border-radius: 10px;



    }







    /* Inner hero */



    .inner-hero {



        height: 400px;



    }







    .inner-hero-title {



        font-size: 1.5rem;



        margin-bottom: 0.5rem;


        text-align: center;
    }





    .inner-hero-quote {



        font-size: 12px;



        padding: 0 1rem;



    }







    /* Footer adjustments */



    .footer {



        padding-top: 2rem;



    }







    .footer-brand-logo {



        font-size: 1.25rem;



    }

    .footer-brand-tagline {



        font-size: 0.6rem;



        letter-spacing: 0.4px;



    }

    .footer-logo-container {



        flex-direction: column;



        text-align: center;



        gap: 8px;



    }

    .footer-logo-img {



        height: 40px;



    }







    .footer-brand-description {



        font-size: 12px;



        line-height: 1.4;



    }







    .footer-column h4 {



        font-size: 1.3rem;



        margin-bottom: 0.75rem;



    }







    .footer-link {



        font-size: 12px;



        padding: 0.4rem 0;



    }







    .footer-social-link {



        width: 32px;



        height: 32px;



        font-size: 12px;



        line-height: 1;



    }







    .footer-bottom {



        flex-direction: column;



        gap: 0.75rem;



        text-align: center;



        align-items: center;



    }







    .footer-bottom-link {



        font-size: 0.8rem;



    }







    /* Property cards */



    .property-card {



        margin-bottom: 1rem;



        border-radius: 10px;



    }







    .property-card .card-title {



        font-size: 1.3rem;



    }







    .land-card-img {



        height: 180px;



    }







    .land-card-body {



        padding: 1rem;



    }







    .land-card-body h5 {



        font-size: 1.3rem;



    }







    .property-location {



        font-size: 12px;



    }







    .property-meta {



        font-size: 0.75rem;



        gap: 0.75rem;



        flex-wrap: wrap;



    }







    .land-price {



        font-size: 1.5rem;



    }







    .badge-sale {



        font-size: 0.7rem;



        padding: 5px 10px;



    }







    /* Value prop cards */



    .value-prop-card {



        padding: 1rem;



        min-height: auto;



    }







    .value-prop-card h4 {



        font-size: 12px;



    }







    .value-prop-card p {



        font-size: 0.8rem;



    }







    .icon-circle {



        width: 60px;



        height: 60px;



        font-size: 1.25rem;



    }







    /* Counters section */



    .counters-section {



        padding: 2rem 0;



    }







    .counter-number {



        font-size: 2rem;



        margin-bottom: 0.5rem;



    }







    .counter-label {



        font-size: 12px;



    }







    /* Investment cards */



    .investment-section {



        padding: 2rem 0;



    }







    .investment-card {



        padding: 1rem;



    }







    .investment-card h5 {



        font-size: 0.8rem;



    }







    .investment-card p {



        font-size: 0.75rem;



    }







    .investment-icon {



        width: 32px;



        height: 32px;



    }







    /* Category cards */



    .categories-section {



        padding: 2rem 0;



    }







    .category-card {



        height: 160px;



    }







    .category-title {



        font-size: 1.3rem;



    }







    .category-overlay {



        padding: 1rem;



    }







    /* Newsletter box */



    .newsletter-box input {



        padding: 0.75rem;



        font-size: 12px;



    }







    .newsletter-box button {



        padding: 0.75rem;



    }







    /* Social icons */



    .social-icons a {



        width: 32px;



        height: 32px;



        font-size: 12px;



        margin-right: 0.5rem;



    }







    /* WhatsApp float */



    .whatsapp-float {



        bottom: 15px;



        right: 15px;



        width: 45px;



        height: 45px;



        font-size: 1.25rem;



    }







    /* Stat cards */



    .stat-card {



        padding: 1rem;



        margin-bottom: 0.75rem;



    }







    .stat-icon {



        width: 40px;



        height: 40px;



        font-size: 1rem;



    }







    /* Activity items */



    .activity-item {



        padding-left: 0.75rem;



        margin-bottom: 0.75rem;



        font-size: 12px;



    }







    /* KPI cards grid */



    .kpi-cards-grid {



        grid-template-columns: 1fr;



        gap: 0.75rem;



        margin-top: 1rem;



    }







    .kpi-card {



        padding: 1.25rem;



    }







    .kpi-card-icon {



        width: 32px;



        height: 32px;



        font-size: 1rem;



        margin-bottom: 0.75rem;



    }







    .kpi-value {



        font-size: 1.25rem;



        margin-bottom: 0.25rem;



    }







    .kpi-label {



        font-size: 0.75rem;



        margin-bottom: 0.5rem;



    }







    .kpi-trend {



        font-size: 0.7rem;



    }







    /* Dashboard grid */



    .dashboard-main-grid {



        gap: 1rem;



    }







    /* Leads section */



    .leads-section {



        padding: 1rem;



        border-radius: 10px;



    }







    .leads-title h2 {



        font-size: 0.95rem;



    }







    .view-all-link {



        font-size: 0.8rem;



    }







    .leads-controls {



        flex-direction: column;



        gap: 0.5rem;



    }







    .leads-search {



        width: 100%;



    }







    .leads-filter {



        width: 100%;



    }







    .leads-export {



        width: 100%;



        justify-content: center;



    }







    /* Analytics widget */



    .analytics-widget {



        padding: 1rem;



        border-radius: 10px;



    }







    .analytics-widget-header h3 {



        font-size: 0.95rem;



    }







    .lead-overview-chart {



        height: 150px;



    }







    .property-stat-item {



        padding: 1rem;



    }







    .property-stat-value {



        font-size: 1.25rem;



    }







    .property-stat-label {



        font-size: 0.7rem;



    }







    /* Profile dropdown */



    .profile-dropdown {



        min-width: 180px;



        font-size: 12px;



    }







    .dropdown-item {



        font-size: 12px;



        padding: 0.5rem 1rem;



    }







    /* Notification dropdown */



    .notification-dropdown {



        min-width: 250px;



        right: -10px;



    }







    .notification-header {



        padding: 0.75rem 1rem;



    }







    .notification-header h6 {



        font-size: 12px;



    }







    .notification-item {



        padding: 0.75rem 1rem;



    }







    .notification-text {



        font-size: 0.8rem;



    }







    .notification-time {



        font-size: 0.7rem;



    }







    /* Header adjustments */



    .header-content {



        padding: 0 15px;



    }







    .header-left {



        padding-top: 0;



    }







    .header-left .page-title {



        font-size: 1.5rem;



    }







    .header-left .welcome-message {



        font-size: 0.7rem;



    }







    .header-right {



        gap: 8px;



        padding: 8px;



    }







    .icon-btn {



        font-size: 1rem;



        padding: 8px;



    }







    .icon-btn .badge {



        font-size: 0.6rem;



        padding: 2px 4px;



    }







    .profile-toggle {



        gap: 6px;



    }







    .profile-avatar {



        width: 28px;



        height: 28px;



    }







    .profile-info {



        display: none;



    }







    .quick-add-btn {



        padding: 6px 12px;



        font-size: 0.75rem;



    }







    /* Breadcrumb */



    .breadcrumb {



        font-size: 0.75rem;



        margin-bottom: 0.75rem;



    }







    /* Trust row */



    .hero-trust-row {



        font-size: 0.8rem;



        gap: 1rem;



    }







    /* Separator line */



    .separator-line {



        width: 40px;



        height: 2px;



        margin: 10px auto;



    }







    /* Tour button */



    .tour-btn {



        padding: 10px 20px;



        font-size: 12px;



        border-radius: 10px;



    }







    /* Progress bar */



    .progress {



        height: 6px;



    }







    /* Tooltip */



    .tooltip-inner {



        font-size: 0.75rem;



        padding: 0.25rem 0.5rem;



    }







    /* Close button */



    .btn-close {



        padding: 0.5rem;



    }







    /* Spinner */



    .spinner-border {



        width: 1rem;



        height: 1rem;



    }







    /* Toast */



    .toast {



        font-size: 12px;



    }







    .toast-header {



        font-size: 0.8rem;



    }







    /* Accordion */



    .accordion-button {



        font-size: 12px;



        padding: 0.75rem 1rem;



    }







    .accordion-body {



        padding: 1rem;



        font-size: 12px;



    }







    /* Tabs */



    .nav-tabs .nav-link {



        font-size: 12px;



        padding: 0.5rem 0.75rem;



    }







    /* List group */



    .list-group-item {



        font-size: 12px;



        padding: 0.75rem 1rem;



    }







    /* Dropdown menu */



    .dropdown-menu {



        font-size: 12px;



        min-width: 160px;



    }







    .dropdown-item {



        padding: 0.5rem 0.75rem;



    }







    /* Offcanvas */



    .offcanvas {



        width: 85%;



    }







    /* Carousel */



    .carousel-caption {



        font-size: 12px;



        padding: 1rem;



    }







    .carousel-indicators {



        bottom: 0.5rem;



    }







    .carousel-indicators [data-bs-target] {



        height: 3px;



        width: 20px;



    }



}







/* ============================================



   TABLETS (769px - 992px)



   ============================================ */







@media (min-width: 769px) and (max-width: 992px) {



    /* Container adjustments */



    .container {



        max-width: 100%;



    }







    /* Typography */



    h1 { font-size: 1.8rem; }



    h2 { font-size: 1.6rem; }



    h3 { font-size: 1.4rem; }







    /* KPI cards grid */



    .kpi-cards-grid {



        grid-template-columns: repeat(3, 1fr);



    }







    /* Dashboard grid */



    .dashboard-main-grid {



        grid-template-columns: 1fr 1fr;



    }







    /* Property cards grid */



    .property-card-grid {



        grid-template-columns: repeat(2, 1fr);



    }







    /* Value prop cards */



    .value-prop-cards-grid {



        grid-template-columns: repeat(2, 1fr);



    }







    /* Category cards */



    .category-cards-grid {



        grid-template-columns: repeat(2, 1fr);



    }







    /* Investment cards */



    .investment-cards-grid {



        grid-template-columns: repeat(3, 1fr);



    }







    /* Counter items */



    .counter-grid {



        grid-template-columns: repeat(2, 1fr);



    }







    /* Footer columns */



    .footer-container {



        flex-wrap: wrap;



    }







    .footer-column {



        flex: 1 1 45%;



    }







    /* Navbar */



    .navbar-brand img {



        height: 70px;



    }







    /* Hero section */



    .hero-headline {



        font-size: 3rem;



    }







    /* Inner hero */



    .inner-hero {



        height: 400px;



    }







    .inner-hero-title {



        font-size: 2.5rem;



    }







    /* Search box */



    .search-box {



        max-width: 300px;



    }







    /* Header */



    .header-content {



        padding: 0 30px;



    }







    /* Sidebar */



    .sidebar {



        width: 240px;



    }







    .main-content {



        margin-left: 240px;



    }







    /* Agent sidebar */



    .agent-sidebar {



        width: 275px;



    }







    .agent-main {



        margin-left: 275px;



    }







    .agent-header {



        left: 275px;



    }



}







/* ============================================



   LAPTOPS (993px - 1200px)



   ============================================ */







@media (min-width: 993px) and (max-width: 1200px) {



    /* Container adjustments */



    .container {



        max-width: 100%;



    }







    /* KPI cards grid */



    .kpi-cards-grid {



        grid-template-columns: repeat(4, 1fr);



    }







    /* Dashboard grid */



    .dashboard-main-grid {



        grid-template-columns: 2fr 1fr;



    }







    /* Property cards grid */



    .property-card-grid {



        grid-template-columns: repeat(3, 1fr);



    }







    /* Value prop cards */



    .value-prop-cards-grid {



        grid-template-columns: repeat(3, 1fr);



    }







    /* Category cards */



    .category-cards-grid {



        grid-template-columns: repeat(3, 1fr);



    }







    /* Investment cards */



    .investment-cards-grid {



        grid-template-columns: repeat(4, 1fr);



    }







    /* Counter items */



    .counter-grid {



        grid-template-columns: repeat(4, 1fr);



    }







    /* Footer columns */



    .footer-column {



        flex: 1;



    }







    /* Hero section */



    .hero-headline {



        font-size: 3.5rem;



    }







    /* Search box */



    .search-box {



        max-width: 400px;



    }







    /* Header */



    .header-content {



        padding: 0 35px;



    }







    /* Sidebar */



    .sidebar {



        width: 275px;



    }







    .main-content {



        margin-left: 275px;



    }







    /* Agent sidebar */



    .agent-sidebar {



        width: 275px;



    }







    .agent-main {



        margin-left: 275px;



    }







    .agent-header {



        left: 275px;



    }



}







/* ============================================



   LARGE SCREENS (>1200px)



   ============================================ */







@media (min-width: 1201px) {



    /* Ensure desktop UI remains unchanged */



    /* No additional styles needed - desktop styles are in main CSS */



}







/* ============================================



   ORIENTATION SPECIFIC



   ============================================ */







@media (max-width: 768px) and (orientation: landscape) {



    .hero-section {



        padding: 30px 0;



        min-height: auto;



    }







    .hero-headline {



        font-size: 1.75rem;



    }







    .modal-dialog {



        max-height: 90vh;



        overflow-y: auto;



    }



}







/* ============================================



   PRINT STYLES



   ============================================ */







@media print {



    .navbar,



    .sidebar,



    .mobile-menu-toggle,



    .footer,



    .whatsapp-float,



    .btn,



    .pagination,



    .modal {



        display: none !important;



    }







    .main-content {



        margin-left: 0 !important;



        width: 100% !important;



    }







    .card {



        break-inside: avoid;



        box-shadow: none;



        border: 1px solid #ddd;



    }







    .table {



        font-size: 10pt;



    }







    body {



        font-size: 11pt;



        line-height: 1.4;



    }



}







/* ============================================



   ACCESSIBILITY ENHANCEMENTS



   ============================================ */







@media (prefers-reduced-motion: reduce) {



    *,



    *::before,



    *::after {



        animation-duration: 0.01ms !important;



        animation-iteration-count: 1 !important;



        transition-duration: 0.01ms !important;



        scroll-behavior: auto !important;



    }



}







/* High contrast mode */



@media (prefers-contrast: high) {



    .card,



    .btn,



    .form-control {



        border-width: 2px;



    }







    a:hover,



    .btn:hover {



        text-decoration: underline;



    }



}







/* ============================================



   TOUCH DEVICE OPTIMIZATIONS



   ============================================ */







@media (hover: none) and (pointer: coarse) {



    .btn,



    .nav-link,



    .card {



        min-height: 44px;



        min-width: 44px;



    }







    .dropdown-toggle::after {



        margin-left: 0.5rem;



    }







    /* Larger touch targets */



    .form-control,



    .form-select {



        min-height: 44px;



    }







    .table-responsive {



        -webkit-overflow-scrolling: touch;



    }



}







/* ============================================



   SPECIFIC COMPONENT RESPONSIVE FIXES



   ============================================ */







/* Data tables with horizontal scroll */



.table-responsive-wrapper {



    position: relative;



    overflow-x: auto;



    -webkit-overflow-scrolling: touch;



    margin-bottom: 1rem;



}







.table-responsive-wrapper::after {



    content: '→';



    position: absolute;



    bottom: 0;



    right: 0;



    background: linear-gradient(to right, transparent, rgba(0,0,0,0.1));



    padding: 0.5rem;



    display: none;



}







.table-responsive-wrapper:hover::after {



    display: block;



}







/* Form grid adjustments */



@media (max-width: 768px) {



    .row.g-3 > *,



    .row.g-2 > *,



    .row.g-4 > * {



        padding-bottom: 1rem;



    }







    .col-md-6,



    .col-lg-4,



    .col-lg-3 {



        flex: 0 0 100%;



        max-width: 100%;



    }



}







/* Chart containers */



@media (max-width: 768px) {



    .chart-container {



        height: 250px !important;



    }







    canvas {



        max-width: 100%;



    }



}







/* Image galleries */



@media (max-width: 576px) {



    .gallery-grid {



        grid-template-columns: 1fr !important;



        gap: 0.5rem;



    }







    .gallery-item {



        height: 200px;



    }



}







@media (min-width: 577px) and (max-width: 768px) {



    .gallery-grid {



        grid-template-columns: repeat(2, 1fr) !important;



    }







    .gallery-item {



        height: 180px;



    }



}







/* Map containers */



@media (max-width: 768px) {



    .map-container {



        height: 300px;



        border-radius: 10px;



    }



}







/* File upload */



@media (max-width: 576px) {



    .custom-file-label {



        padding: 0.5rem;



        font-size: 0.8rem;



    }



}







/* Date/time pickers */



@media (max-width: 576px) {



    .datetime-picker {



        width: 100%;



    }







    .datetime-picker input {



        font-size: 12px;



    }



}







/* Rating stars */



@media (max-width: 576px) {



    .rating-stars {



        font-size: 1.25rem;



    }



}







/* Price range slider */



@media (max-width: 576px) {



    .price-range-slider {



        padding: 1rem;



    }







    .range-slider {



        width: 100%;



    }



}







/* Tab pills */



@media (max-width: 576px) {



    .nav-pills {



        flex-direction: column;



    }







    .nav-pills .nav-link {



        margin-bottom: 0.25rem;



        text-align: center;



    }



}







/* Step wizard */



@media (max-width: 768px) {



    .step-wizard {



        flex-direction: column;



    }







    .step-item {



        width: 100%;



        margin-bottom: 1rem;



    }



}







/* Comment section */



@media (max-width: 576px) {



    .comment-avatar {



        width: 40px;



        height: 40px;



    }







    .comment-body {



        font-size: 12px;



    }



}







/* Chat widget */



@media (max-width: 576px) {



    .chat-widget {



        width: 90vw;



        height: 70vh;



        bottom: 10px;



        right: 10px;



    }



}







/* Notification toast */



@media (max-width: 576px) {



    .toast-container {



        position: fixed;



        bottom: 0;



        left: 0;



        right: 0;



        padding: 0.5rem;



    }







    .toast {



        margin-bottom: 0.5rem;



        border-radius: 8px;



    }



}







/* ============================================



   AGENT DASHBOARD SIDEBAR NAVIGATION



   ============================================ */







/* Mobile sidebar toggle for agent dashboard */



@media (max-width: 992px) {



    .agent-header {



        left: 0;



        right: 0;



    }







    .agent-sidebar {



        transform: translateX(-100%);



        transition: transform 0.3s ease;



    }







    .agent-sidebar.show {



        transform: translateX(0);



    }







    .agent-main {



        margin-left: 0;



        padding: 1rem;



    }







    .agent-layout {



        margin-top: 80px;



    }







    .sidebar-overlay {



        display: block;



        position: fixed;



        top: 0;



        left: 0;



        width: 100%;



        height: 100%;



        background: rgba(0, 0, 0, 0.5);



        z-index: 1000;



        opacity: 0;



        visibility: hidden;



        transition: all 0.3s ease;



    }







    .sidebar-overlay.show {



        opacity: 1;



        visibility: visible;



    }







    /* Add mobile menu toggle button for agent */



    .agent-mobile-toggle {



        display: block !important;



        position: fixed;



        top: 15px;



        left: 15px;



        z-index: 1002;



        background: var(--primary-color);



        color: white;



        border: none;



        border-radius: 8px;



        padding: 10px 15px;



        cursor: pointer;



        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);



    }



}







@media (min-width: 993px) {



    .agent-mobile-toggle {



        display: none !important;



    }







    .sidebar-overlay {



        display: none;



    }



}







@media (max-width: 768px) {



    .agent-sidebar {



        width: 100%;



        max-width: 280px;



    }







    .sidebar-content {



        padding: 1rem;



    }







    .sidebar-content .brand-logo {



        font-size: 1.1rem;



        margin-bottom: 1rem;



    }







    .sidebar-content .brand-logo img {



        height: 28px;



    }







    .sidebar-nav .nav-link {



        padding: 10px 15px;



        font-size: 12px;



        text-align: justify;



    }







    .sidebar-nav .nav-link i {



        font-size: 1rem;



    }







    .logout-btn {



        padding: 10px 15px;



        font-size: 12px;



    }







    .agent-header {



        height: 70px;



    }







    .header-content {



        padding: 0 15px;



    }







    .header-left {



        padding-top: 0;



    }







    .header-left .page-title {



        font-size: 1.1rem;



    }







    .header-left .welcome-message {



        display: none;



    }







    .quick-add-btn {



        display: none;



    }



}







/* ============================================



   PUBLIC PAGES FOOTER AND NAVBAR



   ============================================ */







/* Navbar responsive adjustments */



@media (max-width: 992px) {



    .navbar-brand {



        font-size: 1.1rem;



    }







    .navbar-brand img {



        height: 60px;



    }







    .navbar-collapse {



        background: white;



        padding: 1.5rem;



        margin-top: 1rem;



        border-radius: 16px;



        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);



    }







    .navbar-nav {



        gap: 0.5rem;



    }







    .nav-link {



        padding: 0.75rem 1rem;



        text-align: center;



        border-radius: 8px;



    }







    .navbar-cta {



        margin-left: 0;



        margin-top: 1rem;



        width: 100%;



        text-align: center;



    }



}







@media (max-width: 768px) {



    .navbar-brand img {



        height: 50px;



    }







    .navbar-brand {



        font-size: 1rem;



    }







    .navbar-collapse {



        padding: 1rem;



        margin-top: 0.5rem;



    }







    .nav-link {



        font-size: 12px;



        padding: 0.6rem 0.8rem;



    }







    .navbar-cta {



        padding: 10px 20px;



        font-size: 12px;



    }







    /* Profile dropdown in navbar */



    .profile-toggle {



        gap: 8px;



    }







    .profile-avatar {



        width: 36px;



        height: 36px;



    }







    .profile-info {



        display: none;



    }



}







@media (max-width: 576px) {



    .navbar-brand img {



        height: 45px;



    }







    .navbar-brand {



        font-size: 12px;



    }







    .navbar-collapse {



        padding: 0.75rem;



    }







    .nav-link {



        font-size: 12px;



        padding: 0.5rem 0.75rem;



    }







    .navbar-cta {



        padding: 8px 16px;



        font-size: 12px;



    }







    .profile-avatar {



        width: 32px;



        height: 32px;



    }



}







/* Footer responsive adjustments */



@media (max-width: 992px) {



    .footer-container {



        flex-wrap: wrap;



        gap: 2rem;



    }







    .footer-column {



        flex: 1 1 45%;



        min-width: 250px;



    }







    .footer-brand {



        flex: 1 1 100%;



        text-align: center;



    }

    .footer-logo-container {



        justify-content: center;



        text-decoration: none;



        color: white;



    }







    .footer-brand-description {



        max-width: 500px;



        margin: 0 auto;



        line-height: 1.4;



    }







    .footer-social {



        justify-content: center;



    }



}







@media (max-width: 768px) {



    .footer {



        padding-top: 2.5rem;



    }







    .footer-container {



        flex-direction: column;



        gap: 1.5rem;



    }







    .footer-column,



    .footer-brand {



        flex: 1 1 100%;



        text-align: center;



    }

    .footer-logo-container {



        justify-content: center;



        text-decoration: none;



        color: white;



    }







    .footer-brand-logo {



        font-size: 1.5rem;



    }

    .footer-brand-tagline {



        font-size: 0.55rem;



        letter-spacing: 0.4px;



    }

    .footer-logo-container {



        flex-direction: column;



        text-align: center;



        gap: 8px;



    }

    .footer-logo-img {



        height: 40px;



    }







    .footer-brand-description {



        font-size: 12px;



        max-width: 100%;



        line-height: 1.4;



    }







    .footer-column h4 {



        font-size: 1.1rem;



    }







    .footer-links {



        display: flex;



        flex-wrap: wrap;



        justify-content: center;



        gap: 0.75rem 1rem;



    }







    .footer-link {



        font-size: 12px;



        line-height: 1.4;



    }







    .footer-social {



        gap: 1rem;



    }







    .footer-social-link {



        width: 40px;



        height: 40px;



        font-size: 1rem;



        line-height: 1;



    }







    .footer-bottom {



        flex-direction: column;



        gap: 1rem;



        text-align: center;



        padding-top: 1.5rem;



        align-items: center;



    }







    .footer-bottom-links {



        flex-wrap: wrap;



        justify-content: center;



        gap: 1rem;



    }







    .footer-bottom-link {



        font-size: 12px;



    }



}







@media (max-width: 576px) {



    .footer {



        padding-top: 2rem;



    }







    .footer-brand-logo {



        font-size: 1.25rem;



    }

    .footer-brand-tagline {



        font-size: 0.6rem;



        letter-spacing: 0.4px;



    }

    .footer-logo-container {



        flex-direction: column;



        text-align: center;



        gap: 8px;



    }

    .footer-logo-img {



        height: 40px;



    }







    .footer-brand-description {



        font-size: 12px;



        line-height: 1.4;



    }







    .footer-column h4 {



        font-size: 1.3rem;



    }







    .footer-link {



        font-size: 12px;



        line-height: 1.4;



    }







    .footer-social-link {



        width: 36px;



        height: 36px;



        font-size: 12px;



        line-height: 1;



    }







    .footer-bottom span {



        font-size: 0.8rem;



    }







    .footer-bottom-link {



        font-size: 0.75rem;



    }



}







/* WhatsApp floating button responsive */



@media (max-width: 768px) {



    .whatsapp-float {



        bottom: 20px;



        right: 20px;



        width: 55px;



        height: 55px;



        font-size: 1.75rem;



    }



}







@media (max-width: 576px) {



    .whatsapp-float {



        bottom: 15px;



        right: 15px;



        width: 50px;



        height: 50px;



        font-size: 1.5rem;



    }



}







/* ============================================



   ADMINISTRATION DASHBOARD SPECIFIC



   ============================================ */







@media (max-width: 768px) {



    .sidebar .nav-link {



        padding: 10px 14px;



        font-size: 12px;



    }







    .sidebar .nav-link i {



        width: 18px;



        margin-right: 10px;



        font-size: 12px;



    }







    .sidebar-brand h5 {



        font-size: 1.1rem;



    }







    .sidebar-brand i {



        font-size: 1rem;



    }







    .profile-btn {



        font-size: 12px;



        padding: 8px 12px;



    }



}







/* ============================================



   CUSTOMER DASHBOARD SIDEBAR STYLES



   ============================================ */







.app-container {



    display: flex;



    min-height: 100vh;



    width: 100%;



    overflow: hidden;



}







.customer-dashboard .sidebar {



    background: #004526;



    height: 100vh;



    color: white;



    position: fixed;



    top: 0;



    left: 0;



    z-index: 1000;



    width: 280px;



    overflow-y: auto;



    overflow-x: hidden;



    -webkit-overflow-scrolling: touch;



    transform: translateX(0);



    transition: transform 0.3s ease;



    flex-shrink: 0;



    display: flex;



    flex-direction: column;



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



}







.customer-dashboard .sidebar::after {



    content: "";



    position: absolute;



    inset: 0;



    background: radial-gradient(900px circle at 10% 10%, rgba(16, 185, 129, 0.35), transparent 55%),



                radial-gradient(900px circle at 90% 40%, rgba(59, 130, 246, 0.25), transparent 60%);



    pointer-events: none;



    z-index: 0;



}







.customer-dashboard .sidebar > * {



    position: relative;



    z-index: 1;



}







.customer-dashboard .sidebar .nav-link {



    color: rgba(255, 255, 255, 0.82);



    border-radius: 14px;



    margin: 2px 0;



    transition: all 0.25s ease;



    padding: 12px 18px;



    display: flex;



    align-items: center;



    gap: 10px;



}







.customer-dashboard .sidebar .nav-link:hover {



    background-color: rgba(255, 255, 255, 0.12);



    color: white;



    transform: translateY(-1px);



}







.customer-dashboard .sidebar .nav-link.active {



    color: white;



    background: rgba(255, 255, 255, 0.14);



    box-shadow: 0 10px 30px rgba(0,0,0,0.18);



    border: 1px solid rgba(255, 255, 255, 0.18);



}







.customer-dashboard .main-content {



    margin-left: 280px;



    min-height: 100vh;



    width: calc(100% - 280px);



    overflow-x: hidden;



    overflow-y: auto;



    display: flex;



    flex-direction: column;



}







/* ============================================



   INVESTOR DASHBOARD SIDEBAR STYLES



   ============================================ */







.investor-dashboard .sidebar {



    background: linear-gradient(180deg, #022C22 0%, #064E3B 50%, #065F46 100%);



    height: 100vh;



    color: white;



    position: fixed;



    top: 0;



    left: 0;



    z-index: 1000;



    width: 220px;



    overflow-y: auto;



    overflow-x: hidden;



    -webkit-overflow-scrolling: touch;



    transform: translateX(0);



    transition: transform 0.3s ease;



    flex-shrink: 0;



    display: flex;



    flex-direction: column;



}







.investor-dashboard .sidebar .nav-link {



    color: rgba(255, 255, 255, 0.85);



    border-radius: 10px;



    margin: 4px 0;



    transition: all 0.3s ease;



    padding: 12px 16px;



    display: flex;



    align-items: center;



    text-decoration: none;



    font-size: 14px;



}







.investor-dashboard .sidebar .nav-link i {



    width: 20px;



    text-align: center;



    margin-right: 12px;



}







.investor-dashboard .sidebar .nav-link:hover,



.investor-dashboard .sidebar .nav-link.active {



    color: white;



    background: rgba(255, 255, 255, 0.15);



    border-radius: 10px;



    transform: translateX(4px);



}







.investor-dashboard .main-content {



    margin-left: 220px;



    min-height: 100vh;



    width: calc(100% - 220px);



    overflow-x: hidden;



    overflow-y: auto;



    display: flex;



    flex-direction: column;



}







/* ============================================



   ADMIN DASHBOARD SIDEBAR STYLES



   ============================================ */







.admin-dashboard .sidebar {



    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);



    height: 100vh;



    color: white;



    width: 280px;



    position: fixed;



    top: 0;



    left: 0;



    z-index: 1000;



    display: flex;



    flex-direction: column;



    overflow-y: auto;



    overflow-x: hidden;



    -webkit-overflow-scrolling: touch;



    transition: transform 0.3s ease;



    backdrop-filter: blur(10px);



}







.admin-dashboard .sidebar-brand {



    padding: 24px;



    border-bottom: 1px solid rgba(255, 255, 255, 0.1);



}







.admin-dashboard .sidebar-brand h5 {



    font-family: 'Poppins', sans-serif;



    font-weight: 700;



    font-size: 1.25rem;



    margin: 0;



    display: flex;



    align-items: center;



    gap: 10px;



    color: rgba(255, 255, 255, 0.85);



}







.admin-dashboard .sidebar .nav-link {



    color: rgba(255, 255, 255, 0.85);



    border-radius: var(--radius-sm);



    margin: 4px 12px;



    padding: 12px 16px;



    transition: all 0.3s ease;



    display: flex;



    align-items: center;



    text-decoration: none;



    font-weight: 500;



    font-size: 0.9rem;



}







.admin-dashboard .sidebar .nav-link:hover,



.admin-dashboard .sidebar .nav-link.active {



    color: white;



    background: rgba(255, 255, 255, 0.15);



    backdrop-filter: blur(10px);



    transform: translateX(4px);



}







.admin-dashboard .sidebar .nav-link i {



    width: 20px;



    margin-right: 12px;



    font-size: 1rem;



}







.admin-dashboard .main-content {



    margin-left: 280px;



    flex: 1;



    overflow-x: hidden;



    overflow-y: auto;



    min-height: 100vh;



    background: var(--background);



}







/* ============================================



   CUSTOMER DASHBOARD RESPONSIVE



   ============================================ */







@media (max-width: 768px) {



    .customer-dashboard .sidebar {



        width: 100%;



        max-width: 280px;



        transform: translateX(-100%);



        height: 100vh;



        overflow-y: auto;



        overflow-x: hidden;



        -webkit-overflow-scrolling: touch;



    }







    .customer-dashboard .sidebar.show {



        transform: translateX(0);



    }







    .customer-dashboard .main-content {



        margin-left: 0;



        width: 100%;



    }







    .customer-dashboard .sidebar .nav-link {



        padding: 10px 14px;



        font-size: 12px;



    }







    .customer-dashboard .sidebar .nav-link i {



        margin-right: 8px;



        font-size: 12px;



    }







    .customer-dashboard .sidebar h4 {



        font-size: 1.1rem;



    }







    .customer-dashboard .sidebar h4 i {



        font-size: 1rem;



    }



}







/* ============================================



   INVESTOR DASHBOARD RESPONSIVE



   ============================================ */







@media (max-width: 768px) {



    .investor-dashboard .sidebar {



        width: 100%;



        max-width: 280px;



        transform: translateX(-100%);



        height: 100vh;



        overflow-y: auto;



        overflow-x: hidden;



        -webkit-overflow-scrolling: touch;



    }







    .investor-dashboard .sidebar.show {



        transform: translateX(0);



    }







    .investor-dashboard .main-content {



        margin-left: 0;



        width: 100%;



    }







    .investor-dashboard .sidebar .nav-link {



        padding: 10px 14px;



        font-size: 12px;



    }







    .investor-dashboard .sidebar .nav-link i {



        width: 18px;



        margin-right: 10px;



        font-size: 12px;



    }







    .investor-dashboard .sidebar h4 {



        font-size: 1.1rem;



    }







    .investor-dashboard .sidebar h4 i {



        font-size: 1rem;



    }



}







/* ============================================



   ADMIN DASHBOARD RESPONSIVE



   ============================================ */







/* ---- Large Desktop (1201px–1400px) ---- */
@media (min-width: 1201px) and (max-width: 1400px) {
    .admin-dashboard .main-content-wrapper {
        padding: 20px;
    }

    .admin-dashboard .page-title {
        font-size: 1.6rem;
    }
}

/* ---- Laptops (993px–1200px) ---- */
@media (min-width: 993px) and (max-width: 1200px) {
    .admin-dashboard .sidebar {
        width: 240px;
    }

    .admin-dashboard .main-content {
        margin-left: 240px;
    }

    .admin-dashboard .main-content-wrapper {
        padding: 18px;
    }

    .admin-dashboard .page-header {
        padding: 18px;
        margin-bottom: 18px;
    }

    .admin-dashboard .page-title {
        font-size: 1.5rem;
    }

    .admin-dashboard .table {
        font-size: 12px;
    }

    .admin-dashboard .card-body {
        padding: 18px;
    }

    .admin-dashboard .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}

/* ---- Tablets (769px–992px) — sidebar collapses to overlay ---- */
@media (min-width: 769px) and (max-width: 992px) {
    .admin-dashboard .sidebar {
        transform: translateX(-100%);
        width: 260px;
    }

    .admin-dashboard .sidebar.show {
        transform: translateX(0);
    }

    .admin-dashboard .main-content {
        margin-left: 0;
    }

    .admin-dashboard .main-content-wrapper {
        padding: 20px;
    }

    .admin-dashboard .page-header {
        padding: 18px;
        margin-bottom: 18px;
    }

    .admin-dashboard .page-title {
        font-size: 1.5rem;
    }

    .admin-dashboard .table {
        font-size: 12px;
        min-width: 600px;
    }

    .admin-dashboard .card-body {
        padding: 18px;
    }

    .admin-dashboard .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}

/* ---- Small tablets / large phones (577px–768px) ---- */
@media (max-width: 768px) {
    .admin-dashboard .sidebar {
        transform: translateX(-100%);
        width: 100%;
        max-width: 280px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .admin-dashboard .sidebar.show {
        transform: translateX(0);
    }

    .admin-dashboard .main-content {
        margin-left: 0;
    }

    .admin-dashboard .main-content-wrapper {
        padding: 16px;
    }

    .admin-dashboard .page-header {
        padding: 16px;
        margin-bottom: 16px;
    }

    .admin-dashboard .page-title {
        font-size: 1.5rem;
    }

    .admin-dashboard .table {
        font-size: 0.8rem;
        min-width: 500px;
    }

    .admin-dashboard .card-body {
        padding: 16px;
    }

    .admin-dashboard .stat-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
}

/* ---- Mobile (≤576px) ---- */
@media (max-width: 576px) {
    .admin-dashboard .sidebar {
        max-width: 260px;
    }

    .admin-dashboard .main-content-wrapper {
        padding: 12px;
    }

    .admin-dashboard .page-header {
        padding: 12px;
        margin-bottom: 12px;
    }

    .admin-dashboard .page-title {
        font-size: 1.25rem;
    }

    .admin-dashboard .table {
        font-size: 0.75rem;
        min-width: 400px;
    }

    .admin-dashboard .card-body {
        padding: 12px;
    }

    .admin-dashboard .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}

/* ---- Extra-small phones (≤400px) ---- */
@media (max-width: 400px) {
    .admin-dashboard .sidebar {
        max-width: 240px;
    }

    .admin-dashboard .main-content-wrapper {
        padding: 10px;
    }

    .admin-dashboard .page-header {
        padding: 10px;
        margin-bottom: 10px;
    }

    .admin-dashboard .page-title {
        font-size: 1.1rem;
    }

    .admin-dashboard .table {
        font-size: 0.7rem;
        min-width: 340px;
    }

    .admin-dashboard .card-body {
        padding: 10px;
    }

    .admin-dashboard .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* ---- Ultra-narrow / foldables (≤340px) ---- */
@media (max-width: 340px) {
    .admin-dashboard .sidebar {
        max-width: 220px;
    }

    .admin-dashboard .page-title {
        font-size: 1rem;
    }

    .admin-dashboard .table {
        min-width: 300px;
    }
}

/* ---- Large desktop / ultra-wide (≥1920px) ---- */
@media (min-width: 1920px) {
    .admin-dashboard .sidebar {
        width: 320px;
    }

    .admin-dashboard .main-content {
        margin-left: 320px;
    }

    .admin-dashboard .main-content-wrapper {
        padding: 32px;
    }

    .admin-dashboard .page-title {
        font-size: 2rem;
    }
}

/* ---- Short-height landscape (phones rotated) ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .admin-dashboard .sidebar {
        overflow-y: auto;
    }

    .admin-dashboard .page-header {
        padding: 10px;
        margin-bottom: 10px;
    }
}








@media (max-width: 576px) {



    .admin-dashboard .main-content-wrapper {



        padding: 12px;



    }







    .admin-dashboard .page-header {



        padding: 12px;



    }







    .admin-dashboard .table {



        font-size: 0.75rem;



        min-width: 400px;



    }







    .admin-dashboard .card-body {



        padding: 12px;



    }







    .admin-dashboard .stat-icon {



        width: 40px;



        height: 40px;



        font-size: 1.1rem;



    }



}

/* ===== SITE FOOTER CANONICAL OVERRIDES ===== */
/* Keep footer brand layout identical to navbar: logo | name + tagline */

footer.footer.site-footer,
.footer.site-footer {
    padding: 40px 0 0 !important;
}

.footer.site-footer .footer-container {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(140px, 1fr)) !important;
    gap: 32px 48px !important;
    align-items: start !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    max-width: var(--max-width, 1280px) !important;
    margin: 0 auto !important;
    padding: 0 5% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.footer.site-footer .footer-brand,
.footer.site-footer .footer-column {
    flex: unset !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
}

.footer.site-footer .footer-logo-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0.5rem !important;
}

.footer.site-footer .footer-logo-img {
    height: 48px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.footer.site-footer .footer-logo-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
}

.footer.site-footer .footer-brand-logo {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.footer.site-footer .footer-brand-tagline {
    font-size: 0.65rem !important;
    letter-spacing: 0.5px !important;
    color: #40916C !important;
    line-height: 1 !important;
    margin: 0.25rem 0 0 !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.footer.site-footer .footer-brand-description {
    max-width: 280px !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    text-align: left !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

.footer.site-footer .footer-social {
    justify-content: flex-start !important;
    margin-top: 2px !important;
}

.footer.site-footer .footer-links {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

.footer.site-footer .footer-links li {
    margin: 0 !important;
    margin-bottom: 0 !important;
}

.footer.site-footer .footer-column h4 {
    font-size: 0.8rem !important;
    margin-bottom: 14px !important;
    text-align: left !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.footer.site-footer .footer-link {
    font-size: 0.9rem !important;
    text-align: left !important;
    display: inline-block !important;
}

.footer.site-footer .footer-bottom {
    margin: 32px 0 0 !important;
    padding: 16px 5% !important;
    max-width: none !important;
    width: 100% !important;
}

@media (max-width: 1024px) {
    .footer.site-footer .footer-container {
        grid-template-columns: minmax(200px, 1.2fr) repeat(2, minmax(120px, 1fr)) !important;
        gap: 28px 32px !important;
        padding: 0 4% !important;
    }

    .footer.site-footer .footer-bottom {
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
}

@media (max-width: 768px) {
    .footer.site-footer {
        padding: 32px 0 0 !important;
    }

    .footer.site-footer .footer-container {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 0 5% !important;
    }

    .footer.site-footer .footer-brand,
    .footer.site-footer .footer-column {
        text-align: left !important;
        align-items: flex-start !important;
    }

    .footer.site-footer .footer-logo-container {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .footer.site-footer .footer-social {
        justify-content: flex-start !important;
    }

    .footer.site-footer .footer-links {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
    }

    .footer.site-footer .footer-logo-img {
        height: 48px !important;
    }

    .footer.site-footer .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 12px !important;
        padding: 14px 5% !important;
    }

    .footer.site-footer .footer-bottom-links {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 8px 16px !important;
    }
}

@media (max-width: 576px) {
    .footer.site-footer {
        padding: 28px 0 0 !important;
    }

    .footer.site-footer .footer-container {
        gap: 24px !important;
        padding: 0 4.5% !important;
    }

    .footer.site-footer .footer-logo-container {
        flex-direction: row !important;
        align-items: center !important;
    }

    .footer.site-footer .footer-logo-img {
        height: 44px !important;
    }

    .footer.site-footer .footer-brand-logo {
        font-size: 1.15rem !important;
    }

    .footer.site-footer .footer-brand-tagline {
        font-size: 0.6rem !important;
    }

    .footer.site-footer .footer-bottom {
        padding: 12px 4.5% !important;
    }

    .footer.site-footer .footer-bottom-link {
        font-size: 0.75rem !important;
    }
}