.top{
    margin-top: 0px;
    background-image: url(./images/topback.png);
    height:auto;
    background-size: cover;
}

.top__button{
    font-weight: bolder;
    background-image: url(./images/button-top.svg);
    background-size: cover;
    color: #ffffff;
    font-size: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 204px;
    height: 45px;
}

.top__button-call{
display: none;
font-weight: bolder;
    color: #ffffff;
    font-size: 20px;
    border-radius: 8px;
    width: 204px;
    height: 45px;
}



.top__buttonbox{
    margin-top: 23px;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 15px;
}

.top__button:hover{
   transform: all .2s;
   animation: shadow .6s infinite linear;
   background-image: none;
   background-color: #1E1E1E;
   color:#fff;
}



.top__inner{
    padding-top: 100px;
    z-index: 1;
}

.top__googlebox{
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 15px;
}

.top__img-google{
    height: 27px;
    width: auto;
}

.top__rewiews{
    display: none;
}

.top__textbox{
    max-width: 800px;
}

.top__list{
    margin-top: 45px;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    
}

.top__text{
    margin-top: 10px;
    max-width: 450px;
}

.top_item{
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 15px;
}


.description{
margin-top: 150px;
height: auto;
margin-bottom: 150px;
}

.description__box{
    display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "description__title description__textbox"; 
}

    .description__title { 
    grid-area: description__title; 
    padding-right: 25px;

    }   
    .description__textbox {
     grid-area: description__textbox;
     margin-left: 40px;

     }


.contact{
    margin-top: 150px;
}

.contact__title{
    
    max-width: 600px;
    font-size: 32px;
}

.contact__container{
display: flex;
justify-content: left;
align-items: center;
gap: 75px;
}

.form__box {
    max-width: 600px;
    width: 100%;
    margin-top: 28px;
  display: grid; 
  grid-auto-columns: 1fr 1fr; 
  grid-template-rows: 38px 38px 117px; 
  gap: 10px 10px; 
  grid-template-areas: 
    "form__name form__cod"
    "form__phone form__email"
    "form__message form__message"; 

}

input:disabled{
   color: #a40000; 
}

input{
    color: #1E1E1E;
    padding: 10px 13px;
    border-radius: 3px;
    background-color: #F3F4F6;
    border: 1px #DBDBDB solid;
}



.form__name { grid-area: form__name; }
.form__cod { grid-area: form__cod; }
.form__phone { grid-area: form__phone; }
.form__email { grid-area: form__email; }


.form__message { 
    resize: none;
    grid-area: form__message; 
    color: #1E1E1E;
    padding: 10px 13px;
    border-radius: 3px;
    background-color: #F3F4F6;
    border: 1px #DBDBDB solid;
}



.form__button{
    border: none;
font-weight: bold;
 margin-top: 35px;
 background-size: cover;
 background-image: url(./images/button-top.svg);
 color: #ffff;
 border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 204px;
    height: 45px;
    font-size: 16px;
}

.form__button:hover{
   transform: all .2s;
   animation: shadow .6s infinite linear;
   background-image: none;
   background-color: #1E1E1E;
   color:#fff;
}

.contact__imgbox{
    max-width: 620px;
    width: 100%;
  display: grid; 
  grid-auto-columns: 0.4fr 0.6fr; 
  grid-auto-rows: 250px 250px; 
  gap: 10px 10px; 
  grid-template-areas: 
    "contact__img-back1 contact__img-front"
    "contact__img-back2 contact__img-front"; 

}

.contact__img-front{
    grid-area: contact__img-front;
}

.contact__img-back1{
    grid-area: contact__img-back1;
}

.contact__img-back2{
    grid-area: contact__img-back2;
}

