.hero2 {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Replace 'url' with the path to your hero2 background image */
    background: url('img/h1.jpg') no-repeat center center fixed; 
    background-size: cover;
    /* Assuming you have a height of 100vh, you can adjust as necessary */
    height: 100vh;
    background-color: rgba(0,0,0,0.6);
}

.hero2-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;  /* adjust as necessary */
    color: #fff;
}

.hero2-image {
    width: 60%; /* adjust as necessary */
    border: 3px solid #fff;
    margin-left: 20px;
}

.hero2-image img {
    max-width: 100%;
    height: auto;
}

.hero2-text {
    width: 45%; /* adjust as necessary */
}

.hero2-text h1, .hero2-text h2 {
    margin-bottom: 1em;
}

.hero2-content h1 {
    font-family: 'Arial Narrow'; /* Change to desired font */
    font-size: 20px; /* Adjust size as needed */
    line-height: 1.0; /* Adjust line spacing as needed */
    font-weight: lighter;
}

.hero2-content h2 {
    font-family: 'Impact'; /* Change to desired font */
    font-size: 2.5rem; /* Adjust size as needed */
    line-height: 1.0; /* Adjust line spacing as needed */
    font-weight: lighter;
}

.hero2-content p {
    font-family: 'sans-serif'; /* Change to desired font */
    font-size: 17px; /* Adjust size as needed */
    line-height: 1.5; /* Adjust line spacing as needed */
    font-weight: lighter;
}

.features-benefits {
    background: rgba(255, 255, 255, 0.8);
    padding: 30px;
    margin: 50px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.container {
    width: 80%;
    margin: 0 auto;
}

.card2-container {
    flex-wrap: wrap;
    justify-content: space-around;
    display: flex;
    /* justify-content: space-between; */
    gap: 20px;
}

.card2 {
    margin-top: 30px;
    width: 70%;
    margin-bottom: 2em;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    flex: 1;
}

.card2 h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 2rem;
    color: #333;
}

.container h2 {
    margin-bottom: 15px;
}

.container h3 {
    margin-bottom: 55px;
}

.card2 h5 {
    font-size: 1.5rem;
    color: #666;
}

.card2 p {
    font-size: 1rem;
    color: #999;
}

.who-we-are2 {
    margin-top: 50px;
    display: flex;
    background-image: url('img/h1.jpg');
    background-size: cover;
    background-position: center;
    padding: 50px;
    min-height: 600px; /* Increase the height of the section */
  }
  
  .who-we-are-image2 {
    flex: 1;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    margin-left: 20px;
    width: 500px; /* Adjust the width of the image */
    height: 600px; /* Adjust the height of the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    margin-top: 45px;
  }

  .work-process {
    display: flex;
    justify-content: space-between;
    padding: 50px 0;
}

.container2 {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.content {
    flex: 0 1 70%; /* this means that the content can grow to occupy 70% of the container's width */
}

.hs h2{
    font-size: 15px;
    color: #999;
    margin-bottom: 20px;
}

.hs h3{
    font-size: 45px;
    margin-bottom: 30px;
    font-family: Impact;
    font-weight: lighter;
    
}

.images {
    flex: 0 1 30%; /* this means that the images can grow to occupy 30% of the container's width */
    position: relative;
}

.image1 {
    position: relative;
    z-index: 2;
}

.image2 {
    position: absolute;
    top: 170px;
    left: 75px;
    z-index: 1;
    width: 100%;
}

.card3 {
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.7;
}

.card3 h4 {
    font-size: 2rem;
    color: #333;
}

.card3 h5 {
    font-size: 1.5rem;
    color: #666;
}

.card3 p {
    font-size: 1rem;
    color: #999;
}

@media(max-width: 700px){

    .work-process {
        flex-direction: column;
        display: flex;
        justify-content: space-between;
        padding: 50px 0;
    }
    
    .container2 {
        flex-direction: column;
        max-width: 1200px;
        display: flex;
        justify-content: space-between;
    }

    .card2{
        width: 100%;
        margin-top: -10px;
    }

    .card2 h4 {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 1rem;
        color: #333;
    }



    
    .content {
        margin: 20px;
       text-align: center;
        flex: 0 1 50%; /* this means that the content can grow to occupy 70% of the container's width */
    }
    
    .hs h2{
        font-size: 15px;
        color: #999;
        margin-bottom: 20px;
    }
    
    .hs h3{
        font-size: 45px;
        margin-bottom: 30px;
        font-family: Impact;
        font-weight: lighter;
        
    }
    
    .images {
        flex: 0 1 30%; /* this means that the images can grow to occupy 30% of the container's width */
        position: relative;
        margin-left: 45px;
        margin-top: -20px;
        margin-bottom: 35px;
    }
    
    .image1 {
        position: relative;
        z-index: 2;
        width: 60%;
        margin-bottom: 10px;
        margin-left: 20px;
    }
    
    .image2 {
        position: absolute;
        top: 170px;
        left: 75px;
        z-index: 1;
        width: 70%;
        margin-top: -60px;
    }
    
    .card3 {
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        line-height: 1.7;
        width: 100%;
    }
    
    .card3 h4 {
        font-size: 2rem;
        color: #333;
    }
    
    .card3 h5 {
        font-size: 1.5rem;
        color: #666;
    }
    
    .card3 p {
        font-size: 1rem;
        color: #999;
    }



    .hero2 {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        /* Replace 'url' with the path to your hero2 background image */
        background: url('img/h1.jpg') no-repeat center center fixed; 
        background-size: cover;
        /* Assuming you have a height of 100vh, you can adjust as necessary */
        height: 100vh;
        background-color: rgba(0,0,0,0.6);
    }
    
    .hero2-content {
        flex-direction: column;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        width: 80%;  /* adjust as necessary */
        color: #fff;
    }

    .hero2-text {
        width: 100%; /* adjust as necessary */
        margin-top: -90px;
    }

    .hero2-image {
        margin-right: 15px;
        width: 100%; /* adjust as necessary */
        border: 3px solid #fff;
        margin-top: 40px;
        margin-bottom: -80px;
    }
    
    .hero2-image img {
        max-width: 100%;
        height: 40vh;
    }

    .card2-container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        gap: 20px;
    }
    
    .who-we-are2 {
        margin-top: 50px;
        display: flex;
        flex-direction: column-reverse;
        background-image: url('img/h1.jpg');
        background-size: cover;
        background-position: center;
        padding: 50px;
        min-height: 60vh; /* Increase the height of the section */
      }

      .who-we-are-image2 {
    flex: 1;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    margin-right: 20px;
    width: auto; /* Adjust the width of the image */
    height: auto; /* Adjust the height of the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    margin-top: 45px;
  }

  .features-benefits {
    background: rgba(255, 255, 255, 0.8);
    padding: 30px;
    width: 350px;
    margin: 50px auto;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.container {
    width: 100%;
    margin: 0 auto;
}


}