/* Reset and Base Styles */
@media (max-width: 768px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box; /* Prevents overflow from padding/margins */
    }

    body {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 1.1em;
        line-height: 1.2em;
        color: #fff;
        background: url(images/body-bg.gif) center top no-repeat; /* Body background image */
        background-size: cover; /* Scale to fit */
        background-attachment: scroll; /* Prevent fixed positioning issues */
        direction: rtl; /* Right-to-left direction */
        min-height: 100vh; /* Full viewport height */
    }

    /* Layout */
    .wrapper {
        width: 100%;
        overflow: hidden;
    }

    #main {
        width: 100%;
        padding: 0 10px; /* Prevent edge overflow */
        min-height: auto; /* Allow natural height */
    }

    /* Background Image Elements */
    .top-bg {
        background: url(images/bg-top.jpg) no-repeat center top; /* Top background image */
        background-size: 100% auto; /* Scale to fit width */
        position: relative;
        width: 100%;
        height: auto;
        min-height: 100px; /* Ensure visibility */
    }

    .tail-bg {
        background: url(images/bg-tail.jpg) center top repeat-y; /* Tail background image, repeated vertically */
        background-size: 100% auto; /* Scale to fit width */
        position: relative;
        width: 100%;
        height: auto;
        min-height: 100%; /* Span content height */
    }

    .bot-bg {
        background: url(images/bg-bottom.jpg) no-repeat center bottom; /* Bottom background image */
        background-size: 100% auto; /* Scale to fit width */
        position: relative;
        width: 100%;
        height: auto;
        min-height: 100px; /* Ensure visibility */
    }

    .tail-right {
        background: #0ab7e0; /* Fallback color */
        position: static; /* Normal flow */
        width: 100%;
        height: auto;
    }

    .tail-right-top,
    .tail-right-bot {
        background: none; /* Remove decorative images */
        position: static; /* Normal flow */
        width: 100%;
        height: auto;
        display: block; /* Keep divs in layout */
    }

    /* Header and Logo */
    h1 {
        font-size: 2em; /* Smaller text */
        padding: 15px 0 0 5px;
        float: none; /* Stack vertically */
    }

    h1 a {
        background: url(images/logo.jpg) no-repeat center center; /* Logo image */
        background-size: 100% auto; /* Scale to fit width */
        width: 100%; /* Full width */
        height: 40px; /* Consistent height */
        max-width: 237px; /* Prevent over-scaling */
        display: block;
        text-indent: -9999px; /* Hide text for accessibility */
    }

    /* Navigation */
    #nav {
        width: 100%;
        margin-right: 0;
        padding: 20px 0;
        float: none; /* Stack vertically */
    }

    #nav ul {
        list-style: none;
    }

    #nav ul li a {
        width: 100%; /* Full width */
        background: url(images/nav-bg.png) no-repeat center center; /* Nav background image */
        background-size: 100% 100%; /* Stretch to fit */
        text-indent: 0; /* Center text */
        text-align: center;
        height: 48px; /* Increased for touch usability */
        line-height: 48px;
        font-size: 16px; /* Slightly smaller for mobile */
        color: #fff; /* Ensure text visibility */
        text-decoration: none;
        display: block;
        margin-bottom: 7px;
    }

    /* Content */
    #content {
        width: 100%;
        padding: 20px;
        float: none; /* Stack vertically */
    }

    /* Footer */
    #footer {
        width: 100%; /* Full width */
        margin: 0 auto; /* Remove negative margin */
        padding: 20px 10px; /* Add padding */
        height: auto; /* Dynamic height */
        color: #acc3de;
    }

    /* Typography for Readability */
    h2 {
        font-size: 1.5em;
    }
}