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

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

body {
    font-family: "Oswald", sans-serif;
}

main {
    padding: 0px 5vw;
}

/* .header {
    min-height: 20vh;
    background-color: #003399;
    width: 33vw;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header svg {
    width: 40%;
}

.header-span {
    padding: 0px;
    color: #ffe900;
} */

.main-picture {
    /* width: 100%;
        height: 100%; */
    /* height: 903px; */
    background: #003399;
    padding: 2% 5% 10% 10%;
    display: flex;
    gap: 15%;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0% 100%);
}

.main-button__container {
    display: flex;
    justify-content: center;
    position: relative;
}

.main-button__button {
    /* position: absolute; */
    margin-top: 5%;
    background: rgba(16, 17, 120, 1);
    padding: 2% 3%;
    width: fit-content;
    color: white;
    text-transform: uppercase;
    font-size: 2rem;
    transform: skew(-20deg);
    box-shadow: 0.625rem -0.625rem #ffe900;
    bottom: -70px;
    font: normal normal bold 5rem/4.375rem Oswald;
    cursor: pointer;
    transition: all 0.2s;
}

.main-button__button:active {
    transform: translateY(-3px);
}

.main-picture img {
    max-width: 100%;
    width: 100%;
}

.main-picture-pic-2 {
    width: 100%;
}

.main-section {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-column-gap: 5%;
    justify-content: center;
    padding: 0px 3%;
}

.main-section-header-container {
    padding: 0px 2%;
    margin-top: 100px;
    max-width: 60%;
    margin-bottom: 30px;
}

.main-section-header {
    color: #101178;
    text-align: left;
    font: normal normal bold 3.125rem/3.43rem Oswald;
    text-transform: uppercase;
}

.main-section-subheader {
    color: #000000;
    text-align: left;
    font: normal normal bold 1.875rem/3.43rem Oswald;
    padding: 1% 3%;
}

.main-section-details-image img {
    max-width: 100%;
    box-shadow: 2.5rem 2.5rem #101178;
    display: block;
}

.main-section-details-text {
    padding: 60px 0px 60px 40px;
    color: #000000;
    text-align: left;
    font: normal normal 300 1.56rem/2.18rem Oswald;
}

.main-section-details-container-images {
    display: flex;
    justify-content: space-between;
}

.picture-one img,
.picture-two img {
    max-width: 100%;
    box-shadow: 1.25rem 1.25rem #101178;
}

.picture-two {
    padding: 0px 5%;
}

.main-section-pictures {
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: space-between; */
    background: #101178;
    padding: 2% 5px 2% 6%;
    height: fit-content;
}

.main-section-pictures-container img {
    display: block;
}

.main-section-pictures-container {
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 4%;
}

.main-section-pictures-container__header {
    padding: 0px 7%;
    color: white;
    text-align: left;
    font: normal normal medium 1rem Oswald;
    text-transform: uppercase;
}

.main-section-pictures-container__header__parenthesis {
    padding: 0px 7%;
    color: #ffe900;
    text-align: left;
    font: normal normal medium 1rem Oswald;
    text-transform: uppercase;
}

.main-section-pictures-container__text {
    margin-top: 4%;
    padding: 0px 7%;
    color: #ffffff;
    text-align: left;
    font: normal normal medium 0.5rem Oswald;
    text-transform: uppercase;
}

.main-section-pictures-container__text__time {
    padding: 0px 7%;
    color: #ffffff;
    text-align: left;
    font: normal normal medium 1rem Oswald;
    text-transform: uppercase;
}

hr {
    width: 92%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0 auto;
    color: white;
    background-color: white;
}

.sup-class-header {
    font-size: 0.8rem;
}

.sup-small-paragraph {
    font-size: 0.6rem;
}

.sup-header {
    font-size: 1.8rem;
}

.sup-sub-header {
    font-size: 1.2rem;
}

.main-section-details-video {
    margin-top: 20%;
    margin-bottom: 10%;
    text-align: center;
}

.iyc-detail-text-hover {
    transition: transform 0.2s;
}

.iyc-detail-text-hover:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.contact-link {
    margin: 0px;
}
h1 {
    font-size: 1.3rem;
}

@media (max-width: 1440px) {
    .main-section {
        grid-template-columns: 1fr;
    }

    .main-section-pictures {
        margin-bottom: 20%;
    }
}

@media (max-width: 1100px) {
    .main-section-header {
        text-align: center;
    }

    .main-section-subheader {
        text-align: center;
    }

    .main-section-header-container {
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
    }
}

@media (max-width: 800px) {
    .main-button__button {
        font: normal normal bold 4rem/3.375rem Oswald;
    }

    .main-section {
        padding: 0;
    }

    main {
        padding: 0;
    }

    .main-section-details {
        padding: 0 5vw;
    }

    .main-section-details-image {
        margin-right: 5%;
    }

    .main-section-header {
        text-align: center;
    }

    .main-section-subheader {
        text-align: center;
    }

    .main-section-header-container {
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
    }
}

@media (max-width: 550px) {
    html {
        font-size: 70%;
    }

    .main-section-details-video iframe {
        height: 300px;
    }

    .media-image img {
        display: inline;
        width: 35vw;
    }

    .media-image {
        display: inline;
        width: 40%;
    }

    .main-section-details-text {
        padding-left: 0;
    }
}

@media (max-width: 400px) {
    html {
        font-size: 50%;
    }

    .main-section-details-video iframe {
        height: 200px;
    }
}