/* Tablet & Mobile Adjustments */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .about-image {
        order: 2;
    }
    
    .about-text {
        order: 1;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .parallax-section {
        background-attachment: scroll; 
        padding: 60px 0;
    }

    .nav-logo img {
        height: 35px;
    }

    .floating-actions {
        bottom: 20px;
        right: 20px;
    }

    .float-btn {
        width: 45px;
        height: 45px;
    }

    .float-btn img {
        width: 20px;
        height: 20px;
    }
    
    /* --- MOBILE MENU FIXES --- */
    .menu-overlay {
        width: 100%;
        right: -100%;
        padding: 0; /* Remove side padding so it fills the screen evenly */
        align-items: center; /* Center everything horizontally */
        background: rgba(248, 246, 240, 0.85); /* Slightly more opaque for readability */
    }
    
    .menu-overlay.open {
        right: 0;
    }

    .menu-inner {
        text-align: center; /* Center the text! */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .menu-links {
        width: 100%;
        margin-bottom: 50px;
    }

    .menu-links li {
        margin: 15px 0;
    }

    .menu-link {
        font-size: 2rem; /* Nice, readable mobile size */
    }

    .menu-info {
        text-align: center; /* Center the contact info too */
        font-size: 1rem;
        border-top: 1px solid rgba(0,0,0,0.1);
        padding-top: 20px;
        width: 80%; /* Add a subtle line above contact info */
    }
    
    .menu-info a {
        font-size: 1.4rem;
        margin-top: 8px;
    }

    /* Mobile Typography Fixes */
    .hero-title {
        font-size: 2.2rem; /* Fixed size for mobile */
    }
    
    .section-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem; /* Even smaller for narrow phones */
    }
    
    .section-title {
        font-size: 1.5rem;
    }

    .about-image img {
        box-shadow: 8px 8px 0 var(--accent-gold-light);
    }
}


/* Add this to the bottom of responsive.css */
@media (max-width: 768px) {
    .page-header {
        padding: 120px 0 40px;
    }
    
    .properties-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 30px;
    }
}






/* Add this to the bottom of responsive.css */
@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .about-story-section {
        padding: 60px 0;
    }
}



@media (max-width: 992px) {
    .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 30px; }
    .about-image { order: 2; }
    .about-text { order: 1; }
    .contact-action-buttons { flex-direction: column; }
    .glass-form { padding: 30px 20px; }
    
    /* Footer Mobile */
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 768px) {
    .section, .contact-section { padding: 60px 0; }
    .page-header { padding: 120px 0 40px; }
    .hero-actions { flex-direction: column; width: 100%; max-width: 280px; margin: 0 auto; }
    .btn { width: 100%; }
    .parallax-section { background-attachment: scroll; padding: 60px 0; }
    .nav-logo img { height: 35px; }
    .floating-actions { bottom: 20px; right: 20px; }
    .float-btn { width: 45px; height: 45px; }
    .float-btn img { width: 20px; height: 20px; }
    
    .menu-overlay { width: 100%; right: -100%; padding: 0; align-items: center; background: rgba(248, 246, 240, 0.95); }
    .menu-overlay.open { right: 0; }
    .menu-inner { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; }
    .menu-links { width: 100%; margin-bottom: 50px; }
    .menu-info { text-align: center; font-size: 1rem; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 20px; width: 80%; }
    
    .hero-title { font-size: 2.2rem; }
    .section-title { font-size: 1.6rem; }
    .properties-grid { grid-template-columns: 1fr; gap: 30px; }
    .cta-buttons { flex-direction: column; align-items: center; width: 100%; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.8rem; }
    .section-title { font-size: 1.5rem; }
    .about-image img { box-shadow: 8px 8px 0 var(--accent-gold-light); }
}












/* Add this to the bottom of responsive.css */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-action-buttons {
        flex-direction: column;
    }
    
    .glass-form {
        padding: 30px 20px;
    }
}