@media (max-width: 1200px) {
	.main-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/*align-content: space-between;*/
		width: 80vw;
		margin-top: 0% !important;
	}

	.menu-left, .menu-right {
		margin: 0;
		padding: 0;
		width: 10vw;
	}

	
}

@media (max-width: 992px) {
	h1, h2 {
		font-size: 1.5rem;
		letter-spacing: 0.5rem; /* Reduced letter-spacing for mobile */
		margin-bottom: 20px !important;
	}
	.content-footer {
		display: none !important;
	}
	p {
		font-size: 1.25rem;
		line-height: 1.8rem;
		margin-bottom: 20px !important;
	}

	.menu-bottom p {
		font-size: 1rem !important;
		line-height: 1.5rem !important;
	}

	.form-control, label, input, textarea, form button {
		font-size: 1.25rem;
		line-height: 1.8rem;
		margin-bottom: 20px !important;
	}

	.right-content div { width: 100%; }

	/* Force blocks to appear from top on mobile */
    .block {
        position: fixed !important; /* Ensure it's fixed relative to viewport */
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important; /* Full width */
        height: 0 !important; /* Initially hidden vertically */
        transition: height 0.5s ease-in-out !important; /* Transition height */
        background: #b1a718 !important; /* Keep background from app.css or adjust if needed */
        z-index: 100 !important; /* Ensure it's above other content */
        color: white !important; /* Ensure text is visible */
        flex-direction: column !important; /* Stack content vertically */
        justify-content: flex-start !important; /* Align content to top */
    }

    /* Styles for opened blocks on mobile */
    .block-top-open,
    .block-left-open,
    .block-right-open {
        height: 100vh !important; /* Full height when open */
        width: 100vw !important; /* Ensure full width */
        overflow-y: auto !important; /* Enable vertical scrolling */
        overflow-x: hidden !important; /* Prevent horizontal scrolling */
        left: 0 !important; /* Ensure it's always at the left edge */
        right: auto !important; /* Reset right property */
        top: 0 !important; /* Ensure it's at the top edge */
		display: flex !important; /* Explicitly set as flex container */
        flex-direction: column !important; /* Explicitly set as column flex container */
    }

    /* Adjust content inside opened blocks for mobile */
    .block-top-open .top-content,
    .block-left-open .left-content,
    .block-right-open .right-content {
        height: auto !important; /* Let content define height */
        width: 100% !important; /* Full width for content area */
        max-width: 100% !important; /* Override max-width */
        padding: 20px !important; /* Add some padding */
        box-sizing: border-box !important;
        flex-direction: column !important; /* Stack content vertically */
        flex-grow: 0 !important; /* Set flex-grow to 0 or remove it */
    }

    .block-top-open *,
    .block-left-open *,
    .block-right-open * {
        color: white !important;
    }

    /* Adjust close area for mobile */
    .block-top-open .top-close-area,
    .block-left-open .left-close-area,
    .block-right-open .right-close-area {
        height: auto !important; /* Let content define height */
        width: 100% !important; /* Full width */
        padding: 10px !important;
        box-sizing: border-box !important;
        justify-content: center !important; /* Center close button horizontally */
        -ms-transform: none !important; /* Reset rotation */
        -webkit-transform: none !important; /* Reset rotation */
        transform: none !important; /* Reset rotation */
        margin-top: auto !important; /* This pushes the close area to the bottom */
		display: flex !important; /* Explicitly set as flex container for centering */
    }
    
    /* Ensure close buttons are centered and not rotated within their respective areas on mobile */
    .top-close-area .close-block,
    .left-close-area .close-block,
    .right-close-area .close-block {
        transform: none !important; /* Remove any rotation */
        transform-origin: center center !important; /* Explicitly set transform origin */
        white-space: nowrap !important;
        font-size: 1.5rem !important;
        padding: 10px 20px !important;
        
        display: block !important; /* Ensure it behaves as a block for margin auto to work */
        text-align: center !important; /* Center the text inside the button */
        width: auto !important; /* Allow button to size to its content */
        min-width: 0 !important; /* Prevent intrinsic width issues */
        max-width: 100% !important; /* Ensure it doesn't exceed parent width */

        /* Explicitly reset position and use margin auto for centering */
        position: relative !important; /* Ensure it respects left/right/margin properties */
        left: 0 !important; /* Reset any left positioning */
        right: 0 !important; /* Reset any right positioning */
        margin-left: auto !important; /* Center horizontally */
        margin-right: auto !important; /* Center horizontally */
    }

    /* Ensure the icon inside the close button is also not rotated */
    .top-close-area .close-block i,
    .left-close-area .close-block i,
    .right-close-area .close-block i {
        transform: none !important;
        margin-left: 5px; /* Add some space between text and icon */
    }
    
    /* Reset rotation on menu links when block is open */
    .block-left-open .menu-left a,
    .block-top-open .menu-top a,
    .block-right-open .menu-right a {
        transform: none !important;
        height: auto !important;
    }
    
    /* Ensure the overall block div covers everything */
    .block-top, .block-left, .block-right {
        height: 0; /* Initially collapsed vertically */
        width: 100%; /* Take full width */
        left: 0; /* Start from left */
        right: auto; /* Remove right position */
        top: 0; /* Start from top */
    }

	/* Aggressive reset for main layout containers */
	.content-head,
	.content-body,
	.content-footer-mobile { /* Changed from .content-footer to .content-footer-mobile */
		display: block !important; /* Force block display for vertical stacking */
		flex-direction: unset !important; /* Remove any flex direction */
		justify-content: unset !important;
		align-items: unset !important;
		height: auto !important; /* Allow content to define height */
		width: 100% !important; /* Take full width */
		margin: 0 auto 80px auto !important; /* Very large margin-bottom for spacing */
		padding: 0 !important;
	}

	/* Ensure children of content-head, content-body, and content-footer-mobile also stack as blocks */
	.content-head > div,
	.content-body > div,
	.content-footer-mobile > div { /* Changed from .content-footer to .content-footer-mobile */
		display: block !important;
		width: 100% !important;
		margin: 0 auto 50px auto !important; /* Large spacing for children */
		padding: 0 !important;
		text-align: center; /* Center content like logo and social icons */
	}

	/* Specific adjustments for menu-left-column */
	.menu-left-column {
		display: block !important; /* Force block display for the container */
		width: 100% !important;
		margin: 0 auto 50px auto !important;
		padding: 0 !important;
		text-align: center;
	}

    /* Reset rotations and heights for block toggles on mobile */
    .menu-top a,
    .menu-left a,
    .menu-right a {
        transform: none !important; /* Remove rotation */
        height: auto !important; /* Allow natural height */
        min-height: 60px !important;
        min-width: unset !important; /* Remove desktop min-width constraint */
        display: flex !important; /* Ensure they behave as blocks */
        align-items: center;
        justify-content: center;
        width: 100% !important; /* Take full width of parent */
        text-align: center; /* Center text */
        padding: 15px 0 !important; /* Increased vertical padding */
        border: 1px solid rgba(255,255,255,0.2) !important; /* Visual separator */
        margin-bottom: 15px !important; /* Increased spacing between toggles */
    }

    /* Ensure blockToggle containers are visible and behave as blocks */
    .menu-top,
    .menu-left,
    .menu-right {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important; /* Spacing between toggles */
    }

    .menu-top {
        margin-top: 20px !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: auto !important;
    }

    .content-head .social {
        display: none !important;
    }

	/* Aggressive image sizing for all images within main content */
    .logo img,
    .slogan img,
    .create-logo img { /* Also include create-logo image */
        max-width: 90% !important; /* Make images more responsive */
        height: auto !important;
        display: block !important;
        margin: 0 auto 30px auto !important; /* Center and add spacing */
    }

    /* Adjust social icons for mobile */
    .social, .social-mobile {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 auto 30px auto !important;
    }
        .social a {
        position: static !important;
        top: auto !important;
        right: auto !important;
        z-index: auto !important;
    }

    .social svg, .social-mobile svg {
        width: 40px !important; /* Larger icons for touch */
        height: 40px !important;
    }

    .instagram-mobile-fixed {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 1000;
    }

    .content-footer-mobile .signature {
        margin-bottom: 0 !important;
    }

    body {
        overflow-y: auto !important;
        height: auto !important; /* Allow body to grow */
    }

    /* Override rotation for the button within left-close-area specifically on mobile */
    .block-left-open .left-close-area > button.close-block {
        transform: none !important;
        height: auto !important; /* Reset height set by app.css */
        width: auto !important; /* Ensure button width adapts to content */
    }

    /* Ensure close-block text remains centered */
    .block-left-open .left-close-area > button.close-block i.fa {
        display: inline-block !important; /* Ensure icon is inline with text */
        margin-left: 5px; /* Add some space between text and icon */
    }
}

