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

img {
   display: block;
   max-width: 100%;
   height: auto; 
}
/* || VARIABLES */
:root {
    /* || COLORS */
    --BG-COLOR: rgb(1, 39, 42);
    --TEXT-COLOR: aliceblue;
    --BORDER-COLOR: 2px solid #333;
    --ICON-FF: Georgia, 'Times New Roman', Times, serif;
    /* || STANDARD SIZES */
    --PADDING-SMALL: 0.5rem;
    --PADDING-MINI: 1rem;
    --PADDING: 1.5rem;
    --PADDING-LARGE: 2rem;
    --MARGIN-SMALL: 0.5rem;
    --MARGIN-MINI: 1rem;
    --MARGIN: 1.5rem;
    --MARGIN-LARGE: 2rem;
    /* || FONT SIZES */
    --SMALL: 1rem;
    --LARGE: 2rem;
}

/* || UTILITY CLASSES */
.offscreen {
    position: absolute;
    left: -1000px;
}

.nowrap {
    white-space: nowrap;
}

.center {
    text-align: center;
}

/* || GENERAL STYLES */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--BG-COLOR);
    color: var(--TEXT-COLOR);
}

/* HEADER */
.header {
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: var(--BG-COLOR);
    align-items: center;
    z-index: 1;
}

.header__figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

.special {
    font-size: var(--LARGE);
    font-family: var(--ICON-FF);
}

.header__navbar__ul {
    margin-right: var(--MARGIN-LARGE);
}

.header__navbar__ul__li {
    display: inline-block;
    padding-inline: var(--PADDING);
    padding: var(--PADDING);
}

.header__navbar__ul__li:hover {
    background-color: #333;
} 

.header__navbar__ul__li a:any-link {
    color: var(--TEXT-COLOR);
    text-decoration: none;
    font-size: var(--SMALL);
}

/* MAIN */
.main {
    width: 80vw;
    margin-inline: auto;
    display: grid;
    padding: var(--PADDING-LARGE);
    place-content: center;
}

.form__section {
    display: grid;
    place-content: center;
    line-height: 2;
    position: relative;
    background-color: var(--BG-COLOR);
}

.form__input {
    width: 100%;
    padding: 0.3rem;
    border-radius: 12px;
}

.button__section {
    display: grid;
    place-content: center;
    margin: var(--MARGIN-MINI);
}

.form__button {
    font-weight: 800;
    font-size: var(--SMALL);
    padding: var(--PADDING-SMALL);
    background-color: rgb(237, 207, 35);
}

.form__button:hover {
    transform: scale(1.1);
    border: 2px solid greenyellow;
}

.info__section {
    display: flex;
    margin: var(--MARGIN-MINI);
    padding: var(--PADDING-MINI);
}

.info__section__section {
    margin-inline: var(--MARGIN-LARGE);
    line-height: 1.5;
}

.video__section {
    display: grid;
    place-content: center;
    margin: var(--MARGIN-MINI);
    padding: var(--PADDING-MINI);
}

.prices__section {
    display: grid;
    place-content: center;
    grid-template-columns: 200px 200px 200px;
    column-gap: 3rem;
}

.prices__section__div {
    border: var(--BORDER-COLOR);
    border-radius: 12px;
    position: relative;
}

.prices__section__div h2 {
    background-color: #333;
    border-radius: 12px 12px 0 0;
    font-size: var(--SMALL);
    margin-bottom: var(--MARGIN-MINI);
    padding-block: var(--PADDING-SMALL);
}

.prices__section__div p {
    padding-inline: 1rem;
    margin-block: var(--MARGIN);
    padding-block: var(--PADDING);
    line-height: 1.3;
    font-size: 20px;
}

.prices__section__div div {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    border-top: var(--BORDER-COLOR);
}

.prices__section__div div a {
    width: 100%;
    padding: var(--PADDING-SMALL);
}

.prices__section__div div a:any-link {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}

.footer {
    background-color: #333;
    width: 80vw;
    margin-inline: auto;
    padding: var(--PADDING);
}

.footer__ul {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--PADDING-SMALL);
}

.footer__p {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-weight: 100;
}


.footer__ul li {
    list-style-type: none;
    padding-inline: var(--PADDING-SMALL);
}

.footer__ul li a:any-link {
    color: var(--TEXT-COLOR);
    text-decoration: none;
    font-weight: 600;
}

/* || SMALL */
@media screen and (min-width: 340px) and (max-width: 729px) {
    /* || HEADER */
    .icon {
        width: 30px;
        height: auto;
    }

    .header {
        display: flex;
        justify-content: space-between;
    }

    .header__navbar__ul {
        display: flex;
        flex-flow: row nowrap;
        margin-block: 0;
        margin-inline: var(--MARGIN-SMALL);
    }

    .header__navbar__ul__li {
        padding: 7px;
    }

    .links {
        font-size: 0.6rem;
    }

    .special {
        font-size: 0.7rem;
        font-weight: 700;
    }

    /* || MAIN FORM */
    .main {
        width: 100vw;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    .form__section__header {
        font-size: var(--SMALL);
    }

    .info__section {
        margin: 0;
        min-width: 80vw;
        font-size: 0.8rem;
        display: flex;
    }

    .info__icon {
        width: 150px;
        height: auto;
    }

    .video__section {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    iframe {
        width: 85vw;
        height: auto;
    }

    .prices__section {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 1rem;
    }

    .prices__section__div p {
        font-size: var(--SMALL);
        margin: var(--MARGIN-MINI);
        padding-top: 0;
    }

    .prices__section__div__div {
        padding: var(--PADDING-SMALL);
    }

    .footer {
        font-size: 0.7rem;
    }
}