/* |--↓-↓-↓ Start Header ↓-↓-↓--| */ header { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px; background-color: #bdd4da; /* Light teal */ border-bottom: 3px solid #96baa0; /* Pale green for contrast */ } header .logo { position: absolute; left: 3vw; top: 20px; width: auto; /* Maintains aspect ratio */ height: auto; /* Constrains the height to 80px */ max-width: 20vw; } header .logo img { display: block; width: 180px; height: auto; max-width: 100%; filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038); /* Yellow outline effect */ } header h1 { font-family: 'Georgia', serif; font-size: 2.8rem; color: #014038; /* Dark green for the title */ margin: 10px 0; text-align: center; } header p.tagline { font-family: 'Arial', sans-serif; font-size: 1.4rem; color: #96baa0; /* Pale green for the tagline */ margin: 0; text-align: center; } nav { margin-top: 20px; background-color: #f7f7f7; /* White for navigation background */ padding: 10px 20px; border-radius: 5px; width: 100%; /* Ensures the nav spans the width of the header */ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } button#shopping-cart{ position: absolute; top: 100px; right: 100px; padding: 20px; border-radius: 10px; background-color: #f7f7f7; color: #014038; cursor: pointer; z-index: 5; transition: background-color 0.3s ease, color 0.3s ease; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } button#shopping-cart:hover { background-color: #014038; color: #96baa0; border: solid #f7f7f7; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } nav ul { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; } nav ul li { margin: 0 20px; border-radius: 5px; } .current-page { font-size: 1.4em; font-weight: bold; color: #014038; background-color: #96baa0; border: none; text-decoration: underline; white-space: wrap; text-align: center; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } nav ul li a { font-family: 'Arial', sans-serif; font-size: 1rem; font-weight: bold; border: solid #f7f7f7; color: #014038; text-decoration: underline; padding: 8px 15px; border-radius: 10px; transition: background-color 0.3s ease, color 0.3s ease; } nav ul li a:hover { background-color: #f7f7f7; color: #014038; border: solid #014038; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } /* |--↓-↓-↓ Start Footer ↓-↓-↓--| */ #footer { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } #newsletter-container { display: inline-block; margin-bottom: 10px; text-align: center; } #email-input { display: inline-block; width: 55%; padding: 5px 10px; text-align: center; border-radius: 10px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } button#submit-btn { display: inline-block; padding: 5px 10px; border-radius: 10px; cursor: pointer; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); z-index: 5; } footer div label { font-size: 1.2rem; font-weight: bold; color: #014038 } #newsletter-form { display: inline-block; background-color: #f0c06d; border: solid #f7f7f7; border-radius: 10px; width: 60%; padding: 5px; text-align: center; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #footer-nav ul { position: relative; list-style-type: none; display: inline-block; flex-direction: row; margin-top: 20px; background-color: #f7f7f7; /* White for navigation background */ padding: 5px 20px; border-radius: 5px; width: 100%; /* Ensures the nav spans the width of the header */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds subtle shadow for depth */ } #footer-nav ul li { display: inline-block; align-items: center; padding: 5px 10px; margin: 0 20px; } #footer-nav ul li .current-page { font-size: 1.2em; font-weight: bold; color: #014038; background-color: #96baa0; text-decoration: underline; } #footer-nav ul li a { font-family: 'Arial', sans-serif; font-size: 1rem; font-weight: bold; color: #014038; /* Dark green for the links */ text-decoration: none; padding: 8px 15px; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease; } #footer-nav ul li a:hover { background-color: #f7f7f7; color: #014038; border: solid #014038; border-radius: 10px; } #social-media { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; } #social-media p { text-align: center; } #social-media ul { position: relative; display: inline-block; list-style-type: none; text-align: center; } #social-media ul li { display: inline-block; margin: 0 10px; padding: 0 10px; color: #014038; } #social-media ul li a { font-family: 'Arial', sans-serif; font-size: 1rem; color: #014038; /* Dark green for the links */ text-decoration: none; padding: 8px 15px; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease; } #social-media ul li a:hover { background-color: #f0c06d; color: #f7f7f7; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #copyright { text-align: center; margin-bottom: 20px; } /* Styles for the modal */ .modal { display: none; /* Initially hidden */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color: #fff; padding: 20px; border-radius: 10px; width: 80%; max-width: 600px; text-align: center; } .modal-buttons button { margin: 10px; } .close-modal { position: absolute; top: 10px; right: 20px; font-size: 1.5rem; cursor: pointer; } .perk-item, .testimonial, .featured-item { display: none; /* Hide all by default */ } .perk-item.visible, .testimonial.visible, .featured-item.active { display: block; /* Show visible or active items */ } #featured-images { overflow: hidden; /* Hide anything outside the container */ text-align: center; /* Center align content if necessary */ width: 100%; /* Match the width of the container */ height: auto; /* Let the height adapt to content */ } #featured-images img { display: none; /* Hide all items initially */ max-width: 100%; /* Ensure images are responsive */ height: auto; /* Maintain aspect ratio */ background-color: #96baa0; border: solid #014038; border-radius: 5px; padding: 5px; } .visible { display: block; }