/* Global Reset */
* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #000000; /* Set black background for the entire website */
  color: #fff; /* Set text color to white for contrast */
  line-height: 1.6;
}

/* Header Styles */
header {
  width: 100%;
  background-color: #000;
  color: #000000;
  padding: px;
  text-align: center;
  display: flex; /* Uses flexbox to lay out children horizontally */
  align-items: center; /* Vertically centers the logo and nav links */
  padding: 20px 10px; /* Adds some padding around the content */
}

.navbar-brand {
  margin-right: 0px; /* Space between logo and navigation */
  margin-left: 5%;
}
.navbar-brand img {
  height: 5px; /* Increase the height from 50px to 80px */
  width: auto; /* Maintain the aspect ratio */
}

nav {
  width: 100%;
  background-color: #000;
  margin-top: -1%;
  position: sticky;
  top: 10;
  z-index: 10;
}

nav ul {
  list-style: none;
  display: flex; 
  justify-content: center;
  padding: 0;
}

nav ul li {
  margin: 0 35px;
}

nav a {
  font-style:calc();
  text-decoration: none;
  color: #fff;
  font-weight:lighter;
  transition: color 0.2s; /* Smooth transition for hover effect */
}

nav a:hover, nav a:focus {
  color: #fca503; /* Orange-yellow color for hover state */
}
/* Hamburger Menu Styles */
.hamburger-menu {
  display: none; /* Initially hide the hamburger menu */
}

.hamburger-menu .bar {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px 0;
}

/* CSS for mobile and small screens */
@media (max-width: 768px) {
  nav ul {
    display: none; /* Hide the nav menu */
  }

  .hamburger-menu {
    display: block; /* Display the hamburger menu */
    cursor: pointer;
  }

  nav {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #000;
    z-index: 10;
  }

  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 20px; /* Adjust based on your header height */
    background-color: #000;
    transition: transform 0.3s ease-in-out;
    transform: translateY(-100%);
  }

  nav ul.open {
    transform: translateY(0);
  }

  nav ul li {
    margin: -10px 0;
  }
}

#about h4 {
  font-size: 80px; /* Increase this value as needed */
  font-weight: bold; /* Ensure the text is bold */
  margin-top: 0%;
  margin-left: 8%;
  color: #ffffff;
  padding-top: 8%;
  border:black
}
#about-TEXT {
  margin-top: 0px; /* Adds a top margin to the section */
  margin-left: 10%; /* Text starts 20% from the left of the container */
  color: white; /* Text color is set to white */
}

#about-TEXT h2 {
  font-size: 80px; /* Increased font size specifically for h2 within #about-TEXT */
  text-align: left; /* Text alignment is left */
  margin-left: 20%;
  margin-top: 0%;
}

.yellow {
  color: rgba(255, 204, 0, 0.904); /* Ensures text within .yellow spans is yellow */
}
.tagline1 img {
  width: 100%; /* Adjust based on the original image size */
  height: auto; /* Adjust based on the original image size */
  animation:none;
  margin-top: -70px;
}
.tagline2 img {
  width: 100%; /* Ensures the image is responsive and does not overflow its container */
  height: auto; /* Maintains aspect ratio of the image */
  margin-top: -70px;
}
.tagline3 img {
  width: 100%; /* Ensures the image is responsive and does not overflow its container */
  height: auto; /* Maintains aspect ratio of the image */
  margin-top: -60px;
}
@keyframes slide {
  from {
    transform: translateX(100%); /* Start from the right, outside the view */
  }
  to {
    transform: translateX(-100%); /* End at the left, outside the view */
  }
}
/* Hamburger Menu Styles */
.hamburger-menu {
  display: none; /* Initially hide the hamburger menu */
}

.hamburger-menu .bar {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px 0;
}

/* CSS for mobile and small screens */
@media (max-width: 768px) {
  nav ul {
    display: none; /* Hide the nav menu */
  }

  .hamburger-menu {
    display: block; /* Display the hamburger menu */
    cursor: pointer;
  }

  nav {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #000;
    z-index: 10;
  }

  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 20px; /* Adjust based on your header height */
    background-color: #000;
    transition: transform 0.3s ease-in-out;
    transform: translateY(-100%);
  }

  nav ul.open {
    transform: translateY(0);
  }

  nav ul li {
    margin: 10px 0;
  }

  /* Adjust font sizes for smaller screens */
  #about h4 {
    font-size: 24px; /* Decrease font size for h4 */
  }

  #about h2 {
    font-size: 24px; /* Decrease font size for h2 */
  }

  #about h3 {
    font-size: 18px; /* Decrease font size for h3 */
  }

  #about p {
    font-size: 14px; /* Decrease font size for p */
  }

  /* Style additional images */
  .additional-images1,
  .additional-images3,
  .additional-images4 {
    display: flex;
    justify-content: space-between;
    margin-top: 20px; /* Adjust margin as needed */
  }

  .additional-images1 img,
  .additional-images3 img,
  .additional-images4 img {
    width: 30%; /* Adjust width as needed */
    height: auto;
  }
}




