/* 
   LM 360 Insurance Solutions - Style Sheet 
   Theme: Professional, Modern, Trustworthy, Corporate
   Colors: Deep Blue, Teal Blue, Green, Light Green
*/

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================================
   CSS Variables & Reset
   ========================================= */
:root {
    /* Brand Colors */
    --primary-blue: #1f5fae;
    --teal-blue: #2fa4c9;
    --primary-green: #6bbf3f;
    --light-green: #9cd94a;

    /* Gradients */
    --brand-gradient: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
    --hover-gradient: linear-gradient(135deg, var(--primary-green), var(--primary-blue));

    /* Neutrals */
    --text-dark: #333333;
    --text-light: #666666;
    --bg-white: #ffffff;
    --bg-light: #f9fbfd;
    --border-color: #e0e0e0;

    /* Spacing & Layout */
    --container-width: 1200px;
    --header-height: 100px;
    --border-radius: 8px;
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-white);
    padding-top: var(--header-height);
    /* For sticky header */
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

p {
    margin-bottom: 1rem;
    color: var(--text-light);
}

/* =========================================
   Utility Classes
   ========================================= */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.text-white {
    color: #fff !important;
}

.section-padding {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--bg-light);
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 4px 15px rgba(31, 95, 174, 0.3);
}

.btn-primary:hover {
    background: var(--hover-gradient);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 95, 174, 0.4);
}

.btn-outline {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: transparent;
}

.btn-outline:hover {
    background: var(--primary-blue);
    color: #fff;
}

.section-title {
    margin-bottom: 50px;
    text-align: center;
}

.section-title h2 {
    font-size: 2.2rem;
    color: var(--primary-blue);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--primary-green);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* =========================================
   Header & Navigation
   ========================================= */
.main-header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-decoration: none;
    z-index: 1001;
}

.logo img {
    max-height: 80px;
    width: auto;
}

/* Hamburger Menu Icon (Hidden on Desktop) */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1001;
    background: none;
    border: none;
    padding: 5px;
}

.menu-toggle span {
    width: 28px;
    height: 3px;
    background-color: var(--primary-blue);
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
}

.nav-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s;
    position: relative;
}

.nav-link:hover {
    color: var(--primary-blue);
    background-color: rgba(31, 95, 174, 0.05);
}

.nav-link.active {
    color: var(--primary-blue);
    background-color: rgba(31, 95, 174, 0.1);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--primary-blue);
}


/* Mobile Menu Toggle (Hidden by default on desktop) */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--primary-blue);
    border-radius: 2px;
}

/* =========================================
   Hero Section
   ========================================= */
/* =========================================
   Hero Section
   ========================================= */
.hero {
    background: linear-gradient(135deg, rgba(31, 95, 174, 0.05) 0%, rgba(107, 191, 63, 0.1) 100%);
    padding: 20px 0;
    /* Reduced vertical padding */
    color: var(--text-dark);
    position: relative;
    overflow: hidden;
    /* Full viewport height minus header */
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
}

/* Abstract Background Shapes */
.hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(47, 164, 201, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(107, 191, 63, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hero-text {
    flex: 1;
    max-width: 600px;
    animation: fadeUp 0.8s ease-out forwards;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    animation: fadeIn 1s ease-out 0.3s forwards;
    opacity: 0;
    /* hidden initially for animation */
}

.hero-image img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.5s ease;
    mix-blend-mode: screen;
    /* Makes black background transparent */
}

.hero-image:hover img {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
}

.hero h1 {
    font-size: 3.5rem;
    color: var(--primary-blue);
    line-height: 1.2;
    margin-bottom: 25px;
    background: -webkit-linear-gradient(45deg, var(--primary-blue), var(--teal-blue));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 35px;
    max-width: 500px;
}

.hero-btns {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile Responsive For Hero */
@media (max-width: 992px) {
    .hero {
        padding: 60px 0 60px;
        /* More padding on mobile */
        text-align: center;
        min-height: auto;
        /* Allow auto height on mobile if content is tall */
    }

    .hero-content {
        flex-direction: column;
        /* Changed from column-reverse to fix order on tablets/mobiles */
        gap: 40px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-btns {
        justify-content: center;
    }

    .hero-text {
        margin: 0 auto;
    }

    .hero-image {
        justify-content: center;
        margin-bottom: 20px;
    }

    .hero-image img {
        transform: none;
        max-width: 80%;
        max-height: 300px;
        /* Constrain image height on mobile */
    }
}

/* =========================================
   Page Banner (Inner Pages)
   ========================================= */
/* =========================================
   Page Banner (Inner Pages)
   ========================================= */
.page-banner {
    background: var(--brand-gradient);
    padding: 80px 0 60px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Abstract Background Shapes for Banner */
.page-banner::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.page-banner::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.page-banner h1 {
    color: #fff;
    font-size: 2.8rem;
    margin-bottom: 10px;
    font-weight: 700;
    animation: fadeUp 0.6s ease-out forwards;
}

.page-banner p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    animation: fadeUp 0.8s ease-out forwards;
}

/* =========================================
   About Intro & Content
   ========================================= */
/* =========================================
   About Intro & Content
   ========================================= */
.about-section-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    justify-content: space-between;
}

.about-text-col {
    flex: 1;
    text-align: left;
}

.about-image-col {
    flex: 1;
    display: flex;
    justify-content: center;
}

.about-image-col img {
    max-width: 400px;
    width: 100%;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.1));
    transition: transform 0.4s ease;
}

