/* Floats section */
.video-background {
  position: relative;
  width: 100%;
  height: 80vh;
  /* 85vh original */
  /* min-height: 800px;
  max-height: 1400px; */
 }
 
 .video-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 
 .rectangles-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  gap: 30px;
  width: 90%;
  max-width: 1500px;
  margin: 0 auto 0;
  /* padding: 7em 0 0; */

 }
 
 .rectangle {
  background: rgba(25, 25, 25, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 3px;
  padding: 30px;
  width: 425px;
  height: 575px; /* Keep rectangles tall */
  transition: transform 500ms ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 270px; /* Ensure rectangles don't get too narrow */
  z-index: 99;
 }
 
  /* Apply blur if supported */
  @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
   .rectangle {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px); /* For Safari */
     background-color: rgba(47, 47, 47, 0.6); /* Adjust background for blur */
   }
 }
 
 .rectangle h2 {
  margin: 30px 0 20px;
  font-size: 32px;
  color: white;
 }
 
 .rectangle p {
  margin: 10px 0 20px;
  font-size: 20px;
  color: white;
  flex-grow: 1; /* Makes paragraphs take up remaining space */
 }
 
 .rectangle .view-more {
  font-size: 18px;
  color: white;
  text-decoration: none;
  margin-top: 0px; /* Additional space from the paragraph */
 }
 
 .rectangle .view-more:hover {
  text-decoration: underline;
 }
 
 /* Responsive styles */
 @media (max-width: 1200px) {
  .rectangle {
    width: 350px;
    height: 550px; /* Adjust height for smaller screens */
  }
  .rectangle h2 {
    font-size: 30px;
  }
  .rectangle p {
    font-size: 18px;
  }
  .rectangle .view-more {
    font-size: 16px;
  }
 }
 
 /* previous was 992px */
 @media (max-width: 1024px) {
  .video-background {
      position: relative;
      width: 100%;
      height: auto;
    }     
  .rectangles-container {
    flex-wrap: wrap; /* Allow rectangles to stack in a new row */
    padding: 5em 0;
  }
  .rectangle {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
 }
 
 @media (max-width: 768px) {
  .rectangles-container {
    flex-direction: column; /* Stack rectangles vertically */
    height: auto; /* Allow container height to grow */
  }
  .rectangle {
    width: 90%;
    height: auto; /* Adjust height based on content */
    min-height: auto;
    max-width: auto;
    margin: 0 auto; /* Center rectangles */
  }
  .rectangle h2 {
    font-size: 28px;
  }
  .rectangle p {
    font-size: 16px;
  }
  .rectangle .view-more {
    font-size: 14px;
  }
 }
 
 @media (max-width: 480px) {
  .rectangle {
    width: 100%; /* Ensure rectangles use full width on very small screens */
    height: auto;
    min-height: auto;
  }
  .video-background {
    height: auto; /* Allow video background height to adjust */
    min-height: auto;
    padding: 1em 0 3em;
  }
  .rectangles-container {
   gap: 20px;
   padding: 2em 0 0;
  }
  .rectangle h2 {
   margin: 10px 0 15px;
  }
  .rectangle p {
   display: none;
  } 
 }
 
.--top-header{
  background-color: goldenrod;
}
 
 .greeting{
  color: white;
  padding: .45em 0;
  font-size: 1.4rem;
  font-weight: 400;
 }








/* double paragraphs section */
.content-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
 }
 

 /* Responsive styles */
 @media (max-width: 768px) {
  .section-button {
      font-size: 16px;
      padding: 12px 25px;
  }
 }
 
 

/* Tailored for your needs */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
 }
 
 .tailored-section {
  text-align: center;
  padding: 0 20px 20px;
 }
 
 .box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
 }
 
 /* styles for needs homepage*/
 .box {
  flex: 1 1 100%;
  max-width: 325px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
 }
 
 /* styles for what we stand for about us*/
 .box-second-page {
  flex: 1 1 100%;
  max-width: 325px;
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
 }
 
 .box-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
 }
 
 .img-section {
  flex: 0 0 auto;
 }
 
 .img-section img {
  width: 120px;
  height: auto;
 }
 /* styles for what we stand for about us*/
 .img-section-check-mark img{
  width: 60px;
  height: auto;
 }
 
 .title-section {
  flex: 0 0 auto;
  margin-top: 10px;
  font-size: 1.2rem;
 }
 

 
 
 /* Responsive Design */
 @media (min-width: 600px) {
  .box {
      flex: 1 1 calc(50% - 20px);
  }
 }
 
 @media (min-width: 900px) {
  .box {
      flex: 1 1 calc(25% - 20px);
  }
 }
 




/* Locations */
.location-container {
 display: flex;
 justify-content: center;
 gap: 50px;
 padding: 0 1em;
}

.small-info-sec{
  padding:0 0 1.5em ;
}

.location-box {
 width: 100%;
 max-width: 475px;
 background-color: white;
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
 border-radius: 8px;
 overflow: hidden;
 text-align: center;
}

.location-box img {
 width: 100%;
 height: auto;
 display: block;
}

.location-box h2 {
 margin: 15px 0;
 font-size: 1.8em;
 font-weight: 200;
 color: #333;
}

/* Responsive Design */
@media (min-width: 600px) {
 .location-box {
     width: calc(50% - 20px);
 }
}

@media (min-width: 900px) {
 .location-box {
     width: calc(33.333% - 20px);
 }
}
@media (max-width: 992px){
 .location-container {
  flex-wrap:wrap;
 } 
}



