@media (max-width: 259px) {body{display:none;};}
/* LEFT MENU */
nav#contacts_left-menu {height: 100%; width: 80px; background: var(--black); z-index: 6; position: fixed;
    transition: left .8s ease-in-out; left: -80px; 
	overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none;}
    nav#contacts_left-menu::-webkit-scrollbar {width: 0px; display:none;}
section.contacts_left-menu { left: 80px; top: 0; opacity: 0; height: 100vh; width:0px;
    transition: all .3s ease-in-out; overflow-x: hidden; position: fixed; z-index: 1; 
    background: var(--dark-blue3); padding-top: 122px; }
@media (min-width: 1024px) {
    header#pc_header.short + main#main_content aside nav section {padding-top: 50px;}
    nav#contacts_left-menu.show {left: 0;}
    nav#contacts_left-menu ul {width: 80px; position: relative; z-index: 6;
        display: flex;flex-direction: column; margin-bottom: 122px;}
    header#pc_header.short + main#main_content aside nav#contacts_left-menu ul {margin-bottom: 50px;}
    nav#contacts_left-menu li {width: 80px;height: 90px;border-bottom: 1px solid var(--black2);
        position: relative; z-index: 6;
        transition: background .2s ease-in-out;display: flex;align-items: center;justify-content: center;}
    nav#contacts_left-menu a.icon {width: 80px;height: 90px;
        background: none;opacity: .7; transition: opacity .2s linear;}
    nav#contacts_left-menu li:hover {background: var(--dark-blue3); cursor: pointer;}
    nav#contacts_left-menu li:hover section.contacts_left-menu {width: 350px; opacity: 1;}
    nav#contacts_left-menu li:hover a {opacity: 1;}
    nav#contacts_left-menu li section.contacts_left-menu p {min-width: 320px; min-height: 90px; margin-left: 30px;
        display: flex; align-items: center; line-height: 30px;
        font-size: 22px;opacity: 0;
        transition: opacity .3s linear; letter-spacing: 1px;
        text-transform: uppercase;color: var(--white);}
    nav#contacts_left-menu li:hover section.contacts_left-menu p {opacity: 1;}
    nav#contacts_left-menu li section.contacts_left-menu ul {overflow-y:auto; overflow-x: hidden;
        width: 320px;margin-left: 10px; max-height: calc(100vh - 280px);}
    nav#contacts_left-menu li section.contacts_left-menu ul::-webkit-scrollbar {width: 7px;}
    nav#contacts_left-menu li section.contacts_left-menu ul::-webkit-scrollbar-track {
        background: var(--dark-blue3);}
    nav#contacts_left-menu li section.contacts_left-menu ul::-webkit-scrollbar-thumb {
        background-color: var(--white2);}
    nav#contacts_left-menu li section.contacts_left-menu ul li {
        min-width: 320px;height: auto;border-bottom: none;}
    nav#contacts_left-menu li section.contacts_left-menu ul li a {
        width: calc(100% - 70px);margin-left: 10px;padding: 6px 20px; color: var(--grey2);font-size: 14px;
        line-height: 20px;border-bottom: 1px solid var(--white3);transition: all .2s ease-in-out;}
    nav#contacts_left-menu li section.contacts_left-menu ul li:hover a {
        color: var(--white); background: var(--dark-blue2);}
}
/* CONTACTS */
@media (min-width: 1024px) {
div#footer_copyrights {transform:translateY(-3px);}
div.breadcrumbs ol {padding: 25px 80px;}}
main#main_content footer {padding-top:10px; min-height:unset;}

@media (min-width: 1200px) {
	div#contacts_wrapper {width:1000px; margin-left:calc(50% - 500px);}
}

@media (min-width: 680px) and (max-width: 1023px) {
	section#contacts {background-size: 120%;}
	div#footer_copyrights {transform:translateY(-14px);}
}

