/* MOBILE VIEW LOGIC (As per attached image) */
@media (max-width: 992px) {
    
    /* 1. Header Adjustments */
    .header {
        padding: 10px 30px;
    }

    .logo-font {
        font-size: 33px; /* Slightly smaller for mobile screens */
    }

    /* 2. Slide Container Adjustments */
    .gold-frame {
        width: 95%;      /* Wider fit for smaller screens */
        height: 85%;     /* Taller to accommodate vertical stacking */
        flex-direction: column; /* VERTICAL STACK: Pic on Top, Text on Bottom */
        padding: 2px;
    }

    /* 3. Picture Area (Top Half) */
    .left-pic {
        flex: 1.2;       /* Takes up the top portion */
        width: 100%;
        border-right: none;
        border-bottom: 2px solid #f1d279; /* Gold separator line */
    }

    .left-pic img {
        object-fit: cover; /* Ensures pic fills the frame without distortion */
    }

    /* 4. Written Content Area (Bottom Half) */
    .right-content {
        flex: 1;         /* Takes up the bottom portion */
        padding: 20px;   /* Compact padding for mobile */
        text-align: center;
        overflow-y: auto; /* Allows scrolling if text is long */
        background: white;
    }

    .gold-text-shine {
        font-size: 22px; /* Smaller headline for mobile */
        margin-bottom: 10px;
    }

    .feature-list {
        gap: 10px;
    }

    .feature-item {
        border-left: none;
        border-top: 1px solid #f1d279; /* Top border for list items in mobile */
        padding: 10px 0;
    }

    /* 5. Navigation Icon (Hamburger) */
    .nav-desktop {
        display: none; /* Hide text links on mobile */
    }

    .nav-icon-mobile {
        display: block; /* Ensure Hamburger is visible */
        z-index: 10001;
    }
}










@media (max-width: 992px) {
    /* 1. Ensure the Gold Frame expands correctly */
    .gold-frame {
        width: 92%;
        height: 90vh; /* Keeps the frame tall enough for the paper look */
        flex-direction: column; /* Stacks Pic over Text */
        display: flex;
    }

    /* 2. Top Picture Area */
    .left-pic {
        flex: 1; /* Takes top 50% */
        width: 100%;
        border-right: none;
        border-bottom: 2px solid #f1d279;
    }

    /* 3. Bottom Content Area (The Fix) */
    .right-content {
        flex: 1; /* Takes bottom 50% */
        width: 100%;
        background-color: #ffffff; /* Matches the paper look */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centers text vertically */
        align-items: center;     /* Centers text horizontally */
        padding: 30px 20px;      /* Professional spacing */
        text-align: center;
        overflow-y: auto;        /* Allows scrolling if text is very long */
    }

    /* 4. Formatting the Text for Mobile */
    .gold-text-shine {
        font-size: 24px;
        margin-bottom: 15px;
        width: 100%;
    }

    .right-content p {
        font-size: 15px;
        line-height: 1.6;
        color: #333;
        max-width: 90%; /* Prevents text from hitting the gold edges */
    }
}