/* Industries */
.industries-container {
 display: flex;
 justify-content: center;
 gap: 3em;
 padding: 0 1em;
}

.industries-box {
 width: 100%;
 max-width: 525px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
 overflow: hidden;
}

.industries-box img {
 width: 100%;
 height: auto;
 display: block;
}

.industries-box h2 {
 margin: 15px 10px;
 font-size: 1.8em;
 font-weight: 200;
}

.indu-arrows{
  vertical-align: bottom;
  font-size: 1.6rem;
}

/* Responsive Design */
@media (min-width: 600px) {
 .industries-box {
     width: calc(50% - 20px);
 }
}

@media (min-width: 900px) {
 .industries-box {
     width: calc(33.333% - 20px);
 }
}

@media (max-width: 992px){
 .industries-container {
  flex-wrap:wrap;
 } 
}



/* about us bottom image left - text right */
.image-text-section {
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 padding: 40px 20px 40px 0px;
 gap: 20px;

}

.image-container {
 flex: 1;
 min-width: 50%;
}

.image-container img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

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


/* Responsive styles */
@media (max-width: 768px) {
 .image-text-section {
     flex-direction: column;
     padding: 20px;
 }

 .image-container {
     order: 2;
     width: 100%;
     margin-top: 20px; /* Space between stacked elements */
 }

 .text-container {
     order: 1;
     padding: 0;
     text-align: center;
 }
}




/* Basic styles for the section */
.image-ovals-section {
 display: flex;
 align-items: center;
 justify-content: space-between;
 max-width: 1600px;
 margin: 0 auto;
 padding: 40px 20px;
 gap: 20px;
}

.image-container {
 flex: 1;
 min-width: 50%;
}

.image-container img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

.ovals-container {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 25px;
}

.oval {
 display: flex;
 align-items: center;
 width: 100%;
 max-width: 400px;
 height: 130px;
 background-color: rgba(255, 255, 255, 0.8);
 border-radius: 150px;
 padding: 15px 20px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 backdrop-filter: blur(10px);
}

.oval-image {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 object-fit: cover;
 margin-right: 20px;
}

.oval-text {
 flex: 1;
}

.oval-title {
 font-size: 25px;
 margin: 0 0 5px;
 font-weight: 300;
}

.oval-description {
 font-size: 14px;
 margin: 0;
}

/* Responsive styles */
@media (max-width: 1280px) {
 .image-ovals-section {
     flex-direction: column-reverse;
     align-items: center;
 }

 .ovals-container {
     align-items: center;
 }

 .oval {
     width: 90%;
 }
}








/* Basic styles for the section */
.title-paragraphs-section {
 max-width: 1600px;
 margin: 0 auto;
 padding: 60px 20px;
 /* background-color: #f8f9fa; */
 border-radius: 10px;
 /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.The-profound-title {
 text-align: center;
 margin-bottom: 30px;
 font-size: 40px;
 font-weight: 200;
}

.left-section,
.right-section {
 width: 45%;
 margin: 40px 0;
}

.left-section {
 float: left;
 text-align: center;
}

.right-section {
 float: right;
 text-align: center;
}

.paragraph-title {
 font-size: 30px;
 margin-bottom: 20px;
 color: black;
 font-weight: 200;
}

.paragraph-content {
 font-size: 20px;
 line-height: 1.6;
 color: #555;
}

/* Clear floats */
.title-paragraphs-section::after {
 content: "";
 display: table;
 clear: both;
}

/* Responsive styles */
@media (max-width: 768px) {
 .left-section,
 .right-section {
     width: 100%;
     float: none;
     text-align: center;
     margin: 20px 0;
 }

 .paragraph-title {
     font-size: 24px;
 }

 .paragraph-content {
     font-size: 18px;
 }
}







/* Basic styles for the section */
.image-background-section {
 height: 90dvh;
 background-size: cover;
 background-position: center;
 position: relative;
 display: flex;
 align-items: flex-end;
 padding: 40px;
 object-fit: cover;
}



 



.text-content {
 color: #fff;
 max-width: 600px;
}

.main-title {
 font-size: 48px;
 margin-bottom: 20px;
}

.sub-title {
 font-size: 36px;
 margin-bottom: 20px;
}

.cta-button {
 display: inline-block;
 padding: 15px 30px;
 font-size: 24px;
 color: #fff;
 background-color: var(--primary-color);
 text-decoration: none;
 border-radius: 5px;
 transition: background-color 0.3s;
}

.cta-button:hover {
  color: white;
 background-color: var(--golddim-color);
}

/* Responsive styles */
@media (max-width: 768px) {
  .image-background-section {
    padding: 30px;
   }
 .main-title {
     font-size: 36px;
 }
 .sub-title {
     font-size: 28px;
 }
 .cta-button {
     font-size: 20px;
     padding: 12px 25px;
 }
}

/* fix for the title in the bottom corner for small phones 
padding on the left */
@media (max-width: 480px) {
  .image-background-section {
    padding: 10px;
   }
  }
















.contact-section {
 position: relative;
 /* height: 85vh; */
 padding: 7.5em 0;
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 background-size: cover;
}

.form-container {
 max-width: 650px;
 width: 90%;
 padding: 60px 40px;
 background: rgba(255, 255, 255, 0.8);
 backdrop-filter: blur(10px);
 border-radius: 10px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 text-align: center;
}

.form-container h2 {
 margin-bottom: 20px;
 font-size: 28px;
}

.form-group {
 display: flex;
 gap: 20px;
 margin-bottom: 20px;
}

.form-group input {
 flex: 1;
 padding: 10px;
 font-size: 16px;
 border: 1px solid #ccc;
 border-radius: 5px;
}

textarea {
 width: 100%;
 padding: 10px;
 font-size: 16px;
 border: 1px solid #ccc;
 border-radius: 5px;
 margin-bottom: 20px;
 min-height: 100px;
 resize: vertical;
}

.career-button {
 padding: 15px 30px;
 font-size: 18px;
 color: white;
 background-color: var(--primary-color);
 border: none;
 border-radius: 5px;
 cursor: pointer;
}

.info-text {
 font-size: 14px;
 color: #333;
 margin-top: 20px;
}

/* Responsive styles */
@media (max-width: 768px) {
 .form-group {
     flex-direction: column;
 }

 .form-container {
     width: 90%;
     padding: 20px;
 }

 .form-container h2 {
     font-size: 24px;
 }

 input, textarea {
     font-size: 14px;
 }

 button {
     font-size: 16px;
     padding: 10px 20px;
 }

 .info-text {
     font-size: 12px;
 }
}













.cta-menu {
  width: 100%;
  position: fixed;
  height: 100vh; /* Full height */
  overflow-y: auto; /* Allow vertical scrolling */
  transition: transform 0.3s ease;
  transform: translateX(100%); /* Hidden by default */
  z-index: 9999;
  top: 0;
  right: 0;
}

/* orginal */
/* .cta-menu{
  width: 100%;
  position: fixed;
  height: 100%;
  overflow: hidden;
  font-size: 1.1rem;
  z-index: 999999999999;
  transform: translateX(100%);
  transition: .7s ease-in-out;
  backdrop-filter: blur(10px);
 }
  */

  .cta-menu {
   background-color: rgba(47, 47, 47, .5); /* Fallback background color */
 }
 
 /* Apply blur if supported */
 @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
   .cta-menu {
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px); /* For Safari */
     background-color: rgba(67, 67, 67, 0.5); /* Adjust background for blur */
   }
 }
 
 .cta-menu[data-visible="true"]{
  transform: translate(0%);
 }
 .close-cta{
  right: 2em;
  position: absolute;
  top: min(2.5rem, 6vh);
  color: var(--primary-color);
  background-color: transparent;
 }
  


