@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter"; /* font-family is inherited */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.body-container {
    box-sizing: border-box;
    padding: 60px 0 150px;
    margin: 0 auto;
    width: 95%;
    max-width: 1152px;
}

.body-container h1 {
    box-sizing: border-box;
    padding: 0 15px;
    margin: 0;
    line-height: 1.30em;
}

.body-container > h1 {
    text-align: center;
    font-size: 40px;
    font-weight: 500;
}

.container-set {
    box-sizing: border-box;
    margin: 50px 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}

.container-set > h1 {
    text-align: center;
    font-size: 32px;
    font-weight: 500;
}

.test-certificates {
    margin-top: 100px;
}

/* accordion */
.accordion-item {
    box-sizing: border-box;
    margin: 0;
    padding: 14px 26px;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(217, 217, 217, 0.75);
}

.accordion-header {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.50em;
    cursor: pointer;
    gap: 20px;
}

.accordion-header i {
    color: rgba(11, 64, 8, 1);
}

/* Display content when active/open */
.accordion-content {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 500px;
    align-self: center;
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    opacity: 0;
    transition: max-height 500ms ease, opacity 500ms ease, padding 500ms ease;
}
.accordion-header.active + .accordion-content {
    max-height: none; /* Increased to accommodate more content and ensure hiding */
    opacity: 1;
    padding: 15px 0 10px;
}

.accordion-content > img {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.accordion-content.cecophil,
.accordion-content.nwrb,
.accordion-content.pca,
.accordion-content.dpwh-res,
.accordion-content.up-cert,
.accordion-content.test-cert {
    max-width: 800px;
}

.pns-iso > img {
    aspect-ratio: 489 / 745;
}

.business-reg > img {
    aspect-ratio: 2236 / 2848;
}

.cecophil > img {
    aspect-ratio: 1662 / 1276;
}

.nwrb > img {
    aspect-ratio: 1754 / 1240;
}

.sec-ph > img {
    aspect-ratio: 1071 / 1512;
}

.business-permit > img {
    aspect-ratio: 1241 / 1941;
}

.pcab > img {
    aspect-ratio: 1004 / 1565;
}

.pca > img {
    aspect-ratio: 1600 / 1200;
}

.dpwh-accre > img {
    aspect-ratio: 1240 / 1754;
}

.dpwh-res > img {
    aspect-ratio: 1238 / 876;
}

.env-clearance > img {
    aspect-ratio: 478 / 718;
}

.up-cert > img {
    aspect-ratio: 1062 / 742;
}

/* Rotate arrow when active/open */
.accordion-arrow {
    transition: transform 500ms ease;
}

.accordion-header.active .accordion-arrow {
    transform: rotate(180deg); /* Arrow points up when open */
}

@media (max-width: 1629px) {
    .body-container {
        max-width: none;
    }
}

@media (max-width: 1277px) {
    .container-set {
        margin: 40px 0;
    }
    .test-certificates {
        margin-top: 70px;
    }
}

@media (max-width: 1128px) {
    .body-container {
        width: 95%;
        max-width: 1071.6px;
    }
    .body-container > h1 {
        font-size: 28px;
    }
    .container-set > h1 {
        font-size: 20px;
    }
}

@media (max-width: 824px) {
    .container-set {
        margin: 30px 0;
    }
    .test-certificates {
        margin-top: 60px;
    }
}

@media (max-width: 552px) {
    .body-container {
        padding-bottom: 80px;
    }
}

@media (max-width: 1128px) {
    .accordion-item {
        padding: 14px 16px;
    }
    .accordion-header {
        font-size: 18px;
        font-weight: 600;
    }
}