body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main {
    background: #fff2eb;
    min-height: 400px;
    width: 100vw;
    height: 685px;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;




    .img_para1 {
        width: 80vw;
        position: relative;
        display: flex;
        justify-content: center;

        flex-direction: column;
        align-items: center;
        overflow: hidden;


        h0 {
            position: absolute;
            color: white;
            text-shadow: 2px 2px 2px 4px rgba(0, 0, 0, 0.5);

            text-align: center;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

        }

        img {
            width: 100%;
        }


    }

    .main_btn {
        position: relative;
        width: 100%;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: end;

        margin: 40px 0;

        a {
            font-family: 'Oswald', sans-serif;
            font-size: 22px;
            font-weight: 500;
            background: #000;
            color: #fff;
            padding: 10px 40px;
            transition: 300ms ease-in-out;
        }

        a:hover {
            cursor: pointer;
            background: none;
            color: #db0f35;
        }

        .idvd_btn {
            display: flex;
            justify-content: center;
            align-items: center;

            margin: 0 50px;

            .arrow_style {
                width: 50px;
                aspect-ratio: 1/1;
                border: #f00 1px solid;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            img {
                height: 30px;
                transform: rotate(90deg);
            }
        }
    }
}

h1 {
    font-size: 46px;
}

.sec_2 {
    position: relative;
    width: 80vw;
    padding: 18vh 0;
    text-align: center;

    img {
        position: absolute;
        top: 25%;
        left: 18%;
        z-index: -1;
        opacity: 0.4;
    }


}

.sec_3 {
    background: #fff2eb;

    width: 80vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 10vw;
    justify-content: center;

    h3 {
        color: #db0f35;
    }

    .sec_3_c1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin: 20px 0;

        >* {
            width: 50%;
        }

        .sec_3_c1_img {
            position: relative;
            display: flex;
            align-items: center;

            img {
                position: absolute;
                width: 35vw;
            }
        }

        .sec_3_c1_details {
            display: flex;
            flex-direction: column;
            padding-left: 10vw;
            padding-top: 10vh;

            h1,
            h3 {
                margin-top: 0;
            }


            p {
                margin: 10px;
            }

            a {
                margin: 40px 0;
                width: fit-content;
                color: #fff;
                padding: 10px 30px;
                background: #db0f35;
                border: 1px #db0f35 solid;
                transition: 400ms ease-in-out;

                &:hover {
                    color: #db0f35;
                    background: none;
                }
            }
        }
    }


    .sec_3_c2 {
        height: 67vh;
        display: flex;
        margin: 5vh 0;

        .sec_3_c2_text {
            padding-left: 10vw;
            width: 50%;

            display: flex;
            flex-direction: column;
            justify-content: center;

            h1,
            h3 {
                margin: 0;
                text-align: left;
            }

        }

        .sec_3_c2_img {
            width: 50%;

            position: relative;
            display: flex;
            justify-content: left;

            img {
                position: absolute;
                width: 35vw;
                top: 0%;
                right: 0%;
            }

        }
    }
}

.sec_4 {
    padding: 5vw;

    h1 {
        margin-bottom: 0;
    }

    p {
        margin-bottom: 40px;
    }

    .grid_container {
        max-width: 80vw;
        max-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 2fr 3fr 1fr 1fr 2fr 2fr 1fr 1fr 1fr 2fr;
        gap: 10px 10px;
        grid-auto-flow: row;
        grid-template-areas:
            ". . grid_item1 grid_item1 grid_item1 . . . . . . . . ."
            ". . grid_item1 grid_item1 grid_item1 grid_item2 grid_item2 grid_item2 grid_item2 grid_item2 . . . ."
            ". . grid_item1 grid_item1 grid_item1 grid_item2 grid_item2 grid_item2 grid_item2 grid_item2 . . . ."
            ". . grid_item1 grid_item1 grid_item1 grid_item2 grid_item2 grid_item2 grid_item2 grid_item2 . . . ."
            ". . grid_item1 grid_item1 grid_item1 grid_item4 grid_item4 grid_item4 grid_item5 grid_item5 grid_item5 grid_item5 grid_item5 ."
            "grid_item3 grid_item3 grid_item3 grid_item3 grid_item3 grid_item4 grid_item4 grid_item4 grid_item5 grid_item5 grid_item5 grid_item5 grid_item5 ."
            "grid_item3 grid_item3 grid_item3 grid_item3 grid_item3 grid_item4 grid_item4 grid_item4 grid_item5 grid_item5 grid_item5 grid_item5 grid_item5 ."
            "grid_item3 grid_item3 grid_item3 grid_item3 grid_item3 grid_item4 grid_item4 grid_item4 grid_item5 grid_item5 grid_item5 grid_item5 grid_item5 ."
            ". . . . . grid_item4 grid_item4 grid_item4 . . . . . ."
            ". . . . . grid_item4 grid_item4 grid_item4 . . . . . ."
            ". . . . . . . . . . . . . .";

        >* {
            overflow: hidden;
            transition: 500ms ease-in-out;
        }

        img {
            transition: 500ms ease-in-out;
        }

        img:hover {
            cursor: pointer;
            scale: 1.1;
            /* -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.52);
            -moz-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.52);
            box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.52); */
        }
    }

    .grid_item1 {
        grid-area: grid_item1;
    }

    .grid_item2 {
        grid-area: grid_item2;
    }

    .grid_item3 {
        grid-area: grid_item3;
    }

    .grid_item4 {
        grid-area: grid_item4;
    }

    .grid_item5 {
        grid-area: grid_item5;
    }


}