@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Inter:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Raleway:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background-color: #ffffff;
    font-family: 'Raleway', sans-serif;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
}

header {
    display: flex;
    justify-content: space-between;
}

main {
    /* float: left; */
    /* text-align: -webkit-center; */
    background-color: #141414;
    width: 100%;
}

footer {
    float: left;
    width: 100%;
    background-color: #fafafa;
}

h1 {
    font-size: 32px;
}

h1,
h2,
h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

h1 {
    display: block;
    line-height: 1.1;
    margin-top: 0;
}

h6 {
    margin-bottom: 1%;
}

.regular {
    font-weight: 400;
}

/* -------------------------------------------------------------------------------------- */



.slide-up {
    opacity: 0;
    transition: opacity 1s, transform 1s;
    /* Tambahkan transisi untuk animasi */
    transform: translateY(50px);
    /* Geser teks ke bawah agar sembunyi saat halaman dimuat */
}

.header {
    padding: 0% 5% 0% 5%;
    justify-content: space-between;
    background-color: #ffffff;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-center2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 50px;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.flex-between2 {
    display: flex;
    align-items: center;
    justify-content: space-around;

}

.flex-center-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0% 5% 0% 5%;
}

#logo {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100px;
}

.logo {
    float: left;
    display: flex;
    justify-content: start;
    align-items: center;
}

.logo p {
    font-family: 'Poppins';
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.logo-footer {
    height: 30px;
    padding: 0 10px 0 10px;
}

nav {
    display: flex;
    height: auto;
}

nav ul.listnav {
    padding-inline-start: 0;
    display: flex;
    list-style: none;
}

.noPad {
    padding-left: 45px;
}

nav li {
    padding-left: 20px;
}

nav li a,
a {
    color: #474747;
    font-weight: 600;
    text-decoration: none;
}

::after {
    color: black;
}

nav li a:hover,
a:hover {
    text-decoration: underline;
}

.button-top {
    display: flex;
    padding-left: 20px;
}

.popupButton {
    font-family: 'Poppins', sans-serif;
    color: white;
    border: 10px solid transparent;
    border-radius: 9px;
    background-color: #3d3b3b;
    cursor: pointer;
}

/* -------------------------------------------------------------------------------------- */

.section {
    display: flex;
    background-color: #141414;
    background-image: url('/assets/images/banner-netflix.png');
    background-position: center;
    background-size: contain;

    /* background-size: cover; */
    /* justify-content: space-between; */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16% 5% 16% 5%;
    color: white;
    animation: moveBackground 30s linear infinite;
}

.section11 {
    display: flex;
    background-color: #141414;
    background-image: url('/assets/images/banner-netflix.png');
    background-position: center;
    background-size: contain;

    /* background-size: cover; */
    /* justify-content: space-between; */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10% 5% 10% 5%;
    color: white;
    animation: moveBackground 30s linear infinite;
}

@keyframes moveBackground {
    0% {
        background-position: right;
        /* Posisi gambar saat animasi dimulai */
    }

    100% {
        background-position: left;
        /* Posisi gambar saat animasi selesai (bergerak ke kiri) */
    }
}

.greet {
    float: left;
    width: 77%;
}

.descriptions {

    text-align: justify;
}

.side1 {
    padding-right: 100px;
}

.welcome,
.phone2 {
    height: 500px;
}

.space-green {
    background-color: #141414;
}

.section2 {
    display: flex;
    flex-direction: column;
    background-color: white;
    justify-content: space-between;
    padding: 0% 2% 1% 2%;
    width: 75%;
    margin: auto;
    border-radius: 2px;
}


.section2-left {
    width: 65%;
    padding: 2% 2% 2% 2%;
    /* margin: 0; */
}

.section2-right {
    text-align: center;
    width: 30%;
    padding: 2% 2% 2% 2%;
}

.section2-inner-row {
    display: flex;
    /* align-items: center; */
    /* text-align: center; */
}

.section2-inner-row a {
    display: flex;
    align-items: center;
}

.section2-inner-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* text-align: center; */
}

.text-center {
    display: flex;
    width: 70%;
    justify-content: center;
    /* text-align: center; */
}

