@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
body{
    margin: 0;
    font-family: Montserrat;
    background-color: #F8F8F8;
}
.logo{
    width: 100px;
}
.header{
    display: flex;
    justify-content:space-between;
    width: auto;
    height: 100px;
    border-bottom: 3px solid #f36b21;
    background-color: #f36b21;
}
.menu{
    font-weight: 700;
    font-size: 20px;
    color: #F4F4F4;
    text-decoration: none;
    padding: 5px;
    text-align: center;
    
}
.menu:hover{
    color: #9B9B9B;
}
.message{
    display: flex;
    height: 25px;
    padding: 5px;
}
.main{
    display: flex;
    justify-content: space-between;
    padding: 25px;
}
.number{
    width: auto;
    background-color: #f36b21;
}
.num{
    font-size: 20px;
    color:#F4F4F4;
}
.meny{
    height: 40px;
}
.home:hover{
    transform: scale(1.1);
}
.home{
    font-size: 30px;
    transition: 1s;
}
.home1{
    color: black;
    text-align: start;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}
.button{
    display: flex;
    justify-content: center;
    background-color: #A1F87B;
    width: 270px;
    height: 50px;
    border-radius: 15px;
}
.textbutton{
    text-align: center;
    font-weight: 700;
    font-size: 30px;
    padding: 7px;
    text-decoration: none;
    color: #323232;
}
.button:hover{
    background-color: #B3F995;
}
.city{
    text-decoration: underline;
}
.punkt:hover{
    transform: scale(1.1);
}
.punkt{
    font-size: 20px;
    transition: 1s;
}
.car{
    height: 400px;
}
main{
    padding: 55px;
}
.glav{
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: black; 
}
.preim{
    transition: 1s;
    font-weight: 700;
    color: black;
    text-align: center;
    padding: 40px;
}
.paddlock{
    transition: 1s; 
    height: 50px;
}
.paddlock:hover{
    transform: scale(1.1);
}
.car1{
    height: 50px;
    transition: 1s;
}
.car1:hover{
    transform: scale(1.1);
}
.autopark{
    text-align: center;
    width: 300px;
}
.klimat{
    height: 50px;
    transition: 1s;
}
.klimat:hover{
    transform: scale(1.1);
}
.klim{
    text-align: end;
    width: 300px;
}
.glav2{
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: black;  
    padding: 20px;
}
.photo{
    height: 50px;
    transition: 1s;
}
.photo:hover{
    transform: scale(1.1);
}
.big{
    display: flex;
    flex-wrap: wrap;
}
.logotip{
    height: 50px;
    transition: 1s;
}
.logotip:hover{
    transform: scale(1.1);
}
.money{
    text-align: center;
    width: 400px;
}
.car2{
    text-align: center;
}
.glav3{
    font-weight: 700;
    font-size: 30px;
    color: black;
    text-decoration: none;
}
.glav3:hover{
    color: #4C4C4C;
}
.zal{
    width: 300px;
}
.foto{
    width: 400px;
}
.clock{
    height: 50px;
    transition: 1s;
}
.clock:hover{
    transform: scale(1.1);
}
.clock2{
    text-align: end;
    width: 400px;
}
.button2{
    display: flex;
    justify-content: center;
    background-color: #A1F87B;
    width: 270px;
    height: 50px;
    border-radius: 15px;
    text-align: center;
}
.textbutton2{
    font-weight: 700;
    font-size: 30px;
    padding: 7px;
    text-decoration: none;
    color: #323232;
}
.button2:hover{
    background-color: #B3F995;
}
footer{
    font-weight: 700;
    font-size: 15px;
    color: black;
    height: 500px;
}
.logo2{
    height: 120px;
}
.message2{
    height: 33px;
    margin: 5px;
    transition: 1s;
}
.message2:hover{
    transform: scale(1.1);
}
.phone{
    height: 20px;
}
.class2{
    text-align: center;
    font-weight: 700;
    font-size: 40px;
}
.footer{
    display: flex;
    justify-content:space-between;
    align-items:center;
    background-color: #f36b21;
    padding: 10px;
}
.contakt{
    text-align: center;
}
.k5{
    height: 150px;  
}
.k5a{
    border-style: solid;
    border-color: #f36b21;
    background-color: white;
    border-radius: 15px;
    width: 300px;
    height: 300px;
    text-align: center;
}
.avto{
    padding: 30px;
}
.cars{
    display: flex;
    justify-content: space-between;
    padding: 50px;
}
.cerato{
    height: 150px;  
}
.cerato1{
    border-style: solid;
    border-color: #f36b21;
    background-color: white;
    border-radius: 15px;
    width: 300px;
    height: 300px;
    text-align: center;
}
.honda{
    height: 150px;  
}
.honda1{
    border-style: solid;
    border-color: #f36b21;
    background-color: white;
    border-radius: 15px;
    width: 300px;
    height: 300px;
    text-align: center;
}
.rio{
    height: 150px;
}
.rio1{
    border-style: solid;
    border-color: #f36b21;
    background-color: white;
    border-radius: 15px;
    width: 300px;
    height: 300px;
    text-align: center;
    
}
.sale{
    display: flex;
    justify-content: space-between;
}
.a1{
    font-weight: 700;
    font-size: 30px;
    color: black;
    text-decoration: none;
}
.a1:hover{
    color: #4C4C4C;
}
.k5real{
    height: 500px;
    display: flex;
    justify-content: end;
}
.obratno{
    text-align: end;
}
.k51{
    display: flex;
}
.a2{
    align-items: end;
}
.ki5{
    display: flex;
    justify-content: space-between;
}
.daybuy{
    display: flex;
    justify-content: space-between;
    width: 500px;
    text-align: center;
    padding: 20px;
    background-color: #f36b21;
    height: 300px;
}
.cars1{
    display: flex;
    justify-content: space-between;
}
.sale1{
    display: flex;
    justify-content: space-between;
}
.message1{
    display: flex;
}
.contakt1{
    text-align: center;
    padding: 0px;
}
.message:hover {
    transform: scale(1.2); 
}
h2{
    transition: 1s; 
}
h2:hover {
    transform: scale(1.1); 
}
.preim:hover{
    transform: scale(1.1);
}
p{
    transition: 1s; 
}
p:hover{
    transform: scale(1.1);
}
.a2{
    transition: 1s; 
}
.a2:hover{
    transform: scale(1.1);
}
.a3{
    transition: 1s; 
}
.a3:hover{
    transform: scale(1.1);
}
iframe{
    width: 100%;
}
body{
    background:linear-gradient(#F7F7F7,#F4F4F4,#F2F2F2);
    background-size:500% 500%;
    -webkit-animation:ServiceAnimation 10s ease infinite;
    -moz-animation:ServiceAnimation 10s ease infinite;
    -o-animation:ServiceAnimation 10s ease infinite;
    animation:ServiceAnimation 10s ease infinite; 
}
@-webkit-keyframes ServiceAnimation{0%
    {background-position:90% 0}50%
    {background-position:10% 100%}100%
    {background-position:90% 0}
}
@-moz-keyframes ServiceAnimation{0%
    {background-position:90% 0}50%
    {background-position:10% 100%}100%
    {background-position:90% 0}
}
@-o-keyframes ServiceAnimation{0%
    {background-position:90% 0}50%
    {background-position:10% 100%}100%
    {background-position:90% 0}
}
@keyframes ServiceAnimation{0%
    {background-position:90% 0}50%
    {background-position:10% 100%}100%
    {background-position:90% 0}
}
hr{
	margin: 20px 0;
	padding: 0;
	height: 6px;
	border: none;
	background: linear-gradient(45deg, #333, #ddd);
}