:root{
    --bg-tilt: -28deg;
    --bg-opacity: 1;
    --bg-x: 0px;
    --bg-y: 0px;
}

body{
    background-color: #ffffff;
    position: relative;
    overflow-x: hidden;
}
body::before{
        content: "";
    position: fixed;
    top: -44%;
    left: -20%;
    width: 118%;
    height: 100%;
    background-color: #71b190;
    opacity: var(--bg-opacity);
    transform: translate(var(--bg-x), var(--bg-y)) rotate(var(--bg-tilt));
    z-index: -1;
    will-change: transform;
}

@media (max-width: 768px) {
    body::before{
        top: -111%;
        left: -96%;
        width: 193%;
        height: 198%;
        transform: rotate(28deg);
    }
}
.container{
    width: 95%;
    float: left;
    /* padding:0 3%; */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    align-items: center;
    gap:50px;
    /* padding-top: 9em; */
    /* background-image: url(image/bg.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain; */
}
.container-box{
    padding: 25px 50px !important;
    box-sizing: border-box;
}
.container::before{
    /* content: "";
    width: 53%;
    height: 100em;
    position: absolute;
    z-index: -1;
    background-color: #71b190;
    top: -36%;
    left: -20%;
    transform: rotate(22deg); */
}
.box-title{
    width: 100%;
    height: auto;
    float: left;
    margin-top: 0;
    font-size: 35px;
    padding: 0.3em;
    display: flex;
    align-items: center;
    border: 4px dashed var(--box);
    border-radius: 10px;
    box-sizing: border-box;
}