:root {
            --coffee-dark: #3C2A21; /* темно-коричневый, как обжаренное кофе */
            --coffee-medium: #6c4339;
			--chocolate-red: #8A2635; /* шоколадный красный */
			--accent-red: #C41E3A; /* акцентный красный */
			
			
            --light-coffee: #e3e2df;
			--medium-coffee: #b3b2ae;
			
			
            --dark-gray: #343a40;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
        }

		.all-buttons__img {
			path {
				fill: red;
			}
			
			width: 30%
		}

        
        /* Верхняя панель */
        .top-bar {
            background-color: var(--light-coffee);
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.8rem;
            color: var(--coffee-dark);
            text-decoration: none;
        }        
        .logo span {
            color: var(--accent-red);
        }		
        .logo a:hover {
            color: var(--accent-red);
            text-decoration: none;
        } 

 
        .phone {
            font-weight: 600;
            color: var(--coffee-dark);
            font-size: 1.2rem;
        }
        
        .social-icons a {
            color: var(--chocolate-red);
            font-size: 1.2rem;
            margin-left: 15px;
            transition: color 0.3s;
        }
        
        .social-icons a:hover {
            color: var(--accent-red);
            text-decoration: none;
        }
        


        /* Навигация */
        .navbar-custom {
            background-color: var(--chocolate-red);
            padding: 0;
            position: relative;
        }
        
        .navbar-custom .navbar-nav .nav-link {
            color: white !important;
            font-weight: 500;
            padding: 15px 20px;
            transition: all 0.3s;
        }
        
        .navbar-custom .navbar-nav .nav-link:hover {
            background-color: var(--accent-red);
            color: white;
        }
        
        /* Контейнер для кнопки меню */
        .navbar-toggler-container {
            display: flex;
            justify-content: center;
            width: 100%;
            padding: 10px 0;
        }
        
        .navbar-toggler {
            border-color: rgba(255,255,255,0.5);
            order: 1; /* Помещаем кнопку в контейнере */
        }
        
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        
        /* Start Slider */
        .slider-container {
            background-color: var(--light-coffee);
            padding: 60px 0 100px; /* Увеличили нижний отступ для кнопок */
            position: relative;
        }
        
        .swiper {
            width: 100%;
            height: 400px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .swiper-slide {
            display: flex;
            background-color: white;
        }
        
        .slide-content {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .slide-image {
            flex: 1;
            background-size: cover;
            background-position: center;
        }
        
        .slide-title {
            color: var(--coffee-dark);
            font-weight: 700;
            margin-bottom: 20px;
        }
        
        .slide-features {
            list-style: none;
            padding: 0;
            margin-bottom: 25px;
        }
        
        .slide-features li {
            padding: 5px 0;
            position: relative;
            padding-left: 25px;
        }
        
        .slide-features li:before {
            content: "✓";
            color: var(--accent-red);
            font-weight: bold;
            position: absolute;
            left: 0;
        }
        
        .btn-coffee {
            background-color: var(--chocolate-red);
            color: white;
            border: none;
            padding: 10px 25px;
            font-weight: 600;
            border-radius: 5px;
            transition: background-color 0.3s;
            align-self: flex-start;
        }
        
        .btn-coffee:hover {
            background-color: var(--accent-red);
            color: white;
            text-decoration: none;
        }
        
        /* Стили для навигации слайдера внизу */
        .swiper-navigation-bottom {
            position: absolute;
            bottom: 30px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            z-index: 10;
        }
        
        .swiper-button-custom {
            width: 50px;
            height: 50px;
            background-color: white;
            border: 2px solid var(--coffee-medium);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--coffee-dark);
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s;
            margin: 0 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        
        .swiper-button-custom:hover {
            background-color: var(--accent-red);
            color: white;
            border-color: var(--accent-red);
            transform: translateY(-2px);
        }
        
        .swiper-button-disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        
        .swiper-button-disabled:hover {
            background-color: white;
            color: var(--coffee-dark);
            border-color: var(--coffee-medium);
            transform: none;
        }
        /* End Slider */





    /* Start Hero Section */
	.hero-section {
		background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../img/hero1.jpg');
		background-size: cover;
		background-position: center;
		color: white;
		padding: 100px 0;
		text-align: center;
	}
	
	.hero-section h1 {
		font-size: 3rem;
		font-weight: 700;
		margin-bottom: 20px;
	}
	
	.hero-section p {
		font-size: 1.2rem;
		max-width: 700px;
		margin: 0 auto 30px;
	}

	@media (max-width: 768px) {
		.hero-section h1 {
			font-size: 2.2rem;
		}
		.hero-section {
			padding: 70px 0;
		}
	}
    /* End Hero Section */




        
	/* Контент под слайдером */
	.content-section {
		background-color: var(--light-coffee);
		padding: 60px 0;
	}
	
	.section-title {
		color: var(--coffee-dark);
		position: relative;
		text-align: center;
		padding-bottom: 0px;
		margin-bottom: 30px;
	}

	.section-title p {
		text-align: center;
		margin: auto;
		padding-bottom: 0px;
		color: var(--accent-red);
	}

/*
	.section-title:after {
		content: "";		
		position: absolute;
		bottom: 0;
		left: 0;
		width: 80px;
		height: 3px;
		background-color: var(--accent-red);
	}
*/        
	.service-card {
		background-color: white;
		border: 1px solid var(--medium-coffee);
		border-radius: 8px;
		padding: 25px;
		margin-bottom: 0px;
		transition: transform 0.3s, box-shadow 0.3s;
		height: 100%;
	}
	
	.service-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0,0,0,0.05);
	}
	
	.service-icon {
		color: var(--chocolate-red);
		font-size: 2.5rem;
		margin-bottom: 20px;
	}




















        



	/* Start Footer */
	.footer {
		background-color: #2C2C2C;
		color: #ddd;
		padding: 3rem 0 1.5rem;
	}
	
	.footer h5 {
		color: white;
		margin-bottom: 1.5rem;
	}
	
	.footer a {
		color: #ddd;
	}
	
	.footer a:hover {
		color: var(--secondary-color);
		text-decoration: none;
	}
	/* End Footer */
	
	
	/* Start Footer Bottom */	
	.footer-bottom {
		background-color: var(--light-coffee);
		padding-top: 2rem;
		padding-bottom: 2rem;
        }
	/* End Footer Bottom */	        
 
 
 
       /* Адаптивность */
        @media (max-width: 992px) {
            .swiper-slide {
                flex-direction: column;
            }
            
            .slide-content, .slide-image {
                width: 100%;
            }
            
            .slide-image {
                height: 250px;
            }
            
            .swiper {
                height: auto;
            }
        }
        
        @media (max-width: 768px) {
            .top-bar .phone, .top-bar .logotype, .top-bar .social-icons {
                text-align: center;
                margin-top: 10px;
            }

            .top-bar .small {
                text-align: center;
                margin-bottom: 10px;
            } 
 
            .slide-content {
                padding: 25px;
            }
            
            .swiper-button-custom {
                width: 45px;
                height: 45px;
            }
            
            /* Стили для мобильного меню */
            .navbar-custom .container {
                display: flex;
                flex-direction: column;
                padding: 0;
            }
            
            .navbar-toggler-container {
                order: 1;
                display: flex;
                justify-content: center;
                width: 100%;
                padding: 12px 0;
            }
            
            .navbar-collapse {
                order: 2;
            }
        }
        
        @media (max-width: 576px) {
            .swiper-navigation-bottom {
                bottom: 20px;
            }
            
            .swiper-button-custom {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
        }




		
/* Стили для модального окна с формой телефона */
#phoneModal .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
}

