/* my_styles.css */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: #f5f5f5;
}

header {
    background: #ffffff;
    border-bottom: 2px solid #000000;
    padding: 20px 0;
    position: relative;
}

header h1 {
    text-align: center;
    margin: 0;
    font-size: 24px;
    color: #000000;
}

.menu-chkbx {
    display: none;
}

.menu-burger {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.menu-burger .hamburger,
.menu-burger .hamburger::before,
.menu-burger .hamburger::after {
    display: block;
    background-color: #000;
    height: 3px;
    width: 25px;
    transition: all 0.3s;
    position: relative;
}

.menu-burger .hamburger::before,
.menu-burger .hamburger::after {
    content: '';
    position: absolute;
}

.menu-burger .hamburger::before {
    top: -8px;
}

.menu-burger .hamburger::after {
    bottom: -8px;
}

.menu {
    display: none;
}

.menu ul {
    list-style: none;
    padding: 0;
}

.menu ul li a {
    text-decoration: none;
    color: #000000;
    display: block;
    padding: 15px;
    border-bottom: 1px solid #000000;
    transition: background-color 0.3s;
}

.menu ul li a:hover {
    background-color: #eaeaea;
}

.menu-chkbx:checked ~ .menu {
    display: block;
}

section {
    padding: 20px;
    text-align: justify;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.image-grid span {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-grid .four-square {
    max-width: 100%;
    height: auto;
}

footer {
    background: #000000;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
/* my_styles.css */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header, footer {
    text-align: center;
    padding: 20px;
}

header {
    background: #ffffff;
    border-bottom: 2px solid #000000;
}

footer {
    background: #000000;
    color: #ffffff;
    position: sticky;
    bottom: 0;
}

.main-content {
    flex-grow: 1;
    display: flex;
    margin: 20px;
    align-items: flex-start;
}

.text-content {
    flex: 1;
    padding-right: 20px;
}

.link-images {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-self: start;
}

.four-square {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.four-square:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }

    .text-content {
        padding-right: 0;
    }

    .link-images {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
#calorie-calculator {
    margin: 20px;
    padding: 20px;
    border: 1px solid #000;
    background-color: #fff;
}

#calorie-calculator h2 {
    margin-top: 0;
}

#calorie-form label,
#calorie-form input,
#calorie-form button {
    display: block;
    margin: 10px 0;
}

#calorie-form input,
#calorie-form button {
    padding: 10px;
}

#calorie-form button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#calorie-form button:hover {
    background-color: #45a049;
}

#total-calories {
    margin-top: 20px;
}

main {
    padding: 2rem;
    flex: 1;
}

