@font-face {
    font-family: "AovelSansRounded";
    src: url("resource/AovelSansRounded-rdDL.ttf");
}

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.image-bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-image: url("resource/background.jpg");
    background-size: cover;
    background-position-x: 100%;
}

.container {
    width: 100vw;
    height: 200vh;
    position: absolute;
    background-image: linear-gradient(to bottom, #0008, #0000);
    scroll-padding-block-start:100px;
}

/* NAV */

nav {
    width: 100%;
    padding: 10px;
    position: fixed;
    display: flex;
    text-shadow: 0 0 5px black;
}

.nav-gap {
    width: 80px;
}

@keyframes show-nav-bg {
    from {background-color: unset;}
    to {background-color: blueviolet;}
}

.nav-colored {
    animation-name: show-nav-bg;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    text-shadow: unset;
}

@keyframes unshow-nav-bg {
    from {background-color: blueviolet;}
    to {background-color: unset;}
}

.nav-uncolored {
    animation-name: unshow-nav-bg;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    text-shadow: 0 0 5px black;
}

nav .tentang,
nav .layanan,
nav .kontak {
    display: block;
    width: 80px;
    color: white;
    font-size: 17px;
    font-weight: bolder;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

nav .tentang:active,
nav .layanan:active,
nav .kontak:active {
    transform: scale(1.1);
}

/* JUDUL BESAR */

.wadah-judul {
    padding: 200px 0 200px 0;
    display: flex;
    color: white;
}

.nama-perusahaan {
    width: 400px;
    height: 200px;
    margin: auto;
    display: grid;
    grid-template-columns: 0.5fr 0.25fr 0.75fr 0.5fr;
    grid-template-rows: 0.75fr 0.75fr 1.5fr;
    grid-template-areas: "logo h1 h1 h1"
                         "logo p p p"
                         "x mulai mulai y";
    text-shadow: 0 0 5px black;
}

.nama-perusahaan .logo {
    grid-area: logo;
    width: 100px;
}

.nama-perusahaan h1,
.nama-perusahaan p {
    text-align: center;
}

.nama-perusahaan h1 {
    grid-area: h1;
    padding-top: 10px;
    font-size: 40px;
}

.nama-perusahaan p {
    grid-area: p;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 1px;
}

.nama-perusahaan .mulai {
    display: block;
    grid-area: mulai;
    margin: 35px 0 0 35px;
    padding: 5px;
    font-size: 30px;
    text-shadow: none;
    color: white;
    border: 2px solid white;
    border-radius: 10px;    
    text-align: center;
    text-decoration: none;
    line-height: 150%;
    letter-spacing: 1px;
    cursor: pointer;
}

.nama-perusahaan .mulai:hover {
    background-color: blueviolet;
}

.nama-perusahaan .mulai:active {
    background-color: rgb(200, 140, 255);
}

.kutipan {
    width: 260px;
    height: 180px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 10fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "kata-1 kata-1"
                         "blabla kata-2"
                         "kata-3 kata-3";
}

.kutipan .kata-1,
.kutipan .kata-2,
.kutipan .kata-3 {
    color: #8cd5ff;
    text-shadow: 0 0 15px blueviolet;
    font-family: sans-serif;
    font-size: 50px;
}

.kutipan .kata-1,
.kutipan .kata-2 {
    font-weight: bold;
}

.kutipan .kata-1 {
    grid-area: kata-1;
}

.kutipan .kata-2 {
    grid-area: kata-2;
}

.kutipan .kata-3 {
    grid-area: kata-3;
}

@keyframes nama-perusahaan-animation {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes mulai-animation {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes kutipan-1-animation {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes kutipan-2-animation {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes kutipan-3-animation {
    from {opacity: 0;}
    to {opacity: 1;}
}

.nama-perusahaan .logo,
.nama-perusahaan h1,
.nama-perusahaan p {
    animation-name: nama-perusahaan-animation;
    animation-duration: 2s;
}

.nama-perusahaan .mulai {
    animation-name: mulai-animation;
    animation-duration: 3s;
}

.kutipan .kata-1 {
    animation-name: kutipan-1-animation;
    animation-duration: 2s;
}

.kutipan .kata-2 {
    animation-name: kutipan-1-animation;
    animation-duration: 3s;
}

.kutipan .kata-3 {
    animation-name: kutipan-1-animation;
    animation-duration: 4s;
}

/* SECTION */

section #tentang-sekat,
section #layanan-sekat,
section #kontak-sekat {
    height: 100px;
}

section #layanan-sekat,
section #kontak-sekat {
    margin-top: 100px;
}

section .tentang,
section .layanan,
section .kontak {
    display: grid;
    grid-template-columns: 25% auto;
    grid-template-areas: "judul isi";
    text-align: center;
}

section .tentang .judul,
section .layanan .judul,
section .kontak .judul {
    grid-area: judul;
    padding-top: 75px;
    background-color: blueviolet;
    background-image: url("resource/connection.png");
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    font-size: 50px;
    font-weight: bold;
}

section .tentang .isi,
section .layanan .isi,
section .kontak .isi {
    grid-area: isi;
    padding: 30px;
    background-color: white;
    color: #333;
    font-size: 20px;
}

/* TENTANG */

section .tentang .isi {
    padding: 80px 0 80px 0;
    font-size: 22px;
}

/* LAYANAN */

section .layanan .isi {
    display: flex;
    flex-direction: column;
}

section .layanan .isi .sub-judul {
    font-size: 35px;
    word-spacing: 10px;
}

section .layanan .isi .cards-judul {
    padding-bottom: 5px;
    font-style: italic;
    text-align: left;
}

section .layanan .isi .cards-wadah {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px;
}

section .layanan .isi .cards-catatan {
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}

/* CARDS LAYANAN */

.card {
    width: 170px;
    border: 2px solid blueviolet;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 0.1fr 0.25fr 1fr 0.25fr 0.25fr;
    grid-template-areas: "upto tingkatan"
                         "mbps mbps"
                         "fitur fitur"
                         "kapasitas kapasitas"
                         "harga harga";
    cursor: pointer;
}

.card:hover {
    background-color: blueviolet;
    color: white;
}

.card .upto {
    grid-area: upto;
}

.card .tingkatan {
    grid-area: tingkatan;
    padding-top: 10px;
    color: blueviolet;
    font-size: 40px;
    font-family: sans-serif;
    font-weight: bold;
}

.card .mbps {
    grid-area: mbps;
    padding-right: 8px;
    color: blueviolet;
    font-weight: bold;
    text-align: right;
}

.card .fitur {
    grid-area: fitur;
    margin-left: 15%;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
}

.card .kapasitas {
    grid-area: kapasitas;
    padding-top: 2px;
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
}

.card .harga {
    grid-area: harga;
    margin: 3px;
    color: blueviolet;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid blueviolet;
    border-radius: 5px;
}

/* KONTAK */

section .kontak .isi {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

section .kontak .isi .hubungi {
    display: grid;
    grid-template-columns: auto 50px 200px auto;
    grid-template-rows: auto 1em 50px auto;
    grid-template-areas: "x h1 h1 y"
                         "x img nomor y";
    padding: 10px;
}

section .kontak .isi .hubungi h1 {
    grid-area: h1;
    font-size: 30px;
}

section .kontak .isi .hubungi img {
    grid-area: img;
    width: 50px;
}

section .kontak .isi .hubungi .nomor {
    grid-area: nomor;
    padding-top: 10px;
}

section .kontak .isi .alamat .letak {
    margin-top: 5px;
}

@media (max-width: 1100px) {
    section .layanan .isi .cards-wadah {
        justify-content: space-around;
    }
}

@media (max-width: 900px) {
    section .tentang,
    section .layanan,
    section .kontak {
        display: block;
    }

    section .tentang .judul,
    section .layanan .judul,
    section .kontak .judul {
        padding-top: 0;
        background-image: none;
    }

    section .tentang .isi {
        padding: 30px;
    }
}

@media (max-width: 800px) {
    
    .nav-gap {
        width: 60px;
    }

    .wadah-judul {
        padding: 100px 0 100px 0;
        flex-direction: column;
        gap: 65px;
    }

    .nama-perusahaan {
        width: calc(400px * 0.8);
        height: calc(200px * 0.8);
    }
    
    .nama-perusahaan .logo {
        width: calc(100px * 0.8);
    }
    
    .nama-perusahaan h1 {
        padding-top: calc(10px * 0.8);
        font-size: calc(40px * 0.8);
    }
    
    .nama-perusahaan p {
        font-size: calc(1em * 0.8);
    }

    section .tentang .judul,
    section .layanan .judul,
    section .kontak .judul {
        font-size: 40px;
    }

    section .kontak .isi .hubungi h1, 
    section .kontak .isi .alamat h1 {   
        font-size: 20px;
    }
}

@media (max-width: 700px) {
    
    section .kontak .isi {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}