#phoneModal .modal-header {
    border-bottom: 2px solid rgba(255,255,255,0.1);
}

#phoneModal .modal-body {
    padding: 1.5rem 2rem;
}

#phoneModal .modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 1rem 2rem;
}

#phoneModal .form-control-lg {
    height: calc(2.5em + 1rem);
    font-size: 1.1rem;
    border: 2px solid #dee2e6;
    transition: all 0.3s;
}

#phoneModal .form-control-lg:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

#phoneModal .form-control-lg.is-valid {
    border-color: #28a745;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

#phoneModal .form-control-lg.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}

#phoneModal .custom-control-label a {
    text-decoration: none;
    border-bottom: 1px dashed #007bff;
    transition: all 0.2s;
}

#phoneModal .custom-control-label a:hover {
    border-bottom: 1px solid #007bff;
}

#phoneModal #submitBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Анимация для кнопки отправки */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

#phoneModal #submitBtn:hover:not(:disabled) {
    animation: pulse 0.5s;
}













	/* Styles for the floating button */
	.floating-button {
		position: fixed;
		bottom: 20px;
		right: 20px;
		background-color: #ff0000; /* Red color */
		color: white;
		padding: 10px 20px;
		border-radius: 30px; /* Rounded corners */
		display: flex;
		align-items: center;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		transition: background-color 0.3s ease;
		z-index: 1000;
	}

	/* Link for clicking on the button */
	.floating-button a {
		display: flex;
		align-items: center;
		text-decoration: none;
		color: white;
	}

	/* Phone icon before the number */
	.floating-button img {
		width: 24px; /* Adjust icon size */
		height: 24px;
		margin-right: 0px;
	}

	/* Style for phone number text */
	.floating-button span {
		font-size: 18px;
		font-weight: bold;
	}

	/* Hover effect for the button */
	.floating-button:hover {
		background-color: #ff0000;
	}
	
	
	
	#brands {
		padding: 60px 0;
		
	}
	#brands .brands-wrap {
		border-top: 1px solid #d6eaff;
		border-left: 1px solid #d6eaff;
		margin-bottom: 30px;
	}

	#brands .brand-logo {
		padding: 34px;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		border-right: 1px solid #d6eaff;
		border-bottom: 1px solid #d6eaff;
		overflow: hidden;
		background: #fff;
		height: 160px;
	}

	#brands img {
		transition: all 0.4s ease-in-out;
	}