/* Custom CSS for iPharmX Website */

/* CSS Variables */
:root {
    --primary-color: #0066cc;
    --secondary-color: #004499;
    --accent-color: #e6f3ff;
    --text-dark: #333333;
    --text-light: #666666;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --base-font-size: 16px; /* Reduced from 16px to 14px for smaller overall font size */
}

/* Global Styles */
html {
    font-size: var(--base-font-size);
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 1rem;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Navigation */
.navbar {
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.navbar-brand img {
    height: 60px;
    transition: all 0.3s ease;
}

@media (max-width: 576px) {
    .navbar-brand img {
        height: 50px; /* Slightly smaller on mobile but still prominent */
    }
}

/* Navbar Tagline */
.navbar-tagline {
    font-size: 0.85rem;
    color: #666;
    margin-top: -5px;
    text-align: center;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

h1 {
    font-size: clamp(1.75rem, 5vw, 2.25rem); /* Reduced from 2rem-2.5rem to 1.75rem-2.25rem */
}

h2 {
    font-size: clamp(1.375rem, 4vw, 1.75rem); /* Reduced from 1.5rem-2rem to 1.375rem-1.75rem */
}

h3 {
    font-size: clamp(1.125rem, 3vw, 1.375rem); /* Reduced from 1.25rem-1.5rem to 1.125rem-1.375rem */
}

p, li, a {
    font-size: clamp(0.875rem, 2vw, 1rem); /* Reduced from 1rem-1.125rem to 0.875rem-1rem */
}

/* Page Headings - Grey Color */
.page_heading {
    color: #948f8f !important; /* Grey color for main headings */
}

.section-title h2 {
    font-size: 2.25rem; /* Reduced from 2.5rem */
    font-weight: 700;
    margin-bottom: 1rem;
    color: #666666; /* Grey color for section titles */
}

/* Mission & Vision Card Headings */
.card-body h3.page_heading {
    color: #666666 !important; /* Grey color for mission/vision headings */
}

/* Responsive Typography */
@media screen and (max-width: 768px) {
    :root {
        --base-font-size: 16px; /* Reduced from 18px to 16px for better mobile readability */
    }
    
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-size: 1rem; /* Reduced from 1.125rem */
    }
    
    p, li, a {
        font-size: 1rem; /* Reduced from 1.125rem */
        line-height: 1.7; /* Increased line height for better reading */
    }

    /* Add extra spacing after the Learn More button on mobile */
    .about-company-overview .btn-primary {
        margin-bottom: 3rem !important;
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }
}

/* Extra Small Mobile Devices (phones in portrait) */
@media screen and (max-width: 480px) {
    /* Smaller fonts for very small screens */
    body {
        font-size: 1.125rem !important; /* Reduced from 1.25rem */
    }

    p, li, a, span {
        font-size: 1.125rem !important; /* Reduced from 1.25rem */
        line-height: 1.8 !important;
    }

    /* Ensure footer is readable on small phones */
    footer p,
    footer a,
    footer li,
    footer .text-white-50,
    .bg-dark p,
    .bg-dark a,
    .bg-dark li,
    .bg-dark .text-white-50 {
        font-size: 1.125rem !important; /* Reduced from 1.125rem */
        line-height: 1.7 !important;
    }

    /* Service card text */
    .service-card p {
        font-size: 1.125rem !important; /* Reduced from 1.25rem */
        line-height: 1.8 !important;
    }
}

/* Page Header Improvements */
.page-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    position: relative;
    overflow: hidden;
    padding: 140px 0 30px; /* Reduced bottom padding */
    min-height: 280px; /* Reduced minimum height */
    display: flex;
    align-items: center;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.page-header .container {
    position: relative;
    z-index: 2;
}

.page-header .row {
    min-height: 150px; /* Reduced from 200px */
    align-items: center;
}

/* Custom styling for about page heading */
.page-header h1.display-4 {
    font-size: 2.25rem; /* Reduced from 2.5rem */
    font-weight: 700;
    margin-bottom: 1rem !important; /* Reduced from 1.5rem */
    line-height: 1.2;
}

.page-header .lead {
    margin-bottom: 1rem !important; /* Reduced from 2rem */
    font-size: 1.1rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .page-header {
        padding: 120px 0 25px; /* Reduced bottom padding for mobile */
        min-height: 250px; /* Reduced from 300px */
    }
    
    .page-header h1.display-4 {
        font-size: 1.75rem; /* Reduced from 2rem */
        margin-bottom: 0.75rem !important; /* Reduced from 1rem */
    }
    
    .page-header .lead {
        margin-bottom: 0.75rem !important; /* Reduced from 1.5rem */
        font-size: 1rem;
    }
}

/* Additional Page Header Text Spacing */
.page-header .text-center > * {
    position: relative;
    z-index: 3;
}

.page-header .text-center h1 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-header .text-center .lead {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Ensure proper stacking and spacing */
.page-header .col-lg-8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0;
}

/* Responsive text sizing improvements */
@media (max-width: 992px) {
    .page-header .lead {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .page-header {
        padding: 110px 0 20px; /* Reduced bottom padding for very compact layout */
        min-height: 240px; /* Further reduced */
    }
    
    .page-header .text-center h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important; /* Reduced from 0.75rem */
    }
    
    .page-header .lead {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important; /* Reduced from 1rem */
    }
    
    .breadcrumb-container {
        margin-top: 0.5rem !important; /* Reduced from 1rem */
        padding-top: 0.25rem;
    }
}

/* Breadcrumb Styling */
.breadcrumb-container {
    margin-top: 1rem !important; /* Reduced from 2rem */
    padding-top: 0.5rem; /* Reduced from 1rem */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.breadcrumb-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    flex-wrap: wrap;
    line-height: 1.5;
}

.breadcrumb-simple a {
    transition: all 0.3s ease;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.breadcrumb-simple a:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none !important;
}

.breadcrumb-simple span:not(.breadcrumb-separator) {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.5rem;
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: normal;
    margin: 0 0.25rem;
}

@media (max-width: 576px) {
    .breadcrumb-container {
        margin-top: 0.75rem !important; /* Reduced from 1.5rem */
        padding-top: 0.25rem; /* Reduced from 0.75rem */
    }
    
    .breadcrumb-simple {
        font-size: 0.85rem;
        gap: 8px;
    }
    
    .breadcrumb-separator {
        font-size: 0.9rem;
        margin: 0 0.15rem;
    }
}

/* Bootstrap Component Overrides */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

/* Navigation link base styles */
.navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link {
    font-weight: 500;
    color: var(--text-dark) !important;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 0.75rem;
    border: none !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Remove default pseudo-elements */
.navbar-nav .nav-link::before,
.navbar-nav .nav-link::after {
    display: none !important;
}

/* Hover effect with red underline */
.navbar-nav .nav-link:hover::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0.5rem !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: red !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Text color change on hover */
.navbar-nav .nav-link:hover {
    color: var(--text-dark) !important;
}

/* Active state styles */
.navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.active,
.navbar-nav .dropdown .nav-link.active {
    color: var(--text-dark) !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
}

/* Active state underline */
.navbar-nav .nav-link.active::after,
.navbar-light .navbar-nav .nav-link.active::after,
.navbar-nav .dropdown .nav-link.active::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0.5rem !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: red !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero p.lead {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Hero Carousel */
#heroCarousel {
    margin-top: 76px; /* Account for fixed navbar */
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

.carousel-inner {
    height: 100%;
}

.carousel-item {
    height: 100vh;
    min-height: 600px;
    position: relative;
    display: none;
}

.carousel-item.active {
    display: block !important;
}

.hero-slide {
    height: 100vh;
    min-height: 600px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 68, 153, 0.1));
    z-index: 1;
}

.hero-slide .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.hero-slide .row {
    align-items: center;
    height: 100%;
    min-height: 500px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 0.8;
    z-index: 3;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

/* Carousel control button icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    transition: all 0.3s ease;
    opacity: 0.8;
}

/* Brighten on hover and active state */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon,
.carousel-control-prev:active .carousel-control-prev-icon,
.carousel-control-next:active .carousel-control-next-icon {
    opacity: 1;
}

.carousel-indicators {
    bottom: 30px;
    z-index: 3;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
}

.carousel-indicators button.active {
    background-color: rgba(255, 255, 255, 1);
}

/* Hero Carousel Images */
.hero-slide .col-lg-4 img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.hero-slide .col-lg-4 img:hover {
    transform: scale(1.05);
}

/* Hero Carousel Button Styling */
.hero-slide .btn-light {
    background-color: #dc3545 !important; /* Red background for "Our Services" type buttons */
    border-color: #dc3545 !important;
    color: white !important;
    font-weight: 600;
    padding: 1rem 2.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-slide .btn-light:hover {
    background-color: #c82333 !important; /* Darker red on hover */
    border-color: #c82333 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
}

.hero-slide .btn-outline-light {
    background-color: transparent !important; /* Transparent background initially */
    border-color: white !important; /* White border */
    color: white !important; /* White text */
    font-weight: 600;
    padding: 1rem 2.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-width: 2px;
}

.hero-slide .btn-outline-light:hover {
    background-color: #dc3545 !important; /* Red background on hover */
    border-color: #dc3545 !important; /* Red border on hover */
    color: white !important; /* White text on hover */
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
}

/* Services Section */
.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #666666; /* Grey color for section titles */
}

.section-title p {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.service-card {
    background: var(--white);
    padding: 3rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-card .icon {
    margin-bottom: 1.5rem;
    position: relative;
}

.service-card .icon i {
    font-size: 3.5rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.service-card:hover .icon i {
    color: var(--secondary-color);
    transform: scale(1.1);
}

.service-card h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
    line-height: 1.3;
}

.service-card p {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.service-card .btn {
    margin-top: auto;
    border-width: 2px;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.service-card .btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.service-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.service-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.service-description {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Statistics */
.stats {
    background: var(--accent-color);
    padding: 80px 0;
}

.stat-item {
    text-align: center;
    padding: 2rem;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    color: var(--text-light);
    font-weight: 500;
}

/* Contact Form */
.contact-form {
    background: var(--white);
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.form-control {
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

.form-label {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

/* Footer */
.footer {
    background: var(--text-dark);
    color: var(--white);
    padding: 60px 0 30px;
}

.footer h5 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* Footer section headings - make them prominent */
footer h5,
footer .h5,
.bg-dark h5 {
    color: #ffffff !important; /* Pure white for maximum contrast */
    font-weight: 700 !important; /* Extra bold */
    font-size: 1.1rem !important; /* Reduced from 1.25rem */
    margin-bottom: 1.5rem;
    text-transform: uppercase; /* Make them uppercase for emphasis */
    letter-spacing: 0.5px; /* Add letter spacing for better readability */
}

/* Footer text and links - reduce font size */
footer p,
footer a,
footer li,
footer .text-white-50,
.bg-dark p,
.bg-dark a,
.bg-dark li,
.bg-dark .text-white-50 {
    font-size: 0.9rem !important; /* Updated to 0.875rem for better readability */
}

/* Footer main description text */
footer .mb-3 {
    font-size: 0.9rem !important; /* Updated to 0.875rem for consistency */
    line-height: 1.5;
}

/* Footer bottom section */
footer hr ~ .row p,
footer .contact-info p {
    font-size: 0.9rem !important; /* Updated to 0.875rem for consistency */
}

.footer p, .footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    margin-top: 30px;
    text-align: center;
}

/* About Section */
.about-company-overview {
    padding: 80px 0;
    background: var(--light-gray);
}

.about-stats {
    background: var(--white);
    padding: 60px 0;
}

.about-team {
    padding: 80px 0;
}

.team-member {
    text-align: center;
    margin-bottom: 2rem;
}

.team-member img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.team-member h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.team-member p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Contact Page */
.contact-info {
    color: var(--text-dark);
    padding: 0;
    height: 100%;
}

.contact-info h4 {
    color: var(--text-dark);
    margin-bottom: 2rem;
}

.contact-info .contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: #f8f9fa;
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s ease;
}

.contact-info .contact-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contact-info .contact-item i {
    font-size: 1.5rem;
    margin-right: 1rem;
    width: 30px;
    margin-top: 0.2rem;
}

.contact-info .contact-item strong {
    color: var(--text-dark);
    font-weight: 600;
}

.contact-info .contact-item a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info .contact-item a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Utilities */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-light-primary {
    background-color: var(--accent-color) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p.lead {
        font-size: 1.2rem;
    }
    
    /* Tablet navigation improvements */
    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-link.active::after,
    .navbar-light .navbar-nav .nav-link.active::after {
        width: 60px !important; /* Fixed reasonable width for tablet */
        left: 0.5rem !important; /* Align with text start */
        right: auto !important;
        transform: none !important; /* Remove centering */
    }
    
    /* Tablet carousel button optimizations */
    .hero-slide .btn-light,
    .hero-slide .btn-outline-light {
        padding: 0.875rem 2rem !important; /* Slightly reduced from desktop */
        font-size: 0.95rem !important; /* Slightly smaller font */
    }
    
    #heroCarousel {
        margin-top: 70px;
        height: 80vh;
        min-height: 500px;
    }
    
    .carousel-item {
        height: 80vh;
        min-height: 500px;
    }
    
    .hero-slide {
        height: 80vh;
        min-height: 500px;
        padding: 2rem 0;
    }
    
    .section {
        padding: 60px 0;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    
    .service-card {
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    /* Center service card buttons on tablet */
    .service-card .btn {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }
    
    .contact-form {
        padding: 2rem;
    }
    
    .contact-info {
        padding: 2rem;
        margin-top: 2rem;
    }
    
    .team-member img {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .section {
        padding: 60px 0;
    }
    
    /* Mobile navigation fixes */
    .navbar-nav .nav-link {
        margin: 0 !important;
        padding: 0.5rem 1rem !important;
        text-align: left;
    }
    
    /* Mobile red underline - fit to text width */
    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-link.active::after,
    .navbar-light .navbar-nav .nav-link.active::after {
        width: 50px !important; /* Fixed reasonable width for mobile */
        left: 1rem !important; /* Align with text start (padding) */
        right: auto !important;
        transform: none !important; /* Remove centering transform */
    }
    
    /* Better mobile navigation spacing */
    .navbar-collapse {
        margin-top: 1rem;
    }
    
    .navbar-nav {
        text-align: left;
    }
    
    #heroCarousel {
        margin-top: 70px;
        height: 80vh;
        min-height: 500px;
    }
    
    .carousel-item {
        height: 80vh;
        min-height: 500px;
    }
    
    .hero-slide {
        height: 80vh;
        min-height: 500px;
        padding: 1rem 0;
    }
    
    /* Mobile carousel button optimizations */
    .hero-slide .btn-light,
    .hero-slide .btn-outline-light {
        padding: 0.75rem 1.5rem !important; /* Reduced height and width */
        font-size: 0.875rem !important; /* Smaller font size */
        border-radius: 0.375rem;
        min-width: 200px; /* Consistent width for stacked buttons */
        text-align: center;
    }
    
    .hero-slide .d-flex.gap-3 {
        gap: 0.75rem !important; /* Reduce gap between buttons on mobile */
        flex-direction: column; /* Stack buttons vertically on small screens */
        align-items: center;
    }
    
    .service-card {
        padding: 1.5rem;
    }
    
    /* Center service card buttons on mobile */
    .service-card .btn {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }
    
    .contact-form {
        padding: 1.5rem;
    }
    
    .contact-info {
        padding: 1.5rem;
    }
}

/* Sitemap Styles */
.sitemap-container {
    padding: 2rem 0;
}

.sitemap-section {
    background: var(--white);
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sitemap-section h3 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.sitemap-list {
    list-style: none;
    padding: 0;
}

.sitemap-list li {
    margin-bottom: 0.75rem;
    padding-left: 1rem;
    position: relative;
}

.sitemap-list li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.sitemap-list a {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.sitemap-list a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Error Page Styles */
.error-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.error-content h1 {
    font-size: 8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.error-content h2 {
    font-size: 2rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.error-content p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .error-content h1 {
        font-size: 4rem;
    }
    
    .error-content h2 {
        font-size: 1.5rem;
    }
}

/* WhatsApp Button Styling */
.btn-success {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border: none;
    border-radius: 50px;
    color: white !important;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-success:hover {
    background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    color: white !important;
}

.btn-success:active {
    transform: translateY(0);
}

.btn-success:focus {
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.25);
    color: white !important;
}

/* WhatsApp button pulse animation */
.btn-success::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.btn-success:hover::before {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
}

.btn-success * {
    position: relative;
    z-index: 1;
}

/* Specific sizing for different WhatsApp buttons */
.btn-success.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 25px;
}

.btn-success.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    border-radius: 35px;
    min-width: 200px;
}

/* WhatsApp icon enhancement */
.btn-success .fab.fa-whatsapp {
    font-size: 1.2em;
    margin-right: 0.5rem;
}

.btn-success.btn-lg .fab.fa-whatsapp {
    font-size: 1.3em;
}

/* Mobile responsiveness for WhatsApp buttons */
@media (max-width: 576px) {
    .btn-success.btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        min-width: 180px;
    }
    
    .d-flex.flex-column.flex-md-row .btn-success {
        width: 100%;
        max-width: 250px;
    }
}

/* Mobile Font Size Improvements - Real Device Readability */
@media screen and (max-width: 767px) {
    /* Footer text needs to be larger on mobile */
    footer p,
    footer a,
    footer li,
    footer .text-white-50,
    .bg-dark p,
    .bg-dark a,
    .bg-dark li,
    .bg-dark .text-white-50 {
        font-size: 1rem !important; /* Increased from 0.875rem for mobile readability */
    }

    /* Footer main description text */
    footer .mb-3 {
        font-size: 1rem !important; /* Increased for mobile readability */
        line-height: 1.6;
    }

    /* Footer bottom section */
    footer hr ~ .row p,
    footer .contact-info p {
        font-size: 1rem !important; /* Increased for mobile readability */
    }

    /* Service cards text */
    .service-card p {
        font-size: 1.125rem !important;
        line-height: 1.7;
    }

    /* Navigation links */
    .nav-link {
        font-size: 1.125rem !important;
    }

    /* Button text */
    .btn {
        font-size: 1rem !important;
        padding: 0.75rem 1.5rem;
    }

    /* Ensure minimum touch target sizes */
    .btn, .nav-link, a {
        min-height: 44px; /* Apple's recommended minimum touch target */
        display: inline-flex;
        align-items: center;
    }

    /* Card titles and headings */
    .service-card h4,
    .card h4,
    h4 {
        font-size: 1.375rem !important; /* Larger on mobile */
    }

    h3 {
        font-size: 1.5rem !important; /* Larger on mobile */
    }

    h2 {
        font-size: 1.75rem !important; /* Larger on mobile */
    }

    /* Lead text */
    .lead {
        font-size: 1.25rem !important;
        line-height: 1.6;
    }
}

/* Defensive CSS for text overlap prevention */
.page-header * {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.page-header .text-center > h1,
.page-header .text-center > .lead,
.page-header .text-center > .breadcrumb-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Fix any potential z-index issues */
.navbar {
    z-index: 1040 !important;
}

.page-header {
    z-index: 1;
}

/* Ensure proper line height for readability */
.page-header h1,
.page-header .lead,
.breadcrumb-simple {
    line-height: 1.4 !important;
}

/* Extra small devices - aggressive spacing fixes */
@media (max-width: 320px) {
    .page-header {
        padding: 100px 0.5rem 15px; /* More compact for very small screens */
        min-height: 220px; /* Further reduced */
    }
    
    .page-header .text-center h1 {
        font-size: 1.3rem !important;
        margin-bottom: 0.25rem !important; /* Very tight spacing */
    }
    
    .page-header .lead {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important; /* Very tight spacing */
    }
    
    .breadcrumb-container {
        margin-top: 0.25rem !important; /* Minimal spacing */
        padding-top: 0.125rem;
    }
    
    .breadcrumb-simple {
        font-size: 0.8rem;
        gap: 6px;
    }
}