@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
/* Font import has been moved to HTML files for better performance and reliability. */

/* Global Domino Regular font */
html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'Nunito', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#navbarNav {
    font-size: 25px;
    color: #000000 !important;
}

.logo {
    width: 130px;
    height: 150px;
}

.container-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.container-description {
    padding: 10px;
    margin: 0 auto 30px auto; /* center horizontally */
    text-align: center;
}

/* Left align hero description */

/* Left align about hero description */
.container-main > .container-description.one {
    margin-left: 40px;
    text-align: left;
}

/* Улучшенная типографика для текстовых блоков */
.text {
    line-height: 1.7;
    letter-spacing: 0.3px;
    color: #050505;
    font-size: 18px;
    margin-bottom: 18px;
    text-align: left;
    word-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(5, 5, 5, 0.05);
    padding-right: 15px;
}

/* Стиль для промо-текста */
.text-promo {
    font-size: 26px !important; /* Увеличенный размер для акцента */
    letter-spacing: 0.7px !important; /* Увеличенное межбуквенное расстояние */
}

/* Стиль для акцентного промо-текста */
.text-promo {
    font-size: 26px !important;
    letter-spacing: 0.7px !important; /* Увеличенное межбуквенное расстояние */
}

/* Стиль для кнопки Streaming */
#toggle-two {
    font-size: 24px !important;
}

/* Стили для инфоблоков на странице 'Цены' */
.greeting-container-footer {
    font-size: 20px !important;
    line-height: 1.6 !important;
}

/* Стили для инфоблоков на странице 'Цены' */
.greeting-container-footer {
    font-size: 20px !important;
    line-height: 1.6 !important;
}

/* Стиль для полей ввода в форме */
.form-input-custom {
    font-size: 16px !important;
    letter-spacing: 0.7px !important;
}

/* Стиль для подписей в форме */
.form-label-custom {
    font-size: 18px !important;
    letter-spacing: 0.7px !important;
}

/* Стиль для текста принципов */
.text-principles {
    font-size: 24px !important;
    letter-spacing: 0.7px !important;
    line-height: 1.4; /* Уменьшенный межстрочный интервал */
}

/* Стили для выделенного текста */
.text b {
    color: #050606;
    font-weight: 600;
    letter-spacing: 0.4px;
    position: relative;
}

/* Стили для заголовков */
.header, .header-main, .header-medium, .header-small {
    letter-spacing: 0.4px;
    margin-bottom: 15px;
    color: #000000;
}

/* Стиль для первого абзаца в блоке */
.container-description .text:first-of-type {
    margin-top: 5px;
}
/* remove underline on button link */
#link-color {
    text-decoration: none !important;
}

/* center button inside about hero */
.container-description.one #bs-btn-color {
    display: inline-block;
    margin: 38px 0 0 0;
}

/* Left align about description */
.d-flex .container-description {
    margin-left: 40px;
    text-align: left;
}
.container-description.one {
    margin: 0 0 30px 40px; /* left indent similar to picture */
    text-align: left;
}

.container-picture {
    padding: 20px;
    margin-left: 40px;    
}

.header-main, .header, .header-small, .text, .header-medium, .row, .mb-3 { 
    color: #000000 !important;    
}

.header-main {  
    font-size: 60px;
}

.header {
    font-size: 40px;
    font-weight: bold;    
}

.header-small {
    font-size: 25px;
    font-weight: bold;    
}

.text {
    font-size: 20px;
}


.pictures {
    border-radius: 50%;
    width: 500px;
    height: 420px;
}

.cont-color {
    background-color: #f1f3fe;
}

.buttoncontact {
    border: none;
    border-radius: 2%;
    background-color:#927dfa; 
    padding: 15px;
    color: white;
    font-family: 'Nunito', sans-serif;  
    text-decoration: none;
    font-size: 20px;
}