.-align-section{
  min-height: 100vh; /* Makes sure the section occupies most of the screen */
  display: flex;
  justify-content: space-between;
  align-items: center; /* Centers the content vertically */
}


.analysis-solutions-decision-section {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Centers the content vertically */
  padding: 50px;
  gap: 40px;
  margin: 0 auto;
  max-width: 1600px;

}

.left-side {
  width: 50%;
  color: white; /* Makes the text color white */
  align-self: flex-start;
  margin-top: calc(3em);
}

.left-title {
  font-size: 36px; /* Increased font size */
  margin-bottom: 20px;
}

.large-paragraph {
  font-size: 22px; /* Increased font size */
  margin-bottom: 40px;
  line-height: 1.6;
}

.sub-title {
  font-size: 28px; /* Increased font size */
  margin-bottom: 20px;
  margin-top: 25px;
  font-weight: 500;
}

.left-side p {
  font-size: 20px; /* Increased font size */
  margin-bottom: 15px;
  font-weight: 300;
}

.left-side p strong {
  font-weight: bold;
  font-size: 22px; /* Increased font size */
  font-weight: 600;
}

.right-side {
  width: 40%;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: rgba(255, 255, 255, 0.1); /* Adds a semi-transparent background */
  padding: 40px;
  border-radius: 10px; /* Adds rounded corners */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
}

.contact-form h2 {
  font-size: 40px; /* Increased font size */
  margin-bottom: 20px;
  color: white;
  text-align: center;
  font-weight: 200;
}

.contact-form input,
.contact-form textarea {
  padding: 15px;
  font-size: 18px; /* Increased font size */
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8); /* Adds a slight transparency */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #555; /* Changes placeholder text color */
}

.contact-form button {
  padding: 15px;
  font-size: 20px; /* Increased font size */
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: var(--golddim-color);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .analysis-solutions-decision-section {
    flex-direction: column;
    align-items: center; /* Center the content on smaller screens */
    padding: 70px 15px 100px;
  }

  .left-side, .right-side {
    width: 100%;
    text-align: center; /* Centers the text */
  }

  .contact-form {
    width: 100%; /* Reduces form width on smaller screens */
    margin: 0 auto;
  }
}

@media (max-width: 475px) {
  .analysis-solutions-decision-section {
    padding:110px 0 100px;
  }

.left-side{
  display: none;
}
}


 /* js */
 #result{margin-top: 1em;}


 /* last thing you were doing was trying to remove the text 
 on smaller screen for the contact section
 and you also used webkits for the blur effect, 
 and make sure all the code is clean and see if you */



/* Services Container */
.services-container {
  display: flex;
  justify-content: space-between;
  max-width: 1800px;
  margin: 0 auto;
}

/* Individual Service Item */
.service-item {
  padding: 20px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  flex: 1 1 calc(33.333% - 40px);
  max-width: calc(33.333% - 40px);
  transition: transform 0.3s ease-in-out;
}

.service-item:hover {
  transform: translateY(-5px);
}

/* Service Image Styling */
.service-image {
  width: 100px;
  height: auto;
  margin-bottom: 15px;
}

/* Service Title Styling */
.service-title {
  font-size: 1.4em;
  margin-bottom: 15px;
  font-weight: 400;
  color: var(--primary-color);
}

/* Service List Styling */
.service-list {
  list-style: none;
  padding: 0;
}