@media (min-width: 260px) and (max-width: 679px) {
	section#contacts form input {width: 100%; margin: 15px;}
	section#contacts form textarea {min-width: unset; max-width: unset; width: 100%; margin: 15px;}
	div#contacts_background {display:none;}
	main#main_content footer {padding-top: 0px;}
	div#footer_copyrights {padding:20px 0;}
}

section#contacts {
    width: 100%;
}

#main_content .container {
    max-width: 1444px;
    margin: 0 auto;
    padding-left: 80px;
}

div.breadcrumbs {
        background: #cecece;
    width: 100%;
}

div.breadcrumbs ol {
    padding: 20px 60px;
}

div.breadcrumbs ol li a {
    font-size: 15px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: #24325f;
}

@media screen and (max-width: 1580px) {
	#main_content .container {
		padding-left: 100px;
		margin: 0;
		max-width: calc(100% - 80px);
		padding-right: 2%;
	}
}

@media screen and (max-width: 1024px) { 
	#main_content .container {
		padding-right: 2%;
		padding-left: 2%;
		max-width: 96%;
	}
}

h1 {
    display: block;
    margin-bottom: 50px;
    font-weight: 700;
    font-size: 33px;
    line-height: 121%;
    text-transform: uppercase;
    color: #fff;
    border-radius: 20px;
    background: #24325f;
    padding: 40px;
    margin-top: 50px;
}

.contact-columns {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}

.text-info {
    border: 1px solid #cacaca;
    border-radius: 25px;
    padding: 36px 38px;
    max-width: 50%;
    min-width: calc(100% / 3);
}

.map {
    border-radius: 25px;
    max-width: calc(100% / 3 * 2);
    min-width: 50%;
    width: 100%;
    position: relative;
}

.map button {
    position: absolute;
    border-radius: 15px;
    padding: 8px 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #bf333b;
    gap: 10px;
    border: none;
    cursor: pointer;
    bottom: 60px;
    left: 25px;
}

.map button > span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.map button > span span {
    font-size: 12px;
}

.text-info h2 {
    font-weight: 700;
    font-size: 20px;
    line-height: 180%;
    color: #2d375b;
    margin-top: 0;
    margin-bottom: 20px;
}

.tag {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 25px;

    font-weight: 400;
    font-size: 16px;
    color: #000;
}

.tag a,
.tag .work_hours {
    max-width: 280px;
}

.tag:last-child {
    margin-bottom: 0;
}

.tag span {
    font-size: 14px;
    line-height: 143%;
    color: #a7a7a7;
}

.tag a {
    font-size: 16px;
    color: #000;
}

.tag .work_hours span {
    color: #bf333b;
    font-size: 16px;
}

.text-info button {
    font-weight: 700;
    font-size: 14px;
    line-height: 143%;
    color: #fff;
    cursor: pointer;
    border-radius: 15px;
    padding: 13px 28px;
    background: #f0424f;
    border: none;
        width: 305px;
}

.map iframe {
        width: 100%;
    height: 100%;
    border-radius: 25px;
}

