/* ---- SKIN START ---- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cta-bg: #FDDB4C;
    --cta-text: #011C41;

    --pretitle-text: #FDDB4C;
    --title-text: white;
    --features-text: white;
    --footer-text: #A9B7D5;

    --ui-1: #031A39;
}

h1,
h2,
h3,
h4,
h5,
h6,
.cta-button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-style: italic;
}

body {
    background-color: var(--ui-1);
}


header {
    background: linear-gradient(#031939, transparent);
}

footer {
    color: var(--footer-text);
}



.main-box {
    background-color: #0000002e;
    box-shadow: 0px 0px 40px 40px #0000002e;
}


.main .hero-pretitle {
    color: var(--pretitle-text);
    text-shadow: 0px 0px 24px #00000075;
}

.main .hero-title {
    color: var(--title-text);
    text-shadow: 0px 0px 24px #00000075;
}

.main .cta-button {
    color: var(--cta-text);
    background-color: var(--cta-bg);
}

.features {
    color: var(--features-text);
    background: linear-gradient(transparent, #031939);
}

.features .feature1,
feature2,
feature3 {
    height: 30px;
}

.coupon-code {
    border-color: var(--pretitle-text);
}


/* ---- SKIN END ---- */