@charset "UTF-8";

/* ═══════════════════════════════════════════
   ТИПОГРАФИЯ
   ═══════════════════════════════════════════ */
:root {
    --color-green: #00bea2;
    --color-green-dark: color-mix(in srgb, var(--color-green), black 15%);
    --color-orange: #ff8e05;
    --color-orange-dark: color-mix(in srgb, var(--color-orange), black 10%);
    --color-light-gray: lightgrey;
    --color-soft-gray: #ededed;
    --color-gray-dark:  rgb(120, 120, 120);
    --color-gray: rgb(169, 169, 169);
    --color-black: #000;
    --color-white: #fff;

    --spacing-min: 4px;
    --spacing: 8px;
    --spacing-2: 16px;
    --spacing-3: 24px;
    --spacing-4: 32px;
    --spacing-5: 40px;
    --spacing-6: 48px;
    --spacing-7: 56px;
    --spacing-8: 64px;
    --spacing-9: 72px;
    --spacing-10: 80px;      

    --text-xl: 1.15rem;
    --text-xl--line-height: calc(1.5/1.15);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(1.7/1.15);
    --text-3xl: 1.7rem;
    --text-3xl--line-height: calc(2.25/1.7);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5/2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;

    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", Arial, sans-serif;
    
    /* Моноширинный */
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    
    /* Serif */
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman",  Times, serif;

    /* Sizes */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);

    /* Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Fluid typography */
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --font-size-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    
    /* Межстрочный интервал */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    --border-radius-min: 2px;
    --border-radius: 4px;
    --border-radius-mid: 8px;
    --border-radius-max: 16px
}

/* Улучшение отображения на Windows */
@media screen and (-webkit-min-device-pixel-ratio: 0) 
  and (min-resolution: 0.001dpcm) {
  body {
    font-weight: 400;
  }
}

@media print {
    footer, 
    .dropdown-toggle,
    .form-footer__form-block,
    .border-green a,
    #inquiry-header-btn {
      display: none !important;
    }
    /* Стили для основного контента при печати */
    body {
      font-size: 12pt;
    }
  }

@media (max-width: 640px) {
    body {
        font-size: 90%;
    }

    header h1 {
        font-size: var(--text-3xl) !important;
    }

    header .logo-position {
        font-size: var(--text-xl) !important;
    }
}


/* Специфика для Windows с низким DPI */
@media (-webkit-max-device-pixel-ratio: 1) {
  body {
    letter-spacing: 0.01em;
  }
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

html {
  font-size: 100%; /* 16px по умолчанию */
  scroll-behavior: smooth;
}

body {
    /* font-size: var(--font-size-base);  */
    font-family: var(--font-system);
    line-height: var(--line-height-base);
    font-weight: var(--font-medium);
    
    /* Сглаживание для macOS/iOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Оптимизация рендеринга */
    text-rendering: optimizeLegibility;

    font-optical-sizing: auto;
    
    /* Улучшенный кернинг */
    font-kerning: normal;

    /* Features */
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  
    /* Prevent FOUT */
    font-synthesis: none;
}

h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    margin: var(--spacing-4) 0 var(--spacing-3) 0;
}

h2 {
    margin: var(--spacing-4) 0 var(--spacing-2) 0;
}

h3 {
    font-size: var(--text-2xl);
    margin: var(--spacing-2) 0 var(--spacing) 0;
}

h4 {
    font-weight: 600;
}

.container {
    max-width: 1024px;
}

.container-fluid {
    max-width: 1280px;
}

.secondary-color {
    color: var(--color-orange);
    fill: var(--color-orange);
}

a.secondary-color:hover {
    color: var(--color-orange-dark);
}

p, li {
    margin-bottom: 0.7rem;
}

.list-no-margin li {
    margin-left: -1rem;
}

a {
    color: var(--color-green);
    text-decoration: none;
    background-color:transparent
}

label {
    color: var(--color-gray-dark);
    font-size: var(--text-xs);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-min);
}


.border {
    border: 1px solid var(--color-light-gray) !important;
}

.primary-dark-highlight {
    background-color: var(--color-green-dark);
    margin-top: 0;
    padding: 0 var(--spacing-2) var(--spacing-min) calc(var(--spacing) * 1.5);
}

.form-control {
    margin-bottom: var(--spacing);
}

.form-control::placeholder{
    color: var(--color-gray);
}

a:hover {
    color: var(--color-green-dark);
}

.color-light-gray {
    color: var(--color-gray);
}

