EVOLUTION-NINJA

Edit File: landingPage.css

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font globally */
  }

/* Orange Line */
  .top-line {
    width: 100%;
    height: 10px;
    background-color: orange;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }

/* White Background Section */
  .top-section {
    width: 100%;
    height: 166px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

/* Logo inside the white section */
  .top-section img {
    max-height: 100px;
    animation: zoomInOut 4s infinite; /* Animation for zoom-in and zoom-out */
  }

@keyframes zoomInOut {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1); /* Zoom in */
    }
    100% {
      transform: scale(1); /* Zoom out */
    }
  }

/* Navbar Container */
.navbar-container {
    width: 100%;
    position: relative; /* Ensure relative positioning */
    display: flex;
    justify-content: center;
    z-index: 3;
}

.navbar {
    width: 1008px;
    height: 58px;
    background-color: #111B2F;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: absolute;
    top: -28px; /* Initially positioned at 137px from the top */
    z-index: 1000;
}

/* Fixed navbar when it reaches the top */
.fixed-navbar {
    position: fixed !important;
    top: 0 !important;
    width: 100%;
    left: 0;
    right: 0;
    border-radius: 0; /* Remove border radius when fixed */
}
  
.navbar .menu-toggle{
  display: none;
}
  /* Navbar Link Styling */
  .navbar a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 16px;
    position: relative;
    font-weight: 600; /* Semi-bold for navbar links */
    transition: transform 0.3s ease, color 0.3s ease;
  }

/* Hover Zoom Effect */
  .navbar a:hover {
    transform: scale(1.1); /* Zooms in */
    color: #00ff00; /* Changes color */
  }

/* Green Underline Animation */
  .navbar a:not(.login-button)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background-color: #00ff00;
    transition: width 0.3s ease;
  }

.navbar a:not(.login-button):hover::after {
    width: 100%; /* Green underline expands fully */
  }

.navbar .login-button {
    padding: 8px 20px;
    background-color: #2E68FD;
    color: white;
    border: none;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease, transform 0.3s ease;
  }

/* Hover Zoom Effect for Login Button */
  .navbar .login-button:hover {
    transform: scale(1.1);
    background-color: #0056E0;
  }

/* Background Image Section */
  .background-image {
    width: 100%;
    height: 591px;
    background-image: url('public/assets/images/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
  }

.background-text {
    position: absolute;
    left: 70px;
    top: 60px;
    color: white;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  }

.background-text h2 {
    margin: 0;
  }

/* New h3 text below background image and centered (10px below) */
  .background-h3 {
    position: relative;
    top: 10px; /* Adjusted to 10px */
    text-align: center;
    color: #000000;
    font-size: 24px;
    font-weight: 600;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    margin: 0 auto; /* Ensures h3 is centered */
    width: 100%; /* Ensures the block takes the full width */
  }

/* Underline Image for h3 */
  .background-h3::after {
    content: "";
    display: block;
    width: 60%; /* Set to 60% of the container width */
    height: 2px;
    background-image: url('img/underline.png'); /* Image underline */
    background-size: cover;
    background-repeat: no-repeat;
    margin: 10px auto; /* Centered underline */
  }

/* Paragraph Section */
  .paragraph-container {
    text-align: center;
    margin-top: 15px;
    padding: 0 20px;
   
  }

.paragraph-container p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
   margin:5px 280px;
    
  }
    
  /* Mobile Responsive Styles */
  @media (max-width: 768px) {
    .navbar-container {
      justify-content: flex-start;
    }

.navbar {
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      padding: 10px;
      height: auto;
      overflow: hidden;
      transition: all 0.5s ease-in-out;
    }

.navbar a {
      display: none;
    }

.navbar .login-button {
      display: none;
    }

.navbar .menu-toggle {
      display: block;
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      background-color: #333;
      transition: transform 0.3s ease;
    }

.navbar .menu-toggle:hover {
      transform: rotate(90deg);
    }

.navbar.show a,
    .navbar.show .login-button {
      display: block;
    }

.background-image {
      height: 300px;
    }

.background-text {
      font-size: 24px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 69px;
      text-align: center;
    }

.background-h3 {
      font-size: 18px;
      top: 10px; /* 10px gap from the background image */
      left: 50%;
      transform: translateX(-50%);
    }

.background-h3::after {
      width: 70%; /* Adjusted for mobile view */
    }

.paragraph-container p {
      font-size: 16px; /* Smaller text size for mobile */
      line-height: 1.5;
      margin: 15px 0;
    }
  }

