@import url(../global/style.css);

:root {
    --cor-principal: #9d070d;
    --cor-escura: #312f30;
    --cor-clara: #f4f4f4;
}


main {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 100px 10% 0 10%;

    h1 {

        font-size: 2vw;
        font-weight: 800;

        span {
            font-size: 2vw;
            font-weight: 800;
            color: var(--cor-principal);
        }
    }

    .hero {
        margin-top: 50px;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        padding: 3vh 2vw;
        border-radius: 0 0 30vw 0;
        border-top: 1px solid var(--cor-principal);
        border-right: 1px solid var(--cor-principal);


        .hero-image {
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;

            }
        }


        .hero-info {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;

            .hero-info-detail {
                display: flex;
                align-items: center;
                padding: 15% 0 0 0;

                .hero-info-detail-icon {
                    background-color: var(--cor-principal);
                    padding: 1vw;
                    width: 4vw;
                    height: 4vw;
                }

                .hero-info-detail-text {
                    padding-left: 1vw;

                    h4 {
                        font-weight: 900;
                        font-size: 2vw;
                    }

                    p {
                        font-size: 1vw;
                    }
                }
            }

            .hero-info-detail:nth-child(1) {
                padding: 0;
            }

            .hero-info-detail:nth-child(2) {
                margin-left: 6vw;
            }
        }
    }

    .time-line {
        width: 100%;

        .time-line-box {
            width: 100%;
            display: flex;
            justify-content: end;


            .time-line-box-content {
                width: 50%;
                text-align: justify;
                margin-top: 50px;

                h2 {
                    display: inline-block;
                    padding: 0.5vh 0.5vw;
                    background-color: var(--cor-principal);
                    border-radius: 0 1.2vw 0 0;
                    color: var(--cor-clara);
                    font-size: 1.3vw;
                    font-weight: 600;
                }

                .time-line-box-content-text {
                    border: 1px solid var(--cor-principal);
                    padding: 10%;


                    p {
                        font-size: 1vw;

                        span {
                            font-size: 1vw;
                            font-weight: 600;
                            color: var(--cor-principal);
                        }
                    }
                }
            }
        }

        .time-line-box:nth-child(odd) {
            justify-content: start;
        }
    }
}

@media screen and (max-width: 800px) {
    main {
        padding: 30px 3% 0 3%;

        h1 {

            font-size: 15px;
            font-weight: 800;

            span {
                font-size: 15px;
            }
        }

        .hero {
            padding: 2vh 2vw;
            margin-top: 15px;
            align-items: center;
            justify-content: space-around;


            .hero-image {
                width: 40%;

                img {
                    width: 100%;
                }

                ;
            }

            .hero-info {
                width: 40%;


                .hero-info-detail {

                    .hero-info-detail-icon {
                        width: 5vw;
                        height: 5vw;
                    }

                    .hero-info-detail-text {
                        h4 {
                            font-size: 15px;
                        }

                        p {
                            font-size: 1.6vw;
                        }
                    }
                }
            }
        }

        .time-line {
            .time-line-box {

                .time-line-box-content {
                    width: 90%;
                    margin-top: 30px;

                    h2 {
                        font-size: 15px;
                    }

                    .time-line-box-content-text {
                        padding: 5%;

                        p {
                            font-size: 12px;

                            span {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }

            .time-line-box:nth-child(n) {
                justify-content: center;
            }
        }


    }
}