.service-list li {
  margin-bottom: 10px;
  font-size: 1em;
  color: black;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .services-container {
    flex-wrap: wrap;
  }
}

@media (max-width: 992px) {
  .service-item {
    flex: 1 1 calc(50% - 40px);
    max-width: calc(50% - 40px);
  }
}

@media (max-width: 768px) {
  .service-item {
    flex: 1 1 100%;
    max-width: 100%;
    margin: 10px 0;
  }

  .h1--styles {
    font-size: 2em;
  }

  .service-title {
    font-size: 1.3em;
  }

  .service-list li {
    font-size: 0.9em;
  }
}









/* line 300 */
/* continue this part, we are setting background
colors when the device does not support 
a parallax effect, wifi status down */



/* Add hover effects only for devices that support hover */
@media (hover: hover) and (pointer: fine) {
  .rectangle:hover {
    transform: translateY(-30px);
   }   
}









.virginia-service-section {
    background: #f8f9fa;
    padding: 60px 20px;
    text-align: center;
    font-family: 'Merriweather', serif;
}

.state-holder {
    margin: 0 auto;
    display: flex;
    max-width: 1600px;
}


.cardinal-image {
    width: 80px; 
    height: auto;
}

.cardinal-image {
    width: 80px; /* Adjust size as needed */
    height: auto;
    filter: drop-shadow(0 2px 5px rgba(255, 0, 0, 0.5)); /* Adjust as needed */
}


.left-state-info{
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 2em;
}
.right-state-image{
    flex: 1;
 
}

/* Responsive */
/* .state-image {
    width: 100%; 
    height: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
} */

.state-image {
    width: 100%; /* Full width of the right side */
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9)); /* Adjust values as needed */
    border-radius: 8px; /* Optional for rounded corners */
}

.project-subtitle {
    font-size: 24px;
    font-weight: 600;
    color: #e67e22; /* Elegant orange */
    margin: 20px 0;
}

