:root {
	--accent: #dbad76;
	--text: #000000;
	--regular-text: 16px;
	--lineheight: 1.65;
	/* --userfont: roboto-st, sans-serif; */
	--userfont: SF Pro Display, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* BOOTSTRAP SETTINGS SECTION */

/* gutter 20px (10px + 10px). Comment this code for default gutter start at 1.5rem (24px) wide. */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	--bs-gutter-x: .625rem;
}

.row,
.row>* {
	--bs-gutter-x: 1.25rem;
}

/* FONTS LOAD SECTION */
@import url('https://fonts.cdnfonts.com/css/sf-pro-display');

@font-face {
	src: url("../fonts/roboto-regular-webfont.woff2") format("woff2");
	font-family: "roboto-st";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	src: url("../fonts/roboto-italic-webfont.woff2") format("woff2");
	font-family: "roboto-st";
	font-weight: 400;
	font-style: italic;
}

@font-face {
	src: url("../fonts/roboto-bold-webfont.woff2") format("woff2");
	font-family: "roboto-st";
	font-weight: 700;
	font-style: normal;
}

@font-face {
	src: url("../fonts/roboto-bolditalic-webfont.woff2") format("woff2");
	font-family: "roboto-st";
	font-weight: 700;
	font-style: italic;
}

/* GENERAL CSS SETTINGS */

::placeholder {
	color: #666;
}

::selection {
	background-color: var(--accent);
	color: #fff;
}

input,
textarea {
	outline: none;
}

input:focus:required:invalid,
textarea:focus:required:invalid {
	border-color: red;
}

input:required:valid,
textarea:required:valid {
	border-color: green;
}
body, html {
            height: 100%;
        }
body {
	font-family: var(--userfont);
	font-size: var(--regular-text);
	line-height: var(--lineheight);
	color: var(--text);
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
}

/* USER STYLES */
.breadcrumb {
	font-size: 13px;
}
.accordion-button:focus {
	z-index: 3;
	border-color: #86b7fe;
	outline: 0;
	box-shadow: none;
	/* Убираем box-shadow при фокусе */
}

.btn-close:focus {
	box-shadow: none;
	/* Также убираем box-shadow для кнопки закрытия при фокусе */
}
.section {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* height: 100vh; */
	/* position: relative; */
	text-align: center;
}
.site-content {
        flex: 1;
    }
    footer {
        flex-shrink: 0;
    }
.fp-slide {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 100vh;
	position: relative;
	/* text-align: center;  */
}

.center-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.center-links {
	text-align: center;
	top: 80%;
	position: absolute;
}

.center-links a {
	margin: 10px;
	display: inline-block;
	width: 250px;
}

h2 {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 1s ease-out forwards;
	font-size: 50px;
	position: absolute;
	top: 160px;
	margin: 25px;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}





.but-accent {
	background: #1e1e1e;
	color: #fff;
}

.but-primary {
	background: #d7dadd;
	color: #000;
}

.buttons p {
	padding-top: 20px;
	max-width: 500px;
	text-align: center;
	font-size: 13px;
}



.text-muted {
	color: #fff !important;
}


.footer {
	text-align: center;
	padding: 20px;
	background-color: #1e1e1e;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
	background-color: white;
}

.center-content p {
	font-size: 26px;
	position: absolute;
	top: 35%;
}

.option {
	font-size: 1.15em;
	font-weight: 700;
	padding-bottom: 8px;
}

.option-text {
	font-size: 16px;
	line-height: 16px;
}






#chatIcon {
	position: fixed;
	bottom: 20px;
	right: 20px;
	cursor: pointer;
	animation: pulse 1s infinite;
	color: green;
}
@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
#menu {
	position: fixed;
	top: 0;
	left: 0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin: 0;
}

#menu li {
	display: inline-block;
	margin: 10px;
	color: #000;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.fp-slide p {
	max-width: 50rem;
	line-height: 22px;
}

video {
	width: 100%;
}

.video-slide {
	position: relative;
	overflow: hidden;
}

.video-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* чтобы видео заполнило всю ширину и высоту блока */
}

.text-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	/* цвет текста */
}

.text-overlay h1,
.text-overlay p {
	margin: 0;
}

#car-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#color-slider {
	display: flex;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.color-option {
	width: 50px;
	height: 50px;
	margin: 0 10px;
	cursor: pointer;
	border-radius: 50%;
}


/* Добавьте стили для каждого цвета */
.silver {
	background-color: #d9dad9;
}

.gray {
	background-color: #62646a;
}