.contact-banner {
    margin-bottom: 75px;
    padding: 60px 65px;
    border-radius: 25px;
    border: 1px solid #cacaca;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 50px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.contact-banner.blue {
	background: -o-linear-gradient(49deg, #2d375b 0%, #5f75c1 100%);
	background: linear-gradient(41deg, #2d375b 0%, #5f75c1 100%);
	border: none;
}

.contact-banner h3 {
    padding: 0;
    font-weight: 700;
    font-size: 33px;
    line-height: 121%;
    margin-bottom: 20px;
	color: #2d375b;
}

.contact-banner p {
	font-weight: 400;
font-size: 16px;
color: #000;
}

.contact-banner.blue h3, 
.contact-banner.blue p {
	color: #fff
}

.contact-banner .btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 15px;
}


.banner-btn {
    border-radius: 15px;
    padding: 15px 61px;
    /* width: 326px; */
    /* height: 50px; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: #f0424f;
    gap: 20px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 125%;
}

.banner-btn.blue {
	background: #27a6e6;
}

@media screen and (max-width: 968px) {
    .contact-columns {
        flex-direction: column;
    }

    .text-info, .map {
        max-width: none;
        min-width: auto;
        width: auto;
    }

    h1, .contact-columns {
        margin-bottom: 40px;
    }

    .contact-banner {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
    	-webkit-box-align: start;
    	    -ms-flex-align: start;
    	        align-items: flex-start;
	}

    .map iframe {
        min-height: 280px;
    }

    .map button {
        position: static;
        margin-top: 15px;
        width: 100%
    }
}

@media screen and (max-width: 768px) {
	.contact-banner .banner-btn {
		width: -webkit-fill-available;
		width: -moz-available;
		width: stretch;
	}

	.contact-banner .btns {
		width: 100%;
	}

	.contact-banner h3 {
		font-size: 17px;
		margin-bottom: 14px;
	}

	.contact-banner {
		gap: 14px;
		padding: 30px;
	}

     .banner-btn {
        padding: 15px 30px;
    }

    h1 {
        font-size: 20px;
        padding: 25px;
        margin-top: 40px;
    }

    .text-info h2 {
        font-size: 18px;
        line-height: 200%;
    }

    div.breadcrumbs ol {
        padding-left: 0;
        padding-top: 20px;
        padding-bottom: 15px;
    }

    .text-info {
        padding: 25px;
    }

    .text-info button {
        width: 100%;
    }
}

#popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(4.1px);
}

#popup_overlay h2 {
    padding: 10px 0 0 0;
    width: auto;
    font-weight: 700;

    font-size: 20px;
line-height: 180%;
margin-bottom: 30px;
text-transform: none;
}

#popup_overlay form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.popup-content {
    position: relative;
    background: white;
    padding: 30px 60px;
    border-radius: 10px;
    max-width: 555px;
    width: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popup-header {
    font-size: 30px;
    text-transform: uppercase;
    color: #24325F;
    width: max-content;
}

.popup-body {
    display: flex;
    flex-direction: column;
    gap: 25px;
}


.popup-image {
    margin-top: 10px;
    text-align: center;
}

.popup-image img {
    max-width: 100%;
    border-radius: 5px;
}

#popup_overlay .description {
    flex: 1 0 calc(50% - 8px);
    display: flex;
    align-items: center;
}

#popup_overlay .description p {
    font-size: 12px;
    line-height: 14px;
    color: #C8C8C8;
}

/* Кнопка закрытия */
.popup-close-btn {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #F0424F;
    border: none;
    border-radius: 50%;
    font-size: 35px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding-bottom: 4px;
}

/* Блокировка прокрутки */
body.popup-open {
    overflow: hidden;
}

.popup-text span {
    color: #bf333b;
}

@media screen and (max-width: 800px) {
    #popup_overlay .popup-content {
        width: 80%;
        padding: 30px 20px;
    }

    #popup_overlay .popup-header {
        width: 100%;
    }
}

@media screen and (max-width: 599px) {
 

    #popup_overlay h2 {
        font-size: 18px;
        font-weight: 600;
    }

    #popup_overlay .popup-content {
        width: 70%;
        padding: 20px 20px 30px;
        margin-top: 115px;
    }

    .popup-close-btn {
        top: -30px;
        right: -30px;
        width: 30px;
        height: 30px;
        font-size: 24px;
    }
}

div#modal-wrapper div#form-wrapper img.big {
    width: -webkit-fill-available;
    margin-top: 20px;
    max-height: 70vh;
    border-radius: 10px;
}

@media (min-width: 260px) and (max-width: 679px) {
    div#modal-wrapper div#form-wrapper img.big {
        max-width: 100%;
        max-height: calc(100vh - 270px);
    }
}

div#modal-wrapper {
    backdrop-filter: blur(4.1px);
    background: transparent;
}

div#modal-wrapper button#modal-close {
    color: #F0424F;
    background: #fff;
    border: none;
}

@media (max-width: 679px) {
    main#main_content {
        scrollbar-width: thin;
        max-height: calc(100vh - 290px);
    }
}