/* General Style */
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Doppio+One&family=Krona+One&display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Krona One', sans-serif;
    background-color: #f9f7f7;
}

html {
    scroll-behavior: smooth;
}

p {
    color: black;
}

a {
   color: black;
   text-decoration: none;
}

/* Nav */
nav, .partner, .logo {
    display: flex;
}

nav {
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #1b1b1b;
}

nav img {
    width: 100%;
    height: 100%;
    background-color: #000;
}

.logo {
    position: absolute;
    left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: lightgray 50% / cover no-repeat;
    width: 32px;
    height: 32px;
    align-items: flex-start;
    gap: 5px;
}

.nav img {
    width: 100%;
    height: 100%;
}

.partner {
    position: absolute;
    right: 20px;
    height: 32px;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Orange, #FFCD29);
    color: #000;
    text-align: center;
    font-family: Doppio One;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

/* Contents */
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 24px;
}

.poster, .poster img {
    display: flex;
}

.poster {
    margin-top: 16px;
    margin-bottom: 16px;
    justify-content: center;
    height: 387px;
    width: 100%;
}

.poster img {
    margin-left: 24px;
    margin-right: 24px;
    flex-shrink: 0;
    border-radius: 16px;
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
}
/* *************************** */
.group_2 {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px;
}

.group_2 img {
    width: 322px;
    height: 280px;
}
/* *************************** */
.countdown-out, .countdown, .countdown > .order-btn, .countdown h3, .countdown p, .countdown h4,
.countdown > .order-btn-outer, .countdown > .order-btn > .btn-text, .countdown > .timer {
    display: flex;
}

.countdown-out {
    justify-content: center;
}

.countdown {
    flex-direction: column;
    justify-content: center;
    width: 323px;
    height: 190px;
    margin-bottom: 24px;
    border-radius: 8px;
    background: #FFF;

    /* soft shadow */
    box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.03);
}

.countdown h4 {
    color: var(--gray, #808080);
    font-family: Doppio One;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 180% */
    justify-content: center;
    margin-top: 10px;
}

.countdown p {
    justify-content: center;
    color: #000;
    font-family: Doppio One;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.countdown h3 {
    justify-content: center;
    color: #000;
    font-family: Doppio One;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 200% */
}

.countdown > .order-btn-outer {
    justify-content: center;
    margin-bottom: 10px;
}

.countdown > .order-btn-outer > .order-btn {
    display: inline-flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--Orange, #FFCD29);
    width: 120px;
}
.countdown > .order-btn-outer > .order-btn > .btn-text {
    color: #000;
    font-family: Doppio One;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
/* *************************** */
.countdown > .timer {
    flex-direction: row;
    justify-content: center;
}

.countdown > .timer > .hour,
.countdown > .timer > .min,
.countdown > .timer > .sec {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    margin-right: 8px;
}

.countdown > .timer > .hour > .text,
.countdown > .timer > .min > .text,
.countdown > .timer > .sec > .text {
    color: #000;
    font-family: Doppio One;
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 250% */
    text-align: center;
}

#hour, #min, #sec {
    color: #000;

    /* App/XXL */
    font-family: Doppio One;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 155.556% */
}

/* *************************** */
.container, .container > .row, .container > .row > .col-sm, 
.container > .row > .col-sm > .avatar {
    display: flex;
}

.container {
    margin-bottom: 24px;
    justify-content: center;
}

.container > .row {
    justify-content: center;
}

.container p {
    color: #000;

    /* App/L */
    font-family: Doppio One;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.container > .row > .col-sm {
    flex-direction: row;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 14px 14px 0px rgba(0, 0, 0, 0.03);
    width: 323px;
    height: 87px;
    flex-shrink: 0;
}

.container > .row > .col-sm > .avatar {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    stroke-width: 1.5px;
    stroke: #000;
    margin-right: 20px;
    position: relative;
    top: 30%;
}

.container > .row > .col-sm > .text {
    width: 219px;
    height: 40px;
    position: relative;
    top: 30%;
}

/* *************************** */
.caption, .caption h2, .caption p, .caption > .store, 
.caption img{
    display: flex;
    flex-direction: column;
}

.caption h2 {
    margin-top: 24px;
    color: var(--Black, #000);
    text-align: center;
    font-family: Krona One;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 75% */
}

.caption p {
    color: var(--Black, #000);
    text-align: center;
    font-family: Krona One;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
    letter-spacing: -1px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.caption > .store {
    flex-direction: row;
    justify-content: center;
}

.caption > .store > .apple_img {
    margin-top: 10px;
}

/* Footer */
footer, .container, .footer-col, .footer-text,
.footer-col > .social_media, .legal, .footer-col-add {
    display: flex;
}

footer {
    padding: 48px 20px 0px 20px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
}

.container {
    flex-direction: row;
}

.footer-col {
    width: 50%; /* Set the width of each column to 50% for two equal columns */
    display: inline-block; /* Make columns appear side by side */
    vertical-align: top; /* Align columns to the top */
    padding: 10px; /* Padding around each column */
}

.footer-col h2 {
    opacity: 0.75;
    color: #000;
    text-align: center;

    /* App/L */
    font-family: Doppio One;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    align-self: stretch;
}

.footer-col p {
    opacity: 0.5;
    color: #000;
    text-align: center;

    /* App/S */
    font-family: Doppio One;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    align-self: stretch;
    margin-top: 20px;
}

.footer-col-add p {
    opacity: 0.5;
    color: #000;
    text-align: center;

    /* App/S */
    font-family: Doppio One;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    align-self: stretch;

}

.footer-col > .social_media {
    margin-top: 16px;
    align-items: center;
    justify-content: center;
}

.footer-col > .social_media img{
    margin-right: 8px;
    background-color: #000;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 50%;
}

.footer-text {
    width: 375px;
    height: 63px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
}

.footer-text p {
    opacity: 0.75;
    color: #000;
    text-align: center;

    /* App/S */
    font-family: Doppio One;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    align-self: stretch;
}

.legal {
    color: #000;
    text-align: center;

    /* App/L */
    font-family: Doppio One;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}