.black {
	background-color: #313235;
}

.golden {
	background-color: #d0c4b4;
}

.blue {
	background-color: #879cb5;
}

.green {
	background-color: #4e675c;
}

.red {
	background-color: #bd2626;
}

.purle {
	background-color: #7d5a88;
}

.mt-8 {
	margin-top: 8rem;
}

.mt-10 {
	margin-top: 10rem;
}

.m-6 {
	margin: 5rem;
}

.fp-tableCell {
	display: block !important;
}

.text-left {
	text-align: left !important;
}

.btn:focus {
	outline: none;
	box-shadow: none;
}

.navbar-toggler:focus {
	box-shadow: none;
}


.border-left {
	border-left: 2px solid #d7d9db;
	padding-left: 15px;
}

.modal-header {
	border-bottom: none;
	color: #fff;
}

.modal-content {
	width: 100%;
	max-width: 460px;
	padding: 15px;
	background: #1c1e21;
	border-radius: 10px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}

.input_name {
	height: 50px;
	border: 1px solid #282a2e;
	border-radius: 5px;
	width: 100%;
	background: url("../images/user.png") center left 15px no-repeat, #1c1e21;
	background-size: auto, auto;
	background-size: 20px;
	margin-bottom: 20px;
	padding: 0 15px 0 59px;
	font: 16px "Roboto", sans-serif;
	color: #fff;
	transition: 0.3s;
}

.input_tel {
	height: 50px;
	border: 1px solid #282a2e;
	border-radius: 5px;
	width: 100%;
	background: #1c1e21;
	background-size: auto, auto;
	background-size: 20px;
	margin-bottom: 20px;
	padding: 0 15px 0 59px;
	font: 16px "Roboto", sans-serif;
	color: #fff;
	transition: 0.3s;
}
.iti.iti--allow-dropdown {
  width: 100%;
}
.iti__country-name {
  color: #000;
}
.contact-form__input_textarea {
  height: 100px;
  border: 1px solid #282a2e;
  border-radius: 5px;
  width: 100%;
  background: url("../images/message.png") center left 15px no-repeat, #1c1e21;
  background-size: auto, auto;
  background-size: 20px;
  margin-bottom: 20px;
  padding: 10px 15px 0 59px;
  font: 16px "Roboto", sans-serif;
  color: #fff;
  transition: 0.3s;
}

.modal-footer {
	padding: 0;
	border-top: none;
}

.title::after {
	content: "";
	position: absolute;
	top: 115px;
	left: 0;
	width: 51px;
	height: 1px;
	background-color: #dbad76;
	margin-left: 48px;
}

.desc {
	width: 450px;
	font-size: 17px;
	line-height: 17px;
}

.overlay-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4); /* Затемнение с использованием полупрозрачного черного цвета */
	z-index: 1; /* Помещаем затемненный оверлей выше фонового изображения */
  }
  
  .container-xx {
	position: relative;
	z-index: 2; /* Помещаем контент над затемненным оверлеем */
  }
  .section {
	position: relative;
  }
  .row {
	margin-bottom: 0; /* Добавьте это для устранения отступа вниз */
  }


	.preloader {
		position: relative;
		margin: 0 0 0 45%;
		height: 15px;
		visibility: hidden;
		opacity: 0;
		display: none;
		transition: 0.3s; }
		.preloader_active {
			display: block;
			visibility: visible;
			opacity: 1;
			transition: 0.3s; }
		.preloader:before {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			content: "";
			position: absolute;
			background: #393e46;
			animation: preloader_before 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1); }
		.preloader:after {
			width: 12px;
			height: 12px;
			left: 15%;
			border-radius: 50%;
			content: "";
			position: absolute;
			background: #5f646c;
			animation: preloader_after 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1); }
	
	@keyframes preloader_before {
		0% {
			transform: translateX(0px) rotate(0deg); }
		50% {
			transform: translateX(160px) scale(1.5) rotate(264deg);
			background: #00adb5;
			border-radius: 0; }
		100% {
			transform: translateX(0px) rotate(0deg); } }
	@keyframes preloader_after {
		0% {
			transform: translateX(0px) rotate(0deg); }
		50% {
			transform: translateX(-160px) scale(1.5) rotate(-264deg);
			background: #00fff5;
			border-radius: 0; }
		100% {
			transform: translateX(0px); } }
	@media (max-width: 768px) {
		.form-wrapper {
			padding: 15px; } }
	@media (max-width: 480px) {
		.contact-form {
			padding: 30px 15px; }
		.contact-form__title {
			font-size: 16px; } }

        .contact-form__message {
    	text-align: center; 
        }

		.text-pop {
			font-size: 30px;
  		    line-height: 32px;
		}
		.text-pop span {
			display: block;
			color: #16d;
		}
		
		.special-offers {
            display: flex;
            justify-content: left;
            gap: 20px;
            padding: 20px 1px;
            overflow-x: auto;
        }
        .car-card {
            flex: 0 0 32%;
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
            text-align: left;
            transition: all 0.3s ease;
        }
        
        .car-card:hover {
            background: none;
        }

        .image-container {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .image-container img {
            max-width: 100%;
            border-radius: 10px;
            cursor: pointer;
        }

        .btn-details {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
        }

        .image-container:hover .btn-details {
            display: block;
        }

        .badges {
            position: absolute;
            top: 10px;
            display: flex;
            gap: 5px;
            background: rgba(255, 255, 255, 0.8);
            padding: 5px 0px;
            border-radius: 5px;
        }

        .badge-custom {
            background-color: #eee;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
        }

        .car-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .car-title a {
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
            color: #000;
        }

        .car-info {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            margin-top: 10px;
            text-align: center;
            border-top: 1px solid #eaeaee;
            padding-top: 15px;
        }

        .car-info div {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: left;
        }

        .car-info span:first-child {
            font-weight: normal;
            color: #666;
        }

        .car-info span:last-child {
            font-weight: bold;
        }

        .price-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            border-top: 1px solid #eaeaee;
            padding-top: 15px;
        }

        .price-block {
            display: flex;
            flex-direction: column;
        }

        .price-info {
            font-weight: bold;
        }

        .old-price {
            text-decoration: line-through;
            color: #888;
            font-size: 14px;
        }
		
	
		
	
		
		
	
		
