html, body { margin: 0; padding: 0; }
html
{
    scroll-behavior: smooth;
}
body {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    background: linear-gradient(180deg,  #212020 0%, #3d3d3d 50%, #212020 100%);
}
.tag-line h2
{
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 0.9;
    color: #3aa655;
}
.tag-line span
{
    color: #eceeed;
}

.about-us
{
    padding: 4rem 2rem;
    padding-top: 150px;
}
.about-container
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.about-text
{
    padding-right: 10px;
    color: #fff;
}
.about-text h2
{
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}
.about-text h2 span
{
    color: #3aa655;
}
.about-text p
{
    font-size: 1.1rem;
    line-height: 1.7;
    text-align: center;
}
.about-image
{
    padding-left: 50px;
}
.about-image img
{
    width: 100%;
     box-shadow: 0 8px 24px rgba(255,255,255,0.4);
}
@media (max-width: 768px) {
  .about-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-image {
    margin-top: 2rem;
  }
}

.split-board
{
    --gap: clamp(16px, 4vw, 65px);
    --line: 3px;
    --line-color: #3aa655;
    display: grid;
    grid-template-columns: 1fr var(--line) 1fr;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: var(--gap);
    max-width: 1100px;
    margin: 6rem auto;
    padding: 0 var(--gap);
}
.split-board > .left,
.split-board > .right {
  display: grid !important;
  grid-auto-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr;  /* single column */
  row-gap: 7.8rem;               /* space between items */
  align-items: center;
}

.left, .right 
{
    display: grid;
    grid-auto-rows: auto;
    row-gap: 2.2rem;
}
.left .photo + .person,
.right .person + .photo,
.left .person + .photo,
.right .photo + .person {
    margin-top: 2rem;
}

/* Move images to align with opposite text */
.left .photo {
    position: relative;
    top: 4rem;
}

.right .photo {
    position: relative;
    top: 7rem;
}
.divider
{
    grid-column: 2;
    grid-row: 1 / -1;
    background: var(--line-color);
    width: var(--line);
    align-self: stretch;
    justify-self: center;
    border-radius: 2px;
}


.photo
{
    width: clamp(140px, 20vw, 240px);
    margin-bottom: 1rem;
}
.photo img
{
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;

    
}
.person h2
{
    margin: 0 0 .25rem;
    font-size: clamp(1rem, 2vw + .3rem, 1.4rem);
    font-weight: 800;
    color: #fff;
}
.person
{
    margin: 0;
    font-weight: 700;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.left .top,
.left .bottom {
    justify-self: end;
    text-align: right;
}
.right .top,
.right .bottom{
    justify-self: start;
    text-align: left;

}
.split-board .right .photo.bottom{
  margin-top: 20px;  /* use class="photo bottom" on that element */
}

@media (max-width: 768px){
    .split-board{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 32px;
    }
    .divider { height: 2px; width: 100%;}
    .left, .right {grid-column: 1;}
    .left .top, .right .top,
    .left .bottom, .right .bottom {justify-self: center;}
}
.split-board .photo,
.split-board .person,
.split-board .photo img,
.split-board figure {
  display: block;
  float: none !important;
}
.split-board > .left  > * { justify-self: end;  text-align: right;}
.split-board > .right > * { justify-self: start; text-align: left;}

/* Align text with opposite images */
.left .person {
    align-self: start;
}

.right .person {
    position: relative;
    top: 8.5rem;
}

.description
{
    padding: 4rem 2rem;
    padding-top: 120px;
    padding-bottom: 130px;
}
.description-text
{
    padding-right: 10px;
    color: #fff;
}
.description-video
{
    padding-left: 50px;
}
.description-video video
{
    width: 90%;
     box-shadow: 0 8px 24px rgba(255,255,255,0.4);
}
.shams-container
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.description-text h2, h3 span
{
    color: #3aa655;
}
.description-text p
{
    font-size: 1.2rem;
    line-height: 1.7;
    text-align: center;
}
.description-text h2
{
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}
.description h3
{
    font-size: clamp(1.0rem, 2vw, 1.8rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}
.shams
{
    display: block;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    padding: 0;

}

.fadeUp
{
    opacity: 0;
    transform: translateY(10px) scale(.5);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fadeUp.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.timeline-item:nth-child(1) {
    animation-range: entry 20% cover 40%;
}
.timeline-item:nth-child(2) {
    animation-range: entry 40% cover 60%;
}
.timeline-item:nth-child(1) {
    animation-range: entry 60% cover 80%;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.5);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.autoShow {
    animation: text-appear both;
    animation-timeline: view();
    animation-range: entry 10% cover 80%;
}

@keyframes text-appear {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.website-btn 
{
    display: inline-block;
    background-color: brown;
    color: white;
    border: 2px solid brown;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
    text-decoration: none;
    margin: 0;
    width: auto;
    max-width: fit-content;
    justify-content: center;
}
.btn-container {
  transform: translateX(38%);
}

.website-btn:hover
{
    background-color: white;
    color: #3aa655;
    border: 2px solid green;
    transform: scale(1.05);
}

.whysham 
{
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}
.whysham h2
{
    font-size: 37px;
    font-weight: bold;
    color: #fff;
}
.whysham h2 span
{
    color: #4CAF50;
}


.features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 14%;
    text-align: left;
    color: #fff;
}

/* mobile adjustments */
@media (max-width: 900px){
  .about-container, .shams-container{ grid-template-columns: 1fr; }
  .about-image{ padding-left: 0; }
  .description{ padding-top: 60px; padding-bottom: 80px; }
  .description-video{ padding-left: 0; }
  .description-video video{ width: 100%; height: auto; }
  .btn-container{ transform: none; display: flex; justify-content: center; }
  .features{ grid-template-columns: 1fr; gap: 28px; margin-top: 8%; }
}
.feature.show
{
    opacity: 1;
    transform: translateY(0);
}
.feature
{
    display: flex;
    align-items: flex-start;
    gap: 20px;
        opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.3s ease, transform 1.3s ease;
}
.feature img
{
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 15px;
}
.feature h3
{
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}
.feature p
{
    margin: 5px 0 0;
    font-size: 17px;
    line-height: 1.4;
    color: #fff;
}