article {
    background-color: white;
    margin-bottom: 2rem;
    padding: 1rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

article h2 {
    color: #333;
}

.chain-profile {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chain-profile h2 {
    color: #333;
}

.chain-profile h3 {
    color: #555;
}

.chain-profile ul {
    list-style-type: none;
    padding: 0;
}

.chain-profile ul li {
    background: #f8f8f8;
    margin: 5px 0;
    padding: 10px;
    border-left: 4px solid #009688;
}

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    width: 100%; /* Ensures full width for smaller devices */
    padding: 8px;
    margin: 10px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

button[type="submit"] {
    width: 100%;
    background-color: #51fa3b;
    color: rgb(254, 252, 252);
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #51fa3b;
}

.form

article img {
    height: 50px; /* Adjust size as needed */
    float: left;
    margin-right: 10px; /* Provides spacing between the icon and the text */
}

article {
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid #ccc; /* Adds a subtle line between articles */
}

article a {
    color: #007BFF; /* A bright blue for links, ensuring they stand out */
    text-decoration: none; /* Removes underline */
}

article a:hover {
    text-decoration: underline; /* Adds underline on hover for better interaction feedback */
}

.team-photo {
    width:200px
}

.team-container {
    display: flex;
    align-items: center; /* Align items vertically in the center */
    justify-content: start; /* Align content to the start of the flex container */
    gap: 20px; /* Spacing between the image and the text */
}

.team-photo {
    width: 250px; /* Adjust width as necessary */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50%; /* Optional: makes the photo circular */
}

.team-description {
    flex: 1; /* Takes up the remaining space */
}

.section-divider {
    border: 0;
    height: 2px;
    background: #333; /* Dark grey line */
    margin: 20px 0; /* Adds spacing above and below the divider */
}

.content-container {
    display: flex;
    justify-content: space-between; /* Ensure elements are spaced out */
    align-items: start; /* Align items at the top */
    padding: 20px;
}

.text-section {
    flex: 1 0 50%; /* Flex-grow, flex-shrink, flex-basis at 50% of the parent */
    background-color: #fff; /* Sets background color to white */
    padding: 20px; /* Adds space inside the box */
    border-radius: 15px; /* Rounds the corners of the box */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow around the box */
    font-family: 'Roboto', sans-serif; /* Uses Roboto font */
    text-indent: 20px; /* Indents the first line of each paragraph */
    margin-right: 20px; /* Adds spacing between this section and the image grid */
    max-width: 50%; /* Ensures it doesn't grow beyond 50% */
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates 2 columns, each taking 1 fraction of the space */
    grid-gap: 10px; /* Space between images */
    flex: 1 0 50%; /* Flex-grow, flex-shrink, flex-basis at 50% of the parent */
    max-width: 50%; /* Maximum width */
}

.four-square {
    width: 100%; /* Images take full width of the grid column */
    height: auto; /* Maintain aspect ratio */
}

.image-grid a img {
    width: 100%; /* Makes images fill their containers */
    height: auto; /* Keeps image aspect ratio */
    border-radius: 5px; /* Optional: rounds corners of images */
}

.text-section {
    flex: 1 1 50%; /* Adjusts the box size relative to its container */
    background-color: #fff; /* Sets background color to white */
    padding: 20px; /* Adds space inside the box */
    border-radius: 15px; /* Rounds the corners of the box */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow around the box */
    font-family: 'Roboto', sans-serif; /* Uses Roboto font */
    text-indent: 20px; /* Indents the first line of each paragraph */
    margin-right: 20px; /* Adds spacing between this section and the image grid */
}

/* Add this to ensure the whole paragraph is indented if desired */
.text-section p {
    text-indent: 20px;
}

/* Adjust the position of the menu to appear directly under the hamburger icon */
.menu {
    display: none; /* Keep the menu hidden by default */
    position: absolute;
    top: 60px; /* Adjust this value based on the actual height of your header or hamburger icon */
    right: 0; /* Keeps the menu aligned to the right, under the hamburger icon */
    background-color: white; /* Background color of the menu */
    width: 200px; /* Adjust the width as necessary */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Optional shadow for better visibility */
    z-index: 1000; /* Ensures the menu is above other content */
}

/* Additional styling for list and links */
.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: black; /* Adjust color as needed */
    border-bottom: 1px solid #ddd; /* Separator between items */
}

.menu li a:hover {
    background-color: #f5f5f5; /* Hover effect for links */
}

header h1 {
    font-family: 'Luckiest Guy', cursive; /* Applying the new font */
    color: #fefe48; /* color */
    text-align: center; /* Centering the title */
    font-size: 5vw; /* Responsive font size based on viewport width */
}

header {
    background-color: #fe4a4a; /* Sets the background color to red */
    padding: 20px 0; /* Adjust padding as needed for your design */
    text-align: center; /* Ensures content inside is centered */
    width: 100%; /* Ensures the header extends full width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow for depth */
}

body {
    background-color: rgba(159, 154, 154, 0.653);
    background-image: linear-gradient(45deg, rgba(255, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(255, 0, 0, 0.4) 75%),
                      linear-gradient(45deg, rgba(255, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(255, 0, 0, 0.4) 75%);
    background-size: 60px 60px; /* Size of the checkers */
    background-position: 0 0, 30px 30px; /* Positioning of the checkers */
}

/* Style for the "Contact Us!" heading */
.centered-content h3 {
    font-size: 36px; /* Increase font size */
    color: #f9f8f8; /* Change color to a bold red or choose another prominent color */
    text-shadow: 1px 1px 2px black; /* Optional: Adds shadow for better readability */
}

/* General styles for labels to increase readability */
.centered-content label {
    font-size: 18px; /* Larger font size for better visibility */
    color: #ffffff; /* White color for better contrast on a busy background */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    padding: 5px; /* Adds some padding around the text */
    border-radius: 5px; /* Optionally rounds the corners */
    display: block; /* Makes each label and input appear on a new line */
    margin-top: 10px; /* Adds space above each label for clearer separation */
}

/* Additional style to enhance form inputs and text area */
.centered-content input, .centered-content select, .centered-content textarea {
    width: 95%; /* Makes form inputs fill out the container */
    padding: 10px; /* Adds padding inside the inputs for better readability */
    border: 1px solid #ccc; /* Standard light grey border */
    border-radius: 5px; /* Rounds the corners of the form inputs */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle inner shadow for depth */
}

/* General styling for all sections */
section.about-section {
    background-color: #ffffff; /* White background */
    padding: 20px; /* Padding around the content */
    margin: 20px auto; /* Centering the section with some margin around */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for a slight 3D effect */
    border-radius: 8px; /* Rounded corners for a smoother look */
    max-width: 800px; /* Restricts the maximum width for better readability */
}

/* Enhancing text readability */
section.about-section h2, section.about-section p {
    color: #333; /* Darker text color for better contrast */
    margin-bottom: 10px; /* Adds space between elements */
}

/* Specific styling for the team section to handle images and longer texts */
section.team-container {
    padding: 20px;
    background-color: #ffffff; /* Maintaining consistency with other sections */
    display: flex; /* Using flexbox to layout image and text side by side */
    align-items: center; /* Align items vertically */
    flex-wrap: wrap; /* Allows items to wrap in smaller screens */
}

.team-photo {
    max-width: 200px; /* Limiting photo size */
    margin-right: 20px; /* Space between photo and text */
    border-radius: 50%; /* Circular image */
}

.team-description {
    flex: 1; /* Takes up remaining space */
    padding: 10px; /* Padding inside the description box */
}

footer {
    text-align: center; /* Center aligns the footer content */
    padding: 10px 0; /* Padding top and bottom */
    background-color: #030303; /* Optional: Red background for the footer */
    color: #ffffff; /* White text for the footer */
}

.team-description p {
    text-indent: 35px; /* Indents the first line of the paragraph */
}

/* Basic reset for spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, readable font */
    line-height: 1.6; /* Spacing for readability */
    color: #333; /* Dark grey for text */
    background-color: #f4f4f4; /* Light grey background */
}

main {
    max-width: 1200px; /* Maximum width of the content */
    margin: 20px auto; /* Centering main in the middle of the screen */
    padding: 20px; /* Padding around the content inside main */
}

article {
    background-color: #fff; /* White background for articles */
    margin-bottom: 20px; /* Space between articles */
    padding: 20px; /* Padding inside articles */
    border-left: 5px solid rgb(254, 254, 48); /* Red accent bar on the left */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

h2 {
    color: #030303; /* Red color for headings */
    margin-bottom: 10px; /* Space after headings */
}

p {
    margin-bottom: 10px; /* Space after paragraphs */
}

/* Styling for the centered title */
.centered-title {
    text-align: center;
    font-size: 36px;
    margin-top: 1vh; /* Minimal top margin for aesthetics */
    font-weight: bold;
    color: #040404;
}

/* Modify the centered box to be at the top rather than centered in the viewport */
.centered-box {
    position: relative; /* Relative to its normal position */
    top: 0; /* At the top of its container */
    left: 0; /* Aligned to the left */
    right: 0; /* Aligned to the right */
    margin: 20px auto; /* Center horizontally with automatic side margins */
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
    width: 80%; /* Width set to 80% of its parent */
}

/* Styling the link */
.info-link {
    font-weight: bold;
    text-decoration: none;
    color: black;
}

/* Collapsible sections styling */
.collapsible {
    background-color: #ffcc00;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
}
.active, .collapsible:hover {
    background-color: #f1c40f;
}

.content {
    padding: 15px;
    display: none;
    overflow: hidden;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.construction-disclaimer {
    background-color: #f6fa01;
    border: 6px dashed #060606; /* black dashed border */
    padding: 20px;
    margin: 20px auto;
    max-width: 1200px;
    text-align: center;
}

.construction-disclaimer p {
    margin: 0;
    font-size: 18px;
}

.footer-tape {
    background-repeat: repeat-x;
    height: 20px; /* Adjust height as needed */
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* This makes the container take the full height of the viewport */
}