body {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #123;
}

.dot {
	width: clamp(8px, 1.14vw, 16px);
	height: clamp(8px, 1.14vw, 16px);
    background: #FCB73D;
    display: inline-block;
    margin-left: 8px;
}

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

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

.hero-content {
    position: absolute;
    bottom: clamp(36px, 5.29vw, 74px);
	left: clamp(20px, 3vw, 42px);
	color: #fff;
}

.about-btn {
	background: rgba(252, 183, 61, 0.82);
    color: #FFFFFF;
	font-family: 'Inter', sans-serif; 
	font-weight: 600; 
    border: none;
    border-radius: 6px;
    cursor: pointer;
	font-size: clamp(14px, 1.71vw, 24px);
	padding: clamp(4px, 0.57vw, 8px) clamp(8px, 1.14vw, 16px);
	margin-bottom: clamp(6px, 0.86vw, 12px);
	width: clamp(120px, 12.64vw, 177px);
	height: clamp(36px, 3.86vw, 54px);
	margin-left: 0;
}

.hero-content h1 {
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #D9D9D9;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	font-size: clamp(32px, 4.57vw, 64px);
	font-style: normal;
	font-weight: 600;
	line-height: clamp(40px, 5.71vw, 80px);
	letter-spacing: -0.25px;
}

button {
    cursor: pointer;
    background-color: #007bff;
    color: white;
    padding: clamp(6px, 0.86vw, 12px) clamp(12px, 1.71vw, 24px);
	font-size: clamp(14px, 1.29vw, 18px);
	border: none;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}
/* END HERO SECTION */

/* TEAL STRIP SECTION */
.strip {
    background: #0B545B;
    padding: clamp(23px, 3.29vw, 46px) clamp(54px, 7.71vw, 108px);
	text-align: center;
	
}

.strip p {
    margin: 0;
	color: #FFF;
	text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: clamp(18px, 2.43vw, 34px);
	font-style: normal;
	font-weight: 600;
	line-height: clamp(20px, 2.86vw, 40px);
	letter-spacing: -0.25px;
}

/* END TEAL STRIP SECTION */

/* CONTENT BOX */
.content-container {
    width: 100%;
	text-align: center;
	background: #F9F7F5;
	padding: clamp(27px, 3.86vw, 54px) clamp(54px, 7.71vw, 108px);
	gap: clamp(5px, 0.71vw, 10px);
}

.content-container h2 {
    position: relative;
    display: inline-block;
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #0B4C53;
	font-size: clamp(26px, 3.71vw, 52px);
	font-style: normal;
	font-weight: 500;
	line-height: clamp(33px, 4.71vw, 66px);
}

.content-container-p {
	width: 90%;
	margin: 0 auto;   /* centers horizontally */
	text-align: center;
	color: #828282;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: clamp(21px, 3vw, 42px);
	font-size: clamp(14px, 2vw, 28px);
	padding-left: clamp(12px, 1.79vw, 25px);
	padding-right: clamp(18px, 2.5vw, 35px);
}

.content-container p {
	padding-left: clamp(10px, 1.43vw, 20px);
	margin-top: clamp(8px, 1.14vw, 16px);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: clamp(12px, 1.43vw, 20px);
    font-weight: 400;
    color: #828282;
    text-align: left;           /* lines start from the same place */
	line-height: clamp(18px, 2.14vw, 30px);
}
/* END CONTENT BOX */

/* VISION BOX */
.team{
	padding: clamp(26px, 3.71vw, 52px) clamp(140px, 20vw, 280px) clamp(27px, 3.86vw, 54px) clamp(140px, 20vw, 280px);
}

.section-title{
    margin-bottom: 20px;
	color: #0B4C53;
	text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: clamp(26px, 3.71vw, 52px);
	font-style: normal;
	font-weight: 500;
	line-height: clamp(18px, 2.57vw, 36px);
}

.section-text {
	color: #828282;
	text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: clamp(14px, 1.71vw, 24px);
	font-style: normal;
	font-weight: 400;
	line-height: clamp(18px, 2.57vw, 36px);
}

/* THREE IMAGES */
.vision-section {  /* parent of .vision-images */
    overflow: hidden;
}

.vision-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.79vw, 25px);
	width: clamp(327px, 46.79vw, 655px);
	height: clamp(218px, 31.14vw, 436px);
    width: 130%;               /* makes grid wider than screen */
    overflow: hidden;         /* allow images to spill out */
}

.vision-images img {
    width: 100%;
    height: 436px;
    object-fit: cover;
    border-radius: 10px;
}

/* Right image: show right half */
.vision-images .img-container:nth-child(3) img {
    object-position: right;
}

/* Center image normal */
.vision-images .img-container:nth-child(2) img {
    width: 100%;
}


.vision-section {
  overflow: hidden;
}

.vision-carousel {
  width: 130%;
  margin-left: -15%;
  overflow: hidden;
}

/* sliding track */
.vision-track {
  display: flex;
  gap: 25px;
  transition: transform 0.9s ease-in-out;
}

