body {
    
    background-color: #f8f8f8;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('assets/century-gothic-font/CenturyGothic.ttf') format('truetype'); /* Adjust the path as necessary */
    font-weight: normal;
    font-style: normal;
}

.storyteller h2 {
    font-size: 40px;
    margin-bottom: 20px;
    font-style: Open Sans;
    font-weight:700;
    line-height: 48px;
    text-align:left;
    letter-spacing: -4%;
    color: #0F172A;
    letter-spacing: -2%;
}


.highlight {
    font-family: open sans;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    
}
.color{
    background-color: #fbd23c;
    display: inline-flex;
    height: 20px;
    align-items:end;
}

.high{
    color: #fbd23c;
}


.light{
    font-family: century gothic;
    font-family: 400;
    font-size: 13px;
    line-height: 25px;
}

.about-us-section {
    background-color: #fffbea;
    height: 90vh !important;
}

.image-grid img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 5px;
}

.image-caption {
    text-align: center;
    margin-top: -30px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px;
}

.what-we-do img {
    border-radius: 5px;
    width: 346px;
    height: 339px;
}

.who-we-are img{
    width: 346px;
    height: 339px;
    top: 166px;
    left: 178px;
    gap: 0px;
    border-radius: 20px;
    opacity: 0px;
    object-fit: cover;
}

.image-grid .img3{
    width: 210px;
    height: 118px;
    top: 448px;
    left: 808px;
    gap: 0px;
    border-radius: 20px ;
    opacity: 0px;
}

.image-grid .img2{
    width: 210px;
    height: 234px;
    top: 158px;
    left: 808px;
    gap: 0px;
    border-radius: 20px;
    opacity: 0px;
}


.head{
border-bottom:15px solid #fbd23c;
  height:24px;
  width:103px;
}
.section-title{
  display:inline-block;
  font-size:24px;
  font-family:calibri;
  font-weight:bold;
  padding:10px 20px;
  height:10px;
}

.conn {
    position: relative; /* Establish stacking context */
    margin-top: 50px; /* Establish stacking context */
}

.headingg {
    background-color: #fbd23c; /* Background color for heading */
    position: absolute; /* Positioned absolutely */
    height: 17px; /* Height of the heading */
    top: 27px; /* Position it at the top of the container */
    left: 0; /* Align it to the left */
    width: 151px; /* Width of the heading */
    z-index: -1; /* Lower z-index */
  }

  .rowww {
    position: relative; /* Positioned relative to stack above */
    z-index: 2; /* Higher z-index */
    margin-top: 20px; /* Space between heading and text */
    font-size: 20px; /* Larger font size for visibility */
    color: black; /* Text color */
  }