/* section 1 - Hero banner*/
.hero {
    height: calc(100vh - 80px);
    width: 100%;
    background: #b1bbc8;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.learn-more-btn {
    border-radius: 12px;
    border: 1px solid #e7e7e7;
    padding: 10px 20px;
}

a {
    text-decoration: none; 
}

.chevron-home {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
    bottom: 5px;
    transition: transform 0.15s ease;
}

/* section 2 - Principles*/
#principles {
    height: auto;
    width: 100%;
    background: #dadada;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
    scroll-margin-top: 76px;
}

.princ-content {
    display: flex;
    flex-direction: row;
}

/* section 3 - about*/
.about {
    height: auto;
    width: 100%;
    background: #b1bbc8;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
}

/* section 4 - Challenges*/
.challenges {
    height: auto;
    width: 100%;
    background: #dadada;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
}

/* section 5 - Impact*/
.impact {
    height: auto;
    width: 100%;
    background: #b1bbc8;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
}

.impact-circle{
  position:relative; 
  width:230px;
  height:230px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.impact-circle svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform:rotate(-90deg);
}

.impact-circle .num{
    font-size:32px;
    font-weight:700;
    color:var(--navy);
    position:relative;
}

.impact-circle .unit{
    font-size:12px;
    color:var(--text-mid);
    margin-top:4px;
    position:relative;
}

/* section 6 - Testimonies*/
.testimonies {
    height: auto;
    width: 100%;
    background: #dadada;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
}

/* section 7 - Supported*/
.supported {
    height: auto;
    width: 100%;
    background: #b1bbc8;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
}

/* section 8 - Contact*/
.contact {
    height: auto;
    width: 100%;
    background: #dadada;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
}