@media only screen and (min-width: 640px) {
    .image-project-a{
        width: 100%;
        height: 325px;
    }
}

@media only screen and (min-width: 768px) {
    h1{
        font-family: "atlantic-head-reguler";
        font-size: 72px !important;
        line-height: 1.1;
    }

    h2{
        font-family: "atlantic-head-reguler";
        font-size: 62px !important;
        line-height: 1.1;
    }

    .image-project-a{
        height: 270px;
    }
}

@media only screen and (min-width: 1024px) {
    .button-navigasi:hover{
        background-color: #25385810;
        transition: .3s;
    }

    .button-play:hover{
        background-color: red;
        color: #fff;
        transition: .3s;
    }

    .button-navigasi-side:hover{
        padding-left: 15px;
        background-color: #25385810;
        transition: .3s;
        border-left: solid 3px #000070;
    }

    .button-sosial-green:hover{
        background-color: #5EBF2640;
        transition: .3s;
    }

    .button-sosial-purple:hover{
        background-color: #6200EE40;
        transition: .3s;
    }

    .button-sosial-blue:hover{
        background-color: #3366FF40;
        transition: .3s;
    }

    .button-sosial-white-soft:hover{
        background-color: #ffffff40;
        transition: .3s;
    }
}

@media only screen and (min-width: 1280px) {
    h1{
        font-family: "atlantic-head-reguler";
        font-size: 82px;
        line-height: 1.1;
    }

    h1{
        font-family: "atlantic-head-reguler";
        font-size: 72px;
        line-height: 1.1;
    }

    .image-project-a{
        height: 340px;
    }

    .atlantic-banner-b{
        min-height: 90vh;
    }

    .atlantic-map{
        height: 700px;
    }
}

@media only screen and (min-width: 1536px) {
    .image-project-a{
        height: 420px;
    }
}