/* ==========================================================
   About page
   ========================================================== */
.about-page{ background: var(--cream); }

/* ---------- Intro ---------- */
.about-intro{
  position: relative;
  background: var(--navy-dark);
  padding: 5rem 0;
  overflow: hidden;
}
.about-intro-bg{
  position: absolute;
  inset: 0;
  background-image: url("../images/columns.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 50% auto;
  pointer-events: none;
}
.about-title{
  font-family: var(--font-serif);
  color: #fdfbf7;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.about-lead{
  color: #c3cad4;
  font-weight: 300;
  line-height: 1.8;
  margin-top: 1.5rem;
  max-width: 480px;
}
.about-intro-image{
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
}
.about-intro-image img{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* ---------- Story ---------- */
.story-section{
  padding: 6rem 0;
  background: var(--cream);
}
.story-image{
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
}
.story-image img{
  width: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}

/* ---------- Values ---------- */
.values-section{
  background: var(--navy);
  padding: 6rem 0;
}
.value-card{
  text-align: center;
  color: #b7bfc9;
  padding: 1rem;
}
.value-card i{
  color: var(--gold);
  font-size: 2rem;
  margin-bottom: 1.1rem;
}
.value-card h3{
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}
.value-card p{
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.6;
}

/* ---------- Team ---------- */
.team-section{
  padding: 6rem 0;
  background: var(--cream);
}
.team-card{ text-align: center;overflow: hidden ; }
.team-photo {
    border-radius: 0px;
    overflow: hidden;
    margin-bottom: 0.35rem;
    box-shadow: 0 20px 40px -12px rgb(0 0 0 / 11%);
}
.team-photo img{
  width: 100%;
  height: 270px;
  object-fit: cover;
  display: block;
}
.team-card h4{
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}
.team-role{
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 1px;
  font-weight: 400;    padding-top: 10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .about-title{ font-size: 2.2rem; }
  .about-intro-bg{ opacity: 0.5; }
}

.approachtitle{font-family: var(--font-serif);
    font-size: 1.17rem;
    color: var(--text-dark) !important;
    margin-bottom: 0.50rem;}
    .approach-card{height: 100%;
    background: #fff;
    border-radius: 6px;
    padding: 2.25rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: transform .2s ease, box-shadow .2s ease;}
    .value-card.h-100.text-start {
    background-color: #4d4d4d38;
    border-radius: 5px;
    padding: 20px 30px;
    border: 1px solid #cccccc4d;
}
.team-card {
    text-align: center;
    border-radius: 5px;
    /* padding: 20px 20px; */
    border: 1px solid #cccccc4d;
    height: 100%;
}
.team-card h4,.team-card p{padding :5px 10px;}
@media (max-width: 1300px){
    .about-title {
    font-size: 2.2rem;}
    
}
@media (max-width: 700px){
   .about-intro {
    padding: 8rem 0 2rem 0;
}
.about-intro-image img {
    min-height: 230px;}
.story-section {
    padding: 3rem 0;}
    .values-section {
    padding: 3rem 0;
}
.about-title {
        font-size: 1.5rem;
    }
      .team-section {
    padding: 3rem 0;}
    .team-photo img {
    width: 100%;
    height: auto;}  
}