:root {
    --light_black: #212121;
    --dark_black: #1a1a1a;
    --light_blue: #BAE0F6;
    --dark_blue: #004D77;
    --white: #ffffff;
}

@font-face {
    font-family: visia;
    src: url(fonts/VisiaPro-Regular.otf);
    font-weight: normal;
}

@font-face {
    font-family: outline;
    src: url(fonts/VisiaPro-RegularOutline.otf);
    font-weight: normal;
}

@font-face {
    font-family: visiaBold;
    src: url(fonts/VisiaPro-Bold.otf);
    font-weight: bold;
}

@font-face {
    font-family: outlineBold;
    src: url(fonts/VisiaPro-BoldOutline.otf);
    font-weight: bold;
}

body {
    background-color: var(--light_black);
    font-family: visia;
    color: var(--white);
    margin: 0px;
    background-image: url(background.svg);
    background-repeat: repeat;
    background-size: contain;
}

h1, h2, h3, h4, h5, h6 {
    font-family: outline;
}

.title-area {
    grid-area: title-area;
}

.title-area .hero-title {
    font-family: outline;
}

.hero-section {
    display: grid;
    border-bottom: 1px solid var(--white);
    padding: 16px 0px;
}

.hero-features {
    display: grid;
    padding: 16px 0px;
}

.hero-feature {
    display: flex;
    justify-content: center;
}

.hero-feature .feature-1 {
    grid-area: feature-1;
}

.hero-feature .feature-2 {
    grid-area: feature-2;
}

.hero-feature.feature-3 {
    grid-area: feature-3;
}

.hero-feature .feature-4 {
    grid-area: feature-4;
}

.hero-feature a {
    color: var(--white);
}

.hero-feature a:hover {
    color: var(--light_blue);
    text-decoration: underline;
}

footer {
    background-color: var(--white);
    color: var(--dark_black);
}

.footer-main {
    display: grid;
    border-bottom: solid 1px var(--dark_black);
    padding: 16px 0px;
}

.footer-main .column-1 {
    grid-area: column-1;
}

.footer-main .column-2 {
    grid-area: column-2;
}

.footer-main .column-3 {
    grid-area: column-3;
}

.footer-sub {
    display: grid;
    padding: 16px 0px;
}

.footer-sub .sub-column {
    display: flex;
    vertical-align: center;
    font-size: 1em;
}

.footer-sub .sub-column a {
    color: var(--dark_black);
    /* text-decoration: none; */
}

.footer-sub .sub-column a:hover {
    color: var(--dark_blue);
    text-decoration: none;
}

.footer-sub .sub-column-1 {
    justify-content: flex-start;
    grid-area: sub-column-1;
}

.footer-sub .sub-column-2 {
    justify-content: flex-end;
    grid-area: sub-column-2;
}

.footer-social {
    font-size: 24px;
    padding: 0px 8px;
}

.whatsapp {
    padding-left: 8px;
    padding-right: 0px;
}

.footer-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.footer-list li {
    margin-top: 8px;
}

/* Responsive Design Starts Here */

/* Mobile View */
@media only screen and (max-width: 600px) {
    .container {
        margin: 16px;
    }

    .hero-section {
        column-count: 1;
        grid-template-areas: 'title-area' 'image-area';
        row-gap: 16px;
    }

    .title-area .hero-title {
        font-size: 3em;
    }

    .title-area {
        text-align: center;
    }

    .hero-features {
        column-count: 2;
        grid-template-areas: 'feature-1 feature-2' 'feature-3 feature-4';
        padding: 16px 0px;
        column-gap: 8px;
        row-gap: 8px;
    }

    .hero-feature {
        padding: 0px 0px 8px 0px;
        border-bottom: solid 1px var(--white);
    }
    
    .footer-main {
        column-count: 1;
        grid-template-areas: 'column-3' 'column-2' 'column-1';
        row-gap: 16px;
    }
    
    .footer-sub {
        column-count: 1;
        grid-template-areas: 'sub-column-2' 'sub-column-1';
        row-gap: 16px;
    }

    .footer-sub .sub-column {
        justify-content: center;
    }

    .image-area {
        display: flex;
        justify-content: center;
        grid-area: image-area;
    }

    .hero-feature a {
        color: var(--white);
        text-decoration: none;
    }
}

@media only screen and (min-width: 480px) {
    .title area .hero-title {
        font-size: 5em;
    }
}

@media only screen and (min-width: 600px) {
    .container {
        margin: 16px;
    }
    
    .hero-section {
        grid-template-columns: 60%, 40%;
        grid-template-areas: "title-area image-area";
        column-gap: 16px;
    }
    
    .title-area .hero-title {
        font-size: 4em;
    }
    
    .hero-features {
        column-count: 4;
        grid-template-areas: "feature-1 feature-2 feature-3 feature-4";
        column-rule: 1px solid var(--white);
    }
    
    .feature-2 {
        border-left: solid 1px var(--white)
    }
    
    .feature-3 {
        border-left: solid 1px var(--white)
    }
    
    .feature-4 {
        border-left: solid 1px var(--white)
    }
    
    .footer-main {
        grid-template-columns: 33.33% 33.33% 33.33%;
        grid-template-areas: "column-1 column-2 column-3";
        column-gap: 16px;
    }
    
    .footer-sub {
        column-count: 2;
        grid-template-areas: "sub-column-1 sub-column-2";
        column-gap: 16px;
    }
}

@media only screen and (min-width: 876px) {
    .title area .hero-title {
        font-size: 8em !important;
    }
}

@media only screen and (min-width: 992px) {
    .title area .hero-title {
        font-size: 7em;
    }
}

/* Desktop View */
@media only screen and (min-width: 1680px) {
    .container {
        max-width: 1640px;
        margin: auto;
    }
}