/* Underline Image */
  .underline-image {
    display: block;
    width: 80%; /* Increase width to make it larger */
    max-width: 1157px; /* Maximum width */
    height: auto; /* Maintain the aspect ratio */
    margin: 20px auto; /* Center the image horizontally */
  }
  /* Image and Vehicle Scheme Section */
/* General Layout */
body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.image-left-right-container {
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Vertically align content */
  margin-top: 20px;
  width: 100%;
  flex-wrap: wrap;
  padding: 0 20px; /* Add padding for responsiveness */
  box-sizing: border-box; /* Ensures padding doesn't cause overflow */
}

.left-image {
  width: 337px;  /* Fixed width */
  height: 268px; /* Fixed height */
  margin-right: 20px; /* Spacing between image and text */
}

.right-content {
  width: 50%; /* Right content takes 50% of the container width */
  text-align: left;
  margin-left:30px;
}

.right-content h4 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}

.right-content p {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
}

.right-content button {
  padding: 10px 20px;
  background-color: #2E68FD;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.right-content button:hover {
  background-color: #0056E0;
}

/* Tablet View (1024px to 600px) */
@media (max-width: 1024px) {
  .image-left-right-container {
    flex-direction: row; /* Keep items in a row layout for tablets */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center vertically */
  }

.left-image {
    width: 337px;  /* Keep image size fixed */
    height: 268px; /* Fixed height */
    margin-right: 20px; /* Space between image and text */
  }

.right-content {
    width: 50%; /* Keep content width at 50% of the container */
    text-align: left;
  }

.right-content h4 {
    font-size: 24px; /* Same size for tablet */
  }

.right-content p {
    font-size: 16px; /* Same paragraph font size for tablet */
  }

.right-content button {
    font-size: 16px;
    padding: 10px 20px; /* Button size */
  }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .image-left-right-container {
    flex-direction: column; /* Stack content vertically on small screens */
    align-items: center; /* Center horizontally */
    padding: 0 10px; /* Add padding to ensure proper space */
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
  }

.left-image {
    width: 100%; /* Full width image */
    height: auto; 
    max-width: 377px;/* Adjust height proportionally */
    margin-bottom: 15px; /* Margin between image and text */
  }

.right-content {
    width: 100%; /* Content takes full width */
    text-align: center; /* Center content */
    box-sizing: border-box; /* Ensure content doesn't overflow */
  }

.right-content h4 {
    font-size: 18px; /* Smaller heading font size */
  }

.right-content p {
    font-size: 14px; /* Smaller paragraph font size */
  }

.right-content button {
    font-size: 14px;
    padding: 10px 18px;
  }
}

@media (max-width: 480px) {
  /* Further adjustments for very small screens */
  .image-left-right-container {
    padding: 0 10px; /* Reduce padding on very small screens */
  }

.right-content h4 {
    font-size: 16px; /* Even smaller heading */
  }

.right-content p {
    font-size: 12px; /* Smaller paragraph font size */
  }

.right-content button {
    font-size: 12px; /* Adjust button font size */
    padding: 8px 15px; /* Adjust padding */
  }
}
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}

/* Container for the content */
.gold-scheme-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  padding: 20px;
}

/* Gold Scheme Content */
.gold-scheme-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
}

/* Left Content (Text) */
.gold-scheme-text {
  width: 93%;
  padding-right: 20px;
  text-align: left;
}

.gold-scheme-text h4 {
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin-bottom: 15px;
}

.gold-scheme-text p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.gold-scheme-text button {
  padding: 10px 20px;
  background-color: #2E68FD;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.gold-scheme-text button:hover {
  background-color: #0056E0;
}

/* Right Image (Gold Scheme) */
.gold-scheme-image {
  width: 50%;
  text-align: center;
}

.gold-scheme-image img {
  width: 100%;
  max-width: 337px;
  height: 268px;
  object-fit: cover;
}

/* Mobile and Tablet Responsive Styles */
@media (max-width: 1024px) {
  .gold-scheme-content {
        flex-direction:column;
        text-align: center;
        display: contents;
  }
  .gold-scheme-text, .gold-scheme-image {
    width: 100%;
    text-align: center;
  }

.gold-scheme-text button {
    padding: 8px 15px;
  }

.gold-scheme-text h4 {
    font-size: 20px;
  }

.gold-scheme-text p {
        font-size: 14px;
        text-align: left;
        margin-left: 85px;
      }
}

/* Mobile View */
@media (max-width: 768px) {
  .gold-scheme-content {
  flex-direction: column-reverse;  /* Ensures image is on top */

}

.gold-scheme-text h4 {
    font-size: 18px;
  }

.gold-scheme-text p {
    font-size: 14px;
  }

.gold-scheme-text button {
    padding: 8px 15px;
  }
}

