/* Hero section */
section.hero {
    position: relative;

    width: 100%;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    background-color: var(--color3);
    background-image: url(../assets/bg.png);

    background-attachment: fixed;
    background-repeat: no-repeat;

    background-size: cover;
    background-position: center center;

    overflow: hidden;
    padding: 5px;

}   section.hero h1 {
    font-size: 34px;
    font-weight: bold;

    color: #ffffff;
    text-align: center;

    position: relative;

}   section.hero svg {
    position: absolute;
    fill: #ffffff;

    bottom: -2px;
    left: 0;

    scale: -1;
    
}

/* Introduction */
section.intro {
    position: relative;
    padding-bottom: 300px;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

}   section.intro .content {
    position: relative;
    z-index: 5;
    width: 60%;

}   section.intro svg {
    position: absolute;

    top: 0;
    left: 0;

    transform: translateY(calc(100% - 5px));
    
    fill: #ffffff;
    scale: -1;

}   section.intro::before {
    content: '';
    position: absolute;
    inset: 0 0 0 0;

    background-image: url(https://tse1.explicit.bing.net/th/id/OIP.xP0cW4UNxp3uHxpC9cn4zwHaE8?rs=1&pid=ImgDetMain&o=7&rm=3);
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: bottom left;

    mask-image: url(../assets/masks/ink.png);
    mask-size: 500px;
    mask-repeat: no-repeat;
    mask-position: bottom left;
}

section.why {
    display: flex;
    flex-direction: row;

    justify-content: flex-start;
    align-items: flex-start;

    gap: 15px;

}   section.why h2 {
    width: 250px;
    font-size: 40px;

}   section.why .content {
    width: 100%;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;
    gap: 10px;

    
    flex-wrap: wrap;

}   section.why .content .fact {
    max-width: 300px;
    height: auto;

}

/* Programs */
section.programs {
    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: flex-start;

    gap: 15px;

}   section.programs .cards {
    width: 100%;
    
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;
    gap: 10px;

}   section.programs .cards .card {
    cursor: pointer;
    min-width: 250px;
    max-width: 400px;
    flex-grow: 1;

    position: relative;

    border-radius: 5px;
    margin-bottom: 25px;

}   section.programs .cards .card .img {
    width: 100%;
    aspect-ratio: 1/1;
    background: #878787;
    border-radius: 5px;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: .3s ease-out;
    
}   section.programs .cards .card:hover .img {
    transform: scale(0.95);
    
}   section.programs .cards .card .content {
    min-height: 100px;
    
    position: absolute;
    border-radius: 5px;

    bottom: 5px;
    left: 5px;

    width: calc(100% - 10px);
    background: #eee;

    padding: 10px;
    transform: translateY(25px);

}   section.programs .cards .card .content h3 {
    font-size: 18px;
    color: var(--color1);

}   section.programs .cards .card .content p {
    font-size: 14px;
    color: #111111;
}

/* Prize Giving */
section.annualpg {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;

    gap: 15px;

}   section.annualpg .content {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: row;
    gap: 15px;

}   section.annualpg iframe {
    aspect-ratio: 16/9;
    max-width: 600px;
    width: 100%;
}

section.dist {
    width: 100%;
    aspect-ratio: 16/5;

    background-image: url(../assets/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media (max-width: 1000px) {
    section.why, section.why .content{ flex-direction: column; justify-content: flex-start; align-items: flex-start;}
    section.why .content .fact { min-width: 100%; }
    section.dist { aspect-ratio: 16/9; }
    section.intro .img { scale: 1 1; }
}

@media (max-width: 920px) {
    section.intro .content { width: 80%; }
    section.annualpg .content { flex-direction: column; }
}

@media (max-width: 680px) {
    section.intro .content {
        width: 100%;
    }
    section.dist { aspect-ratio: 16/11; }
    section.intro p { margin-top: 150px; }
    section.intro::before { background-size: 110%; mask-size: calc(100%); background-position: top left; mask-position: top left; }
}