:root {
    --color-igloo:#FFFFFF ;
    --color-igloo1:#f02a29 ;
    --color-igloo2:#D93A27 ;
    --color-igloo3:#F05F37 ;
    --color-igloo4:#D96127 ;
    --color-igloo-text:#545454 ;
    --color-igloo-text2:#eceaea ;
    --color-igloo-text3:#f07929 ;
    --color-igloo-hover:#d94214 ;
    --color-igloo5:#ffa781 ;
    --color-igloo6:#333333 ;
    --color-igloo7:#5b0e2d ;
    --color-igloo8:#402039 ;
}
body {
    background-color: var(--color-igloo);
    margin: 0px;
}
@media only screen and (min-width: 936px) {
    .parent {
        margin: 5% 0 0 0;
        padding: 0;
        width: 100%;
        height: 2500px;
        background-color: var(--color-igloo);
        display: grid;
        grid-template-columns:8% 1fr 1fr 1fr 8% ;
        grid-template-rows: 18% 1fr 1fr 20% ;
        grid-template-areas:
        "act act act act act"
        "act act act act act"
        "act act act act act"
        "fot fot fot fot fot"
        ;
    
    }

    .view{
        width: 100%;
        height:10% ;
        display: grid;
        grid-template-columns:40% 60% ;
        grid-template-areas: "logo nav";
        position: fixed;
        top: 0;
        z-index: 30;
    }
    header{
        grid-area: logo;
        border-bottom:0.5px solid #545454 ;
    }
        nav{
        grid-area: nav;
        display: grid;
        list-style: none;
        grid-template-columns:1fr 1fr 20% 20%;
        justify-content: center;
        align-items: end;
        justify-items: center;
        grid-template-areas: "a b c d";
        background-color: var(--color-igloo5);
        border-bottom:0.5px solid #545454;

    }
    .logoe{
        grid-area: logoe;
                display: flex;
                align-items: center;
                justify-content: center;
                align-content: center;
    }
    .head {
        background-color: var(--color-igloo5);
        width: 101%;
        height: 100%;
    }
    .head::before {
        content: "";
        position:absolute ;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        border-style: solid;
        border-width: 2px;
        border-color: var(--color-igloo1);
    
    }
    nav::before {
        content: "";
        position:absolute ;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        border-style: solid;
        border-width: 2px;
        border-color: var(--color-igloo1);
    
    }
    
    .logo-igloo {
        display: inline;
        margin: 12.5px calc(90% - 70px) 12.5px 10%;
    }


ul{
    display: inline;
    padding: 0;
    list-style: none;


}
.a{
    grid-area:a;
}
.b{
    grid-area:b ;

}
.c{
    grid-area: c;

}
.d{
    grid-area: d;

}
.e{
    display: none;
}
.f{

    display: none;
}
.g{

    display: none;
}
.h{
    display: none;

}

li{
    display: inline;
    font-size: 20px;
    color: var(--color-igloo-text);
    cursor: pointer;
    font-family:ubu ;
    padding: 0;
}



                    /* #mine */



    main{
        grid-area: act;
        display: grid;
        grid-template-rows: 22.5% 19% 1fr 1fr 1fr;
        grid-template-areas: 
        "back "
        "text "
        "int "
        " how"
        "mag "
        ;
    }
    .how{
        margin: 0 8%;
        display: grid;
        grid-area: how;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 
        "ord acc delv"
        ;
        align-items: start;
        align-content: center;
        justify-items: center;
    }
    .how h3 {
        font-size: 23px;
        color: var(--color-igloo-text );
        text-align: center;
        font-family: ara;
    }
    .ord{
        grid-area: ord;
    }
    .acc{
        grid-area: acc;
    }
    .delv{
        grid-area: delv;
    }
    .how img{
        margin-top: 20px;
    margin-bottom:15px ;
    margin: auto;
    display: block;
        justify-items: center;
        width: 100px;
        height: 100px;
    margin-top: 20px;
    margin-bottom:15px ;
    align-items: center;
    }
.mag{
    grid-area: mag;
    display: grid;
    margin: 1% 8% 0 8% ;
    grid-template-columns: 33.33333333333333% 33.33333333333333% 33.33333333333333%;
    grid-template-areas: 
    "ben-aknon carefor-city carefor-cosk"
    ;
}
.carefor-cosk{
    margin: 0 2%;
    grid-area: carefor-cosk;
    display: block;
    background-color:var(--color-igloo1);
    max-width: 100%;
    max-height: 70%;
    box-sizing: border-box;
    border-color:var(--color-igloo1) ;
    border-style: solid;
    border-radius: 3%;
    position: relative;
}
.ben-aknon {
    margin: 0 2%;
    grid-area:ben-aknon ;
    display: block;
    background-color:var(--color-igloo1);
    max-width: 100%;
    max-height: 70%;
    box-sizing: border-box;
    border-color:var(--color-igloo1) ;
    border-style: solid;
    border-radius: 3%;
    position: relative;
}
button a{
    color: var(--color-igloo-text2);
}
button{
    color: var(--color-igloo-text2);
    display: block;
    background-color:var(--color-igloo4);
    max-width: 40%;
    max-height: 40%;
    border-color:var(--color-igloo4) ;
    border-width:20px ;
    border-style: solid;
    border-radius: 15%;
    position: absolute;

}
.ben-b{
    position: absolute;
    left: calc(50% - 41px);
}
.car-b{
    margin-top: 40px;
    position: absolute;
left: calc(50% - 41px);
}
.kos-b{
    margin-top: 40px;
    position: absolute;
left:calc(50% - 41px) ;
}

.mag p{
    color:rgb(192, 192, 192) ;
font-size: 29px;
text-align: center;
}
.mag h2{
    color: var(--color-igloo-text2);
    font-size: 35px;
    text-align: center;
}
.carefor-city{
    margin: 0 2% ;
    grid-area:carefor-city ;
    display: block;
    background-color:var(--color-igloo1);
    max-width: 100%;
    max-height: 70%;
    box-sizing: border-box;
    border-color:var(--color-igloo1) ;
    border-style: solid;
    border-radius: 3%;
    position: relative;
}
.int{
    margin: 1% 8% 0 8% ;
    grid-area: int;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20% 80%;
    grid-template-areas:
    "is is is "
    "gel crep fast"
    ;
}
.is{
    grid-area: is;
}
h1{
    font-family: ubu;
    text-align: center;
}
.fast{
    margin: 0 2%;
    grid-area: fast;
    display: block;
    background-color:var(--color-igloo6);
    max-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    border-color:var(--color-igloo6) ;
    border-style: solid;
    border-radius: 3%;
}
.gel{
    margin: 0 2%;
    grid-area: gel;
    display: block;
    background-color: var(--color-igloo6);
    max-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    border-color:var(--color-igloo6) ;
    border-style: solid;
    border-radius: 3%;
}
.te h1{
    font-size: 35px;
    text-align: center;
}
.te p{
    font-size: 25px;
}
p{
    font-family:ara ;
}
.int h2{
    text-align: center;
    font-size:30px ;
}
.int span{
    color: var(--color-igloo-text3);
}
.more{
    display: none;
}
.int p{
    text-align: center;
    margin: 4%;
    font-size: 24px;
    color: var(--color-igloo-text2);
}
.crep{
    margin: 0 2%;
    grid-area: crep;
    display: block;
    background-color:var(--color-igloo6);
    max-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    border-color:var(--color-igloo6) ;
    border-style: solid;
    border-radius: 3%;
}
.text{
    background-color: rgba(15, 15, 15, 0.205);
    height: 366px;
    border-radius: 20px;
    display: grid;
    grid-area: text;    
    margin: 3% 8% 0 8%;
}
.te{
    margin-right: 2%;
    text-align: center;

}

.imgb {
    max-width: 100%;
    min-height: 100%;
}
    footer{
        grid-area: fot;
        background-color: var(--color-igloo6);
        position: relative;
        padding: 2% 8% 0;
        height: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 8%;
        grid-template-areas: 
        "logoe care care"
        "logoe care care "
        "soc ben ben"
        "soc ben ben"
        "cop cop cop "
        ;
    }

    .logo-igloo-fot{
        width: 150px;
        height: 150px;
    }
    .soc{
        grid-area: soc;
        margin: 0 20% 0 20%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        align-content: center;
    }
    .care{
        grid-area: care;
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-areas: "hor car";
    }
    .tel-video{
        display: none;
    }
    .city{
        grid-area: car;
        display: block;
        margin-left: 3%;
    }
    .imgback {
        grid-area: back;
    }
    .city a ,.akn a{
        font-family:arab ;
        font-size: 25px;
    }
    .city h2 ,.akn h2{
        margin-top: 10px;
        margin-bottom:10px ;
        font-size: 35px;
        font-family: arab;
    }
    .hor-car p {
        margin-top: 10px;
        margin-bottom:10px ;
        font-family: arab;
    }
    .hor-ben p {
        margin-top: 10px;
        margin-bottom:10px ;
        font-family: arab;
    }
    .hor-car{
        display: block;
        grid-area: hor;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size:30px ;
        color: var(--color-igloo1);
    }
    .ben{
        grid-area: ben;
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-areas: "hore akn";
    }
    .akn{
        grid-area: akn;
        margin-left: 3%;
    }
    .hor-ben{
        display: block;
        grid-area: hore;
        font-size:30px ;
        color: var(--color-igloo1);
    }
    .hor-ben p ,.hor-ben span{
        font-family: ara;
    }
    h2{
        font-family: ubu;
        color: var(--color-igloo-text3);
    }
    
footer span{
        color: var(--color-igloo-text2);
    }
    footer a{
        text-decoration: none;
        color: var(--color-igloo1);
        display: block;
    }

    .cop{
        font-size:25px;
        display: block;
        margin: auto;
        text-align: center;
        color: var(--color-igloo-text);
        font-family: arab;
        grid-area: cop;
    }

a{
    display: block;
    text-decoration: none;
    font-size: 20px;
    color: var(--color-igloo-text);
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
}

.lon{
    margin-left: 10px;
}
.lon::before{
    position: absolute;
    right: 36%;
    content: "";
    width:6px ;
    height: 27px;
    background-color: var(--color-igloo1);

}
.fast:hover{
    background-color:var(--color-igloo1) ;
    border-color:var(--color-igloo1) ;
}

.crep:hover{
    background-color:var(--color-igloo1) ;
    border-color:var(--color-igloo1) ;
}

.gel:hover{
    background-color:var(--color-igloo1) ;
    border-color:var(--color-igloo1) ;
}



li:hover{
    color: var(--color-igloo-hover);
}
nav a:hover{

    color: var(--color-igloo-hover);
}

.desk-video{
    margin-top: 28px;
    max-height: 450px;
    background-position: center;
    background-size: cover;
    z-index: 1;
} 
}