.description {
    font-size: 18px;
    color: #34495e;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}























/* FAQs */
.frequently-asked-section{
 display: flex;
 margin: 0 auto;
 padding: 1em;
 max-width: 1400px;
}

.left-faq{
 flex: 1;
 display: flex; 
 align-items: center;
 justify-content: center;
}

.right-faq{
 flex: 1;
 display: flex;
 flex-direction: column;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  width: 100%;
  padding: 18px;
  color: black;
  cursor: pointer;
  text-align: left;
  transition: 0.4s;
  background-color: transparent;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.minus, .accordion:hover {
  color: var(--primary-color);
  background-color: var(--white-color);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  max-height: 0;
  padding: 0 18px;
  overflow: hidden;
  background-color: white;
  transition: max-height 0.4s ease-out;
}

.accordion:after {
  float: right;
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  margin-left: 5px;
}

.minus:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

 .left-faq h1{
  font-weight: 100;
  font-size: var(--fs-400);
 }
 .right-faq p{
  margin: .5em;
  padding: .5em;
  font-weight: 100;
  font-size: var(--fs-200);
  letter-spacing: var(--ls-100);
 }


/* lg */
@media (max-width: 1024px) {
 .left-faq h1{
  font-weight: 100;
  font-size: var(--fs-300);
}
 .right-faq p{
  margin: .5em;
  padding: .5em;
  font-weight: 100;
  font-size: var(--fs-100);
  letter-spacing: var(--ls-100);
}}


   /* xs */
   @media (max-width: 768px) {
    .frequently-asked-section{
      max-width: 95%;
      flex-direction: column;
      gap: 2em;
     }
     
     .left-faq{
      flex: 1;
      display: flex; 
      justify-content: start;
     }
   }





   .section-title {
    font-size: 2.6rem;
    margin: 30px 0 60px;
    font-weight: 300;
    text-align: center;
    color: #333;  
   }
   
   .section-paragraph {
    margin-bottom: 40px;
    color: #555;
   }
   
   .section-paragraph {
    line-height: 1.6;
    /* color: red; */
   }

   .paragraph-section {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
   }

 
  
  .span-heart {
    color: red;
    display: inline-block;  /* Ensure the element can animate properly */
    transition: transform 2s ease, color 0.6s ease; /* Smooth transition for both size and color */
    cursor: pointer; /* Change cursor to indicate interactivity */
  }
  
  .span-heart:hover {
    transform: scale(1.5); /* Make the heart larger on hover */
    color: green;          /* Change color to green on hover */
  }
  

    /* md */
    @media (max-width: 768px) {
      .container {max-width: auto;}
  
      }
      /* sm */
      @media (max-width: 640px) {
      .container { max-width: auto;}
    
      }
    
      /* xs */
      @media (max-width: 475px) {
        .section-title {
          font-size: 1.9rem;
          margin: 20px 0 35px;
          font-weight: 300;
          text-align: center;
          color: #333;  
         }
      }














/* Footer */
footer {
  overflow: hidden;
  position: relative;
  background-color: black;
}

/* .right-side--footer */

.left-side--footer,
.middle-side--footer {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
}

.left-side--footer img {
  width: 150px;
}

.left-side--footer p {
  padding: 0;
  width: 23ch;
  font-size: var(--fs-200);
  color: var(--white-color);
  line-height: var(--lh-200);
}

.footer-cta-btn {
  font-size: var(--fs-200);
}

.bottom-toll {
  font-size: var(--fs-200);
  color: var(--white-color);
}

.bottom-number {
  padding: 0;
  font-size: var(--fs-300);
}

.bottom-number:hover {
  color: goldenrod;
}

.privacy-policy {
  padding: 1em;
  background-color: rgb(4, 4, 4);
}

.bottom-year {
  color: white;
}

/* Media Queries */

/* Tablet and below (max-width: 64rem or 1024px) */
@media (max-width: 64rem) {
  footer {
    flex-direction: column;
    gap: 5em;
  }
}

/* 2XL (max-width: 1536px) */
@media (max-width: 1536px) {
  .bk-pd-black-less {
    padding: 3em 0;
    background-color: var(--black-color);
  }
}

/* XS (max-width: 475px) */
@media (max-width: 475px) {
  .left-side--footer img {
    width: 130px;
  }

  .footer-cta-btn {
    font-size: var(--fs-100);
  }
}






















footer {
  background-color: rgb(10, 10, 10);
  color: #fff;
  padding: 80px 20px 40px;
  font-family: 'Roboto', sans-serif;
}

.footer-wrappers{
  display: flex;
  margin: 0 auto;
  max-width: 2000px;
}

.contact-info{
  flex: 1;
  /* background-color: #007BFF; */
}

.logo-info{
  flex: 1;
  /* background-color: #0056b3; */
}

.contact-info h3{
  font-size: 1.7em;
  margin-bottom: 20px;
  text-align: center;
  /* background-color: red; */
}

.contact-details p {
  margin: 10px 0;
  /* background-color: darkblue; */
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  /* background-color: #e67e22; */
  /* background-color: lightgreen; */
}

.contact-item img.icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.contact-footer-info{
  font-weight: 600;
  font-size: 1.2rem;
}

.contact-footer-info-main{
  font-weight: 200;
  font-size: 1.1rem;
  letter-spacing: 1;
  margin-left: .25em;
}

.logo-info {
 display: flex;
 align-items: start;
 justify-content: center;
 
}

.logo {
  width: 80%;
}

.license {
  margin: 10px 0;
  font-size: 1.1em;
}

.serving-area {
  margin: 10px 0;
  font-size: 1.2em;
}

.divider {
  border: none;
  height: 1px;
  background-color: goldenrod;
  width: 80%;
  margin: 10px auto;
}

.logo-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding-top: 15px;
}

.small-logo {
  width: 180px;
  display: none;
}



.footer-bottom {
  text-align: center;
  padding-top: 20px ;
  border-top: 1px solid #444;
}

.footer-bottom p {
  font-size: 0.9em;
  color: #777;
}

@media screen and (max-width: 1080px) {
  .footer-wrappers{
   flex-direction: column-reverse;
   gap: 10px;
  }
  }



@media screen and (max-width: 768px) {
  .contact-info, .logo-info, .navigation {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .contact-item {
    justify-content: center;
  }

  .logo-row {
    gap: 15px;
  }
}









































































































/* Landing Front */
.custom-parallax-section {
  position: relative;
  background-image: url(/Images/commercial.jpeg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }

 /* .custom-parallax-section-about {
  position: relative;
  background-image: url(/Images/oldtownstatue.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 } */

 .custom-parallax-section-services {
  position: relative;
  background-image: url(/Images/oldtownstatue.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }

 /* .custom-parallax-section-sustain {
  position: relative;
  background-image: url(/Images/sustian-plant.webp);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 } */


 .custom-parallax-section-careers{
  position: relative;
  background-image: url(/Images/careers.webp);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }

 .custom-parallax-section-virginia{
  position: relative;
  background-image: url(/Images/Virginia.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }

 .custom-parallax-section-washington{
  position: relative;
  background-image: url(/Images/Washington.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }

 .custom-parallax-section-maryland{
  position: relative;
  background-image: url(/Images/Maryland.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }

 .custom-parallax-section-healthcare{
  position: relative;
  background-image: url(/Images/commercial-bld.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }
 
 .custom-parallax-section-education{
  position: relative;
  background-image: url(/Images/Univeristy.jpeg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }

 .custom-parallax-section-commercial{
  position: relative;
  background-image: url(/Images/commercial.jpeg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }
 
 /* .custom-parallax-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); 
  z-index: 1;
 } */
 
 /* .custom-parallax-content {
  position: relative;
  z-index: 2;
 }
  */
 

































 .industry-choice {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100%;
  gap: 20px;
}

/* Style for each box */
.box-new-front {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
  padding: 30px;
  text-align: center;
  border-radius: 12px;
  backdrop-filter: blur(10px); /* Background blur effect */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  min-width: 100%;
}

/* Hover effect */
.box-new-front:hover {
  transform: translateY(-5px); /* Lift on hover */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* Headings inside the boxes */
.box-new-front h2 {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 10px;
}

/* View More link styling */
.box-new-front a {
  text-decoration: none;
  color: goldenrod;
  font-weight: bold;
  transition: color 0.3s ease;
}

/* Hover effect for link */
.box-new-front a:hover {
  color: goldenrod;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .box-new-front {
      padding: 20px;
  }
  .box-new-front h2 {
      font-size: 1.2em;
  }
}





















/* Container styling for the section */
.mission-difference-section-again {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

/* Section title styling */
.section-title-again  {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 30px;
}

/* General styling for content blocks */
.content-block-again {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 20px;
}

/* Alternating alignment for text and image */
.content-block-again.mission .text-content {
  order: 1;
  text-align: left;
}
.content-block-again.mission .image-content {
  order: 2;
}
.content-block-again.difference .text-content {
  order: 2;
  text-align: left;
}
.content-block-again.difference .image-content {
  order: 1;
}

/* Styling for the titles inside each block */
.block-title {
  font-size: 1.9em;
  color: black;
  margin-bottom: 10px;
}

/* Paragraph styling */
.text-content p {
  font-size: 1em;
  line-height: 1.6;
  color: black;
}

/* Image styling with shadow effect */
.image-content img {
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments */


@media (max-width: 960px) {
  .content-block-again {
   display: inline-block;
  }
  .block-title, .text-content p{
    text-align: center;
  }
  .text-content p{
    padding-bottom: 2em;
  }
  .difference{
    display: flex;
    flex-direction: column-reverse;
  }
}



@media (max-width: 768px) {
  .content-block {
      flex-direction: column;
      text-align: center;
  }
  .text-content {
      order: 0;
      text-align: center;
  }
  .image-content img {
      max-width: 80%;
  }
}

































/* .hiring-section {
  text-align: left;
  padding: 50px 20px;
  color: black;
  border-radius: 10px;
  max-width: 600px;
  margin: 50px auto;
} */

/* .hiring-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
} */

/* .hiring-list {
  list-style: none;
  padding: 0;
  margin: 0;
} */

/* .hiring-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.hiring-list img {
  width: 40px;
  height: 40px;
}
 */

































/* Main Wrapper for the Hiring & Contact Sections */
.career-section {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  padding: 50px 5%;
  flex-wrap: wrap;
  
  max-width: 2600px;
  margin: 0 auto;
}

/* Individual Sections */
.hiring-section{
  flex: 1;
  min-width: 300px;
  padding: 30px;
  border-radius: 10px;
  background-color: lightcoral;
}

.contact-section {
  flex: 1;
  min-width: 300px;
  padding: 10px;
  border-radius: 10px;

}



/* Hiring Section Styles */
.hiring-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}

.hiring-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #007BFF;
}

.hiring-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.hiring-list img {
  width: 30px;
  height: 30px;
}

/* Contact Form Section */
.contact-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-container {
  width: 100%;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .career-section {
      flex-direction: column;
      align-items: center;
  }

  .hiring-section, .contact-section {
      width: 100%;
      max-width: 500px;
      text-align: center;
  }
}
























.hiring-content{
  flex: 1;
  min-width: 300px;
  padding: 30px;
  border-radius: 10px;
}

.hiring-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.hiring-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin: 0 auto;
  text-align: left;
}

.positions, .benefits {
  flex: 1;
}

.positions h3, .benefits h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

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

.positions li {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.positions img {
  width: 40px;
  height: 40px;
}

.benefits p {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .hiring-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .positions li {
    justify-content: center;
  }
}






















 /* Wrapper for the entire section */
 .custom-section-height-given {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 700px;
  max-height: auto;
  height: 75dvh;
 }
 
 .custom-section-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;

  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
 }
 
 /* Left section styles */
 .custom-left-section {
  align-self: flex-start;
 }
 
 .custom-section-title-top {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: white;
 }
 
 .custom-services-list {
  list-style-type: none;
  padding-left: 0;
 }
 
 .custom-services-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 1.2;
  color: white;
 }
 
 .custom-services-list img {
  margin-right: 10px;
  width: 44px;
 }
 
 /* Right section styles */
 .custom-right-section {
  max-width: 500px;
  width: 100%;
 }
 
 .custom-form-title {
  font-size: 30px;
  text-align: center;
  margin-bottom: 15px;
  color: white;
 }
 
 .custom-contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
 }
 
 .custom-contact-form input,
 .custom-contact-form textarea {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
 }
 
 .custom-contact-form textarea {
  resize: vertical;
  height: 100px;
 }
 
 .custom-submit-btn {
  background-color: #007BFF;
  
  color: #fff;
  border: none;
  padding: 15px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
 }
 
 .custom-submit-btn:hover {
  background-color: #0056b3;
 }
 
 /* Responsive styles */
 @media (max-width: 768px) {
  .custom-section-height-given {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 700px;
   max-height: auto;
   height: auto;
   padding: 3em 0 5em;
  }
  .custom-section-wrapper {
      flex-direction: column;
      align-items: center;
  }
 
  .custom-left-section, .custom-right-section {
      max-width: 100%;
  }
 
  .custom-header {
      flex-direction: column;
  }
 }
 


























.custom-parallax-section-sustain {
  position: relative;
  background-image: url(/Images/sustian-plant.webp);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }


 .custom-parallax-section-about {
  position: relative;
  background-image: url(/Images/sustian-plant.webp);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 }
 .custom-parallax-overlay {
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* Adjust the opacity for the darkness */
  z-index: 1;
 }

 .custom-parallax-content {
  position: relative;
  z-index: 2;
 }
 

.page-cover-section, .page-cover-section-sustanability, 
.page-cover-section-careers, .page-cover-section-virginia,
.page-cover-section-washington, .page-cover-section-maryland,
.page-cover-section-healthcare, .page-cover-section-education, 
.page-cover-section-commercial    {
  /* background-image: url("/Images/oldtownstatue.jpg"); */
   /* background-attachment: fixed; */
  background-repeat: no-repeat;
  height: 85vh;
  color: white;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 3rem;
  position: relative;
  background-size: cover;
  background-position: center;
}

/* .page-cover-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.0);
  z-index: 1;
} */

.page-cover-content {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 90%;
}
.page-cover-content h1 {
  font-size: 3rem;
  margin: 0 0 0.5rem;
}
.page-cover-content h2 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}
.page-cover-content button {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border: none;
  background: gold;
  color: black;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}
.page-cover-content button:hover {
  background: #f0c000;
}

/* ✅ Responsive Layouts */
@media (max-width: 1024px) {
 .page-cover-section {
    padding: 2rem;
    background-image: url("/Images/oldtownstatue.jpg");
  }

  .page-cover-content h1 {
    font-size: 2.5rem;
  }

  .page-cover-content h2 {
    font-size: 1.3rem;
  }

  .page-cover-content button {
    font-size: 0.95rem;
    padding: 0.7rem 1.3rem;
  }
}

@media (max-width: 768px) {
  .page-cover-section {
    background-image: url("/Images/oldtownstatue.jpg");
    background-attachment: scroll;
    padding: 1.5rem;
    height: 78vh;
  }

  .page-cover-content h1 {
    font-size: 2rem;
  }

  .page-cover-content h2 {
    font-size: 1.1rem;
  }

  .page-cover-content button {
    font-size: 0.9rem;
    padding: 0.6rem 1.1rem;
  }
}

@media (max-width: 480px) {
  .page-cover-section {
    padding: 1rem;
  }

  .page-cover-content h1 {
    font-size: 1.6rem;
  }

  .page-cover-content h2 {
    font-size: 1rem;
  }

  .page-cover-content button {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
}





/* Sustainability */
/* Tablet */
@media (max-width: 1024px) {
  .page-cover-section-sustanability {
    padding: 2rem;
    background-image: url("/Images/sustian-plant.webp");
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-cover-section-sustanability {
    background-image: url("/Images/sustian-plant.webp");
    background-attachment: scroll;
    padding: 1.5rem;
    height: 78vh;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-cover-section-sustanability {
    padding: 1rem;
  }
}


/* Careers */
/* Tablet */
@media (max-width: 1024px) {
  .page-cover-section-careers {
    padding: 2rem;
    background-image: url("/Images/careers.webp");
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-cover-section-careers {
    background-image: url("/Images/careers.webp");
    background-attachment: scroll;
    padding: 1.5rem;
    height: 78vh;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-cover-section-careers {
    padding: 1rem;
  }
}



/* Virginia */
/* Tablet */
@media (max-width: 1024px) {
  .page-cover-section-virginia {
    padding: 2rem;
    background-image: url("/Images/Virginia.jpg");
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-cover-section-virginia {
    background-image: url("/Images/Virginia.jpg");
    background-attachment: scroll;
    padding: 1.5rem;
    height: 78vh;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-cover-section-virginia {
    padding: 1rem;
  }
}


/* washington */
/* Tablet */
@media (max-width: 1024px) {
  .page-cover-section-washington {
    padding: 2rem;
    background-image: url("/Images/Washington.jpg");
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-cover-section-washington {
    background-image: url("/Images/Washington.jpg");
    background-attachment: scroll;
    padding: 1.5rem;
    height: 78vh;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-cover-section-washington {
    padding: 1rem;
  }
}



/* maryland */
/* Tablet */
@media (max-width: 1024px) {
  .page-cover-section-maryland {
    padding: 2rem;
    background-image: url("/Images/Maryland.jpg");
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-cover-section-maryland {
    background-image: url("/Images/Maryland.jpg");
    background-attachment: scroll;
    padding: 1.5rem;
    height: 78vh;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-cover-section-maryland {
    padding: 1rem;
  }
}



/* healthcare */
/* Tablet */
@media (max-width: 1024px) {
  .page-cover-section-healthcare {
    padding: 2rem;
    background-image: url("/Images/hospital.jpg");
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-cover-section-healthcare {
    background-image: url("/Images/hospital.jpg");
    background-attachment: scroll;
    padding: 1.5rem;
    height: 78vh;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-cover-section-healthcare {
    padding: 1rem;
  }
}

/* education */
/* Tablet */
@media (max-width: 1024px) {
  .page-cover-section-education {
    padding: 2rem;
    background-image: url("/Images/Univeristy.jpeg");
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-cover-section-education {
    background-image: url("/Images/Univeristy.jpeg");
    background-attachment: scroll;
    padding: 1.5rem;
    height: 78vh;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-cover-section-education {
    padding: 1rem;
  }
}


/* commercial */
/* Tablet */
@media (max-width: 1024px) {
  .page-cover-section-commercial {
    padding: 2rem;
    background-image: url("/Images/commercial.jpeg");
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-cover-section-commercial {
    background-image: url("/Images/commercial.jpeg");
    background-attachment: scroll;
    padding: 1.5rem;
    height: 78vh;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-cover-section-commercial {
    padding: 1rem;
  }
}


















































































.page-cover-section-home{
  background-repeat: no-repeat;
  min-height: 85vh;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0rem;
  position: relative;
  background-size: cover;
  background-position: center;
}


/* home */
/* Tablet */
@media (max-width: 1024px) {
  .page-cover-section-home {
    padding: 2rem;
    background-image: url("/Images/commercial.jpeg");
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-cover-section-home {
    background-image: url("/Images/commercial.jpeg");
    background-attachment: scroll;
    padding: 1.5rem;
    min-height: 78vh;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-cover-section-home {
    padding: 1rem;
  }
}













.promo-section {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 5rem 4rem;
  background-color: none;
  color: white;
}

.promo-left {
  flex: 1 1 60%;
  min-width: 300px;
}

.promo-left h1 {
  font-size: clamp(2.8rem, 5vw, 4rem);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: rgb(247, 204, 96);
}

.promo-left p {
  font-size: 1.6rem;
  margin-bottom: 2.5rem;
  color: white;
}

.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

.checklist img {
  width: 26px;
  height: 26px;
  margin-right: 1rem;
}

.promo-right {
  flex: 1 1 35%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 280px;
}

.info-box {
  background: white;
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
}

.info-box h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: black;
}

.info-box a {
  color: goldenrod;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
}

.info-box a:hover {
  text-decoration: underline;
}


/* 📱 Responsive: stack layout */
@media (max-width: 1080px) {
  .promo-section {
    flex-direction: column;
    padding: 4rem 2.5rem;
    gap: 2rem;
  }

  .promo-left, .promo-right {
    flex: 1 1 100%;
  }

  .promo-left h1 {
    font-size: 2.5rem;
  }

  .promo-left p {
    font-size: 1.3rem;
  }

  .checklist li {
    font-size: 1.1rem;
  }

  .info-box {
    padding: 1.8rem 0; 
  }
}



/* 📱 Responsive: stack layout */
@media (max-width: 768px) {
  .promo-section {
    flex-direction: column;
    padding: 2rem 1rem;
    gap: 1rem;
  }

  .promo-left, .promo-right {
    flex: 1 1 100%;
  }

  .promo-left h1 {
    font-size: 2.5rem;
  }

  .promo-left p {
    font-size: 1.3rem;
  }

  .checklist li {
    font-size: 1.1rem;
  }

  .info-box {
    padding: 1.4rem;
  }
}




















































































.profound-oval-section-final {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  flex-wrap: wrap;
}

.profound-left-side-final, .profound-right-side-final {
  flex: 1 1 45%;
  min-width: 300px;
}

/* Center the image both X & Y */
.profound-image-wrapper-final {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profound-image-wrapper-final img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
}

/* Image Title Overlay */
.profound-image-title-final {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 15px;
  border-radius: 8px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  display: none;
}

/* Dots below image */
.profound-dots-final {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.profound-dot-final {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #999;
  transition: background 0.3s;
}

.profound-dot-final.active {
  background: var(--active-color, #007bff);
}

/* Ovals */
.profound-right-side-final {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.profound-oval-final {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.05);
  padding: 2rem;
  border-radius: 20px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
  width: 100%;
  max-width: 500px;
}

/* Oval Left (Icon) */
.profound-oval-left-final {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profound-oval-left-final img {
  width: 75px;
  height: 70px;
}

/* Oval Right (Text) */
.profound-oval-right-final {
  margin-left: 1.5rem;
}

.profound-oval-title-final {
  font-size: 1.5rem;
  color: black;
  margin-bottom: 0.5rem;
}

.profound-oval-right-final p {
  margin: 0;
  font-size: 1rem;
  color: #ccc;
}

/* Active & Hover */
.profound-oval-final.active, .profound-oval-final:hover {
  border-color: var(--color);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 15px var(--color), 0 0 25px gold;
}

/* Responsive */
@media (max-width: 1080px) {
  .profound-oval-section-final {
    flex-direction: column;
    text-align: center;
  }

  .profound-left-side-final {
    width: 100%;
  }

  .profound-right-side-final {
    width: 100%;
    align-items: center;
  }

  .profound-oval-final {
    flex-direction: column;
  }

  .profound-oval-left-final {
    margin-bottom: 1rem;
  }

  .profound-oval-right-final {
    margin-left: 0;
  }
}








/* Hiring Form */
.hiring-form-container-final {
  background: #f9f9f9;
  color: #111;
  padding: 3rem 2rem;
  max-width: 700px;
  margin: 3rem auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.hiring-form-container-final h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hiring-form-container-final p {
  margin-bottom: 2rem;
  color: #555;
}

.hiring-form-final {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hiring-form-group-final {
  display: flex;
  flex-direction: column;
}

.hiring-form-group-final label {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #111;
}

.hiring-form-group-final input,
.hiring-form-group-final textarea {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  background: #fff;
  color: #111;
  resize: none;
}

.hiring-form-group-final input::placeholder,
.hiring-form-group-final textarea::placeholder {
  color: #888;
}

.hiring-submit-final {
  padding: 1rem 2rem;
  background: linear-gradient(45deg, #ffc107, #ffb300);
  color: #111;
  border: none;
  border-radius: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hiring-submit-final:hover {
  background: linear-gradient(45deg, #ffb300, #ffa000);
}

.hiring-error-message-final {
  color: #dc3545;
  font-size: 0.9rem;
  margin-top: 5px;
}

.hiring-form-status-final {
  margin-top: 1rem;
  color: #333;
  font-weight: bold;
}


/* Responsive */
@media (max-width: 600px) {
  .hiring-form-container-final h2 {
    font-size: 2rem;
  }
}































/* Hero Section */
.careers-hero-final {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(45deg, #f4f4f4, #eaeaea);
  color: #111;
}

.careers-hero-final h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.careers-hero-final p {
  font-size: 1.2rem;
  color: #555;
}

/* Careers List */
.careers-list-final {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem 2rem;
  max-width: 800px;
  margin: auto;
}

/* Job Card */
.job-card-final {
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  color: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-left: 5px solid #ccc;
  transition: 0.3s ease;
}

.job-card-final.active {
  border-left-color: #28a745;
}

.job-card-final.inactive {
  border-left-color: #dc3545;
}

.job-header-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.job-title-final {
  font-size: 1.5rem;
  font-weight: bold;
}

.status-dot-final {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #28a745;
}

.job-card-final.inactive .status-dot-final {
  background: #dc3545;
}

.job-details-final {
  font-size: 1rem;
  color: #333;
  margin-top: 0.5rem;
}

.posted-time-final {
  font-size: 0.9rem;
  color: #777;
  margin-top: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .careers-hero-final h1 {
    font-size: 2rem;
  }

  .job-title-final {
    font-size: 1.2rem;
  }
}