/* HERO SECTION */
.hero {
    position: relative;
    width: 100%;
    height: clamp(360px, 46vw, 644.211px); /* keeping relative height for responsiveness */
    overflow: hidden;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: bottom right; 
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: absolute;
    bottom: clamp(35px, 5vw, 70px);
    left: clamp(20px, 2.86vw, 40px);
    color: #fff;
    max-width: clamp(275px, 39.29vw, 550px);
}

.about-btn {
    width: clamp(88px, 12.64vw, 177px);
    height: clamp(27px, 3.86vw, 54px);
    background: rgba(212, 155, 55, 0.82);
    color: #FFFFFF;
    font-family: 'Inter', sans-serif; 
    font-size: clamp(14px, 1.71vw, 24px); 
    font-weight: 600; 
    border: none;
    padding: clamp(5px, 0.71vw, 10px) clamp(8px, 1.14vw, 16px);
    border-radius: clamp(3px, 0.43vw, 6px);
    margin-bottom: clamp(6px, 0.86vw, 12px);
    cursor: pointer;
    margin-left: clamp(26px, 3.79vw, 53px);
    margin-top: clamp(100px, 28.57vw, 200px);
}

.hero-content h1 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(29px, 4.14vw, 58px);
    font-weight: 600; 
    color: #FFFFFF; 
    line-height: clamp(40px, 5.71vw, 80px); /* 137.931% */
    font-style: normal;
    letter-spacing: -0.25px;
    margin-left: clamp(26px, 3.79vw, 53px);
}
/* END HERO SECTION */


/* TEAL STRIP */
.strip {
    background: #0B545B;
    text-align: center;
    display: flex;
    width: 100%;
    padding: clamp(23px, 3.29vw, 46px) clamp(33px, 4.79vw, 67px) clamp(21.5px, 3.07vw, 43px) clamp(33px, 4.79vw, 67px);
    flex-direction: column;
    gap: clamp(5px, 1.43vw, 10px);
}

.strip p {
    color: #FFF;
    text-align: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(18px, 2.57vw, 36px);
    font-style: normal;
    font-weight: 600;
    line-height: clamp(20px, 2.86vw, 40px); /* 111.111% */
    letter-spacing: -0.25px;
}
/* END TEAL STRIP */

/* FOCAL AREAS SECTION */
.section {
    padding: clamp(40px, 5.71vw, 80px) clamp(27px, 3.86vw, 54px);
}

.section-approach {
    background-color: #F9F7F5;
}

.section-title {
    color: #0B4C53;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(29px, 4.14vw, 58px);
    font-style: normal;
    font-weight: 500;
    line-height: clamp(35px, 5vw, 70px);
    letter-spacing: clamp(-0.58px, -0.041vw, -1.16px);
    margin-bottom: clamp(27px, 3.93vw, 55px);
}

.focal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(22px, 3.21vw, 45px);
}

.focal-card img {
    width: 100%;
    height: clamp(203px, 29.29vw, 405px);
    object-fit: cover;
    border-radius: clamp(4px, 0.57vw, 8px);
}

.focal-heading {
    margin: clamp(12px, 1.79vw, 25px) 0 clamp(5px, 0.71vw, 10px);
    text-align: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(12px, 2vw, 24px); 
    font-weight: 600; 
    color: #FFFFFF; 
    font-style: normal;
    line-height: clamp(14px, 2.4vw, 28.8px);
    letter-spacing: clamp(-0.24px, -0.041vw, -0.48px);
    margin-bottom: clamp(8px, 1.14vw, 16px);
}

