: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-igloo9:  linear-gradient(90deg, #efd5ff 0%, #515ada 100%); 
    --color-igloo10: linear-gradient(90deg, #d53369 0%, #daae51 100%) ;
    --color-igloo11: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); 
    --color-igloo12: linear-gradient(90deg, #fcff9e 0%, #c67700 100%); 
    --color-igloo13: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
    --color-igloo14: linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
    --color-igloo15: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%); 
    --color-igloo16:#402039 ;
    --color-igloo17:#402039 ;
}
body {
    background-color: var(--color-igloo);
    margin: 0px;
}

@media only screen and (max-width: 425px){
    body{
        max-width:425px ;
    }
    .view{
        width: 100%;
        height:5% ;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-areas: "logo nav";
        position: fixed;
        top: 0;
        z-index: 30;
        }
        
        header{
        grid-area: logo;
        border-bottom:0.5px solid #545454 ;
        }
        a{
            display: block;
            text-decoration: none;
            font-size: 20px;
            color: var(--color-igloo);
            cursor: pointer;
            -webkit-font-smoothing: antialiased;
        }
        .more{
            grid-area: c;
        }
        nav{
        grid-area: nav;
        background-color: var(--color-igloo5);
        position: relative;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        justify-content: center;
        align-items: center;
        justify-items: center;
        grid-template-areas: "a b c d";
        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: 100%;
        height: 100%;
        
        }
        .head::before {
        content: "";
        position:absolute ;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        border-style: solid;
        border-width: 4px;
        border-color: var(--color-igloo1);
        
        }
        nav::before {
        content: "";
        position:absolute ;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        border-style: solid;
        border-width: 4px;
        border-color: var(--color-igloo1);
        
        }
        
        .logo-igloo {
        display: inline;
        margin: 12.5px calc(90% - 70px) 12.5px 10%;
        }
        .e ,.f ,.g ,.h{
            display: none;
            list-style: none;
            font-size: 20px;
            color: var(--color-igloo-text);
            cursor: pointer;
            font-family:ubu ;
            padding: 0;
        }
        .e{ 
            grid-area: e;
        }
        .f{ 
            grid-area: f;
        }
        .g{ 
            grid-area:g;
        }
        .h{ 
            grid-area: h;
        }
            .a, .b, .c, .d{
                display: none;
                font-size: 110%;
                color: var(--color-igloo-text);
                cursor: pointer;
                font-family:ubu ;
                padding: 0;
            }
            .simb{
                direction: rtl;
                display: none;
            }
            li{
                list-style: none;
                color: var(--color-igloo-text);
            }
            
            li:hover{
                color: var(--color-igloo-hover);
            }
            nav a:hover{
                color: var(--color-igloo-hover);
            }
            .parent {
                margin: 100px 0 0 0;
                padding: 0;
                width:100% ;
                height: 4600px;
                background-color: var(--color-igloo);
                display: grid;
                grid-template-columns:8% 1fr 1fr 1fr 8% ;
                grid-template-rows: 5% 1fr 1fr 810px ;
                grid-template-areas:
                "act act act act act"
                "act act act act act"
                "act act act act act"
                "fot fot fot fot fot"
                ;
            
            }
            footer{
                grid-area: fot;
                background-color: var(--color-igloo6);
                padding: 2% 8% 0;
                display: grid;
                height: 100%;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 150px 70px 1fr 1fr 40px;
                grid-template-areas: 
                "logoe logoe logoe"
                "soc soc soc "
                "care care care"
                "ben ben ben"
                "cop cop cop "
                ;
            }
            footer p {
                margin-top: 10px;
                margin-bottom: 10px;
            }
            footer span{
                color: var(--color-igloo-text2);
            }
            .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-rows: 60% 40%;
                grid-template-areas:
                "car"
                "hor";
            }
            .wrapper{
                justify-content: space-between;
                position: relative;
                top: 0px;
                bottom: 500px;
                margin-bottom: 10px;
                width: 350px;
                height: 300px;
                flex: 0 0 100%;
                padding: 30px;
                border-radius: 8px;
                scroll-snap-align: start;
                box-shadow: rgba(0,0,0,0.5);
            }
            .container2 {
                position: relative;
                width: 300px;
                height: 300px;
                border-radius:83% 17% 80% 20% / 21% 83% 17% 79%;
                box-shadow: rgb(27, 27, 27 , .5);
                overflow: hidden;
            }
            .container2:hover{
            cursor: pointer;
            }
            .container2:hover .contered{
                height: 200px;
                top: 100px;
                background: rgba(0, 0, 0, 0.45);
            }
            .container2:hover .contered p{
                opacity: 1;
                visibility: visible;
                font-size: 26px;
                margin: 0px 0px 2px 15px;
            }
            .container2:hover .contered h3 {
                font-size: 35px;
                transition : .5s;
            }
            .container2:hover img {
                transform: scale(1.1) rotate(-3deg);
                transition: 0.5s;
            }
            img{
                transition: .5s;
            }
            .contentbx{
                text-align: center;
                font-size: 20px;
                font-family: ubu;
                color: var(--color-igloo1);
                }
            .m-crep-c , .m-crep-b{
                display: flex;
                overflow: scroll;
                padding: 0px 35px 26px 35px;
                scroll-snap-type: x mandatory;
                scroll-padding: 24px;
                gap: 45px;
            }
            .m-gelato-c{
                display: flex;
                overflow: scroll;
                padding: 0px 35px 26px 35px;
                scroll-snap-type: x mandatory;
                scroll-padding: 24px;
                gap: 45px;
            }
            .m-gufer-c , .m-gufer-b{
                display: flex;
                overflow: scroll;
                padding: 0px 35px 26px 35px;
                scroll-snap-type: x mandatory;
                scroll-padding: 24px;
                gap: 45px;
            }
            .m-pan-c , .m-pan-b{
                display: flex;
                overflow: scroll;
                padding: 0px 35px 26px 35px;
                scroll-snap-type: x mandatory;
                scroll-padding: 24px;
                gap: 45px;
            }
            .m-pla-c , .m-pla-b{
                display: flex;
                overflow: scroll;
                padding: 0px 35px 26px 35px;
                scroll-snap-type: x mandatory;
                scroll-padding: 24px;
                gap: 45px;
            }
            .m-jus-c , .m-jus-b{
                display: flex;
                overflow: scroll;
                padding: 0px 35px 26px 35px;
                scroll-snap-type: x mandatory;
                scroll-padding: 24px;
                gap: 45px;
            }
            .m-milk-c , .m-milk-b{
                display: flex;
                overflow: scroll;
                padding: 0px 35px 26px 35px;
                scroll-snap-type: x mandatory;
                scroll-padding: 24px;
                gap: 45px;
            }
            .m-cafe-c , .m-cafe-b{
                display: flex;
                overflow: scroll;
                padding: 0px 35px 26px 35px;
                scroll-snap-type: x mandatory;
                scroll-padding: 24px;
                gap: 45px;
            }
            .m-salad-c{
                display: flex;
                overflow: scroll;
                padding: 0px 35px 26px 35px;
                scroll-snap-type: x mandatory;
                scroll-padding: 24px;
                gap: 45px;
            }


            .hor-car{
                text-align: center;
                margin-left: 3%;
                display: inline;
                grid-area: hor;
                font-size:130% ;
                color: var(--color-igloo1);
            }
            .city{
                text-align: center;
                grid-area: car;
                display: inline;
                margin-left: 3%;
            }
            .hor-car p ,.hor-car span{
                font-family: arab;
            }
            .hor-ben p ,.hor-ben span{
                font-family: arab;
            }
            h2{
                font-family: ubu;
                color: var(--color-igloo-text3);
            }
            .ben{
                text-align: center;
                grid-area: ben;
                display: grid;
                grid-template-rows: 60% 40%;
                grid-template-areas:
                "akn"
                "hore";
            }
            .akn{
                grid-area: akn;
                margin-left: 3%;
            }
            .city h2 ,.akn h2{
                font-size: 160%;
            }
            .city a ,.akn a{
                font-family:arab ;
                font-size: 21px;
            }
            .hor-ben{
                font-family: arab;
                text-align: center;
                margin-left: 3%;
                display: inline;
                grid-area: hore;
                font-size:130% ;
                color: var(--color-igloo1);
            }
            .cop{
                display: block;
                margin: auto;
                text-align: center;
                color: var(--color-igloo-text);
                font-family: arab;
                grid-area: cop;
            }
            p{
                direction: rtl;
                font-family:ara ;
            }
            main{
                grid-area: act;
                max-width: 425px;
                
            }
            .m-c h1 ,
            .m-b h1
            {
                    color: var(--color-igloo-text3);
                    direction: rtl;
                    font-size: 40px;
                    font-family: ubu;
                    text-align: center;
                
            }
            .m-c h2 ,
            .m-b h2
            {
                    color: var(--color-igloo-hover);
                    direction: rtl;
                    font-size: 30px;
                    font-family: ubu;
                    text-align: center;
                
            }
            .m-b{
                display: none;
                visibility: hidden;
            }
            .sw{
            visibility: hidden;
            display: none;
            }
            .chu  span{
                position: relative;
                box-sizing: border-box;
                margin: auto;
                margin-top:5px ;
                display: block;
                width: 150px;
                height: 50px;
                background: var(--color-igloo1);
                border-radius: 30px;
                overflow: hidden;
                transition: ease-in 0.5s;
            }
            .sw:checked ~ .chu  span{
                background: var(--color-igloo3);
            }
            .chu  span::before{
                content: "";
                position: absolute;
                top: 2px;
                left: 6px;
                background-image: url(./switch/city.png);
                width: 45px;
                height:45px;
                border-radius: 50%;
                transition: 0.5s;
            }
            .sw:checked ~  .chu  span::before{
                transform: translateX(-100px);
            }
            .chu  span::after{
                content: "";
                position: absolute;
                top: 2px;
                right: 6px; 
                background-image: url(./switch/ben.png);
                width: 45px;
                height: 45px;
                border-radius: 50%;
                transition: 0.5s;
                transform: translateX(100px);
            }
            .sw:checked ~ .chu  span::after{
                transform: translateX(0px);
            }
            .sw:checked ~ .m-c{
                display: none;
            }
            .sw:checked ~ .m-b{
                display: block;
                visibility: visible;
            }
            .more{
                display: none;
            }
            .nmore{
                display: flex;
                align-items: center;
                justify-content: center;
                grid-area: c;
                width: 64px;
                height: 64px;
                border: none;
                border-radius: 50%;
                cursor: pointer;
            }
            .nmore span::before,
            .nmore span::after,
            .nmore span {
                background-color: var(--color-igloo1);
                width: 50px;
                height: 6px;
                transition: 0.3s;
                border-radius: 40px;
            }
            .nmore span::before,
            .nmore span::after{
                content:"";
                position: relative;
                display: inline-block;
            }
            .nmore span::before{
            top: -22px;
            }
            .nmore span::after{
            top: -12px;
            }
            .more:checked + .nmore span{
                background-color: transparent;
            }
            .more:checked + .nmore span::before{
            top: -13px;
            transform: rotate(135deg);
            }
            .more:checked + .nmore span::after{
                top: -32px;
                transform: rotate(-135deg);
            }
            ul{
                display: block;
            }
            .more:checked ~ .simb {
                visibility: visible;
                display: block;
                position: absolute;
                background-color:var(--color-igloo5);
                margin-top: 455px;
                margin-left:-185px;
                transition-duration: 0.2s;
                -webkit-box-shadow: -2px 35px 30px 15px rgba(62,66,66,0.57);
                -moz-box-shadow: -2px 35px 30px 15px rgba(62,66,66,0.57);
                box-shadow: 0 35px 30px 1px rgba(62,66,66,0.57);
                z-index: 30;
            }
            .more:checked ~ .simb ul{
                padding: 0;
            border-top: 0.5px solid #545454;
            display: grid;
            margin-top: 4px;
            margin-bottom: 10px;
            width: 350px;
            height: 350px;
            }
            .more:checked ~ .simb a{
                color: var(--color-igloo-text);
            }
            .more:checked ~ .simb .e ,.f ,.g ,.h{
                display: inline-block ;
            }
            ul{
                display: grid;
                grid-template-rows: 1fr 1fr 1fr 1fr;
                grid-template-areas:
                "e"
                "f"
                "g"
                "h"
                ;
                position: relative;
                justify-content: center;
                align-items: center;
                justify-items: center;
                align-content: center;
            }
            li{
                list-style: none;
                color: var(--color-igloo-text);
            }
            .wrapper img{
            cursor: pointer;
            width: 260px ;
            height: 250px ; 
            box-shadow :rgb(27, 27, 27 , .5) ;
            transition: .5s;
}
.contered h3 {
        text-align: center;
        margin: 10px;
        font-size: 30px;
        transition: .5s;
}
.contered p {
        text-align: center;
        font-size: 20px;
        margin: 26px;
        visibility: hidden;
        opacity: 0;
        transition: .5s;
}

.contered{
        height: 150px;
        width: 300px;
        padding: 3px;
        box-sizing: border-box;
        position: absolute;
        top: 220px;
        background-color: rgb(27, 27, 27 , .5);
        color: white;
        transition: .5s;


}

::-webkit-scrollbar{
            height:10px;
            width: 0px;
}
::-webkit-scrollbar-thumb{
    background-color:var(--color-igloo-text3);
    border-radius:20px;
}
            }