@font-face {
    font-family: "oswald";
    src: url("assets/Oswald-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "cooper-hewitt";
    src: url("assets/CooperHewitt-Book.ttf") format("truetype");
}


.button-container {
        width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px;

            text-align: center;

        }

        .button-container button {
            background: white!important;
            max-width: 500px;
            width: 80vw;
            color: #292828;
            border: 2px solid #292828;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;

        }

        .button-container button:hover {
            background-color: #292828;
            color: lightslategrey;
        }


h1,
h2,
h3,
h4,
h5 {
    margin-top: 5%;
    letter-spacing: -0.03rem;
    font-family: "oswald", Tahoma, sans-serif;
    font-weight: normal;
}

h1 {
    font-size: 2.8rem;
    line-height: 105%;
    margin-top: 0;

}

p,
span,
.language-dropdown select {
    font-family: "cooper-hewitt", Tahoma, sans-serif;
    font-size: 0.95rem;
    line-height: 140%;
}


html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background: #f4f4f4;
    color: #292828;
}



.language-dropdown select {
    padding: 12px 20px;
    border: 1px solid #292828;
    border-radius: 10px;
    color: #292828;
    cursor: pointer;
    background: transparent;
}


.banner {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.banner img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.iwg {
    margin: 1vh 0;
    width: 100%;
    height: 90%;
}

.card {
    width: 80vw;
    max-width: 800px;
    margin: 2vh auto;
    padding: 4vh 6vw;
    text-align: center;
    background: white;
    border-radius: 20px;
    box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.08);
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.top {

    max-width: 100%;
    padding: 10px;
    border-radius: 0 0 10px 10px;
    margin-bottom: 1vh;
    background: #f4f4f4;
    color: #292828;
}

.top span {
    font-size: 0.8rem;
    line-height: 100%;
    font-family: "oswald", Tahoma, sans-serif;
    font-weight: normal;
    padding: 0 20px;
}


.tagline {

    text-transform: uppercase;
    margin-top: 4vh;
    font-family: "oswald", Tahoma, sans-serif;
    letter-spacing: 4px;
    color: #555;
    text-align: center;
}



.coupon-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding: 10px;
}

.coupon {
    min-width: 60%;
    text-align: center;
    border: 2px dashed #292828;
    border-radius: 6px;
    max-width: 100vw;
    overflow-x: scroll;
}

.coupon p {
    font-size: 1.1rem;
    line-height: 100%;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-wrap: nowrap;
    font-family: "oswald", Tahoma, sans-serif;
    font-weight: normal;
}

button {
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 100%;
    color: white;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(45deg, rgba(240, 98, 71, 1) 0%, rgba(240, 71, 82, 1) 100%);
    font-family: "oswald", Tahoma, sans-serif;
    font-weight: normal;
}

#copy-btn {
    min-width: 60px;
    margin-left: 10px;
    font-size: 1.6rem;
    background: #292828;
}



#checkout-btn {
    padding: 16px 24px;
}




.coupon::-webkit-scrollbar {

    display: none;

}


@media screen and (max-width: 768px) {


    #checkout-btn {
        width: 100%;
        margin: 0;
        margin-top: 20px;
    }

    .coupon,
    .coupon-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .top span {

        padding: 0 6px;
    }




}

.xs-text {
    margin-top: 60px;
    font-size: 0.9rem;
    color: #555;
}

#copy-btn {
    transition: transform 0.18s ease, opacity 0.18s ease;
}

#copy-btn.copied {
    animation: copyPop 0.28s ease;
}

@keyframes copyPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

#copy-btn.copied {
    animation: copyPop 0.28s ease;
    background: linear-gradient(45deg, rgba(240, 98, 71, 1) 0%, rgba(240, 71, 82, 1) 100%);
}



a:link {
    color: #f06247;
}


a:visited {
    color: #f06247;
}


a:hover {
    color: #f06247;
    opacity: 60%;
}