.contact__img{
    
    border-radius: 5px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.contact__front-image{
    
    border-radius: 5px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.brend{
    margin-top: 150px;
    padding: 115px 0;
     background-color: #f9fdff;
}

.brend__container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 125px;

}

.brend__textbox{
    max-width: 600px;
}

.brend__text{
    max-width: 360px;
}


.brend__imgbox{
    width: 100%;
  display: grid; 
  grid-auto-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 9px 9px; 
  grid-template-areas: 
    "brend__img-viking brend__img-mayag brend__img-whirlpool"
    "brend__img-miele brend__img-roper brend__img-amana"; 
}

.brend__img-viking{
    grid-area: brend__img-viking;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brend__img-mayag{
    grid-area: brend__img-mayag;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brend__img-whirlpool{
    grid-area: brend__img-whirlpool;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brend__img-miele{
    grid-area: brend__img-miele;width: 100%;
    height: 100%;
    object-fit: cover;
}

.brend__img-roper{
    grid-area: brend__img-roper;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brend__img-amana{
    grid-area: brend__img-amana;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


        .rewievs{
            margin-top: 150px;
            position:static;
            height: 560px;
        }

        
        .rewievs__container{
            height: auto;
        }


        .rewievs__container {  
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
            grid-auto-columns: 1fr;
            gap: 0px 0px;
            grid-auto-flow: row;
            grid-template-areas:
              "rewievs__textbox rewievs__box";
          }
          

          .rewievs__textbox { 
            grid-area: rewievs__textbox;
            border-radius: 5px;
        }
          
          .rewievs__box { 
            grid-area: rewievs__box; 
            border-radius: 5px;
            height:100%;
        }

        .rewievs__list{
            margin-top: 36px;
            width: auto;
            height: 185px;
            background-color: rgb(255, 255, 255);
            padding: 30px 30px  ;
            border-radius: 5px;
        }

        .rewievs__list{
            width: auto;
            border: 1px solid #eae0e0;
            display: grid;
            justify-content: left;
            align-content:space-between;
        }

        .rewievs__textbox{
            max-width: 435px;
            margin-top: 75px;
            
        }

        .rewievs__slide-logo{
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .rewievs__img{
            height: 50px;
            width: auto;

        }
        
        .rewievs__logobox{
            margin-top: 100px;
            display: flex;
            align-items: center;
            justify-content: left;
            gap: 0 20px;
        }

        .rewievs__icon{
            width: 50px;
            height: auto;
        }

        .rewievs__img-ic{
            width: 22px;
            height: auto;
        }

        .about{
            margin-top: 150px;
        }

        .about__slider{
            display: none;
        }

        .about__container{
            display: flex;
            justify-content:stretch;
            gap: 75px;
        }

        .about__list{
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .about__item{
            border-radius: 5px;
            color: #fff;
            background-size: cover;
            width: 100%;
            height: 490px;
            padding: 25px 19px;
            display: grid;
            align-items: end;
        }

        .about__list-slide{
            
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .about__item-slide{
              transform: translateX(5px);
              animation: css-animation-fadeLeft .2s ease-out forwards;
            border-radius: 5px;
            color: #fff;
            background-size: cover;
            width: 100%;
            padding: 25px 19px;
            display: grid;
            align-items: end;
        }

        
        @keyframes css-animation-fadeLeft {
         to {
           opacity: 1;
           transform: translateX(0);
         }}

        
        .about__infobox{
            display: flex;
            align-items: center;
            justify-content: left;
        }

        .about__textbox{
            max-width: 620px;
        }

        .about__button{
            font-weight: bolder;
             margin-top: 23px;
             background-size: cover;
            background-image: url(./images/button-top.svg);
            color: #ffffff;
            font-size: 20px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 204px;
            height: 45px;
            
        }

        .about__button:hover{
         transform: all .2s;
        animation: shadow .6s infinite linear;
         background-image: none;
         background-color: #1E1E1E;
         color:#fff;
}



        .numbers{
            margin-top: 150px;
        }

        .number__container{
            display: flex;
            justify-content:stretch;
            gap: 50px;

        }

        .number__infobox{
            width: 100%;
            display: grid;
            align-content: stretch;
        }

        .numbers__map{
            max-width: 800px;
            height: 100%;
            width: 100%;
        }

        .number__linkbox{
            width: 100%;
            max-width: 700px;
        }

        .numbers__list{
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 13px;
        }




        .numbers__item{
            width: 100%;
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .number__imgbox{
            display: flex;
            justify-content: left;
            align-items: center;
            gap: 10px;
        }
        
        .numbers__link{
            font-weight: bold;
            font-size: 24px;
        }
        

        .number__local{
            padding-bottom: 8px;
        }
        
        .img-number{
            width: 14px;
            height: 14px;
        }


        @media (max-width: 1200px) {
           

             .top__ittem{ 
               padding: 17px 35px;
            }

            .top__textbox{
            max-width: 700px;
            }

           

            

            .menu{  
                grid-template-columns: 100px 176px auto 535px auto 173px 180px; 
              } 
              
            .menu__list{
                gap: 0px 30px;
            }

            
        }
        


        @media (max-width: 924px) {

            

             .top{
                background-image: url(./images/top_924.png);
                height:auto;
            }

            .top__button-call{
             display: flex;
           align-items: center;
           justify-content: center;
           background-color: #ffffff;
           color: #0385FF;
           border: 1px #0385FF solid;
            }


            

            .top__inner{
              padding-top: 50vh;
            }


            .description__box{
                padding: 48px 0;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                gap: 10px;
            }

             .description__textbox {
                margin-left: 0;

            }

            
            

            .contact__container{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 35px;
            }

            .contact__imgbox{
             grid-auto-rows: 160px 160px; 
            }

            .brend__container{
             display: flex;
             flex-direction: column;
              gap: 55px;

            }

            
         

              
            .rewievs{
                height: auto;
                margin-top: 150px;
            }

            .rewievs__container { 
                margin-top: 0px;
                display: flex;
                flex-direction: column;
                }
           .rewievs__textbox{
            margin-top: 20px; 
        }
        .rewievs__logobox{
            display: none;
            margin-top: 0px;
        }

        .rewievs__box { 
           margin-top: 55px;
        }

        .rewievs__list{
            height: auto;
        }

        .rewievs__slide-logo{
            margin-top: 20px;
        }




        .rewievs__container { 
            grid-template-areas:
              "rewievs__textbox" "rewievs__box"
               ;
       }

       .about__container{
            display: flex;
            flex-direction: column-reverse;
            gap: 15px;
        }
        
        .about__item-slide{
            height: 45vh;
        }

        .number__container{
            display: flex;
            flex-direction:column-reverse;
            gap: 50px;

        } }

      


        @media (max-width:680px){


            

            

             .top{
                 height:auto;
                background-image: url(./images/top_320.png);
            }
            .top__inner{
              padding-top: 40vh;
            }

            

            
          
                .rewievs__container { 
                    
                    grid-template-areas:
                      "rewievs__textbox" "rewievs__box"
                       ;
               }

            .about__slider{
            margin-top: 20px;
            display:inline;
            }

            .about__imgbox{
                display: none;
            }


        .brend__imgbox{
        width: 100%;
        display: grid; 
        grid-auto-columns: 1fr 1fr; 
        grid-template-rows: 1fr 1fr 1fr; 
        gap: 9px 9px; 
        grid-template-areas: 
        "brend__img-viking brend__img-mayag"
         "brend__img-whirlpool brend__img-miele"
        "brend__img-roper brend__img-amana"; 
         }
            
        }

        @media (max-width:480px){

            .block{
                padding: 0 5px;
            }

            .container{
                padding: 0 10px;
            }

            .top{
                height: auto;
                background-image: url(./images/top_320.png);
            }

              .top__button-call{
            width: 150px;
            }

            .top__button{
             width: 150px;
            }

            .top__rewiews{
                
                padding-left: 10px;
                padding-bottom: 550px;
                gap: 25px;
            }
            .top__mobile-link{
                width: auto;
                height: 110px;
            }

            .description{
                font-size: 14px;
            }

            .description__box{
                display: contents;
            }

            .description__textbox {
               margin-top: 20PX;
           
            }

             .contact__title{
             font-size:24px;
            }

            .form__box {
             max-width: 600px;
            width: 100%;
            margin-top: 35px;
            display: grid; 
            grid-auto-columns: 1fr; 
            grid-template-rows: 38px 38px 38px 38px 117px; 
            gap: 10px 10px; 
             grid-template-areas: 
            "form__name "
            "form__cod"
            "form__phone"
            " form__email"
            "form__message"; 

}



          
    
        }