/* Section Styles */
.section, section {
  background-color: #000; /* Ensures sections blend seamlessly with the page */
 
  margin-top: 0px;
}

/* Image Styles */
img {
  vertical-align: middle; /* Aligns the logo vertically */
}

#whychooseus {
  text-align: center; /* Center align the content */
  padding: 10px; /* Provide some padding around the content */
  background-color: #000000; /* Set a background color if needed */
}

#whychooseus div {
  display: flex; /* Enables flexbox layout mode */
  justify-content: center; /* Centers the images horizontally */
  align-items: center; /* Aligns items vertically in the middle */
  gap: -5px; /* Space between each image */
}

#whychooseus img {
  width: calc(40% - 10px); /* Width of each image to be half of the container minus half the gap */
  height: auto; /* Keeps image aspect ratio */
}

#services {
  text-align: center;
  padding: 20px 5px; /* Slightly reduced side padding for a tighter layout */
  background-color: #000000; /* Consistent black background */
}

#services h2 {
  margin-top: 60px;
  color: #ffffff;
  font-size: 38px;
  margin-bottom: 10px; /* Space below the heading */
}

#services h3 {
  color: #ffffff;
  font-size: 28px;
  margin-bottom: 10px; /* Space below the subheading */
}
.section p {

  color: #ffffff;  /* Sets the text color to white for better contrast on dark backgrounds */
  font-size: 23px;  /* Sets the font size to 16 pixels for good readability */
  line-height: 1.6;  /* Increases line height to 1.6 for better readability */
  margin: 15px 0;  /* Adds vertical margin for space above and below the paragraph */
  text-align: justify;  /* Justifies the text for a clean and uniform layout */
  /* Adds padding to the left and right of the text */
}

#services div {
  display: flex;
  justify-content: center; /* Centers the images horizontally */
  align-items: center; /* Vertically centers the images */
  gap: 90px; /* Adjust the gap between images */
}

#services img {
  margin-top: 2%;
  width: calc(45% - 40px); /* Adjusted width for each image */
  height: auto; /* Maintains the aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Enhanced shadow for depth */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  #services div {
    flex-direction: column; /* Stack images vertically on smaller screens */
  }

  #services img {
    width: 80%; /* Adjusted width for smaller screens */
    margin-bottom: 10px; /* Adds space between images */
  }
}
.main-about-image {
  width: 45%;
  height: auto;
  float: right;
  margin-top: -28%;
  margin-bottom: 30px;
}
.section {
  margin-bottom: 40px; /* Adds space between sections for clarity */
}

.content-wrapper {
  display: flex;
  align-items: center; /* Vertically centers content within the wrapper */
  justify-content: space-between; /* Spaces out the child elements */
}

.additional-images1 {
  margin-left: 3%;
  flex: 0 0 40%; /* Sets the image container to 45% width, not growing or shrinking */
  text-align: left; /* Ensures the image aligns to the left of its container */
}

.additional-images1 img {
  width: 100%; /* Makes the image use the full width of its container */
  height: auto; /* Maintains the aspect ratio of the image */
  display: block; /* Ensures the image is treated as a block element */
}

.additional-text {
  flex: 0 0 55%; /* Sets the text container to 55% width, not growing or shrinking */
  text-align: right; /* Aligns text to the right within its container */
  padding: 0 50px; /* Adds horizontal padding for better text spacing */
}

.additional-text h2 {
  margin-top: 0; /* Removes top margin from h2 for tighter spacing if needed */
  margin-bottom: 10px; /* Spacing below h2 before the paragraph starts */
}

.additional-text p {
  margin-top: 0; /* Ensures paragraph has no top margin for consistency */
}

.section {
  margin-bottom: 40px; /* Adds space between sections */
}

.content-wrapper {
  display: flex;
  align-items: center; /* Vertically centers content within the wrapper */
  justify-content: space-between; /* Ensures there is space between text and image */
}

.additional-text {
  flex: 1; /* Allows the text block to fill the remaining space */
  text-align: left; /* Ensures all text is aligned to the left */
  padding-right: 20px; /* Adds padding between the text and the image */
}

