/* ? font sekolah penggerak */
@import url("https://fonts.googleapis.com/css2?family=Frijole&display=swap");

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

:root {
    --white: #fff;
    --light: #f6f6f6;
    --dark: #343a40;
    --hijau: #073e29;
    --hitam: #1e293b;
}

/* ? Dekstop */
@media screen and (min-width: 1008px) {
    .hub h3 {
        font-size: 45px;
        font-weight: 700;
    }

    /* ? Card Kontak */
    .logo__icons {
        color: #92e3a9;
    }

    .logo__icons i {
        line-height: 5px;
        font-size: 24px;
    }

    .card-copy-text .text {
        width: 80%;
        font-size: 14px;
        border: none;
        padding: 10px;
        outline: none;
    }

    .card-copy-text button {
        padding: 5px 10px;
        border: none;
        outline: none;
        background-color: var(--hijau);
        font-size: 16px;
        color: var(--white);
        border-radius: 10px;
        cursor: pointer;
    }

    .card-copy-text button:active {
        background-color: #92e3a9d2;
    }

    .card-copy-text button::before {
        content: "Copied";
        position: absolute;
        top: -25px;
        right: 55px;
        background-color: #92e3a9;
        padding: 8px 10px;
        border-radius: 20px;
        font-size: 12px;
        display: none;
    }

    .card-copy-text button::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 80px;
        background-color: #92e3a9;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        display: none;
    }

    .card-copy-text.active button::before,
    .card-copy-text.active button::after {
        display: block;
    }
}

/* ? Tablet */
@media (min-width: 641px) and (max-width: 1007px) {
    .hub h3 {
        font-size: 35px;
        font-weight: 700;
    }

    /* ? Card Kontak */
    .logo__icons {
        color: #92e3a9;
    }

    .logo__icons i {
        line-height: 5px;
        font-size: 24px;
    }

    .card-copy-text .text {
        width: 80%;
        font-size: 14px;
        border: none;
        padding: 10px;
        outline: none;
    }

    .card-copy-text button {
        padding: 5px 10px;
        border: none;
        outline: none;
        background-color: var(--hijau);
        font-size: 16px;
        color: var(--white);
        border-radius: 10px;
        cursor: pointer;
    }

    .card-copy-text button:active {
        background-color: #92e3a9d2;
    }

    .card-copy-text button::before {
        content: "Copied";
        position: absolute;
        top: -25px;
        right: 85px;
        background-color: #92e3a9;
        padding: 8px 10px;
        border-radius: 20px;
        font-size: 12px;
        display: none;
    }

    .card-copy-text button::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 115px;
        background-color: #92e3a9;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        display: none;
    }

    .card-copy-text.active button::before,
    .card-copy-text.active button::after {
        display: block;
    }
}

/* ? Handphone */
@media screen and (max-width: 640px) {
    .hub h3 {
        font-size: 30px;
        font-weight: 700;
    }

    /* ? Card Kontak */
    .logo__icons {
        color: #92e3a9;
    }

    .logo__icons i {
        line-height: 5px;
        font-size: 24px;
    }

    .card-copy-text .text {
        width: 80%;
        font-size: 14px;
        border: none;
        padding: 10px;
        outline: none;
    }

    .card-copy-text button {
        padding: 5px 10px;
        border: none;
        outline: none;
        background-color: var(--hijau);
        font-size: 16px;
        color: var(--white);
        border-radius: 10px;
        cursor: pointer;
    }

    .card-copy-text button:active {
        background-color: #92e3a9d2;
    }

    .card-copy-text button::before {
        content: "Copied";
        position: absolute;
        top: -25px;
        right: 25px;
        background-color: #92e3a9;
        padding: 8px 10px;
        border-radius: 20px;
        font-size: 12px;
        display: none;
    }

    .card-copy-text button::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 50px;
        background-color: #92e3a9;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        display: none;
    }

    .card-copy-text.active button::before,
    .card-copy-text.active button::after {
        display: block;
    }
}