:root {
    --corPrincipalc: #072258;
    --corPrincipal: #051637;
}


.headline{
    text-align: center;
    background: linear-gradient(to bottom, var(--corPrincipalc), var(--corPrincipal));
    width: 100%;
    padding:5px 0px 40px 0px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    #imgs{
        margin:30px 0px 0px 0px;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: row;
    
    img:nth-of-type(1){
        width: 30%;
        height: auto;
    }
    img:nth-of-type(2){
        width: 25%;
        height: auto;
    }
    }

    a{
        font-size: 25px;
        font-weight: 600;
        text-decoration: none;
        padding:15px;
        border-radius: 20px;
        text-align: center;
        width: 50%;
        color: white;
        background-color: #0C5495;
        transition: 300ms;

        &:hover{
            text-shadow: 0px 0px 15px rgb(255, 255, 255);
            transition: 300ms;
            background-color: #1176d0;
        }
    }

    p{
        font-weight: 700;
    }

    p2{
        text-align: center;
        font-size: 18px;
        margin-top: 1%;

        strong{
            font-size: 140%;
        }
    }
}

.container1{
    background: linear-gradient(to bottom, var(--corPrincipal), var(--corPrincipalc));
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    padding:40px;

    h1{
        color:white;
        width: 100%;
        text-align: center;
    }

    div#botao{
        margin:20px 0px 20px 0px;
        gap:20px;
        width: 100%;
        text-align: center;
    button{
        margin: 0px 20px 0px 20px;
        color: white;
        font-size: 25px;
        cursor: pointer;
        border:none;
        padding:10px 20px;
        background-color: rgba(0,0,0, 0.8);
        transition: 200ms;

        &:hover{
            transition: 200ms;
            padding:15px 25px;
            margin: -5px 15px -5px 15px;
            background-color: rgba(0,0,0, 0.7);
        }
    }
}
}
.container2{
    width: 100%;
    background: linear-gradient(to bottom, var(--corPrincipalc), var(--corPrincipal));
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    padding:40px;

    img{
        width: 30%;
    }

    a{
        text-decoration: none;
        color: white;
        font-size: 25px;
        margin-top:40px;
        font-weight: 600;
        padding:10px;
        border-radius: 10px;
        width: 50%;
        text-align: center;
        background-color:#0C5495;
        transition: 200ms;

        &:Hover{
            transition: 200ms;
            text-shadow: 0px 0px 15px white;
            background-color:#1176d0;
        }
    }
}

.container3{
    display:flex;
    justify-content: center;
    align-items: center;
    background:#fff;
    position: relative;
    z-index: 1;
    padding:40px 0px 40px 0px;
    img{
        background-image: url('media/FundoBranco.png');
        padding:20px 40px 0px 40px;
        border-radius: 25px;
        box-shadow: 0px 0px 15px rgb(83, 83, 83);
        width: 50%;
        margin-top:10%;
        position: relative;
        z-index: 1;
        
    }
        &::before{
            content:'';
            position:absolute;
            z-index: -1;
            left:0;
            top: 0;
            background-color: #051637;
            backdrop-filter: blur(999px);
            -webkit-backdrop-filter: blur(999px);
            mask-image: linear-gradient(to bottom,rgba(0,0,0, 1) 15%, rgba(0,0,0, 0)75%);
            -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0, 1) 15%, rgba(0,0,0, 0)75%);
            width: 100%;
            height: 1600px;
        }
    }

    .container4{
        background:black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:white;
        padding:30px 0px 30px 0px;
        position: relative;
        z-index: 5;
        h1{
            text-align: center;
            width: 50%;
            font-size: 45px;
            color:#1176d0;
        }

        iframe{
            width: 70%;
            height: 80vh;
        }

        a{
            text-align: center;
            margin-top: 50px;
            border-radius: 10px;
            width: 60%;
            text-decoration: none;
            color:white;
            font-size: 30px;
            font-weight: 600;
            padding:10px;
            background-color: #0C5495;
            transition: 200ms;

            &:hover{
                text-shadow: 0px 0px 15px white;
                transition: 200ms;
                background-color:#1176d0;
            }
        }
    }

@media only screen and (max-width:1024px){
    .container2{
        img{
            width: 70%;
        }

        a{
            width: 80%;
        }
    }
}

@media only screen and (max-width:768px){
    .headline{
        div#imgs{
            width: 100%;
            img:nth-last-of-type(1){
                width: 50%;
            }
            img:nth-last-of-type(2){
                width: 50%;
            }
        }
        a{
            width: 90%;
        }

        p2{
            width: 95%;
            font-size: 20px;
        }
    }

    .container2{
        img{
            width: 80%;
        }
        a{
            width: 80%;
        }
    }
}

@media only screen and (max-width:425px){
    .container3{
        img{
            margin-top:20%;
            width: 90%;
        }
    }
    .container4{
        h1{
            width: 90%;
            font-size: 25px !important;
        }

        iframe{
            width: 100%;
            height: 50vh;
        }
        a{
            width: 90%;
            font-size: 20px;
        }
    }

    .headline{

        div#imgs{
            flex-direction: column;

            img:nth-of-type(1){
                width: 100%;
            }
            img:nth-of-type(2){
                width: 70%;
            }
        }
        p{
            font-size: 12px;
        }

        a{
            font-size: 20px;
            width: 90%;
        }

        p2{
            font-size: 15px;
        }
    }
    .container1{
        padding: 40px 0px 40px 0px;
    }

    .container2{
        padding:40px 0px 40px 0px;

        img{
            width: 90%;
        }

        a{
            font-size: 15px;
            width: 90%;
        }
    }
}