.contact-forme {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

/* .form-style {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
} */

.forme-input {
    margin-bottom: 20px;
} 

.main-container-contacts {
    display: flex;
    justify-content: space-around;
    background-color: #927DFA;
    padding: 40px;
}

.container-contacts {
    display: flex;
    margin-left: 10px;
    margin-right: 30px;
    flex-direction: column;
}

.container-contacts-text {
    margin-bottom: 40px;
}


.contacts-text {
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-family: 'Nunito', sans-serif;   
}

.doc-section {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin: 20px 100px 10px 30px;
    /* flex-wrap: wrap; */
}

.doc-frame-main {
    width: 250px;
    border-radius: 5px;
    box-shadow: 0 0 15px #afafaf;
    margin-bottom: 20px;
}

.doc-frame-main:hover {
    border: 1px solid #AFAFAF;
}

.doc-frame-one {
    background-color: #f5f5f5;
    width: auto;
    border-radius: 5px 5px 0 0;
    padding: 20px;
    border-bottom: 1px solid #e6e3e3;
    display: flex;
    justify-content: center;    
}

.doc-frame-two {
    padding: 10px;
}

.doc-text {
    font-size: 15px;
    font-family: 'Nunito', sans-serif;   
}

.size {
    color: #AFAFAF;
    font-size: 12px;
}


#first {
    display: block
}

#second {
    display: none
}

#third {
    display: none
}



#first,
#second,
#third {
    padding-left: 1cm !important;
    padding-right: 1cm !important;
}

#first #row-position,
#second #row-position,
#third #row-position {
    --bs-gutter-x: 1cm !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    width: 100% !important;
}

/* Spacing below the pricing section headers */
#first > h2.header,
#second > h2.header,
#third > h2.header {
    margin-bottom: 0.5cm !important;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: #050505;
    text-align: center;
    padding-bottom: 15px;
}

/* Убрано подчеркивание во фразах услуг */



.card:hover {
    background-color: #F7F7F7;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(146, 125, 250, 0.15);
}

#bs-btn-color, #toggle-one, #toggle-two, #toggle-free { 
    background-color: #927DFA !important;
    border-color: #927DFA !important;
    color: #FFFFFF !important;
    font-weight: 300 !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s ease-in-out !important;
    padding: 0.5rem 1rem !important;
    margin: 0 10px;
}

#bs-btn-color:hover, #toggle-one:hover, #toggle-two:hover, #toggle-free:hover {
    background-color: #7B69D6 !important;
    border-color: #7B69D6 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(3, 4, 4, 0.1) !important;
}

/* Hover underline for toggle buttons */
#toggle-one:hover,
#toggle-two:hover,
#toggle-free:hover {
    text-decoration: none;
    color: #000000 !important;
}

/* Inactive state for toggle buttons */
#toggle-one:not(.active-toggle),
#toggle-two:not(.active-toggle),
#toggle-free:not(.active-toggle) {
    background-color: #FEFEFE !important;
    border: 2px solid #927DFA !important;
    color: #050505 !important;
    box-shadow: 0 2px 4px rgba(146, 125, 250, 0.1);
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center; /* center items horizontally */
}

.card-body a#link-color {
    display: flex;
    justify-content: center;
}


/* Active state style */
#toggle-one.active-toggle,
#toggle-two.active-toggle,
#toggle-free.active-toggle {
    background-color: #927DFA !important;
    color: #FFFFFF !important;
    border-color: #927DFA !important;
    box-shadow: 0 4px 6px rgba(146, 125, 250, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Footer Greeting Containers */
#greeting-container-wrapper-footer {
    display: flex;
    flex-direction: column;
    padding: 10px 20px; /* Вернули стандартные отступы */
    margin-bottom: 30px; /* Увеличили отступ снизу */
    border-top: 1px solid #D9D9D9; /* Добавили тонкую линию сверху для разделения */
    min-height: 40px;
}

