/* Section Background */
/* #about-aitvar {
  padding-right : 30px ;
  padding-left: 30px;
  background-color: #f9f9f9;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  border-radius: 20px;
} */

/* .title-block {
  width: 35px;
  height: 35px;
  background-color: #e4f2f3; 
  position: absolute;
  top: 4%;
  left: 30px;
  z-index: 2;
  margin-left: -15px;
} */

/* Two-column layout */
/* .about-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  max-width: 100%; */
  /* margin: 0 auto; */
  /* gap: 40px; */
  /* border-radius: 20px; */
/* } */

/* Left Column: Text */
/* .about-text {
  flex: 1.5;
  text-align: left;
  margin: 20px;
} */

/* .about-text h2 {
  font-size: 32px;
  font-weight: 700;
  color: #111;
  margin-bottom: 15px;
  text-transform: uppercase;
} */
/* 
.about-text h3 {
  font-size: 18px;
  color: #000000;
  margin-top: 25px;
} */
/* 
.about-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-top: 10px;
}

.about-text ul {
  list-style: none;
  padding: 0; */
  /* margin: 10px 0 20px; */
/* } */
/* 
.about-text li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

.about-text li::before {
  content: "■";
  color: #0cbc94;
  position: absolute;
  left: 0;
  top: 0;
}
 */

/* Right Column: Image */
*/
.about-image {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.about-image img {
  width: 100%;
  max-width: 400px; 
  /* height: auto;            */
  /* object-fit: cover; */
}

.ceo-info {
  background: linear-gradient(140deg, #463dc8, #09a073);
  color: #fffafa;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 15px;
  width: 100%;
  text-align: left;
}

.ceo-info h4 {
  margin: 0;
  font-size: 100%;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
}

.ceo-info p {
  margin: 5px 0 0;
  font-size: 100%;
}

.ceo-info span {
  font-style: italic;
  font-size: 90%;
  color: #e0f7fa;
}
.ceo-flex {
  display: flex;
  align-items: center; /* vertically center logo and text */
  gap: 15px; /* space between logo and text */
  margin-bottom: 15px; /* spacing below the block */
}

.ceo-logo img {
  width: 60px; /* adjust as needed */
  height: auto;
  object-fit: contain;
  border-radius: 5px; /* optional rounded corners */
}

.ceo-details h4, 
.ceo-details p {
  margin: 0;
  text-align: left;
}

.ceo-line {
  width: 100%; /* adjust the length of the line */
  height: 3px;
  background-color: #6aaca4; /* Green */
  margin: 5px 0;
}

.founder-section h3.list-title {
    font-weight: 600;
    color: black;
    margin-bottom: 1.25rem;  
    position: relative;
    padding-left: 5%;    
}

/* Use the accent green for the list-style bullet */
.founder-section h3.list-title::before {
    content: "■";
    color: #09a073;
    position: absolute;
    left: 0;
    top: 0;
}

.founder-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-light);
}

.ceo-card {
  border-radius: 3%; 
  overflow: hidden; 
  width: auto;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
}

/* --- 4. What We Do Section (Feature cards) --- */
.what-we-do-section {
  background-color: var(--bg-light-gray);
  padding: 8% 0;
}

.feature-card {
  background-color: #ffffff;
  padding: 6% 5%;
  border-radius: 3%;
  
  border: 1px solid #eee;
  border-top: 4px solid var(--bg-light-teal); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  margin-bottom: 5%;
}

.feature-card:hover {
  /* Percentages for transform are relative to the element's own size */
  transform: translateY(-7%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-top-color: #09a073;
}

.feature-card h5 {
  font-weight: 600;
  color: black;
  /* Use 'rem' for a responsive font size that respects user settings */
  font-size: 18px;
}

/* Responsive Design */
@media (max-width: 850px) {
  /* .about-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-text {
    margin: 10px 0;
    text-align: left;
  }*/

  .about-image img {
    max-width: 100%;
    width: 90%;
    height: auto;
  }

  .ceo-info {
    width: 100%;
    text-align: center;
  }

  .ceo-flex {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .ceo-logo img {
    width: 20%;
  }

  .title-block {
    position: static;
    display: block;
  } 
  .ceo-card {
      margin-top: 0;
  }

  .what-we-do-section {
    /* Reduce section padding slightly for desktop */
    padding: 4% 0;
  }
  
  .feature-card {
    /* DESKTOP: Remove the bottom margin
       since cards are now side-by-side. 
    */
    margin-bottom: 0;
    
    /* Optional: Adjust padding for desktop. 
       A smaller % may look better on a wide screen.
    */
    padding: 4% 3%;
  }

  .feature-card h5 {
    /* Make font slightly larger on desktop */
    font-size: 1.2rem;
  }
}

