:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--primary-gradient-inv: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    --primary-color: #7166a5;
}

body {min-height: 100vh;font-family: Tahoma, sans-serif;font-weight: 400;font-size: 16px;line-height: 1.3em;}

/*************************************/

.custom-container {max-width: 1000px;margin: 0 auto;padding-left: 15px;padding-right: 15px;}
.header {height: 80px;position: fixed;top:0;left:0;width:100%;background-color:white;box-shadow:0 4px 15px rgba(0, 0, 0, 0.1);z-index:1030;padding:0 15px;}
.logo {width: 148px;height: auto;}
.section-title {font-weight: 700;font-size: 40px;text-align: center;color: #7166A5;margin: 0;}

.header-container {max-width: 1200px;margin: 0 auto;height: 100%;display: flex;align-items: center;justify-content: space-between;gap: 20px;}
.other-container {display: flex;gap:13px;}
.phone-container {display: flex;align-items: center;gap: 8px;position: relative;overflow: hidden;}
.phone-icon {width: 20px;height: 20px;fill: var(--primary-color);flex-shrink: 0;}
.phone-number {font-size: 16px;font-weight: 600;color: var(--primary-color);white-space: nowrap;position: relative;cursor: pointer;}
.phone-number::after {content: '';position: absolute;top: 0;right:0;width:100px;height: 100%;background: linear-gradient(to right, transparent, white 70%);}
.phone-number.hide-gradient::after{display:none;}
.services-dropdown {position: relative;}
.services-btn {border: 1px solid #9c9c9c;background-color: white;color: var(--primary-color);font-weight: 600;border-radius: 30px;padding: 10px 25px;transition: all 0.3s ease;text-decoration: none;min-width: 150px;justify-content: center;display: inline-flex;align-items: center;gap:10px;}
.dropdown-icon {display: inline-block;margin-left: 8px;transition: transform 0.3s ease;vertical-align: middle;}
.services-btn.active .dropdown-icon {transform: rotate(180deg);}
.dropdown-menu {display: none;position: absolute;background: white;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);min-width: 200px;z-index: 1000;}
.services-dropdown:hover .dropdown-menu {display: flex !important;gap: 4px;}
.services-dropdown:hover svg {transform: rotate(180deg);}
@media (max-width: 768px) {
    .dropdown-menu.show {display: flex !important;}
	.dropdown-menu.show svg {transform: rotate(180deg);}
}
.services-btn:hover {background-color: #f8f9fa;}
.dropdown-menu {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);background: white;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);padding: 15px 8px;min-width: 180px;display: none;z-index: 1000;border: 1px solid #eee;flex-direction: column;align-items: center;}
.dropdown-item {justify-content: center;border-radius: 90px;display: flex;padding:8px 10px;color: #333;text-decoration: none;text-align: center;transition: all 0.2s ease;font-weight: 500;}
.dropdown-item:hover {background: var(--primary-gradient);color: white;}
.get-calc-btn {background: var(--primary-gradient);color: white;font-weight: 600;border-radius: 30px;padding: 10px 25px;transition: all 0.3s ease;text-decoration: none;display: inline-block;}
.get-calc-btn:hover {background: var(--primary-gradient-inv);}

.tu-block{background: url(../images/fon.webp) no-repeat;margin-top: 80px;background-size: cover;height: calc(100vh - 80px);display:flex;align-items: center;justify-content: center;}
.tu-block:before {content: '';background: rgb(0 0 0 / 40%);position: absolute;top: 0;left: 0;display: block;width: 100%;height:100vh;z-index: 0;}
.tu-content{z-index: 1;max-width:1000px;margin:0 auto;color: #fff;}
.tu-content h1{font-size: 48px;font-weight: 700;line-height: 1.3;margin-bottom:15px;text-shadow: 2px 2px 4px #00000080;}
.tu-subtitle{font-size:18px;margin-bottom:30px;}
.tu-tags{display: grid;grid-template-columns: repeat(2, minmax(200px, 340px));gap: 10px;margin-bottom: 20px;}
.tu-tags span{padding: 15px 30px;border-radius: 90px;white-space: nowrap;border: 1px solid #fff;text-align: center;font-size: 16px;font-weight: 700;}
.tu-text{max-width: 800px;font-size: 16px;line-height: 1.3;margin-bottom: 30px;font-weight: 700;}
.tu-buttons{display:flex;gap:15px;flex-wrap:wrap}
.btn{padding:14px 26px;border-radius:30px;font-size:15px;text-decoration:none;display:inline-block}
.btn-primary{background: var(--primary-gradient);color:#fff;font-weight: 600;}
.btn-primary:hover{background: var(--primary-gradient-inv);}
.btn-secondary{background: #3d435e;font-weight: 600;}
.btn-secondary:hover{background:#495279}



.who-needs-row {display: grid;grid-template-columns: repeat(4, 1fr);justify-items: center;gap: 15px;}
.who-needs-item {width: 220px;height: 300px;box-shadow: 0px 10px 30px 0px #0000001F;padding: 40px;border-radius: 20px;display: flex;flex-direction: column;align-items: center;gap: 30px;}
.who-needs-item:hover {box-shadow: 0px 10px 30px 0px #00000040;}
.who-needs-icon {width: 120px;height: 120px;border-radius: 50%;overflow: hidden;}
.who-needs-icon img {max-width: 120px;height: 120px;width: 120px;object-fit: cover;}
.who-needs-text {margin: 0;text-align: center;color: #333333;}


.process-steps-section{background: #f0f2f9;}
.progress-line{position: relative; margin-bottom:16px; height: 50px;}
.progress-track{position:absolute; top:37px; left:5%; width:75%; height:2px; background:repeating-linear-gradient(to right, #3d435e 0, #3d435e 10px, transparent 10px, transparent 15px); z-index: 1;}
.progress-step{position: absolute; top: 0; width:10%; text-align: center;}
.step-number{display: block; font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #333;}
.step-circle{width:14px; height:14px; background:#3d435e; border-radius: 50%; margin: 0 auto; position: relative; z-index: 2;}
.process-steps-blocks{display: flex; gap: 20px;cursor:pointer;}
.process-steps-block{flex: 1; padding:20px 25px;background:white; border-radius:15px;}
.process-steps-icon{margin-bottom: 15px;}
.process-steps-text{line-height: 1.5; color: #333;}
.progress-step:nth-child(2){left:0%;}
.progress-step:nth-child(3){left:25%;}
.progress-step:nth-child(4){left:50%;}
.progress-step:nth-child(5){left:75%;}
.process-steps-block.active-block {background: var(--primary-gradient);}
.process-steps-block.active-block .process-steps-text{color: #fff;}
.process-steps-block.active-block .process-steps-icon path {stroke: #fff;}
.progress-step.active-step .step-circle {background: #7166A5; transform: scale(1.2);transition: all 0.3s ease;}
.progress-step.active-step .step-number {color: #7166A5;font-weight: 800;}


.plans-row {display: grid;grid-template-columns: 1fr 1fr;gap: 32px;}
.plans-item:nth-child(1) {border-radius: 20px;overflow: hidden;}
.plans-img img {max-width: 100%;}
.plans-info h3 {color: #7166A5;font-size: 28px;font-weight: 700;}
.plans-info ul {list-style: none;}
.plans-info li {position: relative;padding-left: 24px;margin-bottom: 8px;color: #555;}
.plans-info li:before {content: '';position: absolute;left: 0;top: 9px;width: 14px;height: 4px;background: #7166A5;border-radius: 2px;}



.reviews-slider-container {position: relative;padding: 0 60px;}
.reviewsSwiper {overflow: hidden;padding: 20px 10px 40px;}
.reviews-slider-nav {position: absolute;top: 50%;left: 0;right: 0;transform: translateY(-50%);display: flex;justify-content: space-between;pointer-events: none;z-index: 10;}
.reviews-slider-btn {background: transparent;border:none;pointer-events: all;}
.reviews-slider-btn svg {width: 24px;height: 24px;}
.reviews-slider-btn svg path {fill: #7166a5;transition: fill 0.3s ease;}
.reviews-slider-btn:hover svg path {fill: #3d435e;}
.reviews-item {background: white;border-radius: 8px;padding: 30px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);height: 100%;}
.reviews-item img {width: 80px;height: 80px;border-radius: 50%;object-fit: cover;margin: 0 auto 20px;}
.reviews-text {font-weight: bold;font-size: 18px;margin-bottom: 15px;color: #333;}
.reviews-text2 {color: #333;line-height: 1.5;font-size: 15px;}


.advantages-section{background: #f0f2f9;}
.advantages-row {gap: 15px;display: grid;grid-template-columns: repeat(4, 1fr);justify-items: center;}
.advantage-item {width: 220px;height: 300px;box-shadow: 0px 10px 30px 0px #0000001F;padding: 40px;border-radius: 20px;display: flex;flex-direction: column;align-items: center;gap: 30px;}
.advantage-item:hover {box-shadow: 0px 10px 30px 0px #00000040;}
.advantage-icon {width: 120px;height: 120px;border-radius: 50%;overflow: hidden;}
.advantage-icon img {max-width: 120px;height: 120px;width: 120px;object-fit: cover;}
.advantage-text {margin: 0;text-align: center;color: #333333;}



.team-section {background: white;}
.team-block {padding:60px 80px;width: 100%;}
.team-block-light {background: rgba(102, 126, 234, 0.05);}
.team-block-dark {background: rgba(102, 126, 234, 0.1);}
.team-block-inner {display: flex;align-items: center;gap: 4rem;padding: 0 15px;}
.team-block-reverse {flex-direction: row-reverse;}
.team-content {flex: 1;min-width: 0;}
.team-text h3 {font-size: 1.8rem;font-weight: 700;color: var(--primary-color);margin-bottom: 0.5rem;}
.team-position {font-size: 1.2rem;font-weight: 600;color: #764ba2;margin-bottom: 1.5rem;}
.team-text p:not(.team-position) {font-size: 1.1rem;line-height: 1.6;color: #555;margin-bottom: 0;}
.team-image {flex: 1;display: flex;justify-content: center;align-items: center;min-width: 0;}
.team-image img {width: 100%;max-width: 300px;height: auto;}



.faq-section {background: rgba(102, 126, 234, 0.05);padding: 4rem 0;}
.faq-accordion {max-width: 800px;margin: 0 auto;padding: 0 15px;}
.faq-item {background: white;border-radius: 12px;margin-bottom: 1rem;box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);border: 1px solid rgba(102, 126, 234, 0.1);overflow: hidden;}
.faq-question {padding: 1.5rem 2rem;cursor: pointer;display: flex;justify-content: space-between;align-items: center;transition: all 0.3s ease;}
.faq-question:hover {background: rgba(102, 126, 234, 0.03);}
.faq-question h4 {margin: 0;font-size: 1.2rem;font-weight: 600;color: var(--primary-color);flex: 1;}
.faq-toggle {font-size: 1.5rem;font-weight: 300;color: var(--primary-color);transition: transform 0.3s ease;margin-left: 1rem;}
.faq-answer {padding: 0 2rem;max-height: 0;overflow: hidden;transition: all 0.3s ease;}
.faq-answer p {margin: 0;padding: 0 0 1.5rem;font-size:16px;line-height: 1.3;color: #555;}
.faq-item.active .faq-question {background: rgba(102, 126, 234, 0.05);}
.faq-item.active .faq-toggle {transform: rotate(45deg);}
.faq-item.active .faq-answer {max-height: 500px;padding-top: 1rem;}
.faq-consult-btn {border: 2px solid var(--primary-color);background-color: white;color: var(--primary-color);font-weight: 600;border-radius: 30px;padding: 10px 25px;transition: all 0.3s ease;text-decoration: none;display: inline-block;}
.faq-consult-btn:hover {background-color: rgba(118, 75, 162, 0.05);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(118, 75, 162, 0.2);color: var(--primary-color);}



.popup-fade {display: none;}
.popup-fade:before {content: '';background: #000;position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.7;z-index: 9999;}
.popup {position: fixed;top: 0%;left: 50%;padding: 20px;background: #fff;border: 1px solid orange;border-radius: 4px;z-index: 99999;opacity: 1;max-width: 800px;margin-top: 30px;margin-bottom: 30px;transform: translate(-50%, 0%);max-height: 95vh;overflow-y: scroll;}
.popup-close {position: absolute;top: 10px;right: 10px;}


.form-section {background: linear-gradient(122.45deg, #667EEA 0%, #764BA2 100%);padding: 40px;}
.section-subtitle {font-size: 20px;font-weight: 700;}
#order-form input {font-size: 16px;}
#total-amount {background: linear-gradient(93.02deg, #3498DB 0%, #2ECC71 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;display: inline-block;font-size: 32px;}
.offerta {color: blueviolet;}
.offerta:hover{color: red;text-decoration: underline;cursor: pointer;}

.contact-row{display: grid;grid-template-columns: repeat(4, 1fr);justify-items: center;gap:40px;padding-bottom:33px;}
 #map {width: 100%;height: 500px;border: none;}
.contact-row p {margin:0;}
.contact-item svg{margin-bottom: 10px;}
.address-info {padding:20px;background: #f5f5f5;text-align: center;font-size: 18px;line-height: 1.6;}
.contact-item{font-size: 14px;display: flex;flex-direction: column;align-items: center;text-align: center;}
.contact-info{display: flex;align-items: center;gap: 10px;}

.footer {background: var(--primary-gradient);color: white;padding: 3rem 0;}
.footer-content {display: flex;justify-content: space-between;align-items: center;gap: 2rem;padding: 0 15px;}
.footer-logo {display: flex;align-items: center;gap: 10px;}
.footer-logo .logo {width: 148px;height: auto;border-radius: 4px;}
.footer-info p {margin: 0;font-size: 1.1rem;font-weight: 500;}
.footer-phone p {margin: 0;font-size: 1.1rem;font-weight: 500;}
.footer-phone a {color: white;text-decoration: none;font-weight: 600;transition: opacity 0.3s ease;}
.footer-phone a:hover {opacity: 0.8;color: white;}


.notification-panel{position:fixed;top:0;right:-400px;width:350px;height:100vh;background:#fffffffa;box-shadow:-5px 0 25px #0000001a;z-index:9999;transition:right .4s ease;display:flex;flex-direction:column;border-left:1px solid #e9ecef}
.notification-panel.show{right:0}
.notification-content{flex:1;display:flex;flex-direction:column;height:100%}
.notification-header{padding:20px;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center;background:#f8f9fa}
.notification-title{font-size:1.2rem;font-weight:600;color:#333}
.notification-close{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:#6c757d;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:color .3s}
.notification-close:hover{color:#dc3545}
.notification-body{flex:1;padding:20px;overflow-y:auto}
.notification-success{color:#28a745;font-size:1.1rem;margin-bottom:15px}
.notification-error{color:#dc3545;font-size:1rem;margin-bottom:15px}
.notification-error ul{margin:10px 0 0;padding-left:20px}
.notification-error li{margin-bottom:5px;color:#666}
.input-error{border-color:#dc3545!important;background-color:#fff8f8!important}
.input-error:focus{box-shadow:0 0 0 .25rem #dc354540!important}
.error-message{color:#dc3545;font-size:.875rem;margin-top:5px;display:none}
.error-message.show{display:block}
.notification-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:9998;display:none}
.notification-overlay.show{display:block}




/* Адаптивность */

@media (max-width: 991px) {
.tu-content {padding: 0 20px;}
.who-needs-item {width:100%;height:250px;padding:16px;gap:20px;}
.advantage-item {width:100%;height:250px;padding:16px;gap:20px;}
.contact-item span {font-size: smaller;}
.get-calc-btn {padding: 10px;}

}

@media (max-width: 767px) {
.reviews-slider-container {padding: 0 40px;}
.reviews-slider-btn {width: 40px;height: 40px;}
.reviews-slider-btn svg {width: 20px;height: 20px;}
.process-steps-block.active-block::after {background: #7166A5;transform: translateX(-50%) scale(1.2);}
.process-steps-block.active-block::before {color: #7166A5;font-weight: 800;}
.process-steps-blocks{flex-direction: column; position: relative; padding-left: 60px;}
.process-steps-blocks::before{content:''; position: absolute;left: 45px;top: 40px;bottom: 30px;height: 420px;width:2px;background:repeating-linear-gradient(to bottom, #3d435e 0, #3d435e 10px, transparent 10px, transparent 15px); transform:translateX(-50%); z-index:1;}
.progress-line{display: none;}
.process-steps-block{position: relative;min-height:80px; padding:20px 20px 20px 40px;}
.process-steps-block::before{content:attr(data-step); position:absolute; left:-70px;top:30px;width:40px; text-align:right; font-weight:bold; font-size:16px; color:#333;}
.process-steps-block::after{content:''; position:absolute;left:-15px;top:30px;width:15px;height:15px;background:#7166A5;border-radius:50%;z-index:2;transform:translateX(-50%);}
.process-steps-block:last-child{margin-bottom:0;}
.who-needs-row{grid-template-columns: repeat(2, 1fr);}
.advantages-row{grid-template-columns: repeat(2, 1fr);}
.plans-row {grid-template-columns: 1fr;}
.team-block{padding: 40px 20px;}
.team-block-inner{gap: 1rem;}
.team-image img {height: auto;}
.contact-row {grid-template-columns: repeat(2, 1fr);}
.banner {height: auto;min-height: 800px;padding: 40px 0;}
.banner-content {padding: 30px;margin: 0 15px;}
.banner-title {font-size: 2rem;}
.banner-buttons {flex-direction: column;}
.btn-primary,.btn-secondary {width: 100%;text-align: center;}
.header-container {gap: 10px;}
.phone-container {padding-right: 0;}
.services-btn,.get-calc-btn {padding: 8px 15px;font-size: 14px;min-width: auto;width: 160px;font-weight: 400;text-align: center;}
.header {height: 110px;padding: 0 5px;}
.other-container {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;justify-items: center;width: 100%;}
.phone-number{font-size: 14px;font-weight: 400;}
.tu-block {margin-top: 110px;}
.tu-block {height:100vh;}
.tu-block:before {top: 110px;}
.tu-content {padding: 20px;}

}


@media (max-width: 575px) {
body {font-size:14px;}
.py-5 {padding-top:2rem !important;padding-bottom:2rem !important;}
.tu-tags{grid-template-columns: repeat(1, minmax(200px, 340px));}
.reviews-slider-container {padding: 0 30px;}
.tu-content h1{font-size:26px}
.tu-tags span{padding: 15px 10px;font-size: 14px;}	
.tu-block{padding-bottom: 20px;}
.section-title {font-size: 26px;}
.plans-info h3 {font-size: 18px;}
.team-block-inner {flex-direction: column;}
.team-content {order: 2;}
.team-text h3 {font-size: 18px;}
.team-position {font-size:14px;}
.team-text p:not(.team-position) {font-size:14px;line-height: 1.3;}
.faq-accordion{padding: 0;}
.faq-question {padding: 15px;}
.faq-question h4 {font-size:15px;}
.faq-answer p {font-size: 14px;line-height: 1.3;}
.faq-item {padding: 0;}
.form-section {padding: 0;}
.section-subtitle {font-size: 14px;}
.contact-item span {display: none;}
.footer {padding: 1rem 0;}
.footer-content {gap: 15px;padding: 0;flex-direction: column;}
.footer-info p{font-size: 14px;}
.footer-phone p {font-size: 14px;}
.who-needs-row {gap: 12px 6px;}
.advantage-row {gap: 12px 6px;}
.who-needs-item {padding: 8px;height: 220px;}
.advantage-item {padding: 8px;height: 220px;}
.process-steps-blocks::before {height: 78%;}
.logo {width: 130px;height: auto;}
.services-btn, .get-calc-btn {padding: 8px;width: 140px;}
.notification-panel{width:100%;right:-100%}










}