@media (max-width: 768px) {
	.content-head { flex-direction: column;  margin-bottom: 15px; }
	.content-head { height: 20vh; margin-bottom: 15px; }

	.logo img { 
		/*max-width: 250px;*/
		margin: 10px;
		margin-bottom: 15px;
	}
	.content-footer {
		display: none !important;
	}
	.content-body { height: 65vh; margin-bottom: 15px;}

	.phrase { width: 100%; }

	.main-content {	width: 65vw; margin-bottom: 15px; margin-top: 0% !important;}
	.main-content img { max-width: 90%; margin-bottom: 15px;}

	.menu-left, .menu-right { width: 15vw; margin-bottom: 15px;}

	.signature, .create-logo { 
		background: #b1a718;
		padding: 18px;
		height: 57px;
	}

	.menu-bottom, .create-logo { display: flex; }

	.menu-bottom { justify-content: center; }
	.create-logo { justify-content: flex-end; }
}

@media (max-width: 440px){
	.content-head, .content-footer-mobile { flex-direction: column; margin-bottom: 15px;} /* Changed from .content-footer to .content-footer-mobile */

	.content-head { height: 30vh; margin-bottom: 15px;}
	.content-footer {
		display: none !important;
	}

	.logo img { 
		max-width: 250px;
		margin: 10px;
		margin-bottom: 15px;
	}

	.content-body { height: 45vh; margin-bottom: 15px;}

	.main-content { width: 60vw; margin-bottom: 15px; margin-top: 0% !important;}

	.main-content div:nth-child(2) { margin-top: 0% !important; margin-bottom: 15px;}

	.menu-left, .menu-right { width: 20vw; }

	.content-footer-mobile { 
		height: 25vh;
		align-items: flex-end;
		margin: 0;
		padding: 0;
		padding-top: 10px;
	}

	.menu-bottom p {
		font-size: 1.1rem !important;
		line-height: 1.6rem !important;
        white-space: nowrap !important;
	}

	.signature small {
		font-size: 1.1rem !important;
	}

	.signature, .create-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		height: 33px;
	}
	.block-left-open, .block-right-open { width: 100vw; }
	.right-content div { max-width: 90%; }
}

@media (max-height: 600px){
	.form-group {
	    margin-bottom: 5px;
	}
	.content-footer {
		display: none !important;
	}
}