/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@font-face {
    font-family: ufcfont;
    src: url(Sternbach.ttf);
    
   }

   h2 {
    color: darkred;
   }

   p{
    color: darkred;
   }
   

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
   font-family: ufcfont;
   
   

}

#ufc {
    width: 120px;
height: 43.674px;
-ms-flex-negative: 0;
    flex-shrink: 0;
margin-left: 79px;
margin-top: 21px;
margin-right: 197px;
}

#sataurebi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;  
    position: sticky; 
    
    
}

#list {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 63px; ;
    color: #000;
font-size: 24px;
font-style: normal;
line-height: normal;
margin-top: 31px;

}


#textebi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
}

#search {
    width: 188px;
height: 21px;
-ms-flex-negative: 0;
    flex-shrink: 0;
border-radius: 40px;
background: rgba(217, 217, 217, 0.50);
margin-left: 79px;
margin-top: 37px;
}

#searchlogo {
    width: 33px;
height: 33px;
-ms-flex-negative: 0;
    flex-shrink: 0;
margin-left: 6px;
margin-top: 31px;
}

#kaci {
    width: 24px;
height: 24px;
-ms-flex-negative: 0;
    flex-shrink: 0;
margin-left: 83px;
margin-top: 31px;
}

#pin {
    width: 24px;
height: 24px;
-ms-flex-negative: 0;
    flex-shrink: 0;
margin-top: 31px;
margin-left: 14px;
}
#cart {
    width: 24px;
height: 24px;
-ms-flex-negative: 0;
    flex-shrink: 0;
margin-top: 31px;
margin-left: 14px;
}


.container {
background-image: url(fotoebi/3846398-78160888-2560-1440.jpg);   

height: 615px;
margin-top: 55px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
background-repeat: no-repeat;
background-size:cover




}

a {
    list-style: none;
    text-decoration: none;
}






.slogan {
    width: 684px;
height: 152px;
-ms-flex-negative: 0;
    flex-shrink: 0;
font-size: 70px;
color: #FFF;
margin-left: 150px;
margin-top: 100px;
}

#menu {
    width: 48px;
height: 43.674px;
-ms-flex-negative: 0;
    flex-shrink: 0;
margin-top: 22.5px;
display: none;
  }

  #text12 {
    margin-top: 107px;
    margin-left: 83px;
    font-size: 25px;
  }

  #fotos2 {
    width: 599px;
height: 555px;
-ms-flex-negative: 0;
    flex-shrink: 0;
margin-top: 118px;
margin-left: -20px;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;

  }

  #fotos3 {
    width: 149px;
height: 158px;
-ms-flex-negative: 0;
    flex-shrink: 0;
margin-left: -20px;
margin-top: 59px;
position: relative;
top: 200px;
right: 500px;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;

  }

  #fotos4 {
    width: 149px;
height: 158px;
-ms-flex-negative: 0;
    flex-shrink: 0;
margin-left: -20px;
margin-top: 59px;
position: relative;
top: 200px;
right: 500px;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;

  }

  #top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }


  #fotos2 :hover{
-webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
        transform: scale(1.05);  }

#fotos3:hover{
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);  }

    #fotos4 :hover{
        -webkit-transform: scale(1.05);
            -ms-transform: scale(1.05);
                transform: scale(1.05);  }


        #info {
margin-top: 200px;
translate: -200px;
        }
        #info1 {
            font-size: 64px;
        }
        #info2 {
            font-size: 40px;
            margin-top: 19px;

        }
        #info3 {
          font-size: 25px; 
          margin-top: 19px;
 
        }
        #info4 {
            font-size: 30px; 
            margin-top: 19px;
   
          }
          #info5 {
            font-size: 25px; 
            margin-top: 29px;
   
          }
          #info6 {
            font-size: 33px; 
            margin-top: 19px;
            width: 131px;
            height: 66.833px;
            -ms-flex-negative: 0;
                flex-shrink: 0;
            border-radius: 5px;
            border: 1px solid #000;
            background: #FCFCFC;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
               
   
          }
          #info7 {
            font-size: 25px; 
            margin-top: 59px;
            width: 426.617px;
height: 76px;
-ms-flex-negative: 0;
    flex-shrink: 0;
border-radius: 20px;
background: #24253C;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
   
          }
 

          #footer {
            width: 100%;
        height: 430px;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        background: #E4E4E4;
        margin-top: 191px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        }
        #tbc {
            width: 69px;
        height: 58px;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        margin-top: 35px;
        margin-left: 43px;
        }
         #tbcs {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
         }
        
         #tbc1 {
            font-size: 32px;
            margin-top: 40px;
            margin-left: 5px;
        
         }
        
         #text6 {
            margin-left: 53px;
            font-size: 24px;
            margin-top: 7px;
         }
        
         #list2 {
            margin-left: 15px;
            margin-top: 44px;
            list-style: none;
            text-decoration: none;
            gap: 15px;
            font-size: 24px;
         }
         #contact {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-top: 32px;
            margin-left: 37px;
            gap: 6px
            ;
         }
        
         #help {
            margin-left: 491px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-top: 61px;
            font-weight: 800;
            font-size: 36px;
         }
          #list3 {
            margin-top: 32.5px;
            font-size: 24px;
            margin-left: 450px;
            list-style: none;
          }
          #footer3 {
            margin-left: -321px;
          }
        
          #input {
            width: 339px;
        height: 40px;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 95px;
        margin-left: 190px;
        gap: 38px;
        border-radius: 12px;
        
          }
          #box {
            width: 148px;
        height: 40px;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        border-radius: 12px;
        background: #273A47;
        text-align: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        
          }
          #menu {
            width: 48px;
        height: 43.674px;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        margin-top: 22.5px;
        display: none;
          }
        
          #text7 {
            color: #FFF;
            margin-top: 9px;
          }



          @media screen and (max-width:768px) { 


            #list2 {
                display: none;
            }
        
            #footer3 {
        position: relative;    
        right: 400px;
        }
        #footer2 {
            position: relative;
            right: 763px;
            top: 100px;
        }
        #footer3 {
            top: 100px;
            right: 813px; 
        }
        
            #text4 {
                display: none;
            }
            #text5 {
                
                padding-bottom: 150px;
                position: relative;
                top: 150px;
            }
        
            #input {
                display: none;
            }
            #menu {
                display: block;
                translate: 300px;
            
            }
            #contact {
                position: relative;
                top: 200px;
            }
            #text6 {
                white-space: pre;
            }
            #help {
                font-size: 24px;
            }
            #list3 {
                font-size: 16px;
            }
            #textebi {
                display: none;
            }
        
            #vs {
                translate: -20px
                ;
            }

            #fotos2 {
                translate: -90px;
                position: relative;
                top: 140px;
            }

            #info {
position: relative;  
right: 40px;          }
#ufc {
    translate: -40px
    ;
}
            
          }