/* ==========================================
   TENGKUREP
   Premium Landing Page v2
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family: 'Poppins', sans-serif;

    background: #050505;

    background-image:
        radial-gradient(circle at top, #1b1b1b 0%, #050505 70%);

    color: #fff;

    display: flex;
    justify-content: center;

    min-height: 100vh;

}

.container {

    width: 100%;
    max-width: 520px;

    padding: 40px 24px;

}

/* ==========================================
                HERO
========================================== */

.hero {

    text-align: center;

    padding: 60px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    animation: fade .8s ease;

}

.logo {

    width: 100%;

    max-width: 340px;

    display: block;

    margin: auto;

    transition: .35s;

}

.logo:hover {

    transform: scale(1.02);

}

.tagline {

    margin-top: 35px;

    font-size: 18px;

    font-weight: 500;

    color: #fff;

}

.country {

    margin-top: 10px;

    font-size: 13px;

    color: #777;

    letter-spacing: 2px;

    text-transform: uppercase;

}

/* ==========================================
                SECTION
========================================== */

section {

    margin-top: 55px;

}

section h2 {

    text-align: center;

    font-size: 13px;

    letter-spacing: 4px;

    color: #666;

    margin-bottom: 28px;

    text-transform: uppercase;

    font-weight: 600;

}

section h2::after {

    content: "";

    display: block;

    width: 45px;

    height: 1px;

    background: #333;

    margin: 14px auto 0;

}

/* ==========================================
              CARD BUTTON
========================================== */

.card {

    display: flex;

    align-items: center;

    padding: 18px 22px;

    margin-bottom: 15px;

    border-radius: 18px;

    background: #111;

    border: 1px solid rgba(255, 255, 255, .08);

    color: #fff;

    text-decoration: none;

    transition: .3s;

}

.card i {

    width: 30px;

    font-size: 22px;

}

.card span {

    flex: 1;

    margin-left: 16px;

    font-weight: 500;

}

.card::after {

    content: "→";

    color: #666;

    transition: .3s;

}

.card:hover {

    background: #fff;

    color: #000;

    transform: translateY(-4px);

    box-shadow: 0 12px 35px rgba(255, 255, 255, .12);

}

.card:hover::after {

    color: #000;

    transform: translateX(5px);

}

/* ==========================================
                FOOTER
========================================== */

footer {

    margin-top: 70px;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    text-align: center;

}

footer p {

    font-weight: 600;

    color: #ddd;

}

footer small {

    display: block;

    margin-top: 8px;

    color: #666;

    font-size: 12px;

}

/* ==========================================
                ANIMATION
========================================== */

@keyframes fade {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ==========================================
                MOBILE
========================================== */

@media(max-width:480px) {

    .container {

        padding: 30px 18px;

    }

    .logo {

        max-width: 260px;

    }

    .tagline {

        font-size: 16px;

    }

    .card {

        padding: 16px 18px;

    }

}