body { font-family: "Poppins", serif; font-size: 2rem; }
h1 { font-size: 5.2rem; line-height: 1.2; font-weight: 900; }
h2 { font-size: 3.2rem; line-height: 1.2; font-weight: 500; }
a { transition: color 0.2s ease; }

.page { display: flex; align-items: center; }
.container { max-width: 1400px; margin: 0 auto;  margin-left: auto; margin-right: auto; position: relative; z-index: 1; }

.footer { color: #fff; background: #006db3; font-size: 1.4rem; line-height: 1.8; }
.footer .container { max-width: 660px; margin-left: auto; margin-right: auto; }
.footer-logo { display: flex; gap: 20px; justify-content: center; }
.footer-logo img { max-width: 100px; width: 100%; }

.footer a { color: #fff; border-bottom: 1px solid #006db3; transition: border-color 0.2s ease; }
.footer a:hover { border-color: #fff; }

.footer-links { display: flex; align-items: center; justify-content: center; line-height: 1.2; }
.footer-links div:not(:last-child) { border-right: 1px solid #fff; padding-right: 20px; margin-right: 20px; }

.blk-1 { display: flex; gap: 20px; justify-content: center; }
.opt-in { max-width: 635px; }

#form1 { position: relative; }
.emailbox-wrap { border: solid 5px #006db3; border-radius: 60px; max-width: 500px; position: relative; z-index: 1; }
.emailbox { font-size: 2.6rem; width: 100%; padding: 14px 30px 15px; box-shadow: inset 0px 0px 10px -5px #333; border: 1px solid #fff;  border-radius: 60px; outline: 0; appearance: none; font-weight: 300; line-height: 1; }
.emailbox::placeholder { color: #a8a8a8; }
.desktop-br-1  { display: block; }

.disclaimer { font-size: 1.6rem; max-width: 550px; margin-left: auto; margin-right: auto; color: #828282; }

.prd-display { display: flex; margin-right: -8%; } 
.prd-slide { max-width: 350px; width: 50%; position: relative; z-index: 0; }
.prd-product { margin-left: -13%; margin-bottom: -20%; max-width: 450px; width: 63%; z-index: 1; position: relative; }

/* button */
.optin-submit { width: 1px; height: 1px; margin: 0; padding: 0; outline: 0; border: 0; visibility: hidden; position: absolute; bottom: 0; left: 0; pointer-events: none; }
.btn-1 { flex-basis: 700px; flex-shrink: 1; flex-grow: 0; font-size: 2.6rem; font-weight: 500; color: #ffffff; text-align: center; line-height: 1.2; padding: 15px 20px; position: relative; cursor: pointer; background: linear-gradient(90deg, rgb(227 83 4) 0%, rgb(242 103 28) 100%); border-radius: 14px; box-shadow: 7px 3px 24px rgba(251, 203, 176, 0.21); transition: all 0.3s ease-in-out 0s; }
.btn-1::before { content: ''; border-radius: 18px; width: calc(100% + 3px); height: calc(100% + 4px); border: 4px solid rgb(248 124 55); box-shadow: 0 0 60px rgba(251, 203, 176, 0.21); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .3s ease-in-out 0s; }
.btn-1:hover::before, .btn-1:focus::before { color: #ffffff; opacity: 1; }
.btn-1::after { opacity: 0; content: ''; width: 30px; height: 30px; border-radius: 100%; border: 4px solid #f74646; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ring 1.5s infinite; pointer-events: none; }
.btn-1:hover::after, .btn-1:focus::after { animation: none; display: none; }

/* button arrows */
.cta-button { display: flex; max-width: 460px; width: 100%; align-items:center; justify-content: center; margin: 0 auto; position: relative; z-index: 0; }
.cta-button a { flex-basis: 420px; text-decoration: none; }
.cta-button:hover { transition: all .4s ease-in-out 0s; }
.cta-button .btn-1-hp { flex-grow: 1; position: relative; }
.arrow { position: relative; z-index: -1; }
.arrow-left { flex-shrink: 0; margin-bottom: 0; }
.arrow-right { flex-shrink: 0; transform: scaleX(-1); margin-bottom: 0; }
.arrow span { display: inline-block; width: 20px; height: 20px; border-bottom: 5px solid #f74646; border-right: 5px solid #f74646; transform: rotate(-45deg); margin: -6px; animation: animate 2s infinite; position: relative; z-index: 10; }
.arrow span:nth-child(2) { animation-delay: -0.2s; }
.arrow span:nth-child(3) { animation-delay: -0.4s; }

@keyframes ring {
    0% { width: 30px; height: 30px; opacity: 0; }
    5% { opacity: 1; }
    95% { width: 300px; height: 300px; opacity: 0; }
    100% { width: 30px; height: 30px; }
}
@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(-45deg) translate(-20px, -20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(-45deg) translate(20px, 20px);
    }
}

.owl-theme .owl-nav { display: none; }
.owl-theme .owl-dots { margin-top: 10px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #006db3; }
.owl-theme .owl-dots .owl-dot span { width: 7px; height: 7px; }

.blue { color: #006db3; }
.pink { color: #ea8789; }
.gray { color: #6b6363; }

@media screen and (max-width: 1400px) {
    .prd-display { margin-right: 0; } 
}

@media screen and (max-width: 1240px) {
    .opt-in { max-width: 490px; }
    h1 { font-size: 4rem; }
    h2 { font-size: 2.8rem; }
    
    .emailbox-wrap { max-width: 400px; }
    .cta-button { max-width: 360px; }
    .cta-button a { max-width: 320px; }
    .emailbox, .btn-1 { font-size: 2.2rem; }
    .disclaimer { font-size: 1.4rem; max-width: 440px; }
}

@media screen and (max-width: 1080px) {
    .desktop-br-1  { display: none; }

    h1, h2 { text-align: center; }

    .blk-1 { flex-direction: column-reverse; gap: 10px; }
    .opt-in { max-width: 840px; }
    .prd-display { max-width: 500px; margin-left: auto; margin-right: auto; }
}

@media screen and (max-width: 600px) {
    h1 { font-size: 3.2rem; }
    h2 { font-size: 2.2rem; }
    .emailbox, .btn-1 { font-size: 2rem; }
    .prd-display { max-width: 350px; }
}


@media only screen and (max-width: 600px) {
    .footer-logo img { max-width: 80px; }
    .footer-logo { max-width: 320px; margin-left: auto; margin-right: auto; }
    .footer-logo { flex-direction: column; align-items: center; text-align: center; gap: 0; margin-bottom: 1em; }

    .arrow span { width: 20px; height: 20px; border-width: 3px; }
    .arrow { height: 32px; }
    @keyframes ring {
        0% { width: 30px; height: 30px; opacity: 0; }
        5% { opacity: 1; }
        95% { width: 200px; height: 200px; opacity: 0; }
        100% { width: 30px; height: 30px; }
    }
    @keyframes animate {
        0% {
            opacity: 0;
            transform: rotate(-45deg) translate(-5px, -5px);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: rotate(-45deg) translate(20px, 20px);
        }
    }
}