/* About Us Section */
.about-us {
text-align: center; /* Center the content */
margin-top: 40px;
font-size: 25px; /* Add some space from the previous content */
}
.underline-image1{
display: block;
    width: 80%; /* Increase width to make it larger */
    max-width: 400px; /* Maximum width */
    height: 2px; /* Maintain the aspect ratio */
    margin: 5px auto;
    
}
/* About Us Paragraph */
.about-us-paragraph {
width: 1121px; /* Set the width of the paragraph */
height: 190px; /* Set the height of the paragraph container */
background-color: #EFFDFD; /* Set the background color */
padding: 20px;
margin: 20px auto; /* Center the paragraph and add space around it */
display: flex;
justify-content: center;
align-items: center;
}

.about-us-paragraph p {
font-size: 16px; /* Adjust the font size */
line-height: 2.5; /* Line spacing for readability */
color: #333; /* Text color */
text-align: center; /* Center align the text */
}

/* Mobile Responsive Layout */
@media (max-width: 768px) {
/* Adjust paragraph width for mobile */
.about-us-paragraph {
  width: 90%; /* Make it responsive with 90% width */
  height: auto; /* Remove fixed height for mobile */
  padding: 15px;
}

/* Adjust text font size on mobile */
.about-us-paragraph p {
  font-size: 14px; /* Slightly smaller font for mobile */
}
}
/* Container for Boxes */
.boxes-container {
    display: flex;
    justify-content: center; /* Centers the boxes horizontally */
    gap: 20px; /* Space between the boxes */
    flex-wrap: wrap; /* Allow the boxes to wrap to the next line on smaller screens */
    width: 100%; /* Ensure the container takes full width */
    margin-top: 50px; /* Adjust the top margin for spacing */
  }

/* Box */
  .box {
    width: 329px; /* Box width */
    height: 116px; /* Box height */
    background-color: #f1f1f1; /* Background color */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align content to the left */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease;/* Box shadow for depth */
  }
  .box:hover{
    transform: scale(1.05);
  }

/* Box Content */
  .box-content {
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: flex-start; /* Align content to the left */
    gap: 15px; /* Space between the image and text */
    width: 100%; /* Take full width of the box */
  }

/* Box Image */
  .box-image {
    width: 40px; /* Adjust image width */
    height: 40px; /* Adjust image height */
    margin-right: 15px; /* Space between the image and text */
    flex-shrink: 0; /* Prevent image from shrinking */
  }

/* Mobile Responsive Layout */
  @media (max-width: 768px) {
    /* Adjust Box width and height for mobile */
    .box {
      width: 280px; /* Smaller width for mobile */
      height: 100px; /* Adjust height for mobile */
    }

/* Boxes container should be stacked vertically on mobile */
    .boxes-container {
      flex-direction: column; /* Stack boxes vertically */
      align-items: center; /* Center the boxes vertically */
    }

/* Adjust image size for mobile */
    .box-image {
      width: 30px; /* Smaller image on mobile */
      height: 30px;
    }

/* Box Content */
    .box-content {
      gap: 10px; /* Reduce space between image and text */
    }
  }
/* Lucky Winner Section */
.lucky-winner-section {
text-align: center; /* Center text */
margin-top: 20px; /* Space above */
}

.lucky-winner-section h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}

.lucky-winner-section p {
    font-size: 19px;
    line-height: 1.6;
    /* color: #333; */
    max-width: 900px;
    margin: 30px auto;
}

/* Image Section */
/* Default Desktop Layout */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.main-img img {
  width: 100%;
  max-width: 821px;
  height: auto;
}

.side-img {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.side-img img {
  width: 100%;
  max-width: 396px;
  height: auto;
}

/* Responsive Design */
@media (min-width: 769px) {
  .side-img {
    margin-top: -20px; /* Moves the side images slightly upward */
  }
}

@media (max-width: 768px) and (min-width: 481px) {
  .main-img img {
    max-width: 100%;
  }

.side-img {
    flex-direction: row; /* Display images side by side */
    justify-content: center; /* Center the images */
    gap: 20px;
  }

.side-img img {
    max-width: 45%; /* Adjust the width to fit side by side */
  }
}

@media (max-width: 480px) {
  .container {
    flex-direction: column;
    gap: 10px;
  }

.side-img img {
    margin-top: 10px;
  }
}
/* PC View (1024px and above) */
@media (min-width: 1025px) {
.gallery-section {
         text-align: center;
        margin-top: 30px !important;
        justify-content: center;
        display: contents;
}

.gallery-section h3 {
  font-size: 32px; /* Adjust font size for PC */
  margin-bottom: 10px;
}

.gallery-section p {
        font-size: 18px;
        margin-bottom: 20px;
        margin-top:30px;
        text-align: center;
        width: 67%;
        justify-content: center;
        display: flex; 
    }
    
.gallery-images {
  display: flex; /* Arrange images in a row */
  justify-content: center; /* Center images horizontally */
  gap: 20px; /* Space between the images */
}

.gallery-images img {
  width: 396px; /* Fixed width for images */
  height: 225px; /* Fixed height for images */
}
}

/* Tablet View (768px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.gallery-section {
  text-align: center; /* Center align text */
  margin-top: 30px; /* Add space above the gallery section */
}

