﻿/*====================MEDIA==================*/
@media (max-width: 1400px) {
	.hero-top-title{
		font-size: 50px;
	}
}
@media (max-width: 1200px) {
	.hero-top-title{
		font-size: 40px;
	}
	.hero-top-description{
		margin-top: 20px;
		font-size: 18px;
		font-weight: 400;
	}
	.car-detail-price{
		font-size: 25px;
	}
	.car-detail-add button{
		padding: 10px 20px;
	}
	.car-description-card-img-sm{
		height: 200px;
	}
}

@media (max-width: 992px) {
	.hero-bottom-description{
		font-size: 19px;
		font-weight: 400;
	}
	.hero-bottom-description-bottom{
		font-size: 16px;
		font-weight: 400;
	}
	.btn-text{
		display: none;
	}
	.feedback-btn{
		border-radius: 50%;
		padding: 15px;
		opacity: 0.7;
	}
	.phone-icon {
		background: #0066CC;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.catalog{
		margin: 30px 0px;
		padding-top: 30px;
	}
	.work{
		margin: 70px 0px;
	}
	.work-description{
		margin-bottom: 30px;
	}
	.work-left{
		
	}
	.advantages{
		margin: 70px 0px;
	}
	.advantage-title-bottom{
		margin-bottom: 30px;
		font-size: 19px;
		font-weight: 300;
	}
	.reviews{
		margin: 70px 0px;
	}
	.reviews-title-bottom{
		margin-bottom: 30px;
		font-size: 19px;
		font-weight: 300;
	}
	.main-car-specs{
		margin-top: 30px;
	}
	.car-detail-right-wrapper{
		margin-top: 30px;
		margin-left: 0px;
	}
	.car-options-wrapper{
		margin-top: 0px;
	}
	.car-detail-price{
		font-size: 30px;
	}
	.car-detail-add button{
		padding: 15px 30px;
	}
	.car-description h2{
		width: 100%;
	}
	.car-description-card-img-sm{
		height: 225px;
	}
}