.greeting-container-footer {
    display: none; /* Скрыто по умолчанию */
    font-size: 18px; /* Увеличим шрифт для удобства клиента */
    font-family: 'Nunito', sans-serif;
    color: #050505; /* Очень тёмный серый */
    background-color: transparent;
    border: none;
    padding: 0 20px; /* Вернули стандартные отступы */
    max-width: 960px; /* Вернули стандартную ширину */
    text-align: left; /* Выравнивание по левому краю */
    line-height: 1.6; /* Увеличим межстрочный интервал */
}

.greeting-container-footer p {
    margin-bottom: 15px;
}

.greeting-container-footer ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

/* Кнопка возврата наверх */
.back-to-top {
    position: fixed;
    bottom: 80px;
    left: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(146, 125, 250, 0.3); /* Фиолетовый с большей прозрачностью из брендбука */
    color: rgba(255, 255, 255, 0.7); /* Белый с прозрачностью из брендбука */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.back-to-top:hover {
    background-color: rgba(146, 125, 250, 0.8); /* Фиолетовый с меньшей прозрачностью при наведении */
    transform: translateY(-3px);
    color: #FFFFFF; /* Белый без прозрачности при наведении */
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top::after {
    content: '↑';
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.greeting-container-footer li {
    margin-bottom: 5px;
}

/* Выравниваем отступ от верхней линии для всех блоков, беря за эталон блок Hosting */
.greeting-container-footer > *:first-child {
    margin-top: 20px;
}

.centered-heading {
    text-align: center; /* Вернули центральное выравнивание */
    font-size: 22px; /* Немного увеличим размер для акцента */
    margin-bottom: 25px; /* Увеличим отступ снизу */
    margin-top: 20px; /* Добавим отступ сверху, чтобы отделить от предыдущего параграфа */
    color: #050505; /* Очень тёмный серый из брендбука */
}

.greeting-container-footer.active {
    display: block; /* Показываем активный контейнер */
}

/* Специальные стили для всех блоков описания */
#greeting-cdn-footer,
#greeting-streaming-footer,
#greeting-hosting-footer {
    padding-left: 1cm !important; /* Такой же отступ слева, как у контейнера STARTER */
    padding-right: 0 !important;
    width: 75% !important; /* Ширина до края третьего контейнера (PROFESSIONAL) */
    max-width: 75% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

#greeting-cdn-footer .centered-heading,
#greeting-streaming-footer .centered-heading,
#greeting-hosting-footer .centered-heading {
    text-align: left !important;
}

#card-border-color {
    /* existing rules keep here */
    border-color: #927DFA;
    font-family: 'Nunito', sans-serif;
    transition: all 0.3s ease;
    border-width: 2px;
}

#card-header-color {
    background-color: #927DFA;
    color: #FFFFFF;
    /* Ensure all tariff card headers have consistent height */
    min-height: 50px; /* Unified header height */
    display: flex;          /* Center the heading text */
    align-items: center;    /* Vertically center */
    justify-content: center;/* Horizontally center */
}

/* Улучшение стиля заголовков карточек тарифов */
#card-header-color h4 {
    font-weight: 600;
    letter-spacing: 0.8px;
    font-size: 1.15rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0.3rem 0.5rem;
    color: #FFFFFF;
}

/* Дополнительные стили для заголовков карточек тарифов с ID card-header-size */
#card-header-size {
    font-weight: 600;
    letter-spacing: 0.8px;
    font-size: 1.15rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    margin: 0;
    padding: 0.3rem 0.5rem;
    color: #FFFFFF;
}

/* Ensure the link container for the button spans the full width */
.card-body a#link-color {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Улучшение стиля заголовков цен */
.card-title.pricing-card-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #050505;
    font-size: 2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

/* Стиль для текста "мес" */
.pricing-card-title small {
    margin-left: 5px;
    color: #A6A6A6;
    font-weight: 400;
}

/* Улучшение стиля для списка в карточках */
.card-body ul li {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    color: #050505;
    margin-bottom: 0.3rem;
    letter-spacing: 0.3px;
}