.color-orange {
    color: var(--color-orange);
}

.color-green {
    color: var(--color-green);
    
}

hr.color-green {
    opacity: 1;
}

img {
    border-style: none;
    width: 100%;
}

.text-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
}

.dropdown-menu {
    margin-top: 25px !important;
    width: auto !important;
    min-width: 281px;
    padding: 2rem;
}

.dropdown-menu .dropdown-item:active {
    background: var(--color-green) !important;
}

.dropdown-toggle::after {
    display: none;
}

.main-banner {
    margin-top: var(--spacing-3);
    min-height: 24rem;
    width: 100%;
    background-color: var(--color-green);
    border-radius: var(--border-radius-max);
    padding: var(--spacing-7) 0 0 0;
    position: relative;
}

.main-banner p {
    font-size: 1.9rem;
    font-weight: var(--font-bold);
    line-height: var(--text-2xl--line-height);
    max-width: 35ch;
    color: var(--color-white);
}

.main-banner .abstract-declaration {
    max-width: 70%;
    margin: 0 auto;
}

.useful-resources-block a {
    color: gray;
    display: block;
    line-height: var(--line-height-relaxed);
}

.useful-resources-block a:hover {
    text-decoration: underline;
}

.contact-block__person-photo {
    width: 100%;
    max-width: 164px
}

/* ═══════════════════════════════════════════
   КНОПКИ
   ═══════════════════════════════════════════ */

.btn i {
    margin-right: var(--spacing-min);
}

.btn-primary {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
}

.btn-primary:hover, .dropdown-toggle.show {
    background: var(--color-green-dark) !important;
    border-color: var(--color-green-dark);
}

.btn-primary-outline {
    color: var(--color-green-dark);
    border-color: var(--color-green-dark);
}

.btn-primary-outline:hover, .dropdown-toggle.show  {
    color: var(--color-white);
    background: var(--color-green-dark);
}

.btn-secondary {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-secondary:hover {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-secondary:active {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-secondary-outline {
    color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-secondary-outline:hover {
    color: var(--color-white);
    border-color: var(--color-orange);
    background-color: var(--color-orange);
}

.more-button-outline {
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--color-white);
    border-radius: var(--border-radius-min);
    position: absolute;
    bottom: 4rem;
}

.more-button-outline:hover {
    color: var(--color-green-dark);
}
   
.btn-white {
    border: 1px solid var(--color-white) !important;
    color: var(--color-white);
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
}

.btn-white:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.15)
}


/* ═══════════════════════════════════════════
   Заголовки страниц (HEADER)
   ═══════════════════════════════════════════ */

header h1 {
    font-weight: var(--font-bold);
    font-size: var(--text-5xl);
    margin: 0;
}

header .logo-position {
    font-size: var(--text-2xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-medium);
    color: var(--color-gray-dark);
}

.page-header .d-flex > * {
    min-width: 0;
}

.page-header__logo-link {
    text-decoration: none;
    background-color: transparent;
}

.page-header__logo {
    width: 4rem;
}

.page-header__name {
    font-size: var(--text-2xl);
    line-height: var(--line-height-tight);
    color: var(--color-black);
}

.page-header__job-position {
    margin-top: -.7rem;
    color: var(--color-gray-dark);
}

.page-header__phone {
    margin: 0;
    margin-top: -3px;
    font-size: 1rem;
    font-weight: var(--font-bold);
}

.page-header__mail {
    font-size: 0.9rem;
    color: var(--color-gray-dark);
}

.page-header__mail i {
    font-size: 1rem;
    margin-right: var(--spacing);
}

.page-header__phone i {
    font-size: var(--text-xl);
    margin-right: var(--spacing-min);
}

.page-header__menu-icon {
    text-align: center;
    margin-right: 1rem;
    color: var(--color-black);
}

.page-header__menu-icon i {
    font-size: var(--text-xl);
}

.page-header__menu-icon p {
    color: var(--color-gray-dark);
    margin-left: var(--spacing-min);
}

.page-header__menu-icon p:hover {
    color: var(--color-green-dark);
}

/* ═══════════════════════════════════════════
   Навигация
   ═══════════════════════════════════════════ */

.nav-item-block {
    padding: var(--spacing-4) var(--spacing-3);
    padding-right: var(--spacing);
    border: 2px solid var(--color-light-gray);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.nav-item-block:hover {
    border-color: var(--color-green);
}

.nav-item-block:hover svg {
    fill: var(--color-gray);
}

.nav-item-block__icon {
    font-size: var(--text-4xl) !important;
    color: var(--color-gray);
    position: relative;
    margin-right: 1rem;
    margin-bottom: 0;
}

.nav-item-block__title {
    font-weight: var(--font-medium);
    font-size: var(--text-xl);
    margin-bottom: 0px;
}

.nav-item-block a {
    color: var(--color-orange);
}

.nav-item-block a:hover {
    color: var(--color-orange-dark);
}

/* ═══════════════════════════════════════════
   Подвал (FOOTER)
   ═══════════════════════════════════════════ */

footer {
    font-size: var(--text-xs);
}

footer p {
    max-width: 115ch;
}

.form-footer__form-block {
    background-color: var(--color-green);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-min);
}

.form-footer__label {
    color: var(--color-white);
    font-size: var(--text-xs);
}

/* ═══════════════════════════════════════════
   Заголовки страниц (HEADER)
   ═══════════════════════════════════════════ */

.notes {
    color: var(--color-gray);
    font-size: var(--text-xs);
    margin-bottom: 0;
}

#diploms .card-body {
    position: absolute;
    background: linear-gradient(to top, white 78%, transparent 100%) !important;
    padding: var(--spacing-5) var(--spacing);
    height: 170px;
    bottom: 0;
    left: 0;
}

