@import url(reset.css);
@import url(geral.css);
@import url(font.css);

/* Parte superior */

.pagabout{
    background-color: #022D52;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../img/site/sobre/background-resize.webp);
    background-size: auto 100%;
    background-position: 50%;
    position: relative;
}
@media screen and (max-width: 721px) {
    .pagabout.margin-top-relogio{
        margin-top: 177px;
    }
}
    .pagabout__title{
        font-family: MullerExtrabold;
        font-size: 1.25rem;
        color: white;
        text-align: center;
        margin-top: 1.5rem;
    }

    .pagabout__subtitle{
        font-family: MullerExtrabold;
        font-size: 1.25rem;
        color: white;
        text-align: center;
        margin: 0 1.875rem;
        margin-top: 1.8125rem;
        line-height: 1.2;
    }

    .pagabout__info{
        margin-top: calc(4.25rem - 3.375rem);
        margin-bottom: 9.0625rem;
    }

        .pagabout__info--card{
            margin-top: 3.6rem;
        }

            .pagabout__info--card_title{
                font-family: 'Inter', sans-serif;
                font-size: 4.4375rem;
                color: #ffffff;
                font-weight: 800;
                text-align: center;
            }

            .pagabout__info--card_subtitle{
                color: #00A2FF;
                font-family: 'Inter', sans-serif;
                font-size: 1.1875rem;
                font-weight: 800;
                text-align: center;
                line-height: 2;
            }

    .pagabout__video{
        width: 18.8656rem;
        height: 10.9356rem;
        border: 0.0625rem solid #00315C;
        border-radius: 1.25rem;
        bottom: 0;
        position: absolute;
        margin-bottom: -5.0875rem;
        margin-left: .1875rem
    }

        .pagabout__video--video{
            width: 18.6687rem;
            height: auto;
            border-radius: 1.25rem;
            position: relative;
            z-index: 1;
        }

            .pagabout__video--video_playButton{
                background-image: url(../img/site/sobre/playButton.webp);
                background-size: 100%;
                background-repeat: no-repeat;
                width: 6.875rem;
                height: 6.875rem;
                position: absolute;
                z-index: 2;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                cursor: pointer;
            }

.knowmore{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4.8rem;
}

    .knowmore__title{
        font-family: MullerExtrabold;
        font-size: 1.875rem;
        color: #003059;
        text-align: center;
        margin-top: 5.6rem;
    }

    .knowmore__text{
        max-width: 19.625rem;
        text-align: justify;
    }

        .knowmore__text--txt{
            font-size: 1rem;
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            color: #003059;
            margin-top: 1.8125rem;
            line-height: 1.5;
        }

            .knowmore__text--txt em,
            .knowmore__text--txt b,
            .knowmore__text--txt strong{
                font-size: 1rem;
                font-family: 'Roboto', sans-serif;
                font-weight: 700;
                color: #003059;
            }

/* Seção de vantagens */

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

    .aboutadvantages__image{
        width: 19.0625rem;
        height: 28.1875rem;
    }

        .aboutadvantages__image--img{
            width: 100%;
            height: 100%;
            border-radius: 1.25rem;
        }

    .aboutadvantages__cards{
        margin-top: 3.4375rem;
    }

        .aboutadvantages__cards--card{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%
        }

            .aboutadvantages__cards--card_img1{
                width: 4.7994rem;
                height: 6.1706rem;
            }

            .aboutadvantages__cards--card_img2{
                width: 5.3412rem;
                height: 6.1706rem;
                margin-top: 3.125rem;
            }

            .aboutadvantages__cards--card_img3{
                width: 5.25rem;
                height: 6.2344rem;
                margin-top: 3.125rem;
            }

            .aboutadvantages__cards--card_img4{
                width: 6.9419rem;
                height: 6.1688rem;
                margin-top: 3.125rem;
            }

            .aboutadvantages__cards--card_text{
                font-family: 'Inter', sans-serif;
                font-size: 2rem;
                font-weight: 700;
                color: #003059;
                max-width: 13rem;
                text-align: center;
                margin-top: 1.6563rem;
                line-height: 1.25;
            }

/* História */

.abouthistory{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5.6875rem;
}

    .abouthistory__title{
        font-family: MullerExtrabold;
        font-size: 1.875rem;
        color: #003059;
    }

    .abouthistory__text{
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-size: 1rem;
        color: #003059;
        max-width: 18.875rem;
        margin-top: 1.8125rem;
        line-height: 1.5;
    }


