body { margin: 0; font-family: Arial, sans-serif; background-color: #000; color: #fff; } /* Header Styling */ header { display: flex; flex-direction: column; /* Stack logo and buttons vertically */ align-items: left; /* Center the content horizontally */ width: 100%; padding: 0; /* Remove padding from the header */ margin: 0; /* Remove margin from the header */ } /* Logo Section */ header .logo { margin: 0; /* Remove margin from the logo container */ padding: 0; /* Remove any padding */ } header .logo img { height: 200px; /* Adjust the logo height */ width: 30%; /* Maintain aspect ratio */ margin: 0; /* Remove margin around the logo */ padding: 0; /* Remove padding */ display: block; /* Ensures no extra space below the image */ } /* Navigation Section */ header nav { display: flex; justify-content: space-between; /* Spread buttons evenly across the width */ gap: 0; /* No space between buttons */ width: 100%; /* Make the nav take the full width of the screen */ max-width: 1200px; /* Optional: Add a max width for better visuals on large screens */ padding: 0; /* Remove any padding around nav */ margin: 0; /* Remove any margin around nav */ } header nav a { display: flex; justify-content: center; align-items: center; flex-grow: 1; /* Ensures buttons take equal space */ text-decoration: none; color: #fff; font-size: 16px; font-weight: bold; text-align: center; border-radius: 0; /* No rounded corners */ transition: all 0.3s ease; /* Smooth hover effect */ padding: 10px 20px; /* Add padding inside the buttons */ margin: 0; /* Remove any margin between buttons */ } header nav a:hover { background-color: #FFD700; /* Slightly less transparent on hover */ color: #070707; /* Change text color to yellow on hover */ } /* Gallery Section */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); /* Four images per row */ gap: 10px; /* Space between images */ padding: 20px; } .gallery .image { overflow: hidden; /* Ensures content doesn't overflow the container */ display: flex; justify-content: center; align-items: center; background-color: #222; /* Optional: background color behind the image */ } .gallery .image img { width: 100%; /* Full width of the container */ height: 150px; /* Fixed height for all images */ border-radius: 5px; /* Optional: rounded corners */ } /* Footer Styling */ footer { text-align: center; padding: 20px; background-color: #333; color: #fff; } footer a { color: #FFD700; text-decoration: none; } /* Main Container */ .container { width: 100%; /* Ensure the container is responsive */ max-width: 800px; /* Set a maximum width for the site content */ margin: 0 auto; /* Center the container horizontally */ padding: 0 10px; /* Add 10px padding to the left and right */ } /* Extra Container Styling */ .extra-container { background-color: #fff; /* White background */ padding: 20px; /* Space inside the container */ margin-top: 20px; /* Space above the container */ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow for the container */ position: relative; /* For positioning elements */ } /* Title Box Styling */ .title-box { display: inline-block; /* Adjust the box to fit the title's width */ background-color: #000000; /* Background color for the title box */ padding: 5px 10px; /* Add padding around the title */ border-radius: 0px; /* Optional: Rounded corners */ margin-bottom: 10px; /* Space below the title box */ } /* Title Styling */ .extra-title { font-size: 24px; /* Title font size */ color: #ffffff; /* Title text color */ margin: 0; /* Remove margins */ text-align: left; /* Align the text inside the box */ } /* Title Stripe Styling */ .title-stripe { width: 100%; /* Full width of the container */ height: 4px; /* Height of the stripe */ background-color: #000000; /* Gold color for the stripe */ margin-bottom: 20px; /* Space below the stripe */ } /* Images Container Styling */ .extra-images { display: flex; justify-content: center; /* Center the images horizontally */ gap: 10px; /* Space between images */ } /* Individual Image Styling */ .extra-images a img { width: 80%; /* Make images take 30% of the container's width */ border-radius: 5px; /* Slightly round the corners */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */ box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.1); /* Add shadow below the images */ } /* Hover Effect for Images */ .extra-images a img:hover { transform: scale(1.05); /* Slightly enlarge the image */ box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */ } /* Styling for the Logo Below the New Box */ .logo-below { display: flex; justify-content: center; /* Center the logo horizontally */ align-items: center; /* Center the logo vertically if needed */ margin-top: 20px; /* Add space above the logo */ } .logo-below img { width: var(--logo-width, 250px); /* Adjustable width (default: 150px) */ height: auto; /* Maintain aspect ratio */ max-width: 100%; /* Ensure it doesn’t overflow the container */ transition: transform 0.3s ease; /* Optional hover effect */ } .logo-below img:hover { transform: scale(1.05); /* Slightly enlarge the logo on hover */ } /* Customizable Text Styling */ .custom-text { text-align: center; /* Center-align the text */ margin-top: 20px; /* Space above the text */ padding: 10px; /* Add padding for spacing */ } .custom-text p { font-size: var(--text-size, 40px); /* Adjustable font size (default: 16px) */ color: #FFD700; /* Text color */ line-height: 1.5; /* Line height for better readability */ font-weight: 600; /* Normal font weight */ } /* Customizable Text Styling */ .custom-text2 { text-align: center; /* Center-align the text */ margin-top: 20px; /* Space above the text */ padding: 10px; /* Add padding for spacing */ } .custom-text2 p { font-size: var(--text-size, 30px); /* Adjustable font size (default: 16px) */ color: #FFD700; /* Text color */ line-height: 0.5; /* Line height for better readability */ font-weight: 600; /* Normal font weight */ } /* Full-Width Image Container */ .full-width-image-container { width: 100%; /* Full width of the page */ margin: 20px 0; /* Add some spacing above and below the container */ overflow: hidden; /* Ensure no overflowing content */ } .full-width-image-container img { width: 100%; /* Make the image fill the entire container */ height: auto; /* Maintain the aspect ratio */ display: block; /* Remove any extra space below the image */ } /* Responsive Adjustments */ @media (max-width: 1024px) { header .logo img { width: 60%; /* Reduce logo size on tablets */ } .gallery { grid-template-columns: repeat(3, 1fr); /* Maintain layout but reduce columns */ } .extra-images a img { width: 30%; /* Maintain layout for tablets */ } .custom-text p { font-size: 0.5em; /* Slightly smaller text */ } .custom-text2 p { font-size: 0.7em; /* Slightly smaller text */ } } @media (max-width: 768px) { header .logo img { width: 70%; /* Adjust logo for smaller devices */ } header nav { flex-wrap: wrap; /* Allow buttons to wrap */ gap: 5px; } header nav a { flex-grow: unset; /* Allow buttons to resize naturally */ width: 48%; /* Two buttons per row */ } .gallery { grid-template-columns: repeat(2, 1fr); /* Reduce columns for smaller screens */ } .extra-images a img { width: 45%; /* Resize images for smaller devices */ } .custom-text p { font-size: 0.5em; /* Adjust font size */ } .custom-text2 p { font-size: 0.7em; /* Slightly smaller text */ } } @media (max-width: 480px) { header .logo img { width: 80%; /* Smaller logo for mobile */ } .gallery { grid-template-columns: repeat(1, 1fr); /* One image per row */ } header nav { flex-direction: column; /* Stack navigation items vertically */ } header nav a { width: 100%; /* Full-width buttons */ } .extra-images a img { width: 100%; /* Full-width images for mobile */ } .custom-text p { font-size: 0.5em; /* Smaller font size for mobile */ } .custom-text2 p { font-size: 0.7em; /* Slightly smaller text */ } }