.health { color: #2E9AB2; }
.education { color: #FCB73D; }
.development { color: #003B40; }
.climate { color: #606071; }

.focal-card ul {
    padding-left: clamp(9px, 1.29vw, 18px);
    line-height: 1.6;
    font-size: clamp(8px, 1.07vw, 15px);
}

.focal-card li {
    color: #757575;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(8px, 1.14vw, 16px);
    font-weight: 400;
    margin-bottom: clamp(6px, 0.86vw, 12px);
}

.focal-card {
    opacity: 0;
    transform: translateX(clamp(-25px, -3.57vw, -50px));
    transition: all 0.8s ease-out;
}

.focal-card.visible {
    opacity: 1;
    transform: translateX(0);
}

.focal-card:nth-child(1) { transition-delay: 0.1s; }
.focal-card:nth-child(2) { transition-delay: 0.3s; }
.focal-card:nth-child(3) { transition-delay: 0.5s; }
.focal-card:nth-child(4) { transition-delay: 0.7s; }

.focal-card:hover img {
    transform: scale(1.06);
}
/* END FOCAL AREAS SECTION */

/* APPROACH SECTION */
.approach-title {
    color: #0B4C53;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(29px, 4.14vw, 58px);
    font-style: normal;
    font-weight: 500;
    line-height: clamp(35px, 5vw, 70px);
    letter-spacing: clamp(-0.58px, -0.041vw, -1.16px);
    padding-top: clamp(36px, 5.14vw, 72px);
    padding-left: clamp(46px, 6.5vw, 91px);
}

.approach-container {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(68px, 9.64vw, 135px);
    align-items: flex-start;
}

.approach-img img {
    width: clamp(260px, 37.14vw, 520px);
    object-fit: fill;
    height: clamp(333px, 47.5vw, 665px);
    border-radius: clamp(12px, 1.71vw, 24px);
}

.approach-img {
    padding-left: clamp(71px, 10.14vw, 142px);
    padding-top: clamp(28px, 3.93vw, 55px);
    padding-bottom: clamp(61px, 8.71vw, 122px);
}

.approach-text {
    flex: 1;
    padding-top: clamp(24px, 3.43vw, 48px);
}

.approach-item {
    gap: clamp(24px, 6.86vw, 48px);
}

.approach-item h3 {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(12px, 2vw, 24px);
    font-weight: 600;
    line-height: clamp(18px, 3vw, 36px); /* 150% of font-size */
    color: #000000;
}

.approach-item h2 {
    margin: 0;
    margin-bottom: clamp(17px, 2.43vw, 34px);
}

.approach-item img {
    width: clamp(28px, 3.98vw, 55.758px);
    height: clamp(28px, 3.98vw, 56.239px);
}

.approach-item p {
    margin-top: clamp(4px, 0.57vw, 8px);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(10px, 1.43vw, 20px);
    font-weight: 400;
    line-height: clamp(16px, 2.29vw, 32px); /* 150% or 1.6 of font-size */
    color: #828282;
}
/* END APPROACH SECTION */

/* PARTNER SECTION */
.partner-section {
    background: #F0F4F4;
    padding: 70px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.partner-left h2 {
	font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 64px;
    font-weight: 500;
    color: #0B4C53;
	line-height: 120%;
}

.highlight {
	font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 64px;
    font-weight: 500;
    color: #FCB73D;
	line-height: 120%;
}

.arrow {
    color: #FCB73D;
	width: 48px;
}

.partner-right{
	margin-bottom: -160px;
	margin-right: 100px;
}

/* BUTTON */
.connect-btn {
	font-family: 'Inter', sans-serif; 
    font-size: clamp(16px, 1.7vw, 24px);      /* scales from 16px to 24px */
	font-weight: 600; 
	color: #0B4C53; 
	line-height: 150%; 
    padding: clamp(10px, 1.5vw, 14px) clamp(20px, 2vw, 26px);
    border-radius: 90px;
    border: 3px solid #0B4C53;
    text-decoration: none;

    height: clamp(48px, 5vw, 72px);           /* scales between 48px and 72px */
    width: clamp(200px, 20vw, 288px);         /* scales between 200px and 288px */

    display: flex;             /* make button a flex container */
    justify-content: center;   /* center horizontally */
    align-items: center;       /* center vertically */
    gap: clamp(6px, 1vw, 10px);
}

.connect-btn .btn-arrow {
    font-size: clamp(24px, 2.5vw, 40px);
}

.connect-btn:hover {
    background: #0B4C53;
    color: #ffffff;
}

@media (max-width: 1300px) { /* tablet and below */
  .partner-right {
    margin-bottom: -80px;
    margin-right: 50px;
  }
  
  .partner-left h2 {
	font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 44px;
    font-weight: 500;
    color: #0B4C53;
	line-height: 120%;
}

.highlight {
	font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 44px;
    font-weight: 500;
    color: #FCB73D;
	line-height: 120%;
}

}

@media (max-width: 992px) { /* tablet and below */
  .partner-right {
    margin-bottom: -80px;
    margin-right: 50px;
  }
}

@media (max-width: 576px) { /* mobile */
  .partner-right {
    margin-bottom: -40px;
    margin-right: 20px;
  }
}
/* END PARTNER SECTION */

.connect-btn:hover {
    background: #0B4C53;
    color: #ffffff;
}

.partner-section a{
	text-decoration: none;
}

@media (max-width: 768px) {
    .hero {
		height: 100%;
	}
	
	.hero-content {
        bottom: 20px;
        left: 15px;
        max-width: 90%;
    }

    .hero-content h1 {
        font-size: 28px;
        line-height: 36px;
        margin-left: 0;
    }

    .about-btn {
        width: 120px;
        height: 40px;
        font-size: 14px;
        margin-left: 0;
        margin-top: 20px;
    }
}

@media (max-width: 576px) {
    .focal-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .focal-card img {
        height: auto; /* image scales naturally */
    }

    .focal-heading {
        font-size: 18px;
    }

    .focal-card ul li {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .approach-container {
        flex-direction: column;   /* stack image + text vertically */
        align-items: center;      /* center the image and text */
        gap: 30px;
        padding: 20px;
    }

    .approach-img {
        padding: 0;
        text-align: center;       /* center image */
    }

    .approach-img img {
        width: 80%;
        height: auto;
        margin: 0 auto;
    }

    .approach-text {
        padding-top: 0;
        text-align: center;       /* center text under image */
        display: flex;
        flex-direction: column;   /* stack approach-items vertically */
        width: 100%;              /* full width for proper centering */
        max-width: 500px;         /* optional: limit width */
    }

    .approach-item {
        display: flex;
        flex-direction: column;   /* icon on top, text below */
        align-items: center;      /* center horizontally */
        text-align: center;       /* center heading + paragraph */
        gap: 10px;
    }

    .approach-item h2 {
        margin-bottom: 10px;
    }

    .approach-item h3 {
        font-size: 16px;
    }

    .approach-item p {
        font-size: 14px;
    }
}

/* PARTNER SECTION */
@media (max-width: 768px) {
    .partner-section {
        flex-direction: column;
        text-align: center;
        padding: 50px 20px;
        gap: 24px;
    }

    .partner-left h2,
    .highlight {
        font-size: 32px;
        line-height: 130%;
    }

    .partner-right {
        margin: 0; /* REMOVE negative margins */
    }
}