/* Principios */

.principles{
    display: flex;
    flex-direction: column;
    color: white;
    background-color: #003059;
    margin-top: 5.875rem;
    align-items: center;
    background-image: url(../img/site/sobre/backgroundPrinciples-resize.webp);
    background-size: 200% 100%;
    background-position: 50%;
}

    .principles__title{
        font-family: MullerExtrabold;
        font-size: 1.875rem;
        margin-top: 2.5625rem;
    }

    .principles__cards{
        width: 16.4375rem;
        margin-top: 1.1875rem;
    }
        .principles__cards--card{
            margin-top: 1.875rem;
        }

            .principles__cards--card_title{
                font-family: 'Inter', sans-serif;
                font-size: 1.5625rem;
                font-weight: 700;
            }

            .principles__cards--card_item{
                display: flex;
                flex-direction: column-reverse;
                margin-top: 1.0625rem;
                margin-bottom: 3rem;
            }

                .principles__cards--card_item-separation{
                    width: 5.75rem;
                    height: .125rem;
                    background-color: #00A2FF;
                    margin-top: 1.875rem;
                }

                .principles__cards--card_item-text{
                    font-family: 'Roboto', sans-serif;
                    font-size: 1rem;
                    font-weight: 700;
                    line-height: 1.5;
                }

                .principles__cards--card_item-text > b{
                    font-weight: 900;
                }

/* Seção da diretoria ou responsáveis */

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

    .responsible__title{
        font-family: MullerExtrabold;
        font-size: 1.875rem;
        margin-top: 5.6875rem;
        color: #003059;
    }

        .responsible__bluecard{
            margin-top: 2.0625rem;
        }

            /* Parte dentro do card */

            .responsible__bluecard--right{
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                margin-top: 1.125rem;
            }

                .responsible__bluecard--right_person{
                    max-width: 17.8125rem;
                }

                    .responsible__bluecard--right_person-job{
                        font-family: 'Roboto', sans-serif;
                        font-size: 1.125rem;
                        font-weight: 400;
                        color: white;
                        margin-top: 1.0625rem;
                    }

                    .responsible__bluecard--right_person-name{
                        font-family: 'Roboto', sans-serif;
                        font-size: 1.125rem;
                        font-weight: 700;
                        color: white;
                        margin-top: .3125rem;
                    }


.video-container{
        width:19rem;
        height:11rem;
        overflow:hidden;
        position:relative;
        margin-top: -0.3125rem;
        margin-left: -0.3125rem;
        border-radius: 20px;
    }


    .video-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    .video-container iframe {
    pointer-events: all;
    }


    .video-container iframe{
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    }

    .video-foreground{
    pointer-events:none;
    }