.gallery-section h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.gallery-section p {
  font-size: 16px; /* Adjust font size for tablet */
  margin-bottom: 20px;
}

.gallery-images {
  display: flex; /* Arrange images in a row */
  justify-content: center; /* Center images horizontally */
  gap: 20px; /* Space between the images */
}

.gallery-images img {
  width: 396px; /* Fixed width for images */
  height: 225px; /* Fixed height for images */
}
}

/* Mobile View (up to 768px) */
@media (max-width: 768px) {
.image-section {
  display: block; /* Stack images vertically */
  align-items: center; /* Center align images */
  width: 100%; /* Full width for mobile */
}

/* Left Image */
.left-image {
  width: 100%; /* Full width */
  margin-bottom: 10px; /* Small gap between left and right images */
}

.left-image img {
  width: 100%; /* Image takes full width */
  height: auto; /* Maintain aspect ratio */
}

/* Right Images */
.right-images {
  width: 100%; /* Full width for mobile */
  margin-top: 10px; /* Small gap between the left image and right images */
}

.right-images img {
  width: 100%; /* Each right image takes full width */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 10px; /* Space between the right images */
}

/* Gallery Section */
.gallery-section {
  text-align: center; /* Center align text */
  margin-top: 30px; /* Add space above the gallery section */
}

.gallery-section h3 {
  font-size: 24px; /* Adjust font size for mobile */
  margin-bottom: 10px;
}

.gallery-section p {
  font-size: 14px; /* Adjust font size for mobile */
  margin-bottom: 20px;
    margin-top:40px !important;

}

.gallery-images {
  display: block; /* Stack images vertically */
  align-items: center; /* Center images */
}

.gallery-images img {
  width: 100%; /* Image takes full width */
  max-width: 396px; /* Ensure the width of the images is 396px */
  height: 225px; /* Set fixed height */
  margin: 10px auto; /* Center images and add space between them */
}
}
/* Footer Section */
/* Apply box-sizing globally */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Footer Section */
.footer {
width: 100%; /* Full width of the screen */
background-color: #333; /* Background color for the footer */
position: relative; /* For positioning the green underline at the bottom */
overflow: hidden; /* Prevent overflow */
}

.footer-content {
display: flex; /* Flex to arrange the logo, line, address, contact info, and follow us horizontally */
align-items: center; /* Vertically align items in the footer */
 /* Ensure items are spaced evenly */
max-width: 100%; /* Ensure the content spans 100% of the screen */
width: 100%; /* Ensure the content spans 100% of the screen */
margin: 0 auto; /* Centering the content */
padding: 40px 0; /* Adds padding at the top and bottom of the content */
flex-wrap: wrap; /* Allow content to wrap if necessary */
overflow: hidden; /* Prevent content overflow */
}

.footer-logo {
background-color: white; /* White background behind the logo */
padding: 10px; /* Adds space around the logo inside the background */
border-radius: 5px; /* Optional: rounds the corners of the background */
flex-shrink: 0;
margin-left: 50px; /* Prevent logo from shrinking */
}

.footer-logo img {
height: 146px; /* Fixed height for the logo */
width: 142px; /* Fixed width for the logo */
object-fit: contain; /* Ensures the logo maintains its aspect ratio */
max-width: 100%; /* Ensure the logo does not exceed its container */
}

.green-line {
height: 146px; /* Line height same as the logo */
width: 2px; /* Width of the green line */
background-color: green; /* Line color */
margin-left: 70px; /* Adds space between the logo and the line */
flex-shrink: 0; /* Prevent the green line from shrinking */
}

.address {
margin-left: 30px; /* Adds space between the green line and the address */
color: white; /* White text color for the address */
font-size: 14px; /* Font size for the address */
line-height: 1.5; /* Adjust line spacing for better readability */
flex-shrink: 0; /* Prevent address section from shrinking */
}

