/* ===== Overview band ===== */
.ovband {
    position: relative;
    width: 100%;
    background: #FFFFFF;
    padding: 60px 0;
    overflow: hidden;            /* let the hoops bleed off-screen, clipped at the edges */
}

/* ===== Decorative hoops (concentric circles) =====
   Positioned by the Figma page coordinates. The band starts at page y=882
   (navbar 79 + hero 803), so tops are offset by that amount. */
.hoop {
    position: absolute;
    width: 615px;
    height: 615px;
    z-index: 3;                  /* decorative circles float on top of content */
    pointer-events: none;
}

.hoop__ring {
    position: absolute;
    border-radius: 50%;
}

.hoop__ring--gold {                       /* Ellipse 18 / 20 */
    inset: 0;
    background: rgba(207, 142, 0, 0.05);
}

.hoop__ring--green {                       /* Ellipse 19 / 21 */
    width: 536.95px;
    height: 531.07px;
    background: rgba(6, 71, 0, 0.05);
    transform: rotate(0.23deg);
}

/* Group 1 — bleeds off the left (left -307, top 647) */
.hoop--left {
    left: -307px;
    top: -235px;                           /* 647 - 882 */
}
.hoop--left .hoop__ring--green {
    left: 28px;                            /* -279 - (-307) */
    top: 34px;                             /* 680.93 - 647 */
}

/* Group 2 — bleeds off the right (left 1109, top 1074) */
.hoop--right {
    right: -284px;                         /* 1440 - (1109 + 615) */
    top: 192px;                            /* 1074 - 882 */
}
.hoop--right .hoop__ring--green {
    left: 46px;                            /* 1155 - 1109 */
    top: 41px;                             /* 1115 - 1074 */
}

.ovband__inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Top row spans the full browser width, but the carousel stays aligned with the
   page content on the left (like the overview box) while the announcements bleeds
   all the way to the right edge. The left padding matches the centered 1440
   container, so it never touches the left edge on any screen size. */
.ovband__top {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 21px;
    width: 100%;
    box-sizing: border-box;
    padding-left: max(30px, calc((100% - 1440px) / 2 + 30px));
    padding-right: 0;
    margin-bottom: 64px;
}

/* ===== Frame 193 : sliding carousel ===== */
.carousel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 330px;
    flex: 1 1 auto;
    min-width: 0;
}

.carousel__item {
    position: relative;
    height: 330px;
    /* thin strip by default; the active one fills the remaining space.
       --n (item count) is set inline on .carousel so this adapts to any
       number of slides: strips are 45px + 4px gap = 49px each. */
    flex: none;
    width: 45px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.carousel__item.is-active {
    width: calc(100% - (var(--n) - 1) * 49px);
    cursor: default;
}

.carousel__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Rectangle 82 : gradient only on the featured item */
.carousel__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 56.82%, #000000 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.carousel__title {
    position: absolute;
    left: 16px;
    bottom: 22px;
    width: 280px;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Frame 194 : circular arrow button */
.carousel__arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.4s ease, background 0.2s ease;
}

.carousel__arrow:hover {
    background: rgba(255, 255, 255, 0.15);
}

.carousel__item.is-active .carousel__overlay,
.carousel__item.is-active .carousel__title,
.carousel__item.is-active .carousel__arrow {
    opacity: 1;
}

.carousel__item.is-active .carousel__arrow {
    pointer-events: auto;
}

/* ===== Frame 139 : Announcements ===== */
.ann {
    flex: none;
    width: 646px;
    min-height: 377px;
    background: #E6EDE5;
    border-radius: 0;               /* perfect rectangle */
    padding: 15px 18px 18px;
    display: flex;
    flex-direction: column;
}

.ann__head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}

.ann__title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: #064700;
}

.ann__filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.ann__loc {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-bottom: 2px solid #064700;
    padding-bottom: 1px;
}

.ann__loc-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #064700;
}

.ann__filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.ann__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
}

.ann__img {
    flex: none;
    width: 160px;
    height: 102px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
}

.ann__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ann__item-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
    color: #363636;
}

.ann__item-desc {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    text-align: justify;
    color: #363636;
}

.ann__viewall {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    align-self: center;
    margin-top: auto;
    padding-top: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #CF8E00;
    text-decoration: none;
    border-bottom: 2px solid #CF8E00;
}

/* ===== Overview heading + box ===== */
.overview {
    margin-top: 0;
}

.overview__head {
    padding-left: 22px;
    border-left: 6px solid transparent;
    /* gold at top -> green at bottom */
    border-image: linear-gradient(180deg, #CF8E00 0%, #064700 100%) 1;
    margin-bottom: 40px;
}

.overview__title {
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #363636;
}

.overview__subtitle {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #363636;
}

/* Rectangle 109 */
.overview__box {
    background: rgba(6, 71, 0, 0.1);
    border-radius: 30px;
    min-height: 438px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
}

.overview__desc {
    margin: 0;
    max-width: 1130px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    color: #363636;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .hoop { display: none; }                 /* drop the decorative circles */
    .ovband__top {
        flex-direction: column;
        align-items: stretch;
        padding-left: 30px;
        padding-right: 30px;
        gap: 22px;
        margin-bottom: 44px;
    }
    .carousel { width: 100%; height: 300px; }
    .ann { width: 100%; }
    .overview__title { font-size: 38px; }
    .overview__box { padding: 44px 40px; min-height: 0; }
    .overview__desc { font-size: 19px; line-height: 29px; }
}

@media (max-width: 680px) {
    .ovband { padding: 44px 0; }
    .ovband__top { padding-left: 16px; padding-right: 16px; gap: 18px; margin-bottom: 32px; }
    .carousel { height: 240px; }
    .carousel__item { width: 26px; }
    .carousel__item.is-active { width: calc(100% - (var(--n) - 1) * 30px); }
    .carousel__title { font-size: 16px; line-height: 22px; width: auto; right: 16px; }
    .carousel__arrow { width: 40px; height: 40px; }
    .ann { min-height: 0; }
    .ann__img { width: 104px; height: 70px; }
    .ann__item-title { font-size: 15px; }
    .ann__item-desc { font-size: 13px; line-height: 19px; }
    .ann__title { font-size: 20px; line-height: 30px; }
    .ann__loc-text { font-size: 16px; }
    .ann__viewall { font-size: 17px; }
    .overview__head { padding-left: 16px; margin-bottom: 26px; }
    .overview__title { font-size: 28px; }
    .overview__subtitle { font-size: 16px; }
    .overview__box { padding: 26px 20px; border-radius: 20px; }
    .overview__desc { font-size: 16px; line-height: 24px; }
}

@media (max-width: 420px) {
    .carousel__item { width: 18px; }
    .carousel__item.is-active { width: calc(100% - (var(--n) - 1) * 22px); }
    .overview__title { font-size: 23px; }
}