.profile-wrapper {
    background:#F4F4F4;
    padding: 50px auto;
    padding-bottom:100px;
}
.profile-inner {
    display: flex;
    position: relative;
    align-items: flex-start; /* Align both divs at the top */
}

.profile-inner div:first-of-type {
    width: 45%;
    z-index: 2;
    position: relative;
    display: flex;
    align-items: flex-start; /* Ensure content starts at the top */
}

.profile-inner div:first-of-type p {
    background: white;
    padding: 20px;
    border: 2px solid rgba(222, 222, 222, 0.796);
    -webkit-box-shadow: 3px 6px 16px 4px rgba(77,77,77,0.41); 
box-shadow: 3px 6px 16px 4px rgba(77,77,77,0.41);
}

.profile-inner div:last-of-type {
    flex: 1;
    position: relative;
    z-index: 1;
    width: 55%;
}

.image-wrapper {
    overflow: hidden;
    max-height: 100%; /* Allow image to take full height */
    margin-left: -50px;
    display: flex;
    align-items: flex-start; /* Align image to the top */
}

.image-wrapper img {
    width: 100%;
    object-fit: cover;
    height: auto;
    max-height: 50vh; /* Increase height to make it taller than the text container */
    
}




/* Responsive Design */
@media screen and (max-width: 1300px) {
    .profile-inner {
        flex-direction: row;
    }

    .profile-inner div:first-of-type {
        width: 50%;
    }

    .profile-inner div:last-of-type {
        width: 50%;
    }

    .image-wrapper img {
        max-height: 100%;
        min-height: 50vh;
    }
}

@media screen and (max-width:992px) {
    .profile-inner div:first-of-type {
        width: 50%;
    }
    .profile-inner div:last-of-type {
        width: 50%;
        height: 60vh;
    }
    .image-wrapper img {
        height: 90%;
        width:auto;
    }
}

@media screen and (max-width: 768px) {
    .profile-inner {
        flex-direction: column-reverse; /* Move image to top */
        align-items: center;
    }

    .profile-inner div:first-of-type,
    .profile-inner div:last-of-type {
        width: 100%;
        
    }

    .profile-inner div:last-of-type {
        max-height: 40vh;
        width: 100%;
        
    }

    .image-wrapper {
        margin-left: 0;
        margin-top: 0; /* Reset for small screens */
        max-height: none;
    }

    .image-wrapper img {
        width: 100%;
        height: auto;
        min-height: auto;
    }
}




.responsive-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: auto auto; /* Two rows */
    gap: 50px;
    align-items: stretch;
  }
  
  .responsive-card {
    background-color: #F3F3F3; /* Color for the cards */
    /*height: 265px;  Set a fixed height or adjust as needed */
    padding: 25px 30px;
    border-radius:8px;
    border: 2px solid transparent;
    transition: all 0.5 ease-in-out;
    cursor:pointer;
  }
  
  .responsive-card:hover {
    border-color: var(--primary-color);
    background:white;
  
  }
  
  .responsive-card.card3:hover {
    background: rgb(0 48 70);
  }
  
  .responsive-card p {
    color: #777;
    font-size:16px;
    line-height:25px;
  }
  
  .responsive-card h3 {
    color: #000;
    font-size: 25px;
    font-weight:medium;
  
  }
  .card1 {
    grid-column: 1 / 2; /* Card 1 spans columns 1 and 2 */
    grid-row: 1; /* Card 1 in the first row */
  }
  
  .card2 {
    grid-column: 2 / 3; /* Card 2 in the second column */
    grid-row: 1; /* Card 2 in the first row */
  }
  
  .card3 {
    grid-column: 3; /* Card 3 takes the third column */
    grid-row: 1 / 3; /* Card 3 spans from row 1 to row 2 (vertically) */
    height:100%;
    background: var(--primary-blue-light-color);
    
  }
  
  .card3 h3 {
    color: white;
  }
  
  .card3 p {
    color:rgba(255, 255, 255, 0.65);
  }
  .card4 {
    grid-column: 1 / 3; /* Card 4 spans columns 1 and 2 */
    grid-row: 2; /* Card 4 in the second row */
  }
  
  .card-image {
    width:42px;
    height:42px;
    margin-bottom:15px;
  }
  
  .card-image:last-of-type {
    width:45px;
    height:45px;
  }
  
  /* For medium-sized screens (tablets and smaller) with screen size less than 992px */
  @media (max-width: 992px) {
    .responsive-cards {
        grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
    }
   
    /* Adjust the cards for 2-column layout */
    .card1 {
        grid-column: 1 / 2;
        grid-row: 1;
    }
  
    .card2 {
        grid-column: 2 / 3;
        grid-row: 1;
    }
  
    .card3 {
        grid-column: 1 / 3; /* Card 3 should take up both columns */
        grid-row: 3; /* Card 3 moves to the second row */
        width: 100%; /* Ensures Card 3 takes the full width in the second row */
        min-height:215px;
    }
  
    .card4 {
        grid-column: 1 / 3; /* Card 4 spans the full width in the second row */
        grid-row: 2;
    }
  }
  
  /* For small screens (mobile devices) */
  @media (max-width: 480px) {
    .responsive-cards {
        grid-template-columns: 1fr; /* Single column layout */
    }
  
    /* Adjust the cards for single-column layout */
    .card1 {
        grid-column: 1 / 2;
        grid-row: 1;
    }
  
    .card2 {
        grid-column: 1 / 2;
        grid-row: 2;
    }
  
    .card3 {
        grid-column: 1 / 2;
        grid-row: 4;
    }
  
    .card4 {
        grid-column: 1 / 2;
        grid-row: 3;
    }
  }

  .approch-content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    padding:50px auto;
    margin-bottom: 50px;
    border: 1px solid #bababa;
  }

  .approch-content div:first-of-type {
    width:40%;
  }
  
  .approch-content div:last-of-type {
    width:60%;
  }

  .approch-content div:first-of-type img {
    width:100%;
    min-height: 70vh;
    object-fit: cover;
  }

  .body-approach-content {
    margin: 10px 10px auto 20px;
    color: #777;

  }

  @media screen and (max-width:1200px) {
    .approch-content div:first-of-type img {
        width:100%;
        min-height: 75vh;
      }
  }

  @media screen and (max-width:992px) {
    .approch-content {
        display: flex;
        flex-direction: column;
        border:none;
    }

    .approch-content div:first-of-type  {
        width:100%;
    }
      
    .approch-content div:first-of-type img {
        width:100%;
        min-height: auto;
      }
    
      .approch-content div:last-of-type {
        border: 1px solid #888;
        width:100%;
        
      }

      .body-approach-content {
        margin: 15px;
        color: #777;
    
      }

      .body-approach-content:last-of-type {
        margin-bottom: 40px;
      }
  }


.our-approach-container {
    background: #fafafa;
}