.address-name {
font-size: 16px; /* Larger font size for the "Address:" label */
font-weight: bold; /* Makes the label bold */
margin-bottom: 5px; /* Adds space between the "Address:" label and the actual address */
}

.contact-info {
margin-left: 40px; /* Adds space between the address and contact info */
color: white; /* White text color for contact details */
font-size: 14px; /* Font size for the contact info */
line-height: 1.5; /* Adjust line spacing for better readability */
flex-shrink: 0; /* Prevent contact section from shrinking */
}

.contact-info a {
color: white; /* Ensures the email link is white */
text-decoration: none; /* Removes underline from email link */
}

.phone, .email {
margin-bottom: 5px; /* Adds space between phone and email */
}

.follow-us {
margin-left: 40px; /* Adds space between contact info and follow us section */
color: white; /* White text color for the follow us label */
flex-shrink: 0; /* Prevent follow us section from shrinking */
}

.follow-us p {
font-size: 16px; /* Larger font size for the "Follow Us" label */
font-weight: bold; /* Makes the label bold */
margin-bottom: 10px; /* Adds space between the label and the icons */
}

.social-icons {
display: flex; /* Align social icons horizontally */
gap: 15px; /* Adds space between each social icon */
}

.social-icons a {
display: inline-block;
}

.social-icons img {
height: 30px; /* Set the height of social icons */
width: 30px; /* Set the width of social icons */
object-fit: contain; /* Ensures the icon maintains its aspect ratio */
transition: transform 0.3s ease; /* Adds hover effect */
}

.social-icons img:hover {
transform: scale(1.2); /* Slightly enlarge the icon on hover */
}

/* Green Underline at the bottom of the footer */
.footer-underline {
  width: 85%;
  height: 5px;
  background-color: green;
   position: absolute;
  bottom: 40px;
   margin-left: 100px; 
  align-items: center;
  justify-content: center;
  /* Positions the underline at the bottom */
}

/* Responsive Design - Tablet (Full Width like PC but for smaller screens) */
@media (max-width: 1140px) {
.footer-content {
  width: 100%; /* Ensure content takes full width */
  max-width: 100%; /* Remove max-width constraint */
  padding: 20px 0; /* Adjust padding for smaller screens */
  flex-wrap: wrap; /* Allow content to wrap if necessary */
}

.footer-logo {
  margin-bottom: 20px; /* Space between logo and next section */
}

.green-line {
  margin-left: 30px; /* Slightly reduce space between the logo and the line */
}

.address, .contact-info, .follow-us {
  margin-left: 0; /* Reset left margin */
  margin-top: 10px; /* Add spacing between each section */
}

.address-name {
  font-size: 14px; /* Slightly reduce font size for better readability */
}

.contact-info p, .address p {
  font-size: 12px; /* Reduce font size on smaller screens */
}

.social-icons {
  gap: 10px; /* Reduce the gap between social icons */
}

.social-icons img {
  height: 25px; /* Reduce icon size */
  width: 25px; /* Reduce icon size */
}
}

/* For tablets with max width 768px (Optional) */
@media (max-width: 768px) {
.footer-logo img {
  height: 120px; /* Reduce logo size */
  width: 120px; /* Reduce logo size */
}

.footer-content {
  padding: 15px 0; /* Adjust padding */
}

.address, .contact-info, .follow-us {
  font-size: 12px; /* Adjust text size */
}
}

@media (max-width: 480px) {
.footer-logo img {
  height: 100px; /* Further reduce logo size */
  width: 100px; /* Further reduce logo size */
}

.footer-content {
  padding: 10px; 
  /* Adjust padding for mobile */
}

.address, .contact-info, .follow-us {
  font-size: 12px;
  margin-left: 12px;/* Further reduce font size */
}

.social-icons {
  gap: 5px; /* Tighten the gap between social icons */
}

.social-icons img {
  height: 20px; /* Further reduce icon size */
  width: 20px; /* Further reduce icon size */
}
}
@media (max-width: 1440px) {
  .gallery-images {
    gap: 10px; /* Reduce gap for smaller screens */
    justify-content: center; /* Center align images */
  }

.gallery-images img {
    max-width: 30%; /* Ensure 3 images fit within the row */
  }
}
@media (max-width: 480px) {
  .gallery-images {
    flex-direction: column; /* Stack images vertically */
    gap: 10px; /* Reduce gap between rows */
  }

.gallery-images img {
    max-width: 100%; /* Full width for mobile view */
}
}
@media (max-width: 480px) {
  .footer-underline{
    display: none;
  }
  .green-line{
    display: none;
  }
  .background-text{
    margin-bottom: 20px;
  }
}