body{
    background: rgb(255, 255, 255);
	height: 100vh;
    font-size: 23px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: Bold;
    overflow: hidden;
    font-weight: 300;
    
}
.title{
    font-size: 35px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: Bold;
    margin-left: 1200px;
    margin-right: 8%;
    justify-content: flex-end;
    color: black;
    font-weight: 100;
    letter-spacing: 0.01em;
    margin-bottom: 35px;
    text-transform: uppercase;

}
.quadradorosa
{
    position: absolute;
    left: -5%;
    margin-top: -10px;
    width: 50%;
    height: 101%;
    background-color: #253659;
    display:flex;
    flex-direction: row;
}
.quadradoverde
{
    position: absolute;
    left: 10%;
    margin-top: 40px;
    width: 37%;
    height: 92%;
    background-color: #EAC227;
    display:flex;
    flex-direction: row;
}
.conteudo{

    color:#0C1415;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: Bold;
    margin-top: 100px;
    margin-left: -65%;

}
ul{
    display: flex;
    justify-content: space-between;
    list-style: none;
    align-items: center;
    padding: 15px;
}
a{
    color: #253659;
    text-decoration: none;
}
.menu  li a{
    margin-left: 1280%;
    padding: 40px;
    margin-top: -20px;
    display: flex;
    text-decoration: none;/* tira  a linha do link*/
    text-align: center;/* alinha no centro do bloco*/
    
    color:black;
}.menu ul li:hover ul {
    /* deixar visivel o sub menu quando passar o mouse */
    visibility: visible;
    width: 80px;
    height: 99px;
}

.menu a:hover {

    color: #253659;
    text-decoration: inherit;
}
img{
    width: 90%;
    height: 90%;
    margin-left: 5%;
    margin-top: 6.5%;
    align-items: center;
}
.conteudo{
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top:0px;
    margin-left: 1140px;
    margin-right: 8%;
    justify-content: flex-end;
    color: black;
    letter-spacing: 0.01em;
    margin-bottom: 25px;

}
.arrow-button {
    display: flex;
    color: #000000;
    background-color: #000000;
    padding: 10px 16px;
    border-radius: 20px;
    transition: all .3s ease;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    font-size: 14px;
}

.arrow-button > .arrow {
    width: 40px;
    height: 40px;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    position: relative;
    transform: rotate(135deg);
    margin: 0 6px;
    transition: all .3s ease;
}

.arrow-button > .arrow::before {
    display: block;
    background-color: currentColor;
    width: 2px;
    transform-origin: bottom right;
    height: 2px;
    position: absolute;
    opacity: 0;
    bottom: calc(-2px / 2);
    transform: rotate(45deg);
    transition: all .3s ease;
    content: "";
    right: 0;
}

.arrow-button:hover > .arrow {
    transform: rotate(135deg) translate(4px, 4px);
    border-color: text-hover-color;
}

.arrow-button:hover > .arrow::before {
    opacity: 1;
    width: 8px;
}

.arrow-button:hover {
    background-color: #000000;
    color: #000000;
}