.additional-images2 {
  order: 2;
  flex: 0 0 35%; /* Allocates only 35% of the space for the image, does not grow or shrink */
  order: 2; /* Moves the image to the right side of the flex container */
  text-align: left; /* Aligns the image container's contents to the right */
}

.additional-images2 img {
  width: 100%; /* Makes the image use the full width of its container */
  height: auto; /* Maintains the aspect ratio of the image */
}
.section {
  margin-bottom: 40px; /* Adds space between sections */
}

.content-wrapper {
  display: flex;
  align-items: center; /* Vertically centers content within the wrapper */
  justify-content: space-between; /* Spaces out the child elements */
}

.additional-text {margin-top: -5%;
  flex: 0 0 55%; /* Allocates 55% of the space to the text */
  text-align: left; /* Aligns text to the left within its container */
  padding-left: 40px; /* Adds padding to the left for spacing */
  order: 2; /* Order is used to place text on the right */
}

.additional-images3 {
  margin-right: 3%;
  margin-top: -10%;
  flex: 0 0 38%; /* Allocates 45% of the space to the image */
  text-align: right; /* Aligns the image container's contents to the right */
  order: 2; /* Order is used to place image on the left */
}

.additional-images3 img {
  width: 100%; /* Makes the image use the full width of its container */
  height: auto; /* Maintains the aspect ratio of the image */
}
/* Wrapper for content ensuring flex properties for layout */
.content-wrapper {
  display: flex;
  align-items: center; /* Vertically centers content within the wrapper */
  justify-content: space-between; /* Spaces out the child elements across the main axis */
  margin-bottom: 20px; /* Optional: Adds space below each section for separation */
}

/* Styling for the text block container */
.additional-text {
  flex: 0 0 55%; /* Sets the text container to 55% width, not growing or shrinking */
  text-align: left; /* Aligns text to the left within its container */
  padding-right: 50px; /* Adds right padding for spacing from the image */
}

/* Styling for the image container */
.additional-images4 {
  flex: 0 0 40%; /* Sets the image container to 40% width, not growing or shrinking */
  text-align: right; /* Ensures the image aligns to the right of its container */
}

/* Styling for the images within the .additional-images4 container */
.additional-images4 img {
  margin-top: -17%;
  width: 100%; /* Makes the image use the full width of its container */
  height: auto; /* Maintains the aspect ratio of the image */
  display: block; /* Ensures the image is treated as a block element, which it naturally is */
}


@media (max-width: 768px) {
  .content-wrapper, .navbar-brand, nav, #services div, .additional-text, .additional-images {
    padding-right: 0;
    margin-right: 0;
  }

  nav ul li {
    margin: 10px 0; /* Adjusted to reduce space on mobile */
  }
}



/* Text Styles */
h1 {
  color: #ffffff; /* Bright contrast color for headings */
  font-size: 36px; /* Example size for main heading */
}

h2 {
  color: #ffffff;
  font-weight: bold;
  font-size: 40px; /* Smaller than h1 */
}

h3 {
  color: #ffffff;
  font-size: 24px; /* Smaller than h2 */
}

p {
  color: #ffffff; /* Set paragraph text color to white */
  font-size: 16px; /* Standard font size for paragraph text */
}


/* Service Section Styles */
.service, article {
  background-color: #000; /* Consistent background across content blocks */
  padding: 0px;
  border-radius: 8px;
}
@media (max-width: 100px) {
  #whychooseus div {
    flex-direction: row;
  }
#whychooseus {
  /* Ensures the section is centered and has some spacing */
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  padding: 20px;
}

#whychooseus img {
  /* Styles for the images */
  width: 50%; /* Controls the size of the images */
  margin: 1%; /* Adds space between the images */
  height: auto; /* Maintains the aspect ratio of the images */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for better visibility */
}

#whychooseus div {
  /* Container for each row of images */
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 20px; /* Space between rows */
}
}

#casestudies {
  text-align: center;
  padding: 20px;
  background-color: #000000; /* Light background color for contrast */
}

#casestudies h2, #casestudies p {
  margin-bottom: 25px; /* Space below the text */
  font-size: 38px;
}
#casestudies h3{
  margin-bottom: 25px;
  font-size: 28;
}

.case-study-container {
  display: flex; /* Enables flexbox layout to align children side by side */
  justify-content: center; /* Centers the items horizontally */
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  gap: 10px; /* Adds space between each image/link */
}

.case-study-container a {
  width: 30%; /* Adjust the width of each link to control the image size */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds subtle shadow for depth */
}

