:root {
    --primary-color: #EF0000;
    --orange: #ED6C31;
    --Green: #65BC7A;
    --black: #484848;
    --bg1: #F5F7F9;
    --bg2: #F5F5F5;
    --bg3: #EFEFEF;
    --bg4: #FDFDFD;
    --bg5: #F7F7F7;
    --bg6: #F3F3F3;
    --title: #333333;
    --blue: #F5FCFF;
    --Light_green: #E6F4F4;
  }
  
p{
    font-size: 18px;
    text-align:justify;
}
.heading:hover{
    color:green !important;
  }
/* For the hero image */

/* .container-fluid {
    position: relative;
    width: 100%;
    height: 54vh;
    color: white;
} */

.background-image {
    position: relative;
    background-image: url('images/infrastructure/hero.jpg');
    background-size: cover; /* Make the image cover the entire container */
    background-position: center;
    height: 50vh;
    width: 100%;
    overflow: hidden;
}

.background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.5);  */
    z-index: 1;
}

.text-overlay {
    position: absolute;
    z-index: 2;
    color: white;
    text-align: left;
}

.project-team {
    top: 20%; /* Adjust the position to avoid overlap */
    left: 10%;
    transform: translateY(-50%);
}

.design-team {
    top: 50%; /* Position the second text block below the first */
    left: 10%;
    transform: translateY(-50%);
}

.text-overlay h3, .text-overlay p {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}

.text-overlay h3 {
    transform: translateX(-100%);
    transition: opacity 1s ease, transform 2s ease;
}

.text-overlay p {
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}

/* Trigger transition on hover */
.background-image:hover .text-overlay h3,
.background-image:hover .text-overlay p {
    opacity: 1;
    transform: translateX(0), translateY(0);
}

/* End of the hero image */

/* Content style starts */

.image1 {
  height: 350px;
  width: 640px;
  border-radius: 10px; /* Rounded corners */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
  object-fit: cover; /* Ensures the image fits perfectly */
}

.our_shop:hover {
  transform: scale(1.05); /* Slight zoom effect */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

.our_shop{
  border: 1px solid #F5F5F5;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}
.despatch{
  border: 1px solid #F5F5F5;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}
.despatch:hover{
  transform: scale(1.05);
}


/* Content style end */

/* Our testing equipments starts */

.card {
    /* margin: 5%; */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* overflow: hidden; */
    /* position: relative;  */
    transition: transform 0.2s ease-in-out;
  }
  
  .card:hover {
    transform: scale(1.08); 
  }
  
  .card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: green; /* Customize underline color */
    transition: all 0.3s ease;
    transform: translateX(-50%);
  }
  
  .card:hover::after {
    width: 100%; /* Underline width when hovered */
  }
  

  /* General adjustments for smaller screens */
  @media (min-width:320px) and (max-width:480px){
    .row {
      display: flex;
      flex-wrap: wrap; /* Ensure cards stack properly */
    }
  
    .card {
      display: flex; /* Flexbox for internal layout */
      flex-direction: row; /* Image and content side by side */
      align-items: center; /* Center image and text vertically */
      width: 100%; /* Full width of the container */
      height: 140px; /* Maintain responsive height */
      margin-bottom: 1rem; /* Spacing between cards */
      margin-left: -30px !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adjust shadow */
    }
  
    /* Ensure the image is on the left */
    .card img {
      width: 100% !important; /* Set fixed width for image */
      height: 149px !important; /* Maintain aspect ratio */
      object-fit: cover; /* Ensure image fills its space */
      border-radius: 10px 0 0 10px; /* Rounded corners on the left */
    }
  
    /* Content on the right */
    .card-body {
      flex: 1; /* Take remaining space */
      padding: 10px; /* Add padding for content spacing */
      text-align: left; /* Align text to the left */
    }
  
    /* Equal height for all cards */
    .card {
      min-height: 150px; /* Ensure consistent height */
    }
  
    /* Responsive text sizes */
    .card-title {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }
  
    .card-text {
      font-size: 0.9rem;
      line-height: 1.4;
    }
  }
  
  /* Our testing equipments end */

  /* animation starts */

@keyframes appear {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom {
  animation: appear 5s linear;
  animation-timeline: view();
  animation-range: entry 0% cover 33%;
}
/* animation end */


   /* Mobile view responsive starts */

@media (min-width:320px) and (max-width:480px){
  .hero{
    height: 250px !important;
    width: 450px !important;
    margin-left: -15px;
  }
  .infra_con1{
    margin-top: -430px !important;
  }
  .our_shop:hover{
    transform: none !important;
    margin-left: -10px;
   } 
   .image1{
    margin-top: -20px !important;
   }
   .shop1{
    height: 200px !important;
    width: 240px !important;
    margin-left: 20px;
   }
  .shop2{
    height: 200px !important;
    width: 240px !important;
    margin-right: 20px !important;
   }
   .qua1{
    height: 340px !important;
    width: 200px !important;
    margin:50px 0px 0px 100px;
   }
   .qua_con{
    padding-left:17px !important;
   }
   .qua2{
    height: 200px !important;
    width:250px !important; 
   }
   .qua3{
    height: 200px !important;
    width: 250px !important;
    margin: -40px 0px 0px 188px !important;
   }
   .qua4{
    height: 200px !important;
    width: 250px !important;
    margin: -40px 0px 0px 5px !important;
   }
   .storage{
    height: 250px !important;
    width: 450px !important;
   }
}

  /* Mobile view responsive end */
  
  /* Tablet view responsive starts */

@media (min-width:500px) and (max-width:1000px){
    
}
  
  /* Tablet view responsive end */
  
  /* Laptop view responsive start */

@media (min-width:1000px){
  .copyright{
    margin-left: 38px !important;
}
.powered{
    margin-left: -50px !important;
}
.social p{
    margin-top: 20px !important;
}
}
  
  /* Laptop view responsive end */