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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: "Poppins", sans-serif;
    background: #ffeada;
    color: #5a5959;
    overflow-x: hidden;
}

.coming-soon {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    background: #ffeada;
}

/* =========================
   Decorative Leaves
========================= */

.leaf {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.leaf-left {
    top: -5px;
    left: -10px;
    width: 170px;
}

.leaf-right {
    top: -5px;
    right: -8px;
    width: 170px;
}

/* =========================
   Main Content
========================= */

.content {
    width: min(900px, 90%);
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    z-index: 2;

    transform: translateY(-2%);
}

/* Logo */


.logo-main {
    width: 360px;
    max-width: 55vw;
    height: auto;
    margin-bottom: 42px;
}


/* =========================
   Heading
========================= */

h1 {
    font-family: "Andada Pro", serif;
    font-size: clamp(42px, 5.2vw, 60px);
    line-height: 0.98;
    font-weight: 700;
    color: #575758;
    max-width: 760px;
    margin-bottom: 25px;
}

/* =========================
   Description
========================= */

.description {
    max-width: 720px;
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.35;
    font-weight: 400;
    color: #777675;
    margin-bottom: 50px;
}

/* =========================
   Social Icons
========================= */

.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.social-links a {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #5a5b5d;
    color: #ffeada;

    border-radius: 50%;

    text-decoration: none;

    font-size: 21px;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.social-links a:hover {
    transform: translateY(-4px);
    background: #ee8759;
}

/* TikTok icon adjustment */
.social-links .tiktok {
    font-size: 20px;
}

/* =========================
   Responsive - Tablet
========================= */

@media (max-width: 900px) {

    .leaf-left {
        width: 135px;
        left: -8px;
    }

    .leaf-right {
        width: 135px;
        right: -8px;
    }

    .content {
        width: 88%;
    }

    .logo-text {
        margin-bottom: 38px;
    }

    .logo-main {
        font-size: 50px;
    }

    .logo-tagline {
        font-size: 15px;
    }

    h1 {
        max-width: 650px;
        margin-bottom: 24px;
    }

    .description {
        max-width: 650px;
        margin-bottom: 40px;
    }
}

/* =========================
   Responsive - Mobile
========================= */

@media (max-width: 600px) {

    .coming-soon {
        min-height: 100svh;
        padding: 60px 20px;
    }

    .leaf-left {
        width: 100px;
        top: -3px;
        left: -8px;
    }

    .leaf-right {
        width: 100px;
        top: -3px;
        right: -8px;
    }

    .content {
        width: 100%;
        transform: none;
    }

    .logo-text {
        margin-bottom: 34px;
    }

    .logo-main {
        font-size: 42px;
        letter-spacing: -3.5px;
    }

    .logo-tagline {
        font-size: 13px;
        margin-top: 14px;
    }

    h1 {
        font-size: clamp(40px, 11vw, 54px);
        line-height: 1;
        max-width: 100%;
        margin-bottom: 22px;
    }

    .description {
        font-size: 15px;
        line-height: 1.5;
        max-width: 390px;
        margin-bottom: 35px;
    }

    .social-links {
        gap: 14px;
    }

    .social-links a {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}

/* =========================
   Very Small Screens
========================= */

@media (max-width: 380px) {

    .coming-soon {
        padding-left: 16px;
        padding-right: 16px;
    }

    .leaf-left,
    .leaf-right {
        width: 82px;
    }

    .logo-main {
        font-size: 37px;
    }

    .logo-tagline {
        font-size: 12px;
    }

    h1 {
        font-size: 37px;
    }

    .description {
        font-size: 14px;
    }
}