.elec-txt {
  font-size: 12px;
  line-height: 14px;
  color: #555555;
  position: relative;
  padding-left: 60px;
  margin-bottom: 20px;}	
  
 .elec-txt::after {
  content: '';
  position: absolute;
  left: 0;
  width: 40px;
  height: 1px;
  background: #9A9A9A;
  border-radius: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
} 

/*BUTTONS*/

.learn-more {
  width: 245px;
  height: auto;
}
.learn-more {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.learn-more .circle {
  transition: all .45s cubic-bezier(.65,0,.076,1);
  position: relative;
  display: block;
  margin: 0;
  width: 55px;
  height: 55px;
  background: #16d;
  border-radius: 35px;
}
.learn-more .circle .icon {
  transition:all .45s cubic-bezier(.65,0,.076,1);
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  background:#fff
}
.learn-more .circle .icon.arrow {
  transition: all .45s cubic-bezier(.65,0,.076,1);
  left: 14px;
  width: 1.125rem;
  height: .125rem;
  background: none;
}
.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: '';
  top: -.25rem;
  right: .0625rem;
  width: .625rem;
  height: .625rem;
  border-top: .125rem solid #fff;
  border-right: .125rem solid #fff;
  transform: rotate(45deg);
}
.learn-more .button-text {
  transition: all .45s cubic-bezier(.65,0,.076,1);
  position: absolute;
  top: 0;
  left: 70px;
  width: max-content;
  bottom: 0;
  margin: auto 0;
  height: max-content;
  font-size: 16px;
  line-height: 140%;
  color: #16d;
}
.learn-more:hover .circle {
  width:100%!important
}
.learn-more:hover .circle .icon.arrow {
  background:#fff;
  transform:translate(1rem,0)
}
.learn-more:hover .button-text {
  color:#fff
}


.liders-cars {
  width: max-content;
  display: flex;
  justify-content: end;
  padding: 0 20px;
}
.liders-cars.learn-more {
  width: 245px;
  height: auto;
}
.liders-cars.learn-more {
  display: inline-block;
}
.liders-cars.learn-more .button-text {
  color: #2b3244;
  margin-right: 50px;
}

.learn-more.liders-cars .circle {
  background: #2b3244;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  width: 45px;
  height: 45px;
}

.learn-more.liders-cars .circle .icon.arrow {
  left: 9px;
}

.liders-cars.learn-more:hover .circle {
  width: 85% !important;
}
.liders-cars.learn-more:hover .button-text,
.liders-cars.learn-more:focus .button-text {
  color: #fff;
  transform: translateX(25px);
}

.button-block-main a{
    text-decoration: none;
}         
             
.button-block-main {
  margin-top: 22px;
}
.button-block-main {
  display: flex;
  align-items: center;
  margin-top: 25px;
}