@media (max-width: 768px) {
	.hero-top-title{
		margin-top: 50px;
		font-size: 30px;
	}
	.hero-top-description{
		font-size: 15px;
	}
	.hero-midle-description{
		font-size: 16px;
		font-weight: 400;
	}
	.hero-bottom-description-bottom{
		font-size: 14px;
	}
	.hero-btn{
		padding: 16px 24px;
		font-size: 20px;
	}
	.section-button{
		padding: 16px 24px;
		font-size: 20px;
	}
	.catalog{
		margin: 20px 0px;
		padding-top: 20px;
	}
	/* .product-car-bodytype{
		margin-bottom: 10px;
	} */
	.product-car-price{
		margin-bottom: 10px;
	}
	.advantages h2{
		margin-bottom: 0px;
		font-size: 36px;
	}
	.advantage-title-bottom{
		margin-bottom: 20px;
	}
	.work h2{
		font-size: 36px;
	}
	.work-description{
		margin-bottom: 20px;
	}
	.work-left-items{
		text-align: center;
	}
	.work-left-item{
		margin-bottom: 10px;
		padding: 10px 20px;
		font-size: 15px;
		font-weight: 400;
		background: linear-gradient(90deg, rgba(0,102,204,0) 0%, #0066CC 20%, #0066CC 80%, rgba(0,102,204,0) 100%);	
	}
	.work-left-item img{
		margin-right: 5px;
		width: 24px;
		height: 24px;
	}
	.work-steps li {
		margin-bottom: 20px;
	}
	.work-right{
		margin-top: 10px;
	}
	.work-right p{
		margin-bottom: 0px;
	}
	.reviews-bottom{
		justify-content: space-around;
	}
	.home-social-icon-max {
		margin-top: 10px;
	}
	.main-car-specs-item-left img{
		width: 40px;
	}
	.main-car-specs-item-right-value{
		margin-top: 5px;
		font-size: 17px;
		font-weight: 400;
	}
	.interior-img-wrapper {
		width: 68px;
		height: 68px;
	}
	.car-description h2{
		font-size: 20px;
		font-weight: 300;
	}
	.car-description-card-value{
		padding: 10px;
	}
	.car-description-card-value h3{
		font-size: 19px;
		font-weight: 400;
	}
	.car-description-card-img-sm{
		height: 250px;
	}
	.getOffer-modal .modal-dialog {
		width: 580px;
		max-width: 580px;
	}
	.getOffer-modal .modal-content {
		width: 100%;
		padding: 20px;
	} 
}

@media (max-width: 576px) {
	.advantage-card{
		padding: 10px;
	}
	.rev-card{
		padding: 10px 0px;
	}
	.home-social-icon {
		padding: 20px;
	}
	.home-social-icon-top h3{
		font-size: 30px;
		font-weight: 300;
	}
	.main-car-specs{
		margin-top: 20px;
	}
	.car-detail-right-wrapper{
		margin-top: 20px;
	}
	.callbackModal .modal-dialog {
		width: 450px;
		margin-left: auto;
		margin-right: auto;
	}
	.getOffer-modal .modal-dialog {
		width: 540px;
		max-width: 540px;
	}
	.getOffer-modal .modal-content {
		width: 100%;
		padding: 20px;
	}
	.thankModalGetOfferModal .modal-dialog {
		width: 450px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 500px) {
	.hero-top-title{
		font-size: 28px;
	}
	.catalog h2{
		font-size: 30px;
	}
	.product-card-footer a{
		padding: 5px 40px;
	}
	.work{
		margin-top: 50px;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.work h2{
		font-size: 30px;
	}
	.work-description{
		margin-bottom: 15px;
		font-size: 16px;
	}
	.work-left-items{
		margin-bottom: 10px;
	}
	.work-steps li h3{
		margin: 0px;
		font-size: 18px;
		font-weight: 400;
	}
	.work-steps li p{
		font-size: 15px;
		font-weight: 300;
	}
	.advantages h2{
		font-size: 26px;
	}
	.advantage-title-bottom{
		font-size: 16px;
		font-weight: 400;
	}
	.reviews-bottom{
		justify-content: center;
		gap: 20px;
	}
	.adv-card-title{
		max-width: 100%;
	}
	.adv-card-text{
		max-width: 100%;
	}
	.reviews h2{
		font-size: 30px;
	}
	.reviews-title-bottom{
		font-size: 16px;
		font-weight: 400;
	}
	.trim-name{
		/* font-size: 24px;
		font-weight: 200; */
	}
	.car-description-card-value{
		padding: 8px;
	}
	.car-description-card-value h3{
		font-size: 19px;
	}
	.footer-about h3{
		font-size: 20px;
		font-weight: 300;
	}
	.footer-about p{
		font-size: 15px;
		font-weight: 400;
	}
	.footer-contact h3{
		font-size: 20px;
		font-weight: 300;
	}
	.car-detail-add-price{
		margin: 0px;
	}
	.car-detail-right-wrapper{
		padding: 20px;
	}
	.getOffer-modal .modal-dialog {
		width: 450px;
		max-width: 450px;
	}
	.getOffer-modal .modal-content {
		width: 100%;
		padding: 10px;
	}
	.getOffer-modal .form-fieldsets legend{
		margin-bottom: 10px;
		font-size: 16px;
		font-weight: 400;
	}
	.getOffer-modal div.form-check{
		padding-left: 0px;
		font-size: 14px;
		font-weight: 300;
	}
	.getOffer-modal div.form-check label{
		margin-left: 2px;
	}
	.form-inputs-wrapper label {
		margin: 0;
		font-size: 16px;
		font-weight: 400;
	}
	.thankModalGetOfferModal .modal-dialog {
		width: 370px;
	}
}

@media (max-width: 450px) {
	.hero-wrapper{
		text-align: center;
	}
	.hero-top-title{
		font-size: 22px;
	}
	.hero-top-title b{
		font-weight: 600;
	}
	.hero-top-description{
		font-size: 15px;
		font-weight: 300;
	}
	.hero-midle-items{
		/* align-items: center; */
	}
	.hero-midle-item{
		font-size: 14px;
		font-weight: 500;
	}
	.hero-midle-item img{
		margin-right: 5px;
		width: 20px;
		height: 20px;
	}
	.hero-midle-description{
		font-size: 16px;
		font-weight: 400;
	}
	.hero-bottom-description-bottom{
		font-size: 12px;
		font-weight: 400;
	}
	.hero-btn{
		margin-bottom: 10px;
		padding: 10px 6px;
		font-size: 15px;
	}
	.section-button{
		padding: 10px 6px;
		font-size: 15px;
	}
	.product-card-content{
		margin-top: 15px;
	}
	.reviews-title-bottom{
		margin-bottom: 15px;
	}
	.reviews-bottom{
		margin-top: 5px;
	}
	.reviews-bottom{
		flex-direction: column;
		justify-content: center;
	}
	.main-car-specs-item-left img{
		width: 24px;
	}
	.main-car-specs-item-right-value{
		margin-top: 3px;
		font-size: 15px;
		font-weight: 400;
	}
	.car-detail-price{
		font-size: 24px;
	}
	.car-detail-add button{
		padding: 10px 12px;
		font-size: 15px;
	}
	.car-specs-wrapper #specs-tab{
		padding: 8px 10px;
		font-size: 18px;
	}
	.car-specs-wrapper #options-tab{
		padding: 8px 10px;
		font-size: 18px;
	}
	.trim-name{
		font-size: 16px;
	}
	.car-description{
		margin-top: 60px;
	}
	.car-description h2{
		margin-bottom: 20px;
	}
	.car-description-card-img-sm{
		height: 225px;
	}
	.getOffer-modal .modal-dialog {
		width: 300px;
		max-width: 300px;
	}
	.getOffer-modal .modal-content {
		width: 100%;
		padding: 10px;
	}
	.getOffer-modal .modal-title{
		padding-bottom: 3px;
		font-size: 20px;
		font-weight: 300;
	}
	.getOffer-modal .modal-description{
		margin-top: 8px;
		margin-bottom: 8px;
		font-size: 14px;
	}
	.getOffer-modal .modal-body{
		padding: 0px;
		padding-top: 5px;
	}
	.getOffer-modal .form-fieldsets{
		display: flex;
		flex-direction: column;
		/* justify-content: space-between; */
	}
	.getOffer-modal .form-fieldsets fieldset{
		margin-bottom: 10px;
		/* justify-content: space-between; */
	}
	.getOffer-modal .form-fieldsets legend{
		margin-bottom: 1px;
		font-size: 15px;
		font-weight: 500;
	}													
	.getOffer-modal div.form-check label{
		font-size: 13px;
		font-weight: 400;
		margin-left: 2px;
	}
	.getOffer-modal .form-check input[type="radio"] {
		width: 15px;
		height: 15px;
		accent-color: #0066CC; /* цвет активной радиокнопки */
		transform: scale(0.8);  /* делает визуально меньше */
		margin-right: 2px;
	}
	.getOffer-modal .form-inputs-wrapper{
		margin-top: 0px;
	}
	.getOffer-modal .form-inputs-wrapper label {
		margin-right: 10px;
		font-size: 15px;
		font-weight: 500;
	}
	.getOffer-modal .form-inputs-wrapper input{
		padding: 5px;
	}
	.getOffer-modal .form-button{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.getOffer-modal .form-button button{
		padding: 5px 10px;
	}
	.form-button-bottom{
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;
	}
	.getOffer-modal .modal-social-wrapper {
		margin-top: 10px;
	}
	.getOffer-modal .modal-social-wrapper span{
		font-size: 14px;
	}
	.getOffer-modal .modal-social-icons{
		margin-top: 5px;
	}
	.getOffer-modal .modal-social-icons img{
		width: 32px;
		height: 32px;
	}
	.getOffer-modal .form-bottom{
		margin-top: 25px;
		text-align: center;
	}
	.thankModalGetOfferModal .modal-dialog {
		width: 350px;
	}
	.thankModalGetOfferModal .modal-header{
		padding-top: 5px;
		padding-bottom: 15px;
		font-size: 18px;
	}
	.thankModalGetOfferModal .modal-body{
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.thankModalGetOfferModal .modal-body-top{
		margin-bottom: 4px;
		font-size: 14px;
	}
	.thankModalGetOfferModal .modal-body-bottom{
		margin-bottom: 4px;
		font-size: 14px;
	}
	.thankModalGetOfferModal .modal-footer{
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.thankModalGetOfferModal .modal-footer-bottom{
		font-size: 14px;
	}
}

@media (max-width: 370px) {
	.car-detail h1{
		margin-bottom: 10px;
		font-size: 40px;
	}
	.car-detail-price{
		font-size: 20px;
	}
	.car-detail-add button{
		padding: 8px 16px;
	}
	.car-specs-wrapper #specs-tab{
		padding: 8px 0px;
		font-size: 18px;
	}
	.car-specs-wrapper #options-tab{
		padding: 8px 0px;
		font-size: 18px;
	}
	.div-for-border{
		border-top: 3px solid #dc3545;
	}
	.car-description h2{
		margin-top: 5px;
	}
	.car-description-card-value{
		padding: 5px;
	}
	.callbackModal .modal-dialog {
		width: 320px;
	}
	.thankModalGetOfferModal .modal-dialog {
		width: 320px;
	}
	
}

@media (max-width: 350px) {
	.navbar{
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.navbar.navbar-scrolled{
		padding-top: 2px;
		padding-bottom: 2px;
	}
	/* nav.navbar.fixed-top .navbar-scrolled{
		padding-top: 2px;
		padding-bottom: 2px;
	} */
	.navbar-brand img {
		width: 90px;
		height: auto;
	}
	.navbar-scrolled .navbar-brand img {
        width: 70px;
    }
	.navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
    }
	.navbar-scrolled .navbar-toggler-icon {
        width: 1em;
        height: 1em;
    }
	.footer-right{
		justify-content: center;
	}
	.car-detail-price{
		font-size: 18px;
	}
	.car-detail-add button{
		padding: 5px 10px;
	}
	.car-description-card-img-sm{
		height: 180px;
	}
	.callbackModal .modal-dialog {
		width: 300px;
	}
	.thankModalGetOfferModal .modal-dialog {
		width: 300px;
	}
}
/*====================MEDIA==================*/