@media screen and (min-width: 720px){

    .pagabout{
        background-size: 100% 100%;
        background-size: 85.375rem;
        background-repeat: no-repeat;
        background-position: center;
    }

        .pagabout__subtitle{
            font-size: 3.125rem;
            max-width: 63.625rem;
        }

        .pagabout__info{
            margin-top: 1.25rem;
            margin-bottom: 24.125rem;
            display: flex;
            gap: 6.5625rem;
        }

            .pagabout__info--card{
                margin-top: 1.25rem;
            }

        .pagabout__video{
            width: 56.5rem;
            height: 32.77rem;
            border: 0.125rem solid #00315C;
            margin-bottom: -18rem;
            margin-left: .625rem;
        }

            .pagabout__video--video{
                width: 56.5rem;
                height: auto;
                position: relative;
            }

                .pagabout__video--video_playButton{
                    width: 26.75rem;
                    height: 26.75rem;
            }

.emptyspace2{
    height: 18rem;
}

.knowmore{
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
    align-items: inherit;
    margin-top: 5.6437rem;
}

    .knowmore__title{
        font-size: 2.1875rem;
        text-align: left;
        margin-top: 0;
    }

    .knowmore__text{
        max-width: 44.5625rem;
    }

        .knowmore__text--txt{
            margin-top: 2.1875rem;
        }

        .knowmore__text--txt:first-child{
            margin-top: 0;
        }


/* Seção de vantagens */

.aboutadvantages{
    display: flex;
    flex-direction: row;
    align-items: inherit;
    justify-content: center;
    gap: 5.125rem;
    margin-top: 6.25rem;
}

    .aboutadvantages__image{
        width: 27.3125rem;
        height: 40.4375rem;
    }

        .aboutadvantages__image--img{
            border-radius: 1.875rem;
        }

    .aboutadvantages__cards {
        margin-top: 0;
        display: flex;
        grid-template-columns: 1fr 1fr;
        gap: 3.125rem;
        align-items: center;
        justify-content: center;
    }

        .aboutadvantages__cards--card:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
        }

        .aboutadvantages__cards--card:nth-child(2) {
            grid-column: 1;
            grid-row: 2;
        }

        .aboutadvantages__cards--card:nth-child(3) {
            grid-column: 2;
            grid-row: 1;
        }

        .aboutadvantages__cards--card:nth-child(4) {
            grid-column: 2;
            grid-row: 2;
        }

        .aboutadvantages__cards--card {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .aboutadvantages__cards--card_img1,
        .aboutadvantages__cards--card_img2,
        .aboutadvantages__cards--card_img3,
        .aboutadvantages__cards--card_img4 {
            margin-top: 0;
        }

        .aboutadvantages__cards--card_text {
            margin-top: 1.75rem;
        }

/* História */

.abouthistory{
    flex-direction: row;
    align-items: inherit;
    justify-content: center;
    margin-top: 5.5625rem;
    gap: 4.5625rem;
}

    .abouthistory__title{
        font-size: 2.1875rem;
    }

    .abouthistory__text{
        max-width: 40.5625rem;
        margin-top: 0;
    }


/* Principios */

.principles{
    align-items: flex-start;
    max-width: 100vw;
    margin: 0 auto;
    margin-top: 4.5rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
}

    .principles__title{
        width: 56.5rem;
        font-family: MullerExtrabold;
        font-size: 2.1875rem;
        text-align: left;
        margin: 0 auto;
        margin-top: 4.25rem;
    }

    .principles__cards{
        width: 56.5rem;
        display: flex;
        gap: 3.9375rem;
        margin: 0 auto;
        margin-top: 3.125rem;
    }
        .principles__cards--card{
            width: auto;
            display: flex;
            flex-direction: column;
        }

            .principles__cards--card_title{
                font-family: 'Inter', sans-serif;
                font-size: 1.5625rem;
                font-weight: 700;
            }

            .principles__cards--card_item{
                display: flex;
                flex-direction: column;
                margin-top: 0;
            }

                .principles__cards--card_item-separation{
                    width: 5.75rem;
                    height: .125rem;
                    background-color: #00A2FF;
                    margin-top: .75rem;
                }

                .principles__cards--card_item-text{
                    margin-top: 1.125rem;
                }

                .principles__cards--card:nth-child(1) .principles__cards--card_item-text {
                    max-width: 13.8125rem;
                  }

                  .principles__cards--card:nth-child(2) .principles__cards--card_item-text {
                    max-width: 12.875rem;
                  }

                  .principles__cards--card:nth-child(3) .principles__cards--card_item-text {
                    max-width: 22rem;
                    margin-bottom: 5.125rem;
                  }


/* Seção da diretoria ou responsáveis */

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

        .responsible__bluecard{
            margin-top: 6.25rem;
        }

            /* Parte dentro do card */

            .bluecard--cards_card-corpo > div{
                display: flex;
                gap: 6.25rem;
            }

                .responsible__bluecard--left{
                    color: white;
                    margin-top: 3.1563rem;
                }

                    .responsible__bluecard--left_border{
                        border-right: 2px solid #ffffff;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        width: 15.9375rem;
                        height: 15.0625rem;
                    }

                        .responsible__bluecard--left_border-text{
                            font-family: MullerExtrabold;
                            font-size: 2.1875rem;
                        }

                .responsible__bluecard--right{
                    margin-top: 1.4375rem;
                    display: flex;
                    flex-direction: column;
                    max-height: 15.0625rem;
                    justify-content: space-between;
                    margin-top: 2.125rem;
                }

                    .responsible__bluecard--right_person{
                        max-width: 17.8125rem;
                    }

                        .responsible__bluecard--right_person-job{
                            font-family: 'Roboto', sans-serif;
                        }

                        .responsible__bluecard--right_person-name{
                            font-size: 1.5625rem;
                            width: 24.6875rem;
                        }

.video-container{
    width:56.5rem;
    height:32.75rem;
    overflow:hidden;
    position:relative;
    margin-top: -0.625rem;
    margin-left: -0.625rem;
    border-radius: 25px;
}


.video-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container iframe {
    pointer-events: all;
}


.video-container iframe{
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
}

.video-foreground{
    pointer-events:none;
}
}