/* sector */
:root {
    --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-primary: "Roboto", sans-serif;
    --font-secondary: "Work Sans", sans-serif;
    
    --color-default: #364d59;
    --color-primary: #FE0000;
    --color-secondary: #52565e;
}

.parent {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */ /* Just for visualization */
}
.maincontainer-sec {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 30px;
}
.container-sec {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
}

.card-sec {
    width: 210px;
    text-align: center;
    position: relative;
}

.img-container-sec {
    position: relative;
    width: 100%;
    height: 210px; /* Fixed height for the image */
    overflow: hidden;
}

.img-container-sec img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    flex: 1 0 21%;/* Maintain aspect ratio */
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

.img-container-sec:hover img {
    transform: scale(1.1); /* Zoom effect on hover */
}

.overlay-sec {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Overlay covers exactly 60% of the image height */
    background-color: #808080; /* Solid grey background */
    color: white;
    padding: 10px;
    box-sizing: border-box;
    clip-path: polygon(0 1%, 100% 43%, 100% 100%, 0% 100%); /* Wavy top border */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Align items to the left */
    z-index: 1; /* Ensure overlay stays on top */
}
/* mobile view for above */
@media (max-width: 600px) {
  .maincontainer-sec {
    flex-direction: column;
    gap: 20px; /* Reduced gap for smaller screens */
  }

  .container-sec {
    flex-direction: column;
    gap: 20px; /* Adjust spacing for smaller screens */
  }

  .card-sec {
    width: 100%; /* Make cards take full width */
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .img-container-sec {
    height: 150px; /* Reduce image height for smaller screens */
  }

  .overlay-sec {
    height: 50%; /* Adjust overlay height */
    padding: 5px; /* Reduce padding for smaller screens */
    clip-path: polygon(0 2%, 100% 45%, 100% 100%, 0% 100%); /* Slightly adjusted wavy top */
  }

  .img-container-sec img {
    object-fit: cover; 
    transition: transform 0.2s ease; /* Slightly faster zoom effect */
  }
}
/*end/
/* Heading and intro inside the overlay with default styling (not using CSS variables) */
.img-heading-sec {
    font-size: 18px;
    position: absolute;
    left: 5px;
    top: 32px;
    font-weight: bold;
    margin: 0;
    text-align: left; /* Align heading to the left */
    width: 100%;
}

.img-intro-sec {
    font-size: 12px;
    margin: 5px 0;
    position: absolute;
    top: 55px;
    left: 5px;
    text-align: left; /* Align intro paragraph to the left */
    font-weight: lighter;
    width: 100%;
}

.learn-more-sec {
    display: block;
    margin-top: 10px;
    text-decoration: none;
    font-size: 14px;
    color: var(--color-primary); /* Use primary color for "Learn More" button */
    font-weight: bold;
    transition: color 0.3s ease;
    text-align: left; /* Align the "Learn More" button to the left */
    width: 100%; /* Make sure it spans the full width of the overlay */
}

.learn-more-sec:hover {
    color: #0056b3;
}
/*mobile css*/
@media (max-width: 600px) {
  .img-heading-sec {
    font-size: 16px; /* Slightly smaller font size */
    left: 3px; /* Adjust positioning */
    top: 20px; /* Adjust positioning */
    text-align: left; /* Ensure alignment stays consistent */
  }

  .img-intro-sec {
    font-size: 10px; /* Reduce font size */
    top: 40px; /* Adjust positioning */
    left: 3px; /* Adjust positioning */
    margin: 3px 0; /* Reduce margin */
    text-align: left;
   /* Maintain alignment */
  }

  .learn-more-sec {
    font-size: 12px; /* Reduce font size */
    margin-top: 8px; /* Adjust spacing */
    text-align: left; /* Maintain alignment */
    width: 100%; /* Ensure it spans full width */
  }

  .learn-more-sec:hover {
    color: #004085; /* Slightly different hover color for smaller screens */
  }
}

/* sector end */

/* brocher*/
.broch-container{
    margin: 70px 70px 100px 70px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.large-rectangle-broch {
    background-color: #e0e0e0; /* Light Grey */
    width: 90%;
    padding: 50px;
    text-align: center;
    border-radius: 10px;
    position: relative;
  }
  
  .heading-broch {
    font-size: 36px;
    margin: 0;
  }
  
  .title-broch {
    font-size: 18px;
    margin: 10px 0 0;
  }
  
  /* Overlay Section */
  .overlay-section-broch {
    position: relative;
    width: 70%;
    margin-top: -30px; /* To overlap the large rectangle */
  }
  
  /* Small Rectangle with Button */
  .small-rectangle-broch {
    background-color: white;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    width: 60%;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.13);
    position: relative;
    z-index: 2;
  }
  
  .small-rectangle-broch::before {
    content: "";
    height: 100px;
    background: url('../img/constructions-1.jpg') no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 10px;
  }
  
  /* Brochure Button */
  .brochure-button-broch {
    background-color: #FF4141;
    color: white;
    font-size: 18px;
    position: relative;
    top: 15px;
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
  }
  
  .brochure-button-broch:hover {
    background-color: #D23636;
    font-style: var(--color-default);
  }
  /* mobile css*/
  @media (max-width: 600px) {
    .broch-container {
      margin: 20px 10px 40px 10px; /* Reduce margins for smaller screens */
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .large-rectangle-broch {
      width: 95%; /* Take up most of the screen width */
      padding: 30px; /* Reduce padding */
      border-radius: 8px; /* Slightly smaller border radius */
    }
  
    .heading-broch {
      font-size: 24px; /* Reduce font size for headings */
      margin: 0;
    }
  
    .title-broch {
      font-size: 14px; /* Smaller title font size */
      margin: 5px 0 0; /* Adjust spacing */
    }
  
    .overlay-section-broch {
      width: 90%; /* Adjust width for better layout on mobile */
      margin-top: -20px; /* Adjust overlap for smaller screens */
    }
  
    .small-rectangle-broch {
      width: 80%; /* Adjust width */
      padding: 15px; /* Reduce padding */
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
      border-radius: 8px; /* Slightly smaller border radius */
    }
  
    .small-rectangle-broch::before {
      height: 80px; /* Adjust image height */
    }
  
    .brochure-button-broch {
      font-size: 16px; /* Reduce button font size */
      padding: 10px 30px; /* Adjust padding */
      top: 10px; /* Adjust positioning */
    }
  
    .brochure-button-broch:hover {
      background-color: #C53030; /* Slightly different hover color for mobile */
    }
  }
  
  /* brocher end */


  /* accreditation*/
/* General Container Styling */
.main-container-accreditation {
    margin: 0;
    padding: 0;
    padding: 40px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .container-accreditation {
    text-align: center;
    width: 100%;
    max-width: 1000px;
  }
  
  /* Heading */
  .container-accreditation h1 {
    font-size: 36px;
    margin-bottom: 10px;
  }

  /*mobile css for aboove*/
  @media (max-width: 600px) {
    .main-container-accreditation {
      padding: 20px 0; /* Reduce padding for smaller screens */
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .container-accreditation {
      text-align: center;
      width: 90%; /* Reduce width to fit within mobile screens */
      max-width: 100%; /* Ensure no unnecessary restrictions */
    }
  
    .container-accreditation h1 {
      font-size: 24px; /* Reduce font size for better readability */
      margin-bottom: 8px; /* Adjust spacing */
    }
  }
  
  
  /* Carousel Wrapper - 3 Column Layout */
  .carousel-wrapper-accreditation {
    display: flex;
    align-items: center; /* Vertically center elements */
    justify-content: space-between; /* Add space between columns */
    width: 100%;
    max-width: 1000px;
  }
  
  /* Arrow Container (Left & Right Buttons) */
  .arrow-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px; /* Fixed width for arrows */
  }
  
  .arrow {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    z-index: 2;
    font-size: 18px;
    border-radius: 50%;
    opacity: 0.7;
    outline: none;
  }
  
  .arrow:hover {
    opacity: 1;
  }
  
  /* Carousel Container */
  .carousel-container-accreditation {
    overflow: hidden; /* Ensures only visible area is shown */
    width: 100%; /* Adjust as per your layout */
    position: relative;
  }
  
  .carousel-track-accreditation {
    display: flex;
    transition: transform 0.3s linear;
  }
  
  .logo-item-accreditation {
    padding: 40px;
    box-sizing: border-box;
    flex: 0 0 auto; /* Ensures items stay in a single row */
  }
  
  .logo-item-accreditation img {
    width: 130px;
    height: auto;
    display: block;
  }
  
  /*accrditation mobile css*/
  @media (max-width: 600px) {
    .carousel-wrapper-accreditation {
      flex-direction: column; /* Stack elements vertically */
      align-items: center; /* Center-align elements */
      justify-content: center; /* Adjust spacing for mobile */
      max-width: 100%; /* Ensure full width usage */
    }
  
    .arrow-container {
      flex: 0 0 40px; /* Smaller width for arrows */
      margin: 10px 0; /* Add vertical spacing between arrows and carousel */
    }
  
    .arrow {
      font-size: 16px; /* Reduce arrow size */
      padding: 8px 12px; /* Adjust padding */
    }
  
    .carousel-container-accreditation {
      width: 100%; /* Use full screen width */
    }
  
    .carousel-track-accreditation {
      flex-wrap: nowrap; /* Keep logos in a single row */
      overflow-x: scroll; /* Enable horizontal scrolling for smaller screens */
      -webkit-overflow-scrolling: touch; /* Smooth scrolling for touch devices */
    }
  
    .logo-item-accreditation {
      padding: 20px; /* Reduce padding for better spacing */
    }
  
    .logo-item-accreditation img {
      width: 100px; /* Resize logos for smaller screens */
      height: auto;
    }
  
    .sup-container-accreditation {
      margin-top: 40px; /* Reduce margin for compact layout */
      padding: 20px; /* Reduce padding for smaller screens */
      align-items: center;
    }
  }
  
  /*experience banner*/
  .main-hero-section-exp{
    padding: 40px 0 40px 0;

  }
  .hero-section-exp {
    position: relative;
    width: 100%;
    height: 60vh; /* Set height to 50% of the viewport */
    background: url('../img/constructions-3.jpg') no-repeat center center/cover;
  }
  
  /* Overlay for dark effect */
  .overlay-exp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Adjust opacity for darkness */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Content (Logo + Text) in Column Layout */
  .content-exp {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center the content horizontally */
    max-width: 1000px;
    padding: 20px;
  }
  
  /* Logo Container */

  .logo-container-exp {
    margin-bottom: 20px; /* Add spacing between logo and text */
  }
  
  .logo-container-exp img {
    width: 150px; /* Adjust size as needed */
    height: auto;
  }
  
  /* Text Container */
  .text-container-exp {
    color: white;
    text-align: center;
    width: 800px; /* Center-align the text */
  }
  
  .text-container-exp p {
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
  }
  /*expe banner end*/
/*exp mobile css*/
@media (max-width: 600px) {
  .main-hero-section-exp {
    padding: 20px 0; /* Reduce padding for a compact layout */
  }

  .hero-section-exp {
    height: 40vh; /* Adjust height for smaller screens */
    background-size: cover; /* Ensure background covers the section */
  }

  .overlay-exp {
    background-color: rgba(0, 0, 0, 0.7); /* Slightly darker overlay for better text visibility */
  }

  .content-exp {
    padding: 10px; /* Reduce padding for smaller devices */
    width: 100%; /* Ensure content spans full width */
  }

  .logo-container-exp {
    margin-bottom: 15px; /* Adjust spacing for better alignment */
  }

  .logo-container-exp img {
    width: 100px; /* Reduce logo size for smaller screens */
  }

  .text-container-exp {
    width: 100%; /* Use full width for text */
    padding: 10px; /* Add padding for text readability */
    font-size: 14px; /* Adjust font size for better visibility */
  }

  .text-container-exp p {
    font-size: 13px; /* Slightly smaller font size for compact layout */
    line-height: 1.5; /* Adjust line height for readability */
  }
}

  /* clients*/
  .main-clients-container{
    margin: 0 0 40px 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
  .clients-container {
    text-align: center;
    width: 90%;
    max-width: 1200px;
  }
  
  h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #333;
  }
  
  .logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 3fr);
    gap: 20px;
    justify-items: center;
  }
  
  .logo-item img {
    width: 150px;
    height: 150px;
    object-fit: contain;
  }
  /* clients end and mobile below */
  @media (max-width: 600px) {
    .main-clients-container {
      margin: 0 0 20px 0; /* Adjust margin for a compact layout */
      padding: 0;
      flex-direction: column; /* Stack items vertically */
    }
  
    .clients-container {
      width: 100%; /* Use full width for mobile */
      padding: 0 10px; /* Add padding for better spacing */
    }
  
    h1 {
      font-size: 1.8rem; /* Reduce font size for smaller screens */
      margin-bottom: 20px; /* Adjust spacing below heading */
      color: #333;
    }
  
    .logo-grid {
      grid-template-columns: repeat(2, 1fr); /* Display 2 logos per row */
      gap: 15px; /* Adjust gap for smaller screens */
    }
  
    .logo-item img {
      width: 100px; /* Scale down logo size */
      height: 100px;
      object-fit: contain; /* Ensure logos fit within the size */
    }
  }
  
/* hero page content*/
.text-center-hc {
  text-align: left !important;
  position: absolute;
  padding: 10px;
  width: 700px;
  left: 120px;
  top: 28%;
  bottom: 150px;
}

.pro-sec img{
  position: relative;
  width: auto;
  left: 30%;
  height: 60vh;
}
@media (max-width: 600px) {
  .text-center-hc {
    text-align: left !important; /* Maintain left alignment */
    position: absolute;
    padding: 10px;
    width: 90%; /* Use a percentage width for responsiveness */
    left: 10px; /* Adjust horizontal positioning */
    top: 25%; /* Adjust vertical positioning for better fit */
    bottom: auto; /* Remove fixed bottom value for flexibility */
  }
  .pro-sec img{
    position: relative;
    width: 600px;
    left: -100px;
  }

  
}


/*GRAVIS*/
.gravis{
  
}
.container-gis {
  display: flex;
  width: 100%;
  height: auto;
  margin: 20px auto;
  max-width: 1200px;
  border: 1px solid #ddd; /* Optional for visualization */
}

/* Left Column Styling */
.left-column-gis {
  flex: 0 0 40%; /* Fixed at 40% width */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #f9f9f9; /* Optional for visualization */
}

.left-column-gis img {
  width: auto;
  height: 300px;
  object-fit: cover;
}

/* Right Column Styling */
.right-column-gis {
  flex: 0 0 60%; /* Fixed at 60% width */
  padding: 20px;
  text-align: left;
}

.right-column-gis h2 {
  margin-top: 0;
  color: #333;
}

.right-column-gis p {
  margin: 10px 0 20px;
  color: #555;
  line-height: 1.6;
}

.right-column-gis button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.right-column-gis button:hover {
  background-color: #0056b3;
}
/*GRAVIS end and mobile css below*/
@media (max-width: 600px) {
  .container-gis {
    flex-direction: column; /* Stack columns vertically */
    width: 100%; /* Ensure full width on smaller screens */
    margin: 10px auto; /* Adjust margin for mobile */
    border: none; /* Optional: remove border for cleaner look */
  }

  /* Left Column Styling */
  .left-column-gis {
    flex: 0 0 auto; /* Allow content to adjust dynamically */
    width: 100%; /* Full width for the image */
    padding: 10px 0; /* Add padding for spacing */
    background-color: transparent; /* Optional: remove background */
  }

  .left-column-gis img {
    width: 90%; /* Scale image down for mobile screens */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center the image horizontally */
    display: block; /* Ensure proper alignment */
  }

  /* Right Column Styling */
  .right-column-gis {
    flex: 0 0 auto; /* Allow dynamic resizing */
    width: 100%; /* Full width for text content */
    padding: 15px; /* Adjust padding for better spacing */
    text-align: center; /* Center-align text on mobile */
  }

  .right-column-gis h2 {
    font-size: 1.5rem; /* Adjust font size */
    margin-top: 10px; /* Add spacing for better readability */
  }

  .right-column-gis p {
    margin: 10px 0 15px; /* Adjust margins */
    font-size: 1rem; /* Scale text size */
    line-height: 1.5; /* Adjust line height */
  }

  .right-column-gis button {
    padding: 10px 20px; /* Keep button size consistent */
    font-size: 1rem; /* Adjust font size */
    width: auto; /* Avoid stretching the button */
    margin: 10px auto; /* Center button */
  }
}


/*gravis page*/
.container-gvs {
  padding: 40px;
  background: #fff;
  height: 100%;
}
.projects-gallery-gvs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  padding-left: 90px;
  padding-right: 90px;
}

