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

* {
    margin: 0px;
    box-sizing: border-box;
    /* font-size: 50%; */
}

body {
    /* padding: 0px 5vw; */
    font-family: "Oswald", sans-serif;
}

main {
    padding: 0px 5vw;
}

.main-picture {
    width: 100%;
    background: #ffcc00;
    padding: 0px;
}

.main-picture-svg {
    margin: 0px auto;
    width: 60%;
    padding-top: 20%;
    padding-bottom: 20%;
}

.main-picture-background {
    background: #101178;
    height: 100%;
    clip-path: polygon(20% 0, 95% 0, 95% 100%, 2% 100%);
}

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

.main-button__button {
    position: absolute;
    background: #101178;
    padding: 1% 10%;
    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 4.5rem Oswald;
    cursor: pointer;
    transition: all 0.2s;
}

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

.iyc-main-container {
    margin-top: 13%;
}

.iyc-main-header {
    text-align: center;
    font: normal normal bold 3.1rem/3.43rem Oswald;
    color: #101178;
    text-transform: uppercase;
}

.iyc-main-description-container {
    margin-top: 5%;
}

.iyc-main-description-container {
    display: grid;
    grid-template-columns: 60% 40%;
    /* grid-template-columns: 1fr; */
    /* grid-column-gap: 2%; */
    justify-content: center;
}

.iyc-main-description-image-container img {
    max-width: 90%;
    box-shadow: 2.5rem 2.5rem #101178;
}

.iyc-main-description-details-text {
    margin-top: 10%;
    padding: 0px 9% 0px 40px;
    text-align: left;
    font: normal normal 300 1.6rem/2.2rem Oswald;
    color: #000000;
}

.iyc-main-description-details-header {
    margin-top: 10%;
    text-align: left;
    font: normal normal bold 1.9rem/3.4rem Oswald;
    color: #000000;
    text-transform: uppercase;
}

.iyc-main-description-details-text2 {
    margin-top: 6%;
    padding: 0px 9% 0px 40px;
    text-align: left;
    font: normal normal 300 1.56rem/2.2rem Oswald;
    color: #000000;
}

.iyc-main-description-id {
    margin-top: 40px;
    height: fit-content;
    background: #101178;
}

.iyc-main-description-id-header {
    padding: 10% 0px 0px 0px;
    text-align: center;
    font: normal normal 500 4.4rem/2.56rem Oswald;
    color: #ffffff;
    text-transform: uppercase;
}

.iyc-main-description-id-details {
    position: relative;
    margin: 12% auto;
    width: 85%;
    background: transparent linear-gradient(90deg, #e4eaf2 0%, #ffffff 100%) 0%
        0% no-repeat padding-box;
    padding: 2% 6% 2% 35%;
    /* clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); */
}

.iyc-main-description-id-details-header {
    text-align: left;
    font: normal normal medium 1.25rem/2.1rem Oswald;
    color: #101178;
    text-transform: uppercase;
}

.iyc-main-description-id-details-detail {
    text-align: left;
    font: normal normal 500 1.6rem/1.9rem Oswald;
    color: #000000;
    text-transform: uppercase;
}

.id-details-1::before {
    content: "";
    position: absolute;
    /* top: -100px; */
    left: 0px;
    bottom: -5%;
    background: #ffcc00 0% 0% no-repeat padding-box;
    background-image: url("../images/svg/calendar-blue.svg");
    background-size: 60% 60%;
    background-position-x: 10%;
    background-position-y: center;
    width: 40%;
    height: 110%;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
}

.id-details-2::before {
    content: "";
    position: absolute;
    /* top: -100px; */
    left: 0px;
    bottom: -5%;
    background: #ffcc00 0% 0% no-repeat padding-box;
    background-image: url("../images/svg/location-blue.svg");
    background-size: 60% 60%;
    background-position-x: left;
    background-position-y: center;
    width: 40%;
    height: 110%;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
}

.id-details-3::before {
    content: "";
    position: absolute;
    /* top: -100px; */
    left: 0px;
    bottom: -5%;
    background: #ffcc00 0% 0% no-repeat padding-box;
    background-image: url("../images/svg/hash-key.svg");
    background-size: 60% 60%;
    background-position-x: 5%;
    background-position-y: center;
    width: 40%;
    height: 110%;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
}

.id-details-4::before {
    content: "";
    position: absolute;
    /* top: -100px; */
    left: 0px;
    bottom: -5%;
    background: #ffcc00 0% 0% no-repeat padding-box;
    background-image: url("../images/svg/support.svg");
    background-size: 40% 40%;
    background-position-x: 25%;
    background-position-y: center;
    width: 40%;
    height: 110%;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
}

.id-details-5::before {
    content: "";
    position: absolute;
    /* top: -100px; */
    left: 0px;
    bottom: -5%;
    background: #ffcc00 0% 0% no-repeat padding-box;
    background-image: url("../images/svg/united.svg");
    background-size: 40% 40%;
    background-position-x: 25%;
    background-position-y: center;
    width: 40%;
    height: 110%;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
}

.iyc-findmore-link {
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s;
}

.iyc-findmore-link:hover {
    text-shadow: 0px 6px 4px rgb(121, 120, 120);
    transform: scale(1.02);
}

.iyc-findmore-link:active {
    transform: translateY(-2px);
}

@media (max-width: 1250px) {
    .iyc-main-description-container {
        grid-template-columns: 1fr;
    }

    .iyc-main-description-image-container {
        width: 50%;
        margin: 0 auto;
    }

    .iyc-main-description-image-container img {
        box-shadow: 1.5rem 1.5rem #101178;
    }
}

@media (max-width: 800px) {
    .main-button__button {
        font: normal normal bold 3.5rem Oswald;
        bottom: -7vh;
    }

    .iyc-main-header {
        font: normal normal bold 2.1rem/2.43rem Oswald;
    }

    main {
        padding: 0;
    }

    .iyc-main-description-details {
        padding: 0px 5vw;
    }
}

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

    .main-button__button {
        bottom: -4vh;
    }
}

@media (max-width: 400px) {
    .main-button__button {
        font: normal normal bold 2.5rem Oswald;
        bottom: -3vh;
    }
}