@media (max-width: 900px)
{
	
	
	.projectDetails h1 {font-size: 49px;}
	
	
	.threeWide, .twoWide {
    display: block !important;
}

.aiInputs {width:100%;}

	.projectText {padding: 10px;}

.projects {
  display: block;
  gap: 40px;
  max-width: 1400px;
  margin: auto;
  padding: 30px;
  box-sizing: border-box;
}

.projects  div {
  position: relative;
  /* max-height: 292px; */
  overflow: hidden;
  margin-bottom:40px;
}

.projects > div a {
  display: block;
}

.twoWide > div > a > img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  width: 90%;
  border-radius: 12px;
  margin: auto;
  display: block;
  border: 5px solid black;
  box-sizing: border-box;
  padding: 0px;
}
 
.projects > div:hover img {
  transform: scale(1.1);
}

#threeFooter div {width:auto;}

#whyChooseUs div{padding:15px;}


.twoWide > div:first-child {
    order: 2;
}



}

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

    .twoWide.reverse > div, .twoWide > div {
        text-align: left; /* Adjusts the alignment for a mobile-friendly view */
    }

    .twoWide > div > a > img {
        margin: auto; /* Centers the image within the a tag */
    }
}


@media (max-width: 1200px) { 

.projects > div h4 {font-size: 46px;}

#topBar .banner {
     font-size: 16px;
}

 

	.introParagraph {
    padding-left: 40px;
    margin-bottom: 30px;
    border-left: 4px solid grey;
    background: rgb(0 0 0 / 21%);
    padding: 10px;
    border-radius: 0 55px 0px 0px;
    padding-left: 30px;
    padding-right: 30px;
    max-width: 900px;
    margin: auto;
    margin-bottom: 50px;
}

#topBar .logo a {
    flex: 0 1 auto;
    font-size: 37px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 1px 1px 3px #00000061;
    max-width: 168px;
    display: block;
}

.spacer {position:fixed; top:-200px; visibility:hidden; }
.navigation.is-active {
    transform: translateY(0); /* Slide down to show */
}


	/* Style for the close button */
.menu-close {
	display:block;
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #161616; /* Red background for visibility */
    color: #ffffff; /* White text */
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
}
	.navigation {
    position: fixed; /* Make navigation overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgb(12 28 89 / 96%); /* Semi-transparent background */
    display: flex;
    flex-direction: column;
    justify-content: center !important; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    gap: 20px;
    transform: translateY(-100%); /* Hide above the screen initially */
    transition: transform 0.5s ease; /* Smooth transition for sliding down */
    z-index: 999; /* Ensure it's above other content */
}

.navigation a {
    margin: 10px 0; /* Add vertical margin for spacing between links */
    color: #FFFFFF; /* Adjust color as needed */
    text-decoration: none;
    font-size: 24px; /* Adjust font size as needed */
}

.menu-toggle {
  display: none; /* Initially hidden, will be displayed in mobile view */
  background-color: transparent; /* Make the button background transparent */
  border: none; /* Remove button border */
  cursor: pointer; /* Change cursor to pointer to indicate clickable area */
  padding: 10px; /* Add some padding around the icon for easier tapping */
}

.burger-icon {
  display: block;
  width: 30px; /* Width of the burger icon */
  height: 2px; /* Height of each line */
  background-color: #ffffff; /* Color of the burger icon */
  position: relative;
}

.burger-icon:before,
.burger-icon:after {
  content: "";
  position: absolute;
  width: 100%; /* Match the width of the parent .burger-icon */
  height: 2px; /* Height of each line */
  background-color: #ffffff; /* Color of the lines */
  left: 0;
}

.burger-icon:before {
  top: -8px; /* Position the before line above the middle line */
}


    .menu-toggle {
    position: absolute;
    display: block; /* Show the burger icon in mobile view */
    right: 46px;
  }
  
  #heroHolder {
	   /* Ensures the full height for centering */
	   margin: 0; /* Removes default margin */
	   /* display: flex; */
	   justify-content: center; /* Center horizontally */
	   align-items: center; /* Center vertically */
	   text-align: center; /* Centers the text inside the container */
}

.homeHero {
	  /* Adjust the width as necessary, or keep it auto */
	  color: white;
	  max-width: 1200px; /* Example width */
	  padding: 5%; /* Adds some padding inside the homeHero */
	  font-size: 19px;
	  clear: both;
	  margin: auto;
	  margin-bottom: 30px;
	  box-sizing: border-box;
	  }
	    .homeHero b {color: #ffffff;text-shadow: 1px 1px 3px #00000061;font-size: 24px;}
	 
	
.twoWide>div {
    display: block;
    margin-bottom: -33px;
    width: 100%;
    vertical-align: top;
    text-align: left;
    padding: 5%;
    box-sizing: border-box;
}

 
ul.bList li::before {
    font-size: 24px;
    font-weight: bold;
    content: "\2713\0020";
    color: #FFEB3B;
    margin-right: 8px;
    position: absolute;
    left: -42px;
}
 
	#projectDetails h1 {font-size: 60px;}
	#projectDetails img {width: 90%;border-radius: 12px;margin: auto;display: block;border: 5px solid black;box-sizing: border-box;}
}