/* Responsive Adjustments ------------------------------------------------------------------- This file contains all the @media queries to adjust the layout and styling for different screen sizes (tablets, mobiles). It should be linked in the of your HTML files AFTER style.css and product.css. ------------------------------------------------------------------- */ /* Medium Devices (Tablets, etc. - up to 992px) -------------------------------------------------- */ @media (max-width: 992px) { html { font-size: 15px; } /* Adjust base font size */ h1 { font-size: 2.5rem; } #hero h1 { font-size: 3rem; } .product-page-hero h1 { font-size: 2.6rem; } /* From product.css context */ h2 { font-size: 2rem; } .section-title h2 { font-size: 2.2rem; } #about .container { flex-direction: column; text-align: center; } #about .about-content .section-title { text-align: center; /* Center title on smaller screens */ } #about .about-content .section-title::after { margin-left: auto; /* Center line */ margin-right: auto; } #about .about-image { margin-top: 30px; max-width: 80%; } .products-grid, .services-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust minmax for tablets */ } /* Responsive adjustments for product-specific elements from product.css context */ .product-hero-bg { /* From product.css context */ height: auto; min-height: 300px; /* Adjust min-height for mobile */ padding: 60px 0; /* Add padding for content */ } .product-page-hero h1 { /* From product.css context */ font-size: 2.2rem; } .product-page-hero p { /* From product.css context */ font-size: 1rem; } .product-description { /* From product.css context */ padding: 0 10px; /* Add some horizontal padding on mobile */ } } /* Small Devices (Portrait Tablets, Large Phones, etc. - up to 768px) -------------------------------------------------- */ @media (max-width: 768px) { .main-header { padding: 15px 0; /* Slightly reduce header padding */ } .main-nav { position: fixed; top: 0; /* Align with top of viewport */ right: -100%; /* Start fully off-screen */ width: 280px; height: 100vh; background-color: var(--secondary-bg); /* Solid background */ padding-top: 80px; /* Space for close button or logo if moved */ transition: right 0.35s ease-in-out; /* Smoother transition */ box-shadow: -5px 0 15px rgba(0,0,0,0.2); z-index: 999; /* Below header backdrop but above content */ overflow-y: auto; /* Allow scrolling if menu is long */ } .main-nav.active { right: 0; } .main-nav ul { flex-direction: column; align-items: flex-start; /* Align items to the left */ padding: 0 20px; /* Add some padding */ } .main-nav ul li { margin: 0; width: 100%; } .main-nav ul li a { display: block; padding: 15px 10px; /* Adjust padding */ text-align: left; /* Align text left */ border-bottom: 1px solid var(--border-color); font-size: 1rem; } .main-nav ul li:last-child a { border-bottom: none; } .main-nav ul li a::after { display: none; /* Remove underline for mobile nav items */ } .main-nav ul li a:hover, .main-nav ul li a.active { background-color: var(--tertiary-bg); color: var(--accent-color); /* Ensure active color is prominent */ } .menu-toggle { display: block; z-index: 1001; /* Above nav overlay */ position: relative; /* To ensure it's clickable */ } #hero { padding-top: 70px; /* Adjust for smaller header */ height: auto; /* Allow content to define height */ min-height: calc(100vh - 70px); /* Ensure it still feels full-screen */ padding-bottom: 60px; /* Add some bottom padding */ } #hero h1 { font-size: 2.5rem; } #hero p { font-size: 1rem; } .services-grid, .products-grid { grid-template-columns: 1fr; /* Stack cards on smaller screens */ } .contact-form, .waitlist-form { padding: 30px; } .newsletter-form { flex-direction: column; /* Stack input and button */ gap: 10px; } .newsletter-form .btn { width: 100%; /* Full width button */ } .philosophy-item { padding: 15px; gap: 15px; } .philosophy-item .icon { font-size: 1.5rem; width: 30px; } /* Responsive adjustments for product-specific elements from product.css context */ .fund-status-highlight { /* From product.css context */ padding: 15px 20px; } .brochure-download-section { /* From product.css context */ padding: 20px; } } /* Extra Small Devices (Phones - up to 480px) -------------------------------------------------- */ @media (max-width: 480px) { html { font-size: 14px; } .container { width: 95%; padding: 0 10px; } h1 { font-size: 2rem; } #hero h1 { font-size: 2.2rem; } .product-page-hero h1 { font-size: 2rem; } /* From product.css context */ h2 { font-size: 1.8rem; } .section-title h2 { font-size: 2rem; } .btn { padding: 10px 20px; font-size: 0.9rem;} .main-header { padding: 10px 0; } #hero { padding-top: 60px; min-height: calc(100vh - 60px); } .contact-form, .waitlist-form { padding: 20px; } .form-group input[type="text"], .form-group input[type="email"], .form-group textarea, .form-group select { padding: 10px 12px; font-size: 0.95rem; } .form-group select { background-position: right 10px center; padding-right: 30px; } }