.about-image-col:hover img {
    transform: scale(1.03) rotate(2deg);
}

.about-intro-text {
    font-size: 1.15rem;
    color: var(--text-light);
    margin-bottom: 25px;
    line-height: 1.8;
}

.about-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.highlight-box {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 3px solid var(--primary-green);
}

.highlight-box span {
    font-weight: 600;
    color: var(--primary-blue);
}

/* About Headings Alignment */
.about-headings {
    text-align: left;
    /* Override default center for desktop */
}

@media (max-width: 768px) {
    .about-section-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .about-text-col {
        text-align: center;
    }

    .about-headings {
        text-align: center;
        /* Force center on mobile */
    }

    /* We also need to center the highlight boxes or keep them left? 
       Usually lists look better left aligned even in center layouts, but let's check user request.
       "make center" refers to "Who We, Are Reliable Insurance Advisory headings".
       But I see about-highlights text-align: left in previous code. I will leave highlights as is unless requested.
    */
    .about-highlights {
        grid-template-columns: 1fr;
        text-align: left;
        /* Keep highlights left aligned for readability, or remove this to inherit center?
           The previous block had it left. I'll keep it left for now as user asked for HEADINGS. 
        */
        display: inline-grid;
        /* Helps centering the grid itself if parent is centered */
        text-align: left;
        width: 100%;
        max-width: 400px;
        /* Constrain width on mobile */
        margin: 30px auto 0;
        /* Center the grid container */
    }
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.mission-card {
    background: #fff;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border-top: 4px solid var(--primary-green);
    transition: transform 0.3s;
}

.mission-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.mission-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

/* =========================================
   Services Grid
   ========================================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: #fff;
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid #eee;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-green);
}

.service-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--teal-blue);
}

.service-card h3 {
    font-size: 1.35rem;
    margin-bottom: 15px;
}

/* =========================================
   Why Choose Us
   ========================================= */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.feature-item {
    background: #fff;
    padding: 35px 25px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-bottom: 4px solid transparent;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(to bottom, rgba(31, 95, 174, 0.05), transparent);
    transition: height 0.4s ease;
    z-index: -1;
}

.feature-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-bottom-color: var(--primary-green);
}