#diploms .card-text {
    font-size: .75rem;
    line-height: .9rem;
    vertical-align: baseline;
}

#diploms .card-title {
    font-size: var(--font-normal);
    margin-bottom: .4rem;
    vertical-align: baseline;
    font-weight: 600;
}

#diploms .card-body a {
    text-decoration: none;
    color: var(--color-black);
}

#diploms .card-body .magnify {
    font-size: .8rem;
    text-decoration: none;
    position: absolute;
    bottom: var(--spacing-2);
    left: var(--spacing);
    color: var(--color-green);
}

.document {
    width: 10rem;
}

.document:hover {
    outline: 2px solid var(--color-green-dark) !important;
    border-color: var(--color-green-dark) !important;
}

.document .magnify {
    color: var(--color-orange) !important;
}

.document .magnify:hover {
    color: var(--color-orange-dark) !important;
}

.reverse-call__phone-btn {
    animation: radial-pulse 2s infinite;
    cursor: pointer;
}

.circle {
    border-radius: 50%;
}

@keyframes radial-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 190, 162, 0.6);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
}

.about-me__photo {
    max-width: 28rem;
}

.accordion h2 {
    margin: 0; 
}

.accordion > div {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.accordion-item {
    margin-bottom: 3px;
}

.accordion-body::before {
    content: '\25B2';
    font-size: var(--text-2xl);
    color: var(--color-white);
    position: absolute;
    margin-top: -23px;
    margin-left: 14px;
    z-index: 100;
}

.accordion-body {
    background: var(--color-soft-gray) !important;
    padding: var(--spacing-min) var(--spacing-2) var(--spacing-2) var(--spacing-2);
}

.accordion-body p {
    max-width: 100ch;
}

.accordion-button.collapsed {
    font-weight: var(--font-bold);
    background-color: var(--color-soft-gray) !important;
    color: var(--color-black) !important;
}

.accordion-text {
    background: var(--color-white);
    padding: var(--spacing-2);
}

.accordion-button {
    font-weight: var(--font-bold);
    background-color: var(--color-soft-gray) !important;
    color: var(--color-green-dark) !important;
    box-shadow: none !important;
}

.no-markers {
    list-style-type: none;
    margin-left: -1rem;
}

.fa-check-circle-o {
    color: var(--color-green);
    margin-right: var(--spacing);
    font-size: var(--text-xl) !important;
}

.border-green {
    border: 2px solid var(--color-green);
    border-radius: var(--border-radius);
}

.border-green p {
    max-width: 100%;
}

.reverse-call__phone-btn {
    max-width: 4rem;
}

.price-table td:last-child, .price-table th:last-child  {
    text-align: center;
}

.price-table th {
    border-bottom: 2px solid var(--color-green) !important;
}

.price-table td:last-child, .price-table td:first-child {
    font-family: var( --font-mono);
}

.price-table td > a {
    color: var(--color-black);
    width: 100%;
    height: 100%;
}

.price-table td a:hover {
    color: var(--color-green);
}

.person-card {
    border: 1px solid var(--color-light-gray);
    min-width: 200px;
    max-width: 224px;
    height: 100%;
    max-height: 300px;
    padding: var(--spacing-3) var(--spacing-2);
    text-align: center;
}

.person-card__name {
    font-size: var(--text-xl);
    margin: 0;
}

.person-card__position {
    color: var(--color-gray-dark);
    font-size: var(--text-xs);
    line-height: var(--line-height-tight);
    margin-bottom: 0;
}

.person-card__img {
    margin-bottom: var(--spacing);
    max-width: 7rem;
}

.person-card__link {
    font-size: var(--text-xs);
}

.doc-develop__main-block {
    background-image: linear-gradient(rgba(128,128,128, 0.7), rgba(74, 74, 74, 0.7)), url("/static/img/shutterstock_404347129.webp");
    background-position: top;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    padding: var(--spacing-6) 0 var(--spacing-9) 0;
    height: auto;
    text-align: center;
    margin-top: -1rem;
    margin-bottom: var(--spacing-6);
}

.doc-develop__main-block h1, .doc-develop__main-block__sub-header {
    color: var(--color-white);
}

.doc-develop__main-block__sub-header {
    font-size: var(--text-3xl);
    display: inline;
    width: auto;
    margin: 0 auto;
}

.doc-develop__main-block__item-card {
    background-color: var(--color-white);
    padding: var(--spacing) var(--spacing-2);
    border: 1px solid var(--color-light-gray);
    border-left: 10px solid var(--color-green-dark);
    min-height: 21rem;
    flex-basis: 260px;
    position: relative;
    margin-top: var(--spacing-2);
}

.doc-develop__main-block__item-card h3 {
    font-size: var(--text-lg);
}

.doc-develop__main-block__item-card p {
    margin-top: var(--spacing-4);
    color: var(--color-gray-dark);
    font-size: var(--text-xs);
    line-height: 1.3;
}

.doc-develop__main-block__item-card a {
    position: absolute;
    text-align: center;
    color: var(--color-orange);
	bottom: var(--spacing-2);
    right: var(--spacing-3);
    vertical-align: bottom;
}

.doc-develop__main-block__item-card a:hover {
    color: var(--color-orange-dark);
}

.modal-body {
    background: var(--color-soft-gray);
}

.declaration-docs-tab {
    min-height: 13rem;
    height: 100%;
}

.nav-pills > .nav-link {
    color: var(--color-green);
    text-align: left;
    margin-right: 2rem;
    margin-bottom: var(--spacing);
    font-weight: var(--font-medium);
}

.nav-pills > .nav-link.active {
    background-color: var(--color-green);
    color: var(--color-white);
}

.nav-pills > .nav-link {
    color: var(--color-black);
    font-weight: var(--font-semibold);
}

.nav-pills > .nav-link:hover {
    color: var(--color-green);
}

.nav-pills > .nav-link.active:hover {
    color: var(--color-white);
}

.develop_docs_how_work .card {
    border: 2px solid var(--color-green);
    padding: 3rem 2rem 2rem 2rem;
}

.develop_docs_how_work__item-block {
    margin-top: var(--spacing-10);
}

.develop_docs_how_work__item-block li::before {
    color: var(--color-green);
    content: '✓';
    margin-right: var(--spacing);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
}

.develop_docs_how_work__item-block h3 {
    z-index: 1;
    max-width: 96vw;
    margin-top: 0px;
    font-weight: var(--font-semibold);
}

.more {
    display: none;
  }
  
.show-all .more {
    display: list-item;
}

#dynamicList a {
    margin-left: -2rem;
}

.doc-develop__offer-container {
    background-image: url("/static/img/shutterstock_404347129.webp");
    background-position: bottom;
    background-repeat: repeat, no-repeat;
    background-size: cover;
    padding: var(--spacing-8) var(--spacing-4);
}

.doc-develop__offer-block {
    background: var(--color-green);
    color: var(--color-white);
}

.doc-develop__offer-block__info {
    background: var(--color-white);
    text-align: center;
}

.doc-develop__offer-block__info .person-card {
    margin: 0 auto;
    border: none;
}

.doc-develop__offer-block .btn-white {
    height: 100%;
}

#server-message {
    position: fixed;
    top: var(--spacing-3);
    right: var(--spacing);
    max-width: 480px;
    width: 100%;
    z-index: 9999;
}

.fontawesomesvg {
    height: var(--text-5xl);
    fill: var(--color-light-gray);
    margin-left: var(--spacing-2);
}

.li-ok {
    height: 1rem;
    fill: var(--color-green);
    margin-right: calc(var(--spacing) / 2);
}

.icon-search-secondary svg{
    height: 1.2rem
}