@font-face {
    font-family: fontEdil;
    src: url(../../assets/font/Conthrax-SemiBold.otf);
}

* {
    margin: 0;
    padding: 0;
    font-family: fontEdil;
}

::-webkit-scrollbar {
    width: 1px;
}

body {
    width: 100%;
    height: auto;
    font-family: fontEdil;
}

.sectionOne {
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-areas:
        "One"
        "Two"
        "Three"
        "Four"
    ;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 50px;
}

.secOne {
    grid-area: One;
    font-family: fontEdil;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    font-size: 1.1vw;
}

.secTwo {
    grid-area: Two;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;

    .cntImgOne {
        width: 40%;

        img {
            width: 100%
        }
    }

    .textRightS2 {
        width: 40%;
        display: flex;
        flex-direction: column;
        gap: 30px;

        p {
            font-size: 0.8vw;
            letter-spacing: 2px;
            word-spacing: 2px;
            max-width: 90%;
            line-height: 140%;
        }
    }
}

.secThree {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;

    p {
        background-color: gray;
        padding: 25px;
        width: 50%;
        text-align: center;
        color: white;
        border: 4px solid #1f676b;
        border-radius: 20px;
        font-size: 0.7vw;
        letter-spacing: 2px;
        word-spacing: 2px;
    }
}

.secFour {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 5%;

    p {
        width: 70%;
        text-align: center;
        font-size: 0.7vw;
        letter-spacing: 2px;
        word-spacing: 2px;
    }

    li {
        margin-bottom: 10px;
        font-size: 0.7vw;
        letter-spacing: 2px;
        word-spacing: 2px;
    }
}

@keyframes animBtn {
    0% {
        filter: drop-shadow(1px 1px 2px black);
    }

    25% {
        filter: drop-shadow(1px 1px 2px black);
    }

    50% {
        filter: drop-shadow(1px 1px 2px black);
    }

    75% {
        filter: drop-shadow(1px 1px 2px black);
    }

    100% {
        filter: drop-shadow(1px 1px 2px black);
    }
}

@media screen and (min-width:320px) and (max-width:820px) and (orientation: portrait) {

    .sectionOne {
        width: 100%;
        height: fit-content;
        display: grid;
        justify-items: center;
        grid-template-areas:
            "One"
            "Two"
            "Three"
            "Four";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 50px;
    }

    .secOne {
        grid-area: One;
        font-family: fontEdil;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
        font-size: 1.6vh;
        text-align: center;
        max-width: 99%;

        h1 {
            font-size: 1.8vh;
        }
    }

    .secTwo {
        grid-area: Two;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;

        .cntImgOne {
            width: 90%;

            img {
                width: 100%
            }
        }

        .textRightS2 {
            width: 90%;
            display: flex;
            flex-direction: column;
            gap: 30px;
            justify-content: center;
            align-items: center;

            p {
                text-align: center;
                font-size: 1.6vh;
                letter-spacing: 2px;
                word-spacing: 2px;
                max-width: 90%;
                line-height: 140%;
            }
        }
    }

    .secThree {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;

        h2 {
            font-size: 1.6vh;
        }

        p {
            background-color: gray;
            padding: 25px;
            width: 80%;
            text-align: center;
            color: white;
            border: 4px solid #1f676b;
            border-radius: 20px;
            font-size: 1.7vh;
            letter-spacing: 2px;
            word-spacing: 2px;
        }
    }

    .secFour {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;

        h2 {
            font-size: 1.9vh;
            text-align: center;
        }

        p {
            width: 70%;
            text-align: center;
            font-size: 1.8vh;
            letter-spacing: 2px;
            word-spacing: 2px;
        }

        li {
            margin: auto;
            max-width: 80%;
            margin-bottom: 10px;
            font-size: 1.8vh;
            letter-spacing: 2px;
            word-spacing: 2px;
        }
    }

    @keyframes animBtn {
        0% {
            filter: drop-shadow(1px 1px 2px black);
        }

        25% {
            filter: drop-shadow(1px 1px 2px black);
        }

        50% {
            filter: drop-shadow(1px 1px 2px black);
        }

        75% {
            filter: drop-shadow(1px 1px 2px black);
        }

        100% {
            filter: drop-shadow(1px 1px 2px black);
        }
    }
}