.button-primary {
  background: #2b3244;
  border-radius: 100px;
  font-size: 14px;
  line-height: 17px;
  color: #FFFFFF;
  width: 50%;
  padding: 15px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  text-align: center;
  height: 40px;
  transition: all .4s ease;
}
.button-primary:hover {
  background: #2B3244;
}
.button-primary:hover,
.button-primary-banner:hover {
  background: #003E96;
  color: #fff;
}
.button-dark {
  font-size: 14px;
  line-height: 17px;
  color: #1166DD;
  border: 1px solid #1166DD;
  border-radius: 100px;
  padding: 15px 20px;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.button-dark:hover,
.button-light:hover {
  border: 1px solid #2b3244;
  color: #fff;
  background: #2b3244;
}
.button-light {
  font-size: 14px;
  line-height: 17px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 100px;
  padding: 15px 20px;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
.button-primary-banner {
  background: #2b3244;
  border-radius: 100px;
  font-size: 14px;
  line-height: 17px;
  color: #FFFFFF;
  width: 50%;
  padding: 15px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  text-align: center;
  height: 50px;
  transition: all .4s ease;
}
/*END BUTTONS*/


/* Стили для изменения цвета индикаторов карусели */
.carousel-indicators {
  top: auto;
  bottom: 115px; /* Переместите индикаторы вниз */
}


.carousel-indicators [data-bs-target] {
  background-color: #1166dd; /* Задаем цвет индикаторов */
}

/* Стили для изменения цвета стрелок навигации */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none; /* Убираем стандартные стрелки */
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  content: ''; /* Создаем новое псевдоэлементное содержимое */
  display: inline-block;
  width: 20px; /* Размер стрелки */
  height: 20px; /* Размер стрелки */
  background: #1166dd; /* Цвет фона стрелки */
  clip-path: polygon(100% 0, 0 50%, 100% 100%); /* Форма стрелки */
}

/* Отражаем стрелку "вперед" */
.carousel-control-next-icon::after {
  transform: scaleX(-1);
}
.carousel-caption {
	top: 70%;
  width: 60%;
  text-align: left;
  margin-left: auto;
	border-bottom: 2px solid #efefef;
}
.carousel-item img {
  transform: translateY(-50px); /* Поднимает изображение на 50px выше */
}
.auto_cat {
	font-size: 12px;
  color: #555;
}
.auto_model a {
	font-size: 22px;
  line-height: 22px;
  color: #2b3244;
  transition: all .4s ease;
	text-decoration: none;
}
a:hover {
	color: #0a58ca;
}
.auto_model_link {
	text-decoration: none;
	color: #2b3244;
}
h1 {
	font-size: 3rem;
}


		/*MEGA MENU*/
		/* Стили для десктопной версии */
		.navbar {
			z-index: 1050;
			
		}
        .navbar-light {
            box-shadow: 0 4px 4px rgba(0,0,0,.05);
            margin-bottom: 20px;
        }
		.navbar-toggler {
			z-index: 1060;
			/* Убедитесь, что кнопка над оверлеем */
		}

		.operating_mode {
			font-size: 11px;
		}
		.navbar-dark .operating_mode {
			color: white;
		}

		/* Стили для мобильной версии */
		@media (max-width: 991px) {
			.navbar-collapse.fullscreen {
				position: fixed;
				top: 56px;
				/* Высота навигационной панели */
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(255, 255, 255, 0.9);
				z-index: 1040;
				overflow-y: auto;
				padding: 2rem 3rem;
				/* Дополнительный отступ сверху */
			}
            .navbar-dark .navbar-collapse.fullscreen {
                background: black;
            }
			.overlay {
				display: none;
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 1030;
			}
            
			.overlay.show {
				display: block;
			}

			/* Стиль для 'крестика' кнопки меню */
			.navbar-toggler.toggler-close .navbar-toggler-icon {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586l6.293-6.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
			}
			/* Стиль для 'крестика' кнопки меню в navbar-dark */
            .navbar-dark .toggler-close .navbar-toggler-icon {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586l6.293-6.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
            }
            .navbar-toggler-icon {
              width: 1em;
              height: 1em;
              background-size: 75%;
            }
			.center-links {
			    top: 35%;
			}
			.overlay-bg h4 {
			    position: absolute;
			    top:15%;
			}
			.desc {
			    position: absolute;
			    top:20%;
			}
			
		}
		@media (min-width: 992px) {
			.navbar .dropdown-menu.mega-menu {
				position: fixed;
				top: 56px;
				/* Высота вашей навигационной панели */
				left: 0;
				right: 0;
				width: 100vw;
				height: 255px;
				/* Высота экрана минус высота навигационной панели calc(100vh - 56px)*/
				display: none;
				background: rgba(255, 255, 255);
				/* Фон с небольшой прозрачностью */
				z-index: 1020;
				overflow-y: auto;
				/* Добавить прокрутку если контент выходит за пределы экрана */
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.navbar .dropdown:hover .dropdown-menu.mega-menu {
				display: block;
			}

			/* Скрыть выпадающее меню для мобильных устройств */
			.navbar .dropdown-menu.mega-menu.d-lg-none {
				display: none;
			}
		}

		.dropdown-menu.show {
			background-color: rgba(255, 255, 255);
			border: none;
			padding: 30px 10px;

		}

		.models>img {
			max-width: 220px;
			height: auto;
			width: 100%;
		}
			.title-medels {
		font-weight: bold;
		font-size: 19px;
	}

		.mnu-row ul {
			display: inline-flex;
		}

		.mnu-row li {
			list-style-type: none;
		}

		.mnu-row a {
			padding: 10px;
			color: #000;
			font-size: 13px;
		}

		.border-left {
			border-left: 2px solid #d7d9db;
			padding-left: 15px;
		}
		/* Стили для иконок социальных сетей */
    /* Стили для социальных иконок */
    .social-icons {
        display: flex; /* Задаём flexbox для контейнера */
        align-items: center; /* Центрируем иконки по вертикали */
        justify-content: start; /* Выравниваем иконки в начале контейнера */
        padding: 0; /* Убираем стандартные отступы */
        list-style: none; /* Убираем стандартные стили списка */
    }
    .social-icons .nav-link {
        margin-right: 15px; /* Отступы справа для иконок */
        transition: color 0.3s; /* Плавное изменение цвета иконок */
    }
    /* Стили для изменения размера и цвета иконок */
    .social-icons .fab {
        font-size: 24px; /* Увеличенный размер иконок */
    }
    /* Стили для цвета иконок при наведении */
    .social-icons .nav-link:hover .fa-instagram { color: #E4405F; }
    .social-icons .nav-link:hover .fa-telegram-plane { color: #0088cc; }
    .social-icons .nav-link:hover .fa-weixin { color: #7bb32e; }
    .social-icons .nav-link:hover .fa-whatsapp { color: #25D366; }

    .navbar-dark .nav-link {
        color: white;
    }
    /* Для остальных шаблонов */
    .navbar-light .nav-link {
        color: black;
    }
    .text-agreement {
        font-size: 12px;
          line-height: 16px;
          padding: 0 25px;
          color: #fff;
    }
    

.floating-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    
}

.floating-button {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}
.floating-buttons a{ 
    color: #000000;
}
.floating-button.hidden {
    display: none;
}

.floating-button:hover {
    background-color: #f0f0f0;
}

@media (max-width: 768px) {
    .floating-buttons {
        bottom: 20px;
        right: 10px;
        
    }

    .floating-button {
        width: 50px;
        height: 50px;
    }

    .floating-button svg {
        width: 20px;
        height: 20px;
    }

    
}
/*---===START CALC===---*/
.calc {padding: 30px 0;}
.calc h3 {padding-bottom: 25px;}
.result { padding: 15px; background: #f0f8ff; border-radius: 8px; display: flex; flex-direction: column;}
.oblique {font-size: 15px; line-height: 1.3; font-style: italic;}
.result-bottom { width: 100%; margin-top: auto; display: flex; justify-content: space-between; text-align: center; border-top: 1px solid #8e939d4d; padding-top: 17px}
.result-bottom p { margin: 0; padding: 0 80px; display: flex; flex-direction: column; align-items: center; }
.result-bottom span.label { font-size: 12px; color: gray; }
    /* Стили для увеличенного слайдера */
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 10px;

border-radius: 5px;
outline: none;
opacity: 0.9;
transition: opacity .15s ease-in-out;
}
input[type=range]:hover {
opacity: 1;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #0d6efd;
border: 3px solid white;
border-radius: 50%;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 20px;
height: 20px;
background: #0d6efd;
border: 3px solid white;
border-radius: 50%;
cursor: pointer;
}
.label-text {font-size: 12px;font-weight: bold;}
@media (max-width: 768px) {
.d-flex { flex-direction: column; align-items: center; }
.ms-4 { margin-left: 0 !important; margin-top: 20px; }
.result { width: 100%; text-align: center; }
}
/*---===END CALC===---*/