/* fixed image sizing */
.img-container {
  flex: 0 0 calc(33.333% - 16px);
}

.img-container img {
  width: 100%;
  height: 436px;
  object-fit: cover;
  border-radius: 10px;
}
/* END VISION BOX */

/* HIGHLIGHT BOX */
.highlight-box {
    background: #F0F4F4;
	padding: clamp(27px, 3.86vw, 54px) clamp(69px, 9.93vw, 139px);
	flex-direction: column;
	align-items: center;
    text-align: center;
}

.highlight-box h2 {
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #0B4C53;
	text-align: center;
	font-style: normal;
	font-weight: 500;
	line-height: clamp(33px, 4.71vw, 66px);
	font-size: clamp(26px, 3.71vw, 52px);
	margin-bottom: 24px;
}

.highlight-box p {
	color: #828282;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: clamp(14px, 1.71vw, 24px);
	font-style: normal;
	font-weight: 400;
	line-height: clamp(18px, 2.57vw, 36px);
}
/* END HIGHLIGHT BOX */

/* TEAM SECTION */
.team-section{
	display: flex;
	width: 100%;
	height: auto;
	padding: clamp(27px, 3.86vw, 54px) clamp(42px, 6vw, 84px);
	flex-direction: column;
	align-items: center;
}

.team-title {
	color: #0B4C53;
	text-align: right;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: clamp(26px, 3.71vw, 52px);
	font-style: normal;
	font-weight: 500;
	line-height: clamp(33px, 4.71vw, 66px);
	margin-bottom: 24px;
}

.team-content {
    margin: auto;
    display: grid;
	font-size: clamp(14px, 1.71vw, 24px);
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	color: #828282;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: clamp(18px, 2.57vw, 36px);
}
/* END TEAM SECTION */

/* MOBILE FRIENDLY STYLES */
@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;
    }

    /* TEAL STRIP */
    .strip {
        padding: 20px;
    }

    .strip p {
        font-size: clamp(14px, 4vw, 18px);
    }

    /* CONTENT SECTION */
    .content-container {
        padding: 20px;
    }

    .content-container h2 {
        font-size: clamp(20px, 5vw, 28px);
    }

    .content-container-p,
    .content-container p {
        font-size: clamp(12px, 4vw, 16px);
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    /* VISION CAROUSEL */
    .vision-carousel {
        width: 100%;
        margin-left: 0;
    }

    .vision-track {
        gap: 10px;
    }

    .img-container img {
        height: 100px;
        width: 100%;
    }

    /* HIGHLIGHT BOX */
    .highlight-box {
        padding: 20px;
    }

    .highlight-box h2 {
        font-size: clamp(18px, 5vw, 24px);
    }

    .highlight-box p {
        font-size: clamp(12px, 4vw, 16px);
    }

    /* TEAM SECTION */
    .team-section {
        padding: 20px 15px;
    }

    .team-title {
        text-align: center;
        font-size: clamp(18px, 5vw, 24px);
    }

    .team-content {
        grid-template-columns: 1fr; /* stack columns vertically */
        gap: 16px;
        font-size: clamp(12px, 4vw, 16px);
        text-align: center;
    }
	
	.team{
		padding: 20px;
	}
	
		/* Vision Text Container */
	.vision-text {
	  max-width: 90%;       /* keeps content from touching edges */
	  margin: 0 auto 30px;  /* center horizontally and space below */
	  text-align: center;
	  padding: 0 10px;      /* small padding for mobile screens */
	}

	/* Heading */
	.vision-text .section-title {
	  font-family: "Plus Jakarta Sans", sans-serif;
	  color: #0B4C53;
	  font-size: clamp(22px, 6vw, 32px); /* responsive: small mobile → desktop */
	  font-weight: 600;
	  line-height: 1.3;
	  margin-bottom: 12px;   /* space below heading */
	}

	/* Paragraph */
	.vision-text .section-text {
	  font-family: "Plus Jakarta Sans", sans-serif;
	  color: #828282;
	  font-size: clamp(14px, 4vw, 18px); /* scales on mobile */
	  line-height: 1.6;
	  margin: 0 auto;        /* center text */
	  max-width: 600px;      /* prevent long lines on desktop */
	}

}

@media (max-width: 576px) {
    /* Further scale down for smaller phones */
    .hero-content h1 {
        font-size: clamp(16px, 6vw, 22px);
    }

    .about-btn {
        width: 100px;
        height: 32px;
        font-size: 12px;
    }

    .strip p {
        font-size: clamp(12px, 5vw, 16px);
    }

    .content-container h2 {
        font-size: clamp(16px, 5vw, 20px);
    }

    .highlight-box h2 {
        font-size: clamp(16px, 5vw, 20px);
    }

    .team-title {
        font-size: clamp(16px, 5vw, 20px);
    }

    .team-content {
        font-size: clamp(12px, 4vw, 14px);
    }

    .vision-track {
        gap: 8px;
    }
}