/* Дополнительное уменьшение межстрочного интервала в разделе Hosting */
#third .card-body ul li {
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

/* Set the button width to 80% of its container (the link) */
.card-body #bs-btn-color {
    width: 80% !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(146, 125, 250, 0.15);
}

.card-body #bs-btn-color:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(146, 125, 250, 0.25);
}



.d-flex.justify-content-center {
    width: 100%;
}

/* Shift 'Свяжитесь с нами' button right by half its width */
/* Shift only the button container right; keep heading centered */
#third > .d-flex.justify-content-center:not(.header) {
    padding-left: 0; /* reset offset to center button */
}

/* Ensure heading remains centered */
#third > h2.header {
    padding-left: 0;
}

/* Shift bottom contact button on Prices page 10px right for pleasant spacing */
.d-flex.justify-content-center > a#link-color > #bs-btn-color {
    margin-left: 10px;
}

#pers-acc > li > a {
    border: 2px solid #927DFA !important;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin: 0 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: #050505 !important;
    background: linear-gradient(135deg, #FEFEFE 0%, #FEFEFE 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(146, 125, 250, 0.1);
}

#pers-acc > li > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #927DFA 0%, #7B69D6 100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

#pers-acc > li > a:hover {
    color: #FFFFFF !important;
    border-color: #7B69D6 !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(146, 125, 250, 0.4), 0 0 20px rgba(146, 125, 250, 0.2);
}

#pers-acc > li > a:hover::before {
    left: 0;
}

#pers-acc > li > a.active {
    background-color: #927DFA !important;
    color: #FFFFFF !important;
    border-color: #927DFA !important;
}

#link-color {
    color: white;
}

.text-footer {
    font-size: 15px;
    font-family: 'Nunito', sans-serif;   
}

.text-small {
    font-size: 10px;
}

#card-header-size {
    font-size: 1.1rem; /* Уменьшенный размер для лучшей читаемости */
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
}



/* Smaller note inside headers like "(1 в 4)" */
.text-small {
    font-size: 75%; /* 75% relative to parent text */
    vertical-align: baseline; /* Aligns with main text baseline */
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    opacity: 0.85;
    margin-left: 6px;
    text-shadow: none;
}

@media all and (max-width: 1200px) {

    .logo {
        width: 80px;
        height: 80px;
    }

    #navbarNav {
        font-size: 15px;
    } 

    .header-main {
        font-size: 30px;
    }

    .header {
        font-size: 25px;
    }

    .header-medium {
        font-size: 20px;
    }

    .header-small {
        font-size: 18px;
    }

    .pictures {
        width: 250px;
        height: 250px;
    }

    .container-main {
        flex-direction: column;
        align-items: center;
        flex-flow: column wrap;
    }

    .one {
        order: 1;
    }

    .two {
        order: 2;
    }

    .container-description {
        padding: 0px;
        margin-top: 10px;
        margin-left: 30px;
        margin-bottom: 20px;
        margin-right: 20px;
    }

    .container-picture {
        padding: 20px;
        margin-left: 0px;    
    }

    .text {
        font-size: 15px;
        text-align: start;
    }

    #bs-btn-color {
        font-size: 17px;
    }

    .main-container-contacts {
        flex-direction: column;
        padding: 30px;
    }

    .container-contacts {
        margin-left: 0px;
    }

    #gmap_canvas {
        width: 300px;
        height: 300px;
    }

    .contacts-text {
        font-size: 17px;
    }
    
    .doc-section {
        flex-direction: column;
        align-items: center;
        padding: 0px;
        margin: 20px 0px 0px 0px;
    }

    .my-0, .fs-6, .card-header {
        font-size: 15px;
    }

    .pricing-card-title {
        font-size: 20px;
    }

    li {
        font-size: 15px;
    }

    #card-header-size {
        font-size: 18px; /* Responsive smaller size for mobile */
    }    
    
}