.feature-item:hover::before {
    height: 100%;
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(31, 95, 174, 0.1), rgba(107, 191, 63, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.feature-item:hover .feature-icon {
    background: var(--brand-gradient);
    color: #fff;
    transform: rotateY(180deg);
}

.feature-text h4 {
    margin-bottom: 15px;
    font-size: 1.25rem;
    color: var(--primary-blue);
}

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

/* =========================================
   CTA Banner
   ========================================= */
.cta-banner {
    background: var(--brand-gradient);
    color: #fff;
    text-align: center;
    padding: 60px 0;
}

.cta-banner h2 {
    color: #fff;
    margin-bottom: 20px;
}

.cta-banner .btn {
    background: #fff;
    color: var(--primary-blue);
    margin-top: 10px;
}

.cta-banner .btn:hover {
    background: #f1f1f1;
}

/* =========================================
   Contact Page
   ========================================= */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.contact-info-box {
    background: var(--bg-light);
    padding: 30px;
    border-radius: var(--border-radius);
}

.info-item {
    margin-bottom: 25px;
}

.info-item h4 {
    color: var(--teal-blue);
    margin-bottom: 5px;
}

.contact-form-box {
    background: #fff;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #eee;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-dark);
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--teal-blue);
    box-shadow: 0 0 0 3px rgba(47, 164, 201, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* =========================================
   Footer
   ========================================= */
/* =========================================
   Modern Footer
   ========================================= */
.modern-footer {
    background-color: #0e2b4f;
    /* Darker blue for footer */
    color: #b0c4de;
    padding: 80px 0 30px;
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    background: var(--primary-green);
    border-radius: 2px;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #b0c4de;
    transition: all 0.3s;
}

.footer-col ul li a:hover {
    color: var(--primary-green);
    padding-left: 5px;
}

.footer-col p {
    margin-bottom: 15px;
    color: #b0c4de;
}

.footer-col strong {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-col {
        text-align: center;
    }

    .footer-col h4 {
        text-align: center;
    }

    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-col ul {
        list-style: none;
        padding: 0;
    }

    .footer-col ul li a:hover {
        padding-left: 0;
    }

    /* Center the logo container */
    .footer-col>div {
        display: inline-block;
    }
}


.copyright {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* =========================================
   Responsive Design - Mobile Optimization
   ========================================= */

/* Tablet and smaller (992px and below) */
@media (max-width: 992px) {
    .section-title h2 {
        font-size: 2rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mission-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-banner h1 {
        font-size: 2.2rem;
    }
}

/* Mobile devices (768px and below) */
@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }

    /* Header adjustments */
    .logo img {
        max-height: 50px;
    }

    /* Show hamburger menu */
    .menu-toggle {
        display: flex;
        padding: 10px 0;
        /* Increase touch target */
        margin-left: auto;
        /* Force to right */
    }

    /* Hide the nav wrapper completely from document flow */
    .nav-container nav {
        display: contents;
        /* Modern fix: makes the nav container disappear, children become flex items */
        /* Fallback for older browsers if needed, but contents is best for this specific structure issue */
    }

    /* Ensure nav container only spaces the logo and toggle */
    .nav-container {
        justify-content: space-between;
    }

    /* Hide navigation by default on mobile */
    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: -100%;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: #fff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 30px 20px;
        gap: 0;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        transition: left 0.3s ease;
        overflow-y: auto;
        z-index: 999;
        /* Ensure it stays below toggle if overlaps, but toggle is 1001 */
    }

    /* Show menu when checkbox is checked */
    /* Accessing .nav-menu through the nav sibling */
    #menu-toggle:checked~nav .nav-menu {
        left: 0;
    }

    /* Animate hamburger to X */
    #menu-toggle:checked~.menu-toggle span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    #menu-toggle:checked~.menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    #menu-toggle:checked~.menu-toggle span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Mobile menu links */
    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-link {
        display: block;
        padding: 18px 20px;
        font-size: 1.1rem;
        border-radius: 0;
        width: 100%;
    }

    .nav-link.active::after {
        display: none;
    }

    .nav-link.active {
        background-color: rgba(31, 95, 174, 0.1);
        border-left: 4px solid var(--primary-blue);
    }

    .nav-container {
        flex-direction: row;
        padding: 0;
        gap: 0;
    }

    .main-header {
        height: var(--header-height);
        padding: 0;
    }

    body {
        padding-top: var(--header-height);
    }

    /* Hero section mobile */
    .hero {
        padding: 40px 0;
    }

    .hero-content,
    .hero-mobile-order {
        flex-direction: column !important;
        /* Force vertical stacking */
        display: flex;
    }

    /* Force the order explicitly: Text first (1), Image second (2) */
    .hero-mobile-order .hero-text {
        order: 1 !important;
        margin-bottom: 30px;
        /* Add spacing between button and image */
    }

    .hero-mobile-order .hero-image {
        order: 2 !important;
        margin-bottom: 0;
    }

    .hero h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-btns {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 15px;
    }

    .btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* Services grid mobile */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        padding: 25px 20px;
        text-align: center;
    }

    .service-icon {
        font-size: 2rem;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
    }

    /* Features grid mobile */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-item {
        padding: 25px 20px;
    }

    /* Mission grid mobile */
    .mission-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mission-card {
        padding: 25px 20px;
    }

    /* Contact page mobile */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact-info-box,
    .contact-form-box {
        padding: 25px 20px;
    }

    /* Page banner mobile */
    .page-banner {
        padding: 50px 0 40px;
    }

    .page-banner h1 {
        font-size: 1.8rem;
    }

    .page-banner p {
        font-size: 1rem;
    }

    /* About section mobile */
    .about-section-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .about-text-col,
    .about-image-col {
        text-align: center;
    }

    .about-highlights {
        grid-template-columns: 1fr;
    }

    .about-image-col img {
        max-width: 100%;
    }

    /* Section padding mobile */
    .section-padding {
        padding: 50px 0;
    }

    /* Typography mobile */
    .section-title h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    /* CTA Banner mobile */
    .cta-banner {
        padding: 40px 20px;
    }

    .cta-banner h2 {
        font-size: 1.6rem;
    }

    /* Footer mobile */
    .modern-footer {
        padding: 50px 0 30px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .footer-col h4 {
        font-size: 1rem;
    }
}

/* Small mobile devices (480px and below) */
@media (max-width: 480px) {

    /* Extra small adjustments */
    .container {
        padding: 0 15px;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .section-title h2 {
        font-size: 1.5rem;
    }

    .page-banner h1 {
        font-size: 1.5rem;
    }

    .nav-menu {
        font-size: 0.8rem;
        gap: 8px;
    }

    .btn {
        padding: 12px 18px;
        font-size: 0.95rem;
    }

    .service-card h3,
    .feature-item h4,
    .mission-card h3 {
        font-size: 1.1rem;
    }

    .service-card p,
    .feature-item p,
    .mission-card p {
        font-size: 0.9rem;
    }

    .highlight-box {
        padding: 12px;
        font-size: 0.9rem;
    }

    .about-intro-text {
        font-size: 1rem;
    }

    .form-control {
        padding: 10px;
        font-size: 0.95rem;
    }

    .footer-col {
        font-size: 0.9rem;
    }

    .cta-banner h2 {
        font-size: 1.4rem;
    }
}

/* Landscape orientation optimization */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 30px 0;
    }

    .page-banner {
        padding: 40px 0 30px;
    }
}

/* Print optimization */
@media print {

    .main-header,
    .modern-footer,
    .cta-banner,
    .hero-btns,
    .btn {
        display: none;
    }

    body {
        padding-top: 0;
    }

    .section-padding {
        padding: 20px 0;
    }
}