@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

.home h1 {
    margin-top: 0;

}

section {
    padding: 5vw 0;
}

#banner-sec {
    background-color: #161E35;
    padding: 10vw 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 32.5vw;
}

#banner-sec > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 100%;
}

#banner-sec .banner-tri-cnt:nth-child(1) {
    width: 27.5%;
}

#banner-sec .banner-tri-cnt:nth-child(2) {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#banner-sec .banner-tri-cnt:nth-child(3) {
    width: 27.5%;
}

#counter-cnt {
    position: relative;
    width: 80%;
    height: 20vw;
    border: 0.2vw #2AC6D1 solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #18224378;
    z-index: 2;
}

#counter-cnt h1 {
    color: white;
    width: 90%;
}

#hand-cnt {
    position: absolute;
    width: 27.5%;
    right: -6%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#hand-cnt img:nth-child(1) {
    width: 100%;
    z-index: 1;
}

#hand-cnt img:nth-child(2) {
    position: absolute;
    width: 35%;
    z-index: 3;
}


.square {
    width: 1vw;
    height: 1vw;
    border: solid 0.2vw;
    position: absolute;
}

.square-tr {
    top: -0.8vw;
    right: -0.8vw;
}

.square-tl {
    top: -0.8vw;
    left: -0.8vw;
}

.square-br {
    bottom: -0.8vw;
    right: -0.8vw;
}

.square-bl {
    bottom: -0.8vw;
    left: -0.8vw;
}

#hang-on-sec > div {
    display: flex;
    flex-direction: row;
}

#hang-on-sec > div > div {
    width: 50%;
}

#hang-on-sec > div > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
}

#hang-on-sec > div > div:last-child > img {
    width: 90%;
}

@media (max-width:767px) {
    #banner-sec {
        padding: 25vw 0 0 0;
        height: 70vw;
    }

    #banner-sec .banner-tri-cnt:nth-child(2) {
        justify-content: center;
    }

    #counter-cnt {
        width: 150%;
        padding: 40px 0;
    }

    #hand-cnt {
        width: 60.5%;
        right: -56%;
    }


    section {
        padding: 40px 0;
    }

    #counter-cnt {
        border-width: 2.5px;
    }
   
    .square {
        width: 15px;
        height: 15px;
        border: solid 2.5px;
    }

    .square-tr {
        top: -9.5px;
        right: -9.5px;
    }
    
    .square-tl {
        top: -9.5px;
        left: -9.5px;
    }
    
    .square-br {
        bottom: -9.5px;
        right: -9.5px;
    }
    
    .square-bl {
        bottom: -9.5px;
        left: -9.5px;
    }

    #hang-on-sec > div {
        flex-direction: column;
    }

    #hang-on-sec > div > div {
        width: 100%;
    }

    #hang-on-sec > div > div:last-child > img {
        width: 100%;
    }
}