.projects-gallery-gvs div {
  text-align: center;
}

.projects-gallery-gvs img {
  width: 100%;
  border-radius: 8px;
  height: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.projects-gallery-gvs p {
  margin-top: 0.5rem;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-size: 0.9rem;
}
.products-container-gvs {
  display: flex;
  left: 30px;
  position: relative;
  align-items: center;
  align-items: flex-start;
  gap: 1rem;
  padding-left: 90px;
  width: 90%;
  height: 70vh;
}

.products-content-gvs {
  flex: 3;
}

.products-image-gvs {
  flex: 2;
  text-align: center;
  position: relative;
}

.products-image-gvs img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: opacity 0.5s ease;
}

.product-gvs {
  cursor: pointer;
}

.product-gvs:hover {
  background-color: #f7f7f7;
  transition: background-color 0.3s ease;
}
  

.contact-gvs {
  text-align: center;
  padding: 2rem;
  background-color: var(--color-secondary);
  color: white;
  border-radius: 8px;
  margin-top: 2rem;
}

.contact-gvs a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: bold;
}


.img-pro img{
  padding-bottom: 20px;
  border-radius: 20px;
  width: 310px;
}

@media (max-width: 600px) {
  .container-gvs {
    padding: 20px; /* Reduce padding for smaller screens */
    height: auto; /* Adjust height to fit content */
  }

  .projects-gallery-gvs {
    grid-template-columns: 1fr; /* Display single column on small screens */
    gap: 0.5rem; /* Reduce gap between items */
    padding-left: 10px; /* Adjust padding for mobile */
    padding-right: 10px;
  }

  .projects-gallery-gvs img {
    height: auto; /* Maintain aspect ratio */
    width: 100%; /* Fit image within container */
    border-radius: 6px; /* Slightly reduce border radius */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Adjust shadow */
  }

  .projects-gallery-gvs p {
    font-size: 0.8rem; /* Scale down font size */
    margin-top: 0.4rem;
  }

  .products-container-gvs {
    flex-direction: column; /* Stack content vertically */
    padding-left: 10px; /* Adjust padding for mobile */
    width: 100%; /* Full width on smaller screens */
    height: auto; /* Adjust height */
    gap: 0.5rem; /* Reduce gap between elements */
  }

  .products-content-gvs,
  .products-image-gvs {
    flex: auto; /* Allow elements to take necessary space */
    width: 100%; /* Full width for both sections */
    text-align: center; /* Center-align content */
  }

  .products-image-gvs img {
    width: 90%; /* Scale image for smaller screens */
    border-radius: 6px; /* Slightly reduce border radius */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Adjust shadow */
  }

  .product-gvs:hover {
    background-color: #f9f9f9; /* Slightly lighter hover effect */
  }

  .contact-gvs {
    padding: 1rem; /* Reduce padding for smaller screens */
    margin-top: 1.5rem; /* Adjust margin */
    font-size: 0.9rem; /* Scale down text */
  }

  .contact-gvs a {
    font-size: 0.9rem; /* Adjust link font size */
  }

  .img-pro img {
    width: 90%; /* Adjust image size */
    padding-bottom: 10px; /* Reduce padding */
    border-radius: 15px; /* Slightly reduce border radius */
  }
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

#location-details h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

#location-details p {
  font-size: 1rem;
  line-height: 1.6;
}