body{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ijo {
    color: #00A7CC;
}

h1,h2,h3,h4,h5,h6,label{
    /* font-family: 'Quicksand', sans-serif; */
    font-family: 'Fira Sans', sans-serif;
    letter-spacing: 0.42px;
}

p,ul,li,a,button,input{
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0.42px;
}


section{
    width: 100%;
    height: auto;
}

.padding{
    padding: 10vh 0;
}

.padding-atas{
    padding-top: 100px;
}

.padding-bawah{
    padding-bottom: 5vh;
}


.bg-gradien-hijau{
    background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
}

.text-hitam{
    color: #474747;
}

.text-putih{
    color: #ffffff;
}

.text-hijau{
    color: #00A7CC;
}

.btn-putih{
    border: 1px solid #ffffff;
    background-color: #ffffff;
    padding: 7px 15px;
    border-radius: 5px;
    margin-right: 3%;
    margin-top: 61px;
    margin-bottom: 40px;
}

.btn-putih:hover{
    background-color: #ffffffa0;
    transition: 0.2s;
    border: 1px solid #ffffffa0;
}

.btn-polos{
    border: 2px solid #ffffff;
    background-color: #ffffff00;
    padding: 7px 15px;
    border-radius: 5px;
}

.btn-polos:hover{
    background-color: #ffffff4e;
    transition: 0.2s;
    border: 2px solid #ffffff4e;
}

@media screen and (max-width: 1024px) {
    body{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    h1,h2,h3,h4,h5,h6,label{
        /* font-family: 'Quicksand', sans-serif; */
        font-family: 'Fira Sans', sans-serif;
        letter-spacing: 0.42px;
    }
    
    p,ul,li,a,button,input{
        font-family: 'Quicksand', sans-serif;
        letter-spacing: 0.42px;
    }
    
    
    section{
        width: 100%;
        height: auto;
    }
    
    .padding{
        padding: 5vh 0;
    }
    
    .padding-atas{
        padding-top: 60px;
    }
    
    .padding-bawah{
        padding-bottom: 5vh;
    }
    
    
    .bg-gradien-hijau{
        background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
    }
    
    .text-hitam{
        color: #474747;
    }
    
    .text-putih{
        color: #ffffff;
    }
    
    .text-hijau{
        color: #00A7CC;
    }
    
    .btn-putih{
        border: 1px solid #ffffff;
        background-color: #ffffff;
        padding: 7px 15px;
        border-radius: 5px;
        margin-right: 3%;
        margin-top: 30px;
        margin-bottom: 40px;
    }
    
    .btn-putih:hover{
        background-color: #ffffffa0;
        transition: 0.2s;
        border: 1px solid #ffffffa0;
    }
    
    .btn-polos{
        border: 2px solid #ffffff;
        background-color: #ffffff00;
        padding: 7px 15px;
        border-radius: 5px;
    }
    
    .btn-polos:hover{
        background-color: #ffffff4e;
        transition: 0.2s;
        border: 2px solid #ffffff4e;
    }
}

@media screen and (max-width: 1280px) {
    body{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    h1,h2,h3,h4,h5,h6,label{
        font-family: 'Fira Sans', sans-serif;
    }
    
    p,ul,li,a,button{
        font-family: 'Quicksand', sans-serif;
    }
    
    section{
        width: 100%;
        height: auto;
    }
    
    .padding{
        padding: 5vh 0;
    }
    
    .padding-atas{
        padding-top: 50px;
    }
    
    .padding-bawah{
        padding-bottom: 5vh;
    }
    
    
    .bg-gradien-hijau{
        background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
    }
    
    .text-hitam{
        color: #474747;
    }
    
    .text-putih{
        color: #ffffff;
    }
    
    .text-hijau{
        color: #00A7CC;
    }
    
    .btn-putih{
        border: 1px solid #ffffff;
        background-color: #ffffff;
        padding: 7px 15px;
        margin-top: 30px;
        border-radius: 10px;
    }
    
    .btn-polos{
        border: 2px solid #ffffff;
        background-color: #ffffff00;
        padding: 7px 15px;
        border-radius: 10px;
    }
}

@media screen and (max-width: 768px) {
    body{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    h1,h2,h3,h4,h5,h6,label{
        font-family: 'Fira Sans', sans-serif;
    }
    
    p,ul,li,a,button{
        font-family: 'Quicksand', sans-serif;
        font-weight: 600;
    }
    
    section{
        width: 100%;
        height: auto;
    }
    
    .padding{
        padding: 5vh 0;
    }
    
    .padding-atas{
        padding-top: 34px;
    }
    
    .padding-bawah{
        padding-bottom: 5vh;
    }
    
    
    .bg-gradien-hijau{
        background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
    }
    
    .text-hitam{
        color: #474747;
    }
    
    .text-putih{
        color: #ffffff;
    }
    
    .text-hijau{
        color: #00A7CC;
    }
    
    .btn-putih{
        border: 1px solid #ffffff;
        background-color: #ffffff;
        padding: 7px 15px;
        margin-top: 15px;
        border-radius: 10px;
    }
    
    .btn-polos{
        border: 2px solid #ffffff;
        background-color: #ffffff00;
        padding: 7px 15px;
        border-radius: 10px;
    }
}

@media screen and (max-width: 820px) {
    body{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    h1,h2,h3,h4,h5,h6,label{
        font-family: 'Fira Sans', sans-serif;
    }
    
    p,ul,li,a,button{
        font-family: 'Quicksand', sans-serif;
        font-weight: 600;
    }
    
    section{
        width: 100%;
        height: auto;
    }
    
    .padding{
        padding: 5vh 0;
    }
    
    .padding-atas{
        padding-top: 34px;
    }
    
    .padding-bawah{
        padding-bottom: 5vh;
    }
    
    
    .bg-gradien-hijau{
        background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
    }
    
    .text-hitam{
        color: #474747;
    }
    
    .text-putih{
        color: #ffffff;
    }
    
    .text-hijau{
        color: #00A7CC;
    }
    
    .btn-putih{
        border: 1px solid #ffffff;
        background-color: #ffffff;
        padding: 7px 15px;
        margin-top: 15px;
        border-radius: 10px;
    }
    
    .btn-polos{
        border: 2px solid #ffffff;
        background-color: #ffffff00;
        padding: 7px 15px;
        border-radius: 10px;
    }
}

@media screen and (max-width: 834px) {
    body{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    h1,h2,h3,h4,h5,h6,label{
        font-family: 'Fira Sans', sans-serif;
    }
    
    p,ul,li,a,button{
        font-family: 'Quicksand', sans-serif;
        font-weight: 600;
    }
    
    section{
        width: 100%;
        height: auto;
    }
    
    .padding{
        padding: 5vh 0;
    }
    
    .padding-atas{
        padding-top: 34px;
    }
    
    .padding-bawah{
        padding-bottom: 5vh;
    }
    
    
    .bg-gradien-hijau{
        background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
    }
    
    .text-hitam{
        color: #474747;
    }
    
    .text-putih{
        color: #ffffff;
    }
    
    .text-hijau{
        color: #00A7CC;
    }
    
    .btn-putih{
        border: 1px solid #ffffff;
        background-color: #ffffff;
        padding: 7px 15px;
        margin-top: 15px;
        border-radius: 10px;
    }
    
    .btn-polos{
        border: 2px solid #ffffff;
        background-color: #ffffff00;
        padding: 7px 15px;
        border-radius: 10px;
    }
}

@media screen and (max-width: 884px) {
    body{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    h1,h2,h3,h4,h5,h6,label{
        font-family: 'Fira Sans', sans-serif;
    }
    
    p,ul,li,a,button{
        font-family: 'Quicksand', sans-serif;
        font-weight: 600;
    }
    
    section{
        width: 100%;
        height: auto;
    }
    
    .padding{
        padding: 5vh 0;
    }
    
    .padding-atas{
        padding-top: 34px;
    }
    
    .padding-bawah{
        padding-bottom: 5vh;
    }
    
    
    .bg-gradien-hijau{
        background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
    }
    
    .text-hitam{
        color: #474747;
    }
    
    .text-putih{
        color: #ffffff;
    }
    
    .text-hijau{
        color: #00A7CC;
    }
    
    .btn-putih{
        border: 1px solid #ffffff;
        background-color: #ffffff;
        padding: 7px 15px;
        margin-top: 15px;
        border-radius: 10px;
    }
    
    .btn-polos{
        border: 2px solid #ffffff;
        background-color: #ffffff00;
        padding: 7px 15px;
        border-radius: 10px;
    }
}