@media all and (max-width: 800px) {
    #pers-acc {
        margin-top: 15px;
    }

    .header-main {
        font-size: 26px;
    }

    .header {
        font-size: 22px;
    }

    .header-medium {
        font-size: 18px;
    }

    .header-small {
        font-size: 16px;
    }

    .text {
        font-size: 14px;
        padding-right: 0; /* Remove padding to use full width */
    }

    .pictures {
        width: 100%;
        max-width: 220px; /* Further reduce max size */
        height: auto;
    }

    #gmap_canvas {
        width: 100%;
        height: 250px; /* Adjust height for better ratio on mobile */
    }

    .container-description {
        margin-left: 15px;
        margin-right: 15px;
    }

    #card-header-size {
        font-size: 16px;
    }

    li {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
  /* ИСПРАВЛЕНИЕ AOS - отключаем анимации на мобильных */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  /* ИСПРАВЛЕНИЕ ИЕРАРХИИ ЗАГОЛОВКОВ */
  .header-main {
    font-size: 28px !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
  }

  .header {
    font-size: 24px !important;
    margin-bottom: 14px !important;
    line-height: 1.3 !important;
  }

  .header-medium {
    font-size: 20px !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
  }

  .header-small {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
  }

  /* ИСПРАВЛЕНИЕ ЛОГОТИПА - увеличиваем размер */
  .logo {
    width: 100px !important;
    height: 100px !important;
  }

  /* ИСПРАВЛЕНИЕ КНОПКИ "ЛИЧНЫЙ КАБИНЕТ" В МОБИЛЬНОМ МЕНЮ */
  #pers-acc {
    margin-top: 20px !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  #pers-acc > li > a {
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #050505 !important;
    text-align: left !important;
    display: block !important;
    width: 100% !important;
  }

  #pers-acc > li > a::before {
    display: none !important;
  }

  #pers-acc > li > a:hover {
    background: rgba(146, 125, 250, 0.1) !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* ИСПРАВЛЕНИЕ ОТСТУПОВ В НАВИГАЦИОННОМ МЕНЮ */
  .navbar-collapse {
    padding: 0 !important;
    margin-top: 10px !important;
  }

  .navbar-nav {
    padding-left: 0 !important;
  }

  .nav-item {
    padding: 0 !important;
  }

  .nav-link {
    padding: 12px 16px !important;
  }

  /* Улучшение контейнеров */
  .container-main {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
    padding: 0 16px !important;
  }

  .container-description, .container-picture {
    margin: 0 !important;
    padding: 12px 8px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .container-description.one {
    margin-left: 0 !important;
  }

  .pictures {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto 16px auto !important;
    display: block;
  }

  .text, .text-principles, .text-promo, .contacts-text, li, .doc-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  .text-principles {
    font-size: 18px !important;
  }

  .text-promo {
    font-size: 19px !important;
  }

  .doc-section {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 16px !important;
    margin: 16px 0 !important;
  }

  .doc-frame-main {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(146,125,250,0.08) !important;
    background: #FEFEFE !important;
    box-sizing: border-box !important;
  }

  #row-position.row {
    flex-direction: column !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 16px !important;
  }

  .card {
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(146,125,250,0.12) !important;
    background: #fff !important;
    overflow: hidden;
  }

  /* Кнопки */
  #bs-btn-color, #toggle-one, #toggle-two, #toggle-free {
    font-size: 16px !important;
    padding: 12px 20px !important;
    margin: 5px !important;
  }

  /* Footer improvements */
  footer {
    padding: 20px 16px !important;
  }

  footer .nav {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  footer .nav-item {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Full-width rows inside contact form */
#fs-frm .col-sm-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Right spacing for 'Свяжитесь с нами' button */
#pers-acc {
    margin-right: 1cm !important;
    padding-right: 0 !important;
}
/* Ensure inner link has suitable horizontal padding (~0.8 * font-size 25px ≈ 20px) */
#pers-acc .nav-link {
    padding-left: 20px !important;
    padding-right: 20px !important;
}