/* responsive.css - Responsive Styles */
@media (max-width: 1200px) {
    .container {
        width: 95%;
    }
    
    .hero h1 {
        font-size: 3.5rem;
    }
    
    .page-hero h1 {
        font-size: 3rem;
    }
    
    .services-detailed-grid {
        grid-template-columns: 1fr;
    }
    
    .tour-container {
        grid-template-columns: 1fr;
    }
    
    .vr-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .vr-image {
        order: -1;
    }
}

@media (max-width: 992px) {
    .hero h1 {
        font-size: 3rem;
    }
    
    .section-title h2 {
        font-size: 2.2rem;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filter-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .filter-search {
        width: 100%;
    }
    
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
    
    .story-content {
        grid-template-columns: 1fr;
    }
    
    .featured-post {
        grid-template-columns: 1fr;
    }
    
    .filter-container {
        grid-template-columns: 1fr;
    }
    
    .filter-sidebar {
        position: static;
    }
    
    .map-placeholder {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .mobile-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--secondary-color);
        cursor: pointer;
        padding: 8px;
        border-radius: 5px;
        transition: all var(--transition);
        z-index: 1050;
    }
    
    .mobile-toggle:hover {
        background-color: var(--light-color);
        transform: scale(1.05);
    }
    
    /* Sidebar Navigation */
    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: linear-gradient(135deg, var(--white) 0%, var(--light-color) 100%);
        flex-direction: column;
        padding: 80px 20px 20px 20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        transition: left 0.35s ease;
        z-index: 1001;
        overflow-y: auto;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    /* Close Button in Sidebar */
    .nav-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.8rem;
        color: var(--secondary-color);
        cursor: pointer;
        padding: 5px;
        border-radius: 5px;
        transition: all var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-close:hover {
        background-color: var(--primary-color);
        color: var(--white);
        transform: rotate(90deg);
    }
    
    /* Navigation Menu Items */
    .nav-menu li {
        margin: 20px 0;
        list-style: none;
    }
    
    .nav-menu li a {
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--dark-color);
        text-decoration: none;
        display: block;
        padding: 10px 15px;
        border-radius: 5px;
        transition: all var(--transition);
        position: relative;
    }
    
    .nav-menu li a:hover {
        background-color: var(--primary-color);
        color: var(--white);
        transform: translateX(5px);
    }
    
    .nav-menu li a.active {
        background-color: var(--primary-color);
        color: var(--white);
        font-weight: 600;
    }
    
    /* Dark Mode Toggle in Sidebar */
    .nav-menu .dark-mode-toggle {
        width: 100%;
        padding: 12px 15px;
        margin-top: 20px;
        background-color: var(--primary-color);
        color: var(--white);
        border: none;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
        transition: all var(--transition);
    }
    
    .nav-menu .dark-mode-toggle:hover {
        background-color: var(--dark-color);
        transform: scale(1.02);
    }
    
    /* Overlay Backdrop */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition);
        z-index: 1000;
        pointer-events: none;
    }
    
    .nav-overlay.active {
        background: rgba(0, 0, 0, 0.5);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    /* Mobile Toggle Button */
    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-toggle i {
        font-size: 1.5rem;
    }
    
    .hero {
        height: 80vh;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .page-hero {
        height: 50vh;
    }
    
    .page-hero h1 {
        font-size: 2.5rem;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    
    .designs-grid,
    .services-grid,
    .testimonials-grid,
    .portfolio-grid,
    .posts-grid,
    .tours-grid,
    .products-grid,
    .products-list,
    .values-grid,
    .team-grid,
    .stats-grid,
    .faq-grid,
    .process-steps {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .modal-body {
        padding: 30px 20px;
    }
    
    .modal-header h2 {
        font-size: 1.8rem;
    }
    
    .modal-images {
        grid-template-columns: 1fr;
    }
    
    .project-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .tour-navigation {
        height: 300px;
    }
    
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
    
    .checkout-modal-content {
        margin: 10px auto;
    }
    
    .checkout-modal-body {
        padding: 20px;
    }
}

/* Dark Mode Styles for Responsive Navigation */
@media (max-width: 768px) {
    body.dark-mode .nav-menu {
        background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
    }
    
    body.dark-mode .nav-close {
        color: #f0f0f0;
    }
    
    body.dark-mode .nav-close:hover {
        background-color: var(--primary-color);
        color: #1a1a1a;
    }
    
    body.dark-mode .nav-menu li a {
        color: #f0f0f0;
    }
    
    body.dark-mode .nav-menu li a:hover {
        background-color: var(--primary-color);
        color: #1a1a1a;
    }
    
    body.dark-mode .nav-menu li a.active {
        background-color: var(--primary-color);
        color: #1a1a1a;
    }
    
    body.dark-mode .mobile-toggle {
        color: #f0f0f0;
    }
    
    body.dark-mode .mobile-toggle:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

@media (max-width: 576px) {
    section {
        padding: 60px 0;
    }
    
    .hero {
        height: 70vh;
        margin-top: 70px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .hero .btn {
        display: block;
        margin: 10px auto;
        width: 80%;
        max-width: 250px;
    }
    
    .page-hero h1 {
        font-size: 2rem;
    }
    
    .section-title h2 {
        font-size: 1.8rem;
    }
    
    .filter-buttons {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
    }
    
    .filter-btn {
        white-space: nowrap;
    }
    
    .btn {
        padding: 12px 25px;
    }
    
    .modal-content {
        margin: 20px auto;
    }
    
    .services-detailed-grid {
        gap: 20px;
    }
    
    .service-detailed-card {
        padding: 30px 20px;
    }
    
    .tour-controls {
        flex-direction: column;
    }
    
    .category-filter {
        overflow-x: auto;
        padding-bottom: 10px;
        justify-content: flex-start;
    }
    
    .category-btn {
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .section-title h2 {
        font-size: 1.6rem;
    }
    
    .logo {
        font-size: 1.5rem;
    }
    
    .portfolio-item,
    .tour-card-image {
        height: 250px;
    }
    
    .post-image {
        height: 200px;
    }
    
    .product-image {
        height: 200px;
    }
    
    .service-detailed-card {
        padding: 20px 15px;
    }
}