.login {
    /* background-color: #141414; */
    border-radius: 9px;
    padding: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    /* Warna latar belakang dengan transparansi */
    backdrop-filter: blur(5px);
    /* Efek kaca buram menggunakan backdrop-filter */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

input {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}


input[type="submit"] {
    background-color: #141414;
    color: #fff;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #474747;
}

.buttonLogout {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button[type="submit"] {
    background-color: #141414;
    color: #fff;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #474747;
}

.tutor {
    width: 800px;
    padding-bottom: 50px;
    padding-top: 10px;
    border-radius: 9px;
    
    /* width: 100%; */
}

.img {
    width: 100px;
}

.img-round {
    background: url(https://2828691.fs1.hubspotusercontent-na1.net/hubfs/2828691/Rubel2022/ornament-background-payment-dekstop.svg),
        linear-gradient(212.41deg, #C1D0B5 16.52%, #b6c7a7 58.79%, #b0c49f 82.63%);
    background-position-x: left, center;
    background-position-y: bottom, center;
    background-repeat: no-repeat;
    background-size: auto, cover;
    padding: 0% 3% 0% 3%;
    margin-bottom: 20px;
    /* margin: auto; */
    display: flex;
    align-items: center;
    width: 100px;
    height: 50px;
    border-radius: 9px;
    /* background-color: #e3e3e3; */
    /* background-color: rgba(47, 47, 47, 0.1); Warna latar belakang dengan transparansi */
    backdrop-filter: blur(5px);
    /* Efek kaca buram menggunakan backdrop-filter */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image {
    width: 600px;
    border-radius: 55px;
}

.image2 {
    width: 300px;
    border-radius: 55px;
}

.image3 {
    width: 200px;
}

.image4 {
    width: 500px;
}

.button-top {
    display: flex;
    padding-left: 20px;
}

.button-icon {
    width: 20px;
    padding-right: 20px;
}

.button-icon2 {
    height: 30px;
}

.button-small {
    width: 120px;
}

.button-small2 {
    width: 150px;
}

#popupButton2 {
    font-family: 'Poppins', sans-serif;
    color: white;
    border: 10px solid transparent;
    border-radius: 9px;
    background-color: #b0c49f;
    cursor: pointer;
}

.section3 {
    display: flex;
    background-color: #b0c49f;
    justify-content: space-between;
    padding: 0% 5% 0% 5%;
}

.content-left {
    padding-top: 50px;
    padding-bottom: 50px;
    color: white;
    padding-right: 50px;
}

.content-left2 {
    padding-right: 50px;
    text-align: right;
}

.content-left3 {
    align-self: center;
    text-align: left;
}

.content-left4 {
    display: flex;
    flex-direction: column;
}



.content-right2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.steps {
    display: flex;
    justify-content: center;
}

.steps div {
    padding: 20px;
    font-family: 'Poppins', sans-serif;
    flex: 1;
    text-align: center;
}

.steps p {
    text-align: center;
    margin: 0;
}

.funfact {
    width: 30%;
    height: 50%;
    align-self: center;
    text-align: right;
    background: url(https://2828691.fs1.hubspotusercontent-na1.net/hubfs/2828691/Rubel2022/ornament-background-payment-dekstop.svg),
        linear-gradient(212.41deg, #C1D0B5 16.52%, #b6c7a7 58.79%, #b0c49f 82.63%);
    background-position-x: left, center;
    background-position-y: bottom, center;
    background-repeat: no-repeat;
    background-size: auto, cover;
    border-radius: 16px;
    padding: 24px;
}

.funfact-desc p {
    text-align: justify;
    font-size: 0.8em;
    font-family: 'Poppins', sans-serif;
}

.funfact-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 32px;
}

.funfact-title p {
    margin-top: 0;
    margin-bottom: 0;
}

.content-title {
    padding-top: 50px;
    text-align: center;
}

.bold-red {
    font-weight: 600;
    color: red;
}



.bold {
    font-weight: 600;
}

ol li {
    font-weight: 600;
}

ol p {
    text-align: justify;
}

.semi-bold {
    font-weight: 500;
}

.section5 {
    display: flex;
    background-color: #FFF8DE;
    justify-content: flex-end;
    padding: 0% 5% 0% 5%;
    background-image: linear-gradient(#FFF8DE, #ffffff);
}

.sectionDownload {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    text-align: center;
    justify-content: space-between;
    padding: 5% 5% 5% 5%;
}

.section6-right {
    text-align: center;
    /* width: 30%; */
    /* padding: 2% 2% 2% 2%; */
}

.content-right {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 30%;
}

/* About Us */

.sectionAboutUs {
    display: flex;
    background-color: #FFF8DE;
    background-image: linear-gradient(#ffffff, #FFF8DE);
    justify-content: space-between;
    padding: 0% 5% 0% 5%;
}

.kiri {
    flex: 1;
    padding-right: 100px;
}

.kanan {
    flex: 1;
    padding-top: 150px;
    text-align: right;
}

.sectionAboutUs2 {
    display: flex;
    flex-direction: column;
    background-color: #FFF8DE;
    text-align: center;
    justify-content: flex-end;
    padding: 0% 5% 0% 5%;
}

.desc-left {
    text-align: left;
}

.desc-left div ol li {
    padding-bottom: 5px;
}

.content-desc2 {
    padding: 0 200px 0 200px;
}

.sectionAboutUs3 {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    text-align: center;
    justify-content: flex-end;
    padding: 0% 5% 0% 5%;
    background-image: linear-gradient(#FFF8DE, #ffffff);
}

.profile-img {
    width: 200px;
}

.profile .bold {
    margin-top: 0;
}

/* -------------------------------------------------------------------------------------- */

.foot {
    display: flex;
    padding: 2% 5% 2% 5%;
    justify-content: space-between;
}

.footer-right {
    display: flex;
    /* width: 100%; */
    flex-direction: column;
    padding-right: 100px;
}

.footer-right a {
    display: flex;
    align-items: center;
    padding-top: 15px;

}

.footer-right a p {
    margin-bottom: 0;
    margin-top: 0;
}

.copyright {
    text-align: center;
    font-family: 'Inter', sans-serif;
}

/* ========================== */

.noneDesktop,
.noneDesktop2 {
    display: none;
}

.none {
    padding-right: 100px;
}

.none2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.text {
    width: 49%;
}

.logo-bottom {
    width: 200px;
    padding-top: 20px;
}




@media screen and (min-width:1px) and (max-width:1100px) {
    
header {
    flex-direction: column;
    align-items: center;
}

.noPad {
    padding-left: 0;
}

.button-top {
    padding-left: 0;
    padding-bottom: 50px;
}

.section2-inner-row {
    flex-direction: column;
    align-items: center ;
}

.section2-left, .section2-right {
    width: 80%;
}

.sectionDownload {
    flex-direction: column;
    align-items: center;
}

.content-right {
    width: 80%;
}

.content-left3 {
    text-align: center;
}

.tutor {
    width: 200px;
}

ol p {
    text-align: left;
}
}