/* =======================
======= 1. imports =======
======================= */

@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap');


/* =======================
======= 2. resets ========
======================= */

*, 
*::before, 
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* =======================
======= 3. general ========
======================= */


*:hover, 
*:focus {
    transition: 250ms ease-out;
}

:root {
    --clr-main: rgb(0, 0, 0);
    --clr-txt-main: rgb(159, 175, 17);
    --clr-sec: rgb(233, 230, 223);
    --clr-warn: rgb(95, 13, 13);

    --clr-trans: rgba(0, 0, 0, .6);
    --clr-trans-dark: rgba(0, 0, 0, .68);
    --clr-trans-orn: rgba(159, 175, 17, .75);
    
    --fnt-head: 'Averia Serif Libre', cursive;    
    --fnt-main: 'Baloo Tamma 2', cursive;
    --fnt-sec: 'Orbitron', sans-serif;

    --ftn-wgh-lgh: 100;
    --ftn-wgh-nrl: 400;
    --ftn-wgh-bold: 600;
    --ftn-wgh-big: 700;

    --ln-hgh-cap: 1;
    --ln-hgh-nor: 1.4;
}

h4 {
    font-family: var(--fnt-main);
    line-height: var(--ln-hgh-cap);
}

.margin_top {
    margin-top: .5em;
}

.margin_bottom {
    margin-bottom: 1em;
}

.red_icon {
    color: var(--clr-warn);
}

/* =======================
======= 4. header ========
======================= */

#home {
    background-color: var(--clr-main);
    background-size: contain;
}

.header {
    background-image: url('pics/heroBig.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--clr-trans);
    background-blend-mode: overlay;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: 1fr .5fr 8fr 1fr;
    grid-template-areas: 'top_menu top_menu top_menu'
    '. . .'
    '. text .'
    '. . .';
}

.scroll_page {
    background-image: url('pics/heroBig.jpg');
    background-size: cover;
}

.sub__top {
    grid-area: top_menu;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'logo . home';
    margin-top: -.5em;
}

.home__logo_wrap {
    grid-area: logo;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1.4em;
}

.logo {
    width: calc(.9em + 6vw);
    height: calc(.9em + 6vw);
}

.home__logo_wrap .logo:hover,
.home__logo_wrap .logo:focus {
    opacity: 0.5;
}

.home__link {
    grid-area: home;
    margin-top: .5em;
}

.material-icons {
    display: flex;
    justify-content: center;
}

.home__link .material-icons {
    color: var(--clr-txt-main);
    font-size: calc(1rem + 1vw);
    padding: 1em;
}

.home__link .material-icons:hover,
.home__link .material-icons:focus {
    opacity: 0.5;
    color: var(--clr-txt-main);
}

.material-icons:hover,
.material-icons:focus {
    text-shadow: 1px 5px 5px var(--clr-main);
}

.sub__text {
    grid-area: text;
    text-align: center;
}

.card__text {
    min-width: 5em;
    height: min-content;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0% 50%);
    background-color: var(--clr-trans-orn);
    color: var(--clr-sec);
}

.text__wrap {
    padding: 1em;
}

.par__title {
    font-family: var(--fnt-head);
    text-transform: uppercase;
    text-align: center;
    line-height: var(--ln-hgh-cap);
    margin-top: .3em;
    margin-bottom: .8em;
    font-size: calc(.8rem + 1.4vw);
    line-height: var(--ln-hgh-cap);
}

.in__text {
    font-family: var(--fnt-main);
    line-height: var(--ln-hgh-nor);
    font-weight: var(--ftn-wgh-lgh);
    font-size: calc(.45rem + 1.15vw);
    line-height: var(--ln-hgh-nor);
}

.mail__address {
    padding: .1em 1em;
    color: var(--clr-main);
    font-weight: var(--ftn-wgh-bold);
    font-size: calc(.5rem + 3vw);
}

.mail__address:hover,
.mail__address:focus {
    color: var(--clr-txt-main);
    background-color: var(--clr-main);
}

.black_link {
    font-family: var(--fnt-main);
    color: var(--clr-sec);
    padding: .1em .5em;
    font-size: calc(.3rem + 1vw);
}

.black_link:hover,
.black_link:focus {
    color: var(--clr-txt-main);
    background-color: var(--clr-main);
}

.text__contact_up {
    margin-bottom: .9em;
}

.text__contact_down {
    padding: .9em 0 0;
}

.split {
    border-top: 2px solid var(--clr-sec);
    margin: .9em .5em;
}

.split2 {
    border-top: 2px solid var(--clr-sec);
    margin: .9em .5em 0 0;
}

/* ====================
===== customers ======
==================== */

.logos {
    margin: .6em .6em .6em;
    height: calc(1.25em + 1vw);
    align-items: center;
}

.logo_bl {
    margin: .6em .6em .6em;
    width: calc(2em + 1vw);
    align-items: center;
}

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

.sub_header {
    font-size: calc(.5rem + 1.2vw);
}

.logo_bl:hover,
.logo_bl:focus,
.logos:hover,
.logos:focus,
.logos_big:hover,
.logos_big:focus {
    opacity: .6;
}

/* ====================
======== info ========
==================== */

.health_links + .health_links {
    margin-top: .2em;
}


@media (max-height:414px) {
    .sub_header {
        font-size: calc(.4rem + 1vw);
    }

    .par__title {
        font-size: calc(.6rem + 1.2vw);
    }
    
    .in__text {
        font-size: calc(.3rem + 1vw);
    }

    .mail__address {
        font-size: calc(.2rem + 2vw);
    }

}

@media (min-width:715px) {
    .sub_header {
        font-size: calc(.5rem + 1.5vw);
    }
}

@media (min-width:1080px) {
    .logo {
        width: calc(.9em + 7vw);
    }

    .mail__address {
        font-size: calc(.2rem + 2vw);
    }

    .logos_big {
        height: calc(1.5em + 1vw);
    }

    .black_link {
        font-size: calc(.5rem + .5vw);
        padding: .5em 1em;
    }

    .health_links + .health_links {
        margin-top: 1em;
    }
}