html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
}
body {
  background-image: url('img/fon.jpg');
}
a.btn-primary{
  background-color: orange;
  border-color: orange;
}

.btn-group img {
width: 20px;
height: auto;
}
.offcanvas-title{
  color: orange;
}
#catalog{
    height: 600 px;
    width: 100%;
    margin-top: 200px;
}
#catalog h1{
   font-size: 20 px;
    text-transform: uppercase;
    letter-spacing: 10px;
    margin-top: 10px;
    margin-bottom: 100px;
    margin-left: 20px;
    text-align:center;
    color: white;
}
#catalog h2{
   font-size: 25 px;
    text-transform: uppercase;
    letter-spacing: 10px;
    margin-top: -50px;
    margin-bottom: 100px;
    margin-left: 20px;
    text-align:center;
    color: white;
}
.card{
  margin-bottom: 50px;
  border: solid 5px green;
}
.card img{
  height: 300px;
}
.card-body{
  text-align: center;
}
a.btn btn-primary{
  background-color: goldenrod;
}
.btn btn-primary a:hover{
  background-color: goldenrod;
}
.navbar-toggler{
  margin-right: 100px;
  border-color: green;
}
a.navbar-brand{
  color: green;
  font-weight: bold;
  font-size: 25px;
  
}
.navbar img{
  width: 120px;
  height: 120px;

}
span.navbar-text{
  font-family: Monotype Corsiva;
  color: orange;
  font-size: 40px;
}

.whatsapp-button {
    position: fixed;
    right: 13px;
    bottom: 90px;
    transform: translate(-50%, -50%);
    background: orange; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    height: 55px; /*высота кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    font-size: 35px; /*размер иконки*/
    z-index: 9999;
}

.whatsapp-button a {
    color: #fff;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid orange; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.whatsapp-button:after{
    animation-delay: .5s;
}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

@media (max-width : 800px) {  
.whatsapp-button {   
    bottom: 5px; /*отступ кнопки снизу от экрана*/
    right: 40px; /*отступ кнопки слева от экрана(right - справа)*/
  }
.navbar-text{
 margin-top: -40px;
  font-size: 20px;
  text-align: center;
}
.navbar-toggler{
  margin-left: 270px;
  margin-top: -250px;
}
.card { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; } 

}


@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;/*метод расчета размеров бокса*/
    font-family: 'Poppins', sans-serif;/*название шрифта*/
}
body {
    display: flex;/*флексбокс сетка*/
    flex-direction: column;/*направление главной оси*/
    justify-content: flex-end;/*элементы в конце контейнера*/
    min-height: 100vh;
}
footer{
    position: relative;/*относительное позиционирование*/
    width: 100%;/*на всю ширину*/
    padding: 20px 50px;/*поля для контента*/
    background: black;/*цвет футера*/
    display: flex;
    justify-content: center;/*в центре по горизонтали*/
    align-items: center;/*в центре по вертикали*/
    flex-direction: column;
    margin-top: 100px;/*отступ сверху*/
}
footer .wave{
    position: absolute;/*абсолютное позиционирование*/
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(wave.png);/*картинка волны*/
    background-size: 1000px 100px;/*ширина и высота волны*/
}
.social,
.menu{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;/*разрешен перенос на новую строку*/
}
.social li,
.menu li{
    list-style: none;/*удалить черные маркеры*/
}
.social li a {
    font-size: 2em;/*размер иконок*/
    color: #fff;/*цвет иконок*/
    margin: 0 10px;
    display: inline-block;/*отображать как строчно-блочный элемент*/
    transition: 0.5s;/*плавный переход*/
}
.menu li a {
    font-size: 1.2em;/*размер ссылок меню*/
    color: orange;/*цвет ссылок меню*/
    opacity: 0.75;/*значение прозрачности*/
    margin: 0 15px;
    text-decoration: none;/*ссылка без подчеркивания*/
    display: inline-block;
}
.menu li a:hover {
    opacity: 1;
}
footer p {
    color: green;
    text-align: center;
    margin-top: 15px;
    font-size: 1.1em;
}