html { font-size: 14px; }

@media (min-width: 768px) {
    html { font-size: 16px; }
}

html { position: relative; min-height: 100%; }

body { margin-bottom: 60px; }

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap");

* { padding: 0; margin: 0; box-sizing: border-box; }

body { font-family: "Poppins", sans-serif; --black: #242424; --white: #f5f5f5; --pill: #e0d4be; --red: #cc033f; }

ul { list-style: none; }

.page-wrap { position: relative; }

header { width: 100%; /* min-height: 100vh; */ overflow-x: hidden; }

/*  NAV: Top Menu Section
        ----------------------------------------------- */
nav { width: 100%; position: fixed; z-index: 10; padding: 1em 5em; display: flex; justify-content: space-between; }

    nav h1 { font-size: clamp(1.2rem, 6vw, 3rem); font-weight: normal; text-transform: uppercase; color: var(--pill); font-size: 1.3rem; background-color: var(--red); padding: 5px 10px; }

        nav h1 .nav-link.text-dark { color: #fff; text-decoration: none; }

    nav ul { display: flex; color: var(--white); }

        nav ul li:not(#burger) { visibility: hidden; margin-right: 1.5em; }

#burger { width: min-content; height: 28px; display: flex; flex-direction: column; justify-content: space-evenly; cursor: pointer; }

    #burger span { display: block; height: 3px; width: 22px; background-color: var(--red); border-radius: 200px; transition: transform 0.3s 0.3s; }

.active span:nth-of-type(1) { transform: translateY(-3px) scaleX(1.3); }

.active span:nth-of-type(3) { transform: translateY(3px) scaleX(1.3); }

/*  MAIN: Slider Section
        ----------------------------------------------- */
main { width: 100vw; height: 100vh; position: relative; overflow: hidden; }

article { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: var(--i); }

.hero-info { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 8; }

    .hero-info h2 { font-size: clamp(2rem, 9vw, 5rem); line-height: clamp(2rem, 9vw, 5rem); text-transform: uppercase; }

    .hero-info h1 { color: var(--white); font-size: clamp(3.2rem, 10vw, 7rem); line-height: clamp(3.2rem, 10vw, 7rem); text-transform: uppercase; text-shadow: 0 1px 0 #cc884f, 0 2px 0 #cc884f, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15) }

    .hero-info h3 { color: var(--white); font-size: 1.6rem; font-weight: normal; margin-top: 2em; }

    .hero-info h2 { color: transparent; -webkit-text-stroke: 3px var(--pill); text-shadow: 0 6px 1px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.2); }

.hero-image { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
.hi-1 { background-image: url("../images/001.jpg"); }
.hi-2 { background-image: url("../images/002.jpg"); }
.hi-3 { background-image: url("../images/003.jpg"); }
.hi-4 { background-image: url("../images/004.jpg"); }
.hi-5 { background-image: url("../images/005.jpg"); }
.hi-6 { background-image: url("../images/006.jpg"); }
/*  SECTION: Overlay Menu Section
----------------------------------------------- */
section { position: absolute; top: 0; left: 0; z-index: 9; min-height: 100vh; padding: 8em 5em 2em 5em; background-color: var(--white); background-image: url("https://www.transparenttextures.com/patterns/church.png"); clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); }

.level-1 { display: grid; grid-template-columns: 65% 1fr; grid-auto-rows: min-content; grid-gap: 2em; }

    .level-1 h3 { font-weight: 600; font-size: 1.8rem; text-transform: uppercase; }

    .level-1 p { margin: 0.5em 0 0 0.5em; }

        .level-1 p small { font-size: 1rem; opacity: 0.5; cursor: pointer; }

            .level-1 p small:hover { opacity: 1; color: var(--red); }

    .level-1 ul > li { font-size: 1.2rem; padding: 0.3em; transition: color 0.3s; }

        .level-1 ul > li:hover { color: var(--red); cursor: pointer; }

    .level-1 li:nth-of-type(1) { grid-column: 1/2; grid-row: 1/4; }

    .level-1 li:nth-of-type(2) { grid-column: 2/3; grid-row: 1/2; }

    .level-1 li:nth-of-type(3) { grid-column: 2/3; grid-row: 2/3; }

    .level-1 li:nth-of-type(4) { grid-column: 2/3; grid-row: 3/4; }

.level-2 { padding: 0.3em 1em; }

    .level-2 li p { color: var(--red); font-size: 1.3rem; font-weight: 600; margin: 1em 0; text-transform: uppercase; border-bottom: 1px solid #fde0ac; }

.level-3 { display: flex; flex-wrap: wrap; }

    .level-3 li { padding: 0.5em 1em !important; background-color: var(--pill); border-radius: 500px; margin-right: 10px; margin-bottom: 10px; font-size: 1rem !important; cursor: pointer; color: var(--black); }

@media screen and (max-width: 600px) {
    nav { padding: 1em 2em; }

        nav h1 { font-size: 0.9rem; }

    section { padding: 8em 2em 2em 2em; }

    .level-1 { grid-template-columns: 1fr; }
        .level-1 li:nth-of-type(1) { grid-column: 1/2; grid-row: 1/2; }
        .level-1 li:nth-of-type(2) { grid-column: 1/2; grid-row: 2/3; }
        .level-1 li:nth-of-type(3) { grid-column: 1/2; grid-row: 3/4; }
        .level-1 li:nth-of-type(4) { grid-column: 1/2; grid-row: 4/5; }
}