.case-study-container img {
  width: 50%; /* Ensures the image stretches to fill the link container */
  height: auto; /* Maintains the aspect ratio of the image */
  vertical-align: middle; /* Aligns images to the middle of the line */
  transition: transform 0.3s ease-in-out; /* Smooth transformation on hover */
}

.case-study-container a:hover img {
  transform: scale(1.05); /* Slightly enlarges the image on hover */
}


#clients {
  text-align: center; /* Centers the heading and content */
  padding: 0; /* Removes any padding around the section */
  background-color: #000000; /* Optional background color */
}

#clients h2 {
  margin-top: 70px;
  margin-bottom: 0px; /* Space below the headings */
  color: #ffffff;
  padding: 10px 0; /* Slightly less padding to differentiate from h2 */
  font-size: 38px;
}

#clients h3 {
  margin-bottom: 80px; /* Space below the headings */
  color: #ffffff; /* Ensures text color is visible on dark background */
  padding: 5px 0; /* Slightly less padding to differentiate from h2 */
  font-size: 28px;
}

#clients ul {
  display: flex; /* Enables flexbox layout */
  flex-wrap: wrap; /* Allows items to wrap onto the next line */
  padding: 0; /* Corrects invalid negative value and removes default padding */
  list-style: none; /* Removes default list styling */
  justify-content: center; /* Centers the flex items horizontally */
  gap: 0px; /* Sets the gap between items to 0 to remove space */
}

#clients li {
  width: 16%; /* Adjust to fit exactly 6 items per row (100% / 6) */
  position: relative; /* Needed for absolute positioning of images */
  padding: 0; /* Corrects invalid negative value and removes padding around the list items */
}

#clients img {
  padding-bottom: 20%;
  width: 80%; /* Stretches the image to fill the container */
  vertical-align: middle; /* Aligns images to the middle of the line */
  transition: transform 0.3s ease-in-out; /* Smooth transformation on hover */
  margin: 0; /* Remove any default margins */
}

#clients li:hover img {
  transform: scale(1.1); /* Scales up the image on hover for more noticeable effect */
  z-index: 20; /* Ensures the image pops out over others */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.75); /* More pronounced shadow for better pop effect */
}


#ourbrands {
  width: 100%;
  overflow: hidden; /* Hides anything outside the boundary of the section */
  position: relative;
  background: #000000; /* Optional: background color */
}

#ourbrands h2 {
  text-align: center;
  color: #ffffff;
  padding: 10px 0; /* Adds some vertical padding */
  font-size: 38px; /* Example size for h2, adjust as needed */
}

#ourbrands h3 {
  text-align: center;
  color: #ffffff;
  padding: 5px 0; /* Slightly less padding to differentiate from h2 */
  font-size: 28px; /* Smaller font size compared to h2 */
}


.brand-slider {
  width: 150%;
  overflow: hidden; /* Ensures no part of the inner content spills over */
}

.brand-slider ul {
  display: flex;
  animation: scroll 10s linear infinite; /* Adjust timing as needed */
  padding: 0;
  margin: 0;
}

.brand-slider li {
  list-style-type: none; /* Removes bullet points */
}

.brand-slider img {
  width: 1500px; /* Adjust based on actual size needs */
  height: auto;
  margin-right: 0px; /* Space between logos */
}

/* Keyframes for continuous scrolling animation */
@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%); /* Moves the entire width of the list */
  }
}

/* Footer Styles */
footer {
  width: 100%;
  background-color: #2b2a2a;
  color: #fff;
  text-align: center;
  padding: 5px;
}

footer a {
  color: #fff;
  transition: color 0.2s;
}

footer a:hover {
  color: #fca503;
}
#contact h2 {
  margin-bottom: 50px;
  font-size: 45px;
  text-align: center;
  color: #fff; /* Ensures the Contact Us header is white */
}

#contact .footer-info p {
  color: #fff; /* Ensures text color is white */
  font-size: 25px; /* Increases the font size */
}

#contact .footer-info a {
  margin-left: 15px;
  text-align: center;
  color: #fff; /* Ensures links are white */
  font-size: 25px; /* Increase font size of links */
  transition: color 0.2s; /* Smooth transition for color change */
}

#contact .footer-info a:hover {
  color: #fca503; /* Changes link color to orange on hover */
}

.footer-info i {
  margin-right: 4px; /* Provides spacing between the icon and text */
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}



/* Responsive Styles */
@media (max-width: 768px) {
  nav ul {
      flex-direction: column;
  }

  nav ul li {
      margin: 50px 0;
  }
}