html {
    min-width: 280px;
    font-size: 10px;
    --main-color-white: white;
    --main-color-black: black;
    --main-color-orange: #ee4619;
    --main-color-gray: #19191f;
    scroll-behavior: smooth !important;
}

body {
    font-size: 1.6rem;
}


/*************************/


/*       1-Header       */


/************************/

.zi-header-wrapper {
    width: 100%;
    height: 86px;
    background: rgba(0, 0, 0, 0.98);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    font-family: 'Lexend', sans-serif;
}

.main_header {
    width: 100%;
    margin: auto;
    box-sizing: border-box;
    user-select: none;
    color: white;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10%;
    justify-content: space-between;
    align-items: center;
    padding: 15px 2.5%;
    font-family: 'Roboto', sans-serif;
}

.header_logo img {
    width: 100%;
    max-width: 280px;
}


/*-------------   .main_nav  | .mobile_nav  ----------*/

.main_nav {
    display: none;
    margin-top: 10px;
}

.main_nav ul {
    display: grid;
    list-style-type: none;
    grid-template-columns: repeat(6, auto);
    justify-content: center;
    gap: 15px;
    margin-bottom: 0px;
}

.main_nav ul a,
.mobile_nav ul a {
    user-select: none;
    color: var(--main-color-white);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.6rem;
    transition: 400ms;
}

.mobile_nav {
    background: rgba(0, 0, 0, 0.98);
    transform-origin: top;
}

.mobile_nav ul {
    list-style-type: none;
    padding: 0;
}

.mobile_nav ul li {
    padding: 15px 25px;
    border-bottom: rgb(131, 126, 126, 0.4) 1px solid;
}

.main_nav ul a:hover,
.mobile_nav ul a:hover {
    color: #ee4619;
}

.mobile_nav .first_li {
    border-top: rgb(131, 126, 126, 0.4) 1px solid;
}

.mobile_nav {
    display: none;
    width: 100%;
    margin: auto;
    z-index: 500;
}


/*-----------------   .menu_social  -----------------*/

.menu_social {
    display: none;
    grid-template-columns: repeat(4, auto);
    justify-content: end;
    gap: 5px;
    align-self: end;
}

.menu_social.menu_social_mobile {
    display: grid;
    justify-content: start;
    padding: 30px 15px;
}

.menu_social a,
.menu_social.menu_social_mobile a {
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: white;
    color: black;
    border-radius: 5px;
    transition: 450ms;
}

.menu_social a:hover {
    color: white;
    background-color: #ee4619;
}


/*----   menu_rods  -----*/

.menu_rods:hover {
    cursor: pointer;
}

.menu_rods {
    width: 50px;
    justify-self: end;
}

.menu_rods div {
    width: 60%;
    border: 2px solid var(--main-color-white);
    margin-top: 8px;
}

/**************************************
            3-Animations 
**************************************/

@keyframes show_menu {
    0% {
        height: 0px;
        overflow: hidden;
    }
    100% {
        height: 470px;
        overflow: hidden;
    }
}

@keyframes hide_menu {
    0% {
        height: 470px;
        overflow: hidden;
    }
    100% {
        height: 0px;
        overflow: hidden;
    }
}


/*------------------   media queries  ------------------*/

@media all and (min-width:992px) {
    /*------------------   1-Header   ------------------*/
    .main_header {
        grid-template-columns: auto auto auto;
        gap: 2%;
        align-items: space-evenly;
    }
    .main_nav {
        display: block;
    }
    .mobile_nav,
    .menu_rods {
        display: none;
    }
    .menu_social {
        display: grid;
    }
}

@media all and (min-width:1200px) {}



/*         footer        */
/************************/

#footer {
    background: var(--main-color-gray);
    color: var(--main-color-white);
    padding: 40px 2.5%;
    text-align: center;
    font-size: 1.65rem;
    line-height: 3rem;
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
}

#footer a {
    display: block;
    color: white;
    text-decoration: none;
}

#footer img {
    margin: 30px 0px;
    width: 85%;
    max-width: 335px;
}

@media all and (min-width:375px) {
    #footer a {
        display: inline-block;
    }
    #footer_first_span {
        border-right: 1px solid gray;
        padding-right: 8px;
    }
    #footer_second_span {
        padding-left: 8px;
    }
}

@media all and (min-width:992px) {
    #footer {
        display: grid;
        grid-template-columns: 190px auto 190px;
        align-items: center;
    }
    #footer_first_span {
        border-right: none;
    }
    #footer_left {
        text-align: left;
    }
    #footer_right {
        text-align: right;
    }
    #footer_first_span {
        padding-right: 0px;
    }
    #tiret {
        display: none;
    }
}

@media all and (min-width:1200px) {
    #footer {
        display: grid;
        grid-template-columns: 290px auto 290px;
    }
    #footer_first_span {
        border-right: 1px solid gray;
        padding-right: 8px;
    }
    #tiret {
        display: inline;
    }
}
@media all and (min-width:1400px) {
    #footer {
        display: grid;
        grid-template-columns: 400px auto 400px;
    }
}
@media all and (min-height:800px) {
    #footer {
        box-sizing: border-box;
        width: 100%;
    }
}