@charset "UTF-8";
:root {
    --primary-color: #7CB932;
    --primary-color-dark: #5E941E;
    --primary-color-light: #B9DF8B;
    --primary-color-text: #5E941E;
    --link-color: #5E941E;
    --link-color-hover: #203A00;
    --primary-bg-light: #DBEDA8;
    --text-gradient-color-start: #121926;
    --text-gradient-color-stop: #7CB932;
    --banner-gradient-color-start: #121926;
    --banner-gradient-color-stop: #364152;
    --border-gradient-image: linear-gradient(115deg, #E4FA9D 6.07%, #D3EC87 13.05%, #C0DC6E 23.24%, #B4D25E 32.48%, #B0CF59 39.85%, #A5C958 52.83%, #89B855 75.38%, #6DA852 93.57%);
    --btn-focus-primary: #5E941E;
    --btn-pressed-primary: #508214;
    --title-gradient-color: linear-gradient(90deg, #121926 0%, #7AC800 100%);
    --custom-radio-hover: #5E941E;
    --custom-radio-focus: #5E941E
}

[data-theme=blue] {
    --primary-color: #017CAD;
    --primary-color-dark: #001A5A;
    --primary-color-light: #A2E2FF;
    --primary-color-text: #017CAD;
    --link-color: #017CAD;
    --link-color-hover: #001A5A;
    --primary-bg-light: #A2E2FF;
    --text-gradient-color-start: #001A5A;
    --text-gradient-color-stop: #0099C7;
    --border-gradient-image: linear-gradient(90deg, #001A5A 0%, #00A9CE 100%);
    --btn-focus-primary: #017CAD;
    --btn-pressed-primary: #001A5A;
    --bg-gradient-vertical: linear-gradient(180deg, #002584 0%, #00A9CE 100%);
    --title-gradient-color: linear-gradient(90deg, #001A5A 0%, #0099C7 100%);
    --custom-radio-hover: #017CAD;
    --custom-radio-focus: #017CAD
}

[data-theme=emerald] {
    --primary-color: #32B95F;
    --primary-color-dark: #00222A;
    --primary-color-light: #A9EDA8;
    --primary-color-text: #32B95F;
    --link-color: #32B95F;
    --link-color-hover: #00222A;
    --primary-bg-light: #A9EDA8;
    --text-gradient-color-start: #00222A;
    --text-gradient-color-stop: #00D8B1;
    --border-gradient-image: linear-gradient(90deg, #00222A 0%, #00D8B1 100%);
    --border-gradient-image-reverse: linear-gradient(90deg, #00D8B1 0%, #00222A 100%);
    --btn-focus-primary: #00222A;
    --btn-pressed-primary: #00222A;
    --bg-gradient-vertical: linear-gradient(159deg, #00222A 0%, #00D8B1 100%);
    --title-gradient-color: linear-gradient(90deg, #00222A 0%, #00D8B1 100%);
    --custom-radio-hover: #32B95F;
    --custom-radio-focus: #32B95F
}

.pricing-frame {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding-bottom: 40px
}

.pricing-frame .page-header {
    padding-top: 20px;
    padding-bottom: 0
}

.pricing-frame .page-title {
    font-size: 32px
}

@media (min-width:1200px) {
    .pricing-frame {
        padding-top: 40px;
        padding-bottom: 100px;
        gap: 100px
    }
    .pricing-frame .page-header {
        padding: 0;
        max-width: 1200px;
        margin: 0 auto
    }
    .pricing-frame .page-title {
        font-size: 60px
    }
}

@media (min-width:1200px) {
    .header-block {
        max-width: 1200px;
        margin: 0 auto
    }
}

.pricing-block-1 {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.pricing-block-1 .header-block {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.pricing-block-1 .title-simple {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Work Sans', Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 600
}

@media (min-width:1200px) {
    .pricing-block-1 .title-simple {
        font-size: 40px;
        letter-spacing: .048px;
        font-weight: 700;
        line-height: 1.5;
        font-family: "Plus Jakarta Sans", "Work Sans", Arial, Helvetica, sans-serif
    }
}

.pricing-block-1 .subtitle {
    margin: 0
}

@media (min-width:1200px) {
    .pricing-block-1 .subtitle {
        font-size: 20px
    }
}

.pricing-block-2 {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.pricing-block-2 .header-block {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.pricing-block-2 .header-block .title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Work Sans', Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: 600
}

.pricing-block-2 .header-block .subtitle {
    margin: 0
}

.pricing-block-2-content.desktop {
    display: none
}

.pricing-block-2-content.mobile {
    display: flex;
    flex-direction: column;
    gap: 40px
}

@media (min-width:1200px) {
    .pricing-block-2-content.desktop {
        display: block
    }
    .pricing-block-2-content.mobile {
        display: none
    }

.pricing-block-2 .banner-simple {
    width: 24rem; 
    height: 24rem;
    transition: 
width 0.5s ease-in-out 200ms,  
height 0.5s ease-in-out 200ms, 
border-radius 0.5s ease-in-out 100ms, 
padding 0.5s ease-in-out 100ms;

}

}

.pricing-block-2 .banner-simple {
    display: flex;
    padding: 32px;
    flex-direction: column;
    gap: 8px;
    border-radius: 32px;
    background: linear-gradient(359deg, #121926 34.45%, #364152 113.39%);
    color: #fff;     
    border-radius: 32px;

}

.is-collapsed .banner-simple {    
    width: 75px;
    height: 75px;
    padding: 1px;
    border-radius: 100%;
}


.pricing-block-2 .banner-simple-header {
    display: flex;
    align-items: center;
    gap: 8px
}

.pricing-block-2 .banner-simple-header .icon {
    flex-shrink: 0;
    display: flex;
    width: 73px;
    height: 73px;
    border-radius: 73px;
    background: linear-gradient(115deg, #e4fa9d 6.07%, #d3ec87 13.05%, #c0dc6e 23.24%, #b4d25e 32.48%, #b0cf59 39.85%, #a5c958 52.83%, #89b855 75.38%, #6da852 93.57%);
    overflow: hidden
}

.pricing-block-2 .banner-simple-header .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pricing-block-2 .banner-simple-header .name {
    display: block;
    margin-bottom: 4px;
    font-family: 'Plus Jakarta Sans', 'Work Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600
}

.pricing-block-2 .banner-simple-header .position {
    display: block;
    font-size: 14px
}

.pricing-block-2 .banner-simple-footer {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.pricing-block-2 .accordion {
    background-color: #fff;
    border-radius: 14px
}

@media (min-width:1200px) {
    .pricing-block-2 .header-block .title {
        font-size: 60px;
        font-weight: 700
    }
    .pricing-block-2 .header-block .subtitle {
        font-size: 20px
    }
    .pricing-block-2 .wrapper-desktop {
        display: flex;
        align-items: flex-start;
        gap: 40px
    }
    .pricing-block-2 .wrapper-desktop .block-aside {
        display: flex;
        flex-direction: column;
        row-gap: 24px;
        flex-shrink: 0;
      /*  width: 350px; */
        position: sticky;
        top: 0;
        padding: 0 6px; 
    }
    .pricing-block-2 .wrapper-desktop .aside-anchors {
        display: flex;
        flex-direction: column;
        row-gap: 16px
    }
    .pricing-block-2 .wrapper-desktop .aside-anchors-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-radius: 16px;
        background-color: #f8fafc;
        text-decoration: none;
        color: #121926;
        font-size: 18px;
        letter-spacing: .022px;
        font-weight: 600;
        line-height: 1.5;
        font-family: "Plus Jakarta Sans", "Work Sans", Arial, Helvetica, sans-serif
    }
    .pricing-block-2 .wrapper-desktop .aside-anchors-item .icon {
        flex-shrink: 0;
        font-size: 24px
    }
    .pricing-block-2 .wrapper-desktop .aside-anchors-item.active,
    .pricing-block-2 .wrapper-desktop .aside-anchors-item:hover {
        background-color: #dbeda8;
        color: #121926
    }
    .pricing-block-2 .wrapper-desktop .block-scroll-content {
        display: flex;
        flex-direction: column;
        row-gap: 100px
    }
}

@media (min-width:1200px) {
    .pricing-block-4 {
        order: 10
    }
}

.pricing-block-5 {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.pricing-block-5 .header-block {
    text-align: center
}

.pricing-block-5 .header-block .title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Work Sans', Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: 600
}

.pricing-block-5 .actions {
    margin: 0 auto
}

.pricing-block-5 .accordion {
    max-width: 650px;
    margin: 0 auto
}

.accordion-price-body {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.accordion-price-table {
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    overflow: hidden
}

.accordion-price-table-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e3e8ef
}

.accordion-price-table .table-title {
    font-weight: 600;
    font-size: 14px;
    color: #364152
}

.accordion-price-table-row:last-child .accordion-price-table-item {
    border-bottom: 0
}

.accordion-price-table-item {
    padding: 16px 20px;
    border-bottom: 1px solid #e3e8ef
}

.accordion-price-list {
    display: flex;
    flex-direction: column;
    row-gap: 16px
}

.accordion-price-list .title {
    font-size: 16px;
    letter-spacing: .019px;
    font-weight: 600;
    line-height: 1.5;
    font-family: "Plus Jakarta Sans", "Work Sans", Arial, Helvetica, sans-serif;
    color: #121926
}

.accordion-price-list-item {
    display: flex;
    align-items: center;
    gap: 8px
}

.accordion-price-list-item .ph {
    flex-shrink: 0;
    font-size: 24px
}

.accordion-price-banner {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(88deg, #121926 0, #364152 100%);
        justify-content: center;
    color: #f8fafc
}

.accordion-price-banner .text {
    margin-bottom: 8px;
    color: #fff
}

.accordion-price-banner .link {
    display: flex;
    gap: 4px;
    align-items: center;
    font-weight: 600;
    text-decoration: none;
    color: #dbeda8
}

.accordion-price-banner .link .ph {
    font-size: 18px
}

.hidden-item {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.hidden-item .title {
    font-size: 18px;
    letter-spacing: .022px;
    font-weight: 600;
    line-height: 1.5;
    font-family: "Plus Jakarta Sans", "Work Sans", Arial, Helvetica, sans-serif;
    color: #121926
}

.hidden-item textarea {
    resize: none;
    min-height: 80px;
    border-radius: 16px
}

@media (min-width:1200px) {
    .hidden-item .title {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px
    }
    .hidden-item .label-costquest {
        flex-shrink: 0
    }
    .hidden-item textarea {
        min-height: 1px
    }
    .hidden-item .btn {
        align-self: flex-start
    }
}

.pricing-contacts {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding: 20px;
    border-radius: 40px;
    background: linear-gradient(90deg, #121926 0, #7cb932 100%);
    color: #fff
}

.pricing-contacts-header {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    text-align: center
}

.pricing-contacts-header .title {
    margin: 0;
    font-size: 32px;
    letter-spacing: .038px;
    font-weight: 600;
    line-height: 1.5;
    font-family: "Plus Jakarta Sans", "Work Sans", Arial, Helvetica, sans-serif
}

.pricing-contacts-header .subtitle {
    margin: 0
}

.pricing-contacts-header .actions {
    margin: 8px auto 0;
    max-width: 265px;
    display: flex;
    flex-direction: column;
    row-gap: 16px
}

.pricing-contacts-list {
    margin: 0 auto;
    max-width: 265px;
    display: flex;
    flex-direction: column;
    row-gap: 16px
}

.pricing-contacts-list-item {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .15)
}

.pricing-contacts-list-item .title {
    margin: 0;
    font-size: 16px;
    letter-spacing: .019px;
    font-weight: 600;
    line-height: 1.5;
    font-family: "Plus Jakarta Sans", "Work Sans", Arial, Helvetica, sans-serif
}

.pricing-contacts-list-item .list {
    display: flex;
    flex-direction: column;
    row-gap: 8px
}

.pricing-contacts-list-item .list-item {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px
}

.pricing-contacts-list-item .list-item .icon {
    flex-shrink: 0;
    font-size: 20px
}

.pricing-contacts-list-item .list a.list-item {
    text-decoration: none;
    color: #fff
}

.pricing-contacts-list-item .list a.list-item:hover {
    color: #121926
}

.pricing-contacts-footer {
    font-size: 14px
}

@media (min-width:1200px) {
    .pricing-contacts {
        gap: 40px;
        padding: 40px
    }
    .pricing-contacts-header {
        max-width: 1000px;
        margin: 0 auto
    }
    .pricing-contacts-header .title {
        font-size: 40px
    }
    .pricing-contacts-header .subtitle {
        font-size: 20px
    }
    .pricing-contacts-header .actions {
        margin-top: 16px;
        max-width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 16px
    }
    .pricing-contacts-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
        max-width: 100%;
        margin: 0
    }
    .pricing-contacts-list-item .title {
        font-size: 24px
    }
    .pricing-contacts-list-item .list-item {
        font-size: 20px
    }
    .pricing-contacts-list-item .list-item .icon {
        font-size: 24px
    }
    .pricing-contacts-footer {
        text-align: center
    }
}

.bg-darker {
    background-color: #f8fafc
}

.color-brand {
    color: var(--primary-color)
}

.label-costquest {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 47px;
    border: 1px solid rgba(255, 101, 111, .6)
}

.label-costquest img {
    flex-shrink: 0
}

.label-costquest span {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    background: linear-gradient(90deg, #ff656f -11.39%, #1c7eff 113.61%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.tier-item {
    display: flex;
    flex-direction: column;
    row-gap: 32px
}

.tier-item-header {
    display: flex;
    flex-direction: column;
    row-gap: 16px
}

.tier-item-header .title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    color: #121926;
    font-size: 24px;
    letter-spacing: .029px;
    font-weight: 600;
    line-height: 1.5;
    font-family: "Plus Jakarta Sans", "Work Sans", Arial, Helvetica, sans-serif
}

.tier-item-header .subtitle {
    margin: 0;
    color: #364152
}

.tier-item-footer {
    padding-bottom: 80px;
    border-bottom: 2px solid; 
    display: flex;
    gap: 10px
}

.tier-item .accordion-price-banner,
.tier-item .accordion-price-list {
    width: 50%
}

.tier-item .accordion-price-list .title {
    font-size: 18px
}

.tier-table {
    border-radius: 24px;
    border: 1px solid #e3e8ef;
    overflow: hidden
}

.tier-table table {
    width: 100%
}

.tier-table table thead th {
    background-color: #f8fafc;
    border-bottom: 1px solid #e3e8ef;
    padding: 16px 20px;
    font-size: 14px;
    letter-spacing: .017px;
    font-weight: 600;
    line-height: 1.5;
    font-family: "Work Sans", Arial, Helvetica, sans-serif;
    color: #364152
}

.tier-table table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid #e3e8ef;
    vertical-align: top
}

.tier-table table tbody td[colspan] {
    padding: 0
}

.tier-table table .tier-choice label {
    white-space: nowrap
}

.tier-choice {
    position: relative
}

.tier-choice input {
    position: absolute;
    visibility: hidden;
    opacity: 0
}

.tier-choice input+label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer
}

.tier-choice input+label .radio-check {
    flex-shrink: 0;
    margin-top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 1px solid #e3e8ef
}

.tier-choice input+label .radio-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #121926
}

.tier-choice input+label .radio-content span {
    display: block
}

.tier-choice input+label .radio-content .title {
    font-weight: 600
}

@media (min-width:1200px) {
    .tier-choice input+label .radio-content {
        font-weight: 600
    }
}

.tier-choice input:checked+label .radio-check,
.tier-choice input[checked]+label .radio-check {
    border-width: 5px;
    border-color: #508214
}

.card-grid-3 {
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media (min-width:768px) {
    .card-grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px
    }
}

.card-hover-primary {
    flex-grow: 1;
    padding: 20px;
    border-radius: 32px;
    text-align: center;
    background-color: #fff
}

.card-hover-primary .icon {
    margin-bottom: 16px;
    display: inline-flex;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background-color: #f8fafc;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #202939;
    transition: .3s
}

.card-hover-primary .title {
    margin-bottom: 16px;
    font: 600 24px/1.5 'Plus Jakarta Sans', 'Work Sans', Arial, Helvetica, sans-serif;
    color: #202939
}

.card-hover-primary .subtitle {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 24px;
    color: #364152
}

.card-hover-primary-wrapper {
    flex: 1;
    display: flex;
    padding: 1px;
    background: #e3e8ef;
    border-radius: 32px;
    transition: background .3s
}

.card-hover-primary-wrapper:hover {
    background: linear-gradient(115.02deg, #e4fa9d 6.07%, #d3ec87 13.05%, #c0dc6e 23.24%, #b4d25e 32.48%, #b0cf59 39.85%, #a5c958 52.83%, #89b855 75.38%, #6da852 93.57%)
}

.card-hover-primary-wrapper:hover .card-hover-primary .icon {
    background-color: #dbeda8
}

@media (min-width:1200px) {
    .card-hover-primary {
        padding: 32px
    }
    .card-hover-primary .icon {
        margin-bottom: 24px
    }
}

.request-banner {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding: 40px;
    border-radius: 40px;
    background: linear-gradient(359deg, #121926 34.45%, #364152 100%);
    color: #fff;
    text-align: center
}

.request-banner .title {
    margin: 0;
    font-size: 40px;
    letter-spacing: .048px;
    font-weight: 700;
    line-height: 1.5;
    font-family: "Plus Jakarta Sans", "Work Sans", Arial, Helvetica, sans-serif;
    color: #dbeda8
}

.request-banner .text {
    margin: 0;
    font-size: 20px
}

.request-banner .actions {
    margin: 0 auto;
    display: inline-flex;
    gap: 16px
}

.hidden-mobile {
    display: none
}

@media (min-width:768px) {
    .hidden-mobile {
        display: inherit
    }
}

@media (max-width:919px) {
    .parallax-item-1 {
        position: sticky;
        top: 50px;
        z-index: 10
    }
    .parallax-item-1.is-relative {
        position: relative;
        top: auto;
        transform: translateY(100%)
    }
    .parallax-item-2 {
        position: relative;
        z-index: 20;
        top: 0
    }
}


/* Now, these styles will only affect elements inside .wrapper-desktop */

.wrapper-desktop tbody tr:has(input[type="radio"]) {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.wrapper-desktop tbody tr:has(input[type="radio"]):hover {
    background-color: #f5f5f5;
}

.wrapper-desktop tbody tr.selected-row {
    background-color: #e0eafc;
}



/* Base styles for all anchor items */

    .technology-row-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 12px;
        width: 54px;
        height: 54px;
        border-radius: 8px;
        background: #EEF2F6
    }
    
    .technology-row-item img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain
    }
    
    @media (min-width: 992px) {
        .technology-row-item {
            width: auto;
            height: auto;
            padding: 22px;
            border-radius: 16px
        }
        .technology-row-item img {
            width: auto;
            height: 70px
        }
    }
    
    #content-wrapper {
        opacity: 0;
        /* Изначально скрыт */
        transition: opacity 0.5s ease-in-out;
        /* Transition for fade */
    }
    
    #content-wrapper.fade-out {
        opacity: 0;
    }
    
    #content-wrapper.fade-in {
        opacity: 1;
    }


    /* Loader Styles */
    
    .loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Removed background color here, using the animated one */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        opacity: 1;
        /* Изначально видимый */
        pointer-events: auto;
        /* Изначально активный */
        transition: opacity 0.75s ease-in-out;
        overflow: hidden;
        /* Keep gradient contained */
    }
    
    .loader.visible {
        opacity: 1;
        pointer-events: auto;
    }
    
    .loader.hidden {
        opacity: 0;
        pointer-events: none;
    }
    /* Animated Background Effect */
    
    .loader-background-effect {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradient-pan 15s ease infinite;
        z-index: 1;
        /* Behind content */
    }
    
    @keyframes gradient-pan {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    /* Loader Content (Logo + Dots) */
    
    .loader-content {
        position: relative;
        /* Needed to stack above absolute background */
        z-index: 2;
        /* Above background */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Optional: Add a subtle background/padding if needed */
        /* background-color: rgba(255, 255, 255, 0.1); */
        /* padding: 20px; */
        /* border-radius: 10px; */
    }
    
    .loader-content img {
        max-width: 200px;
        height: auto;
        margin-bottom: 20px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        /* Add shadow to logo */
    }
    /* Loading Dots Styles */
    
    .loading-dots {
        display: flex;
        justify-content: center;
    }
    
    .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #fff;
        /* Changed to white for better contrast */
        border-radius: 50%;
        margin: 0 5px;
        animation: dot-bounce 1.4s infinite ease-in-out both;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        /* Add shadow to dots */
    }
    
    .dot:nth-child(1) {
        animation-delay: -0.32s;
    }
    
    .dot:nth-child(2) {
        animation-delay: -0.16s;
    }
    
    .dot:nth-child(3) {
        animation-delay: 0s;
    }
    
    .dot:nth-child(4) {
        animation-delay: 0.16s;
    }
    
    @keyframes dot-bounce {
        0%,
        80%,
        100% {
            transform: scale(0);
        }
        40% {
            transform: scale(1.0);
        }
    }




/* Base styles for all anchor items */

.aside-anchors-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px;
    /* This is the key for smooth animation! */
    transition: all 0.2s ease-in-out;
}


/* * STYLES FOR THE ACTIVE CLASS
         */

.aside-anchors-item.active {
    font-weight: 800;
    font-stretch: expanded;
    /* transform: scale(1.0) translateX(-px); */
}


/* Animate the icon inside the active link */

.aside-anchors-item.active .icon {
    transform: translateX(5px);
}


/* Base transition for the icon */

.aside-anchors-item .icon {
    transition: transform 0.3s ease-in-out;
    font-size: 1.2rem;
}



    
    /* Dynamic Form Styles */
    
    .dynamic-form,
    .dynamic-form-container {
        animation: fadeInDown 0.3s ease-out;
    }
    
    .dynamic-form .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        font-weight: 600;
    }
    
    .dynamic-form .label-costquest {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #666;
        font-size: 12px;
    }
    
    .dynamic-form textarea.description {
        width: 100%;
        min-height: 140px;
        margin-top: 6px;     padding-top: 12px;
        resize: vertical;
    }
    
    .dynamic-row td {
        padding: 0 !important;
    }
    
    .dynamic-row .dynamic-form {
        margin: 15px;
    }
    
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* Dynamic tegs*/

.ph.ph-magic-wand:before {
    content: "\e6b6";
}

.form-control:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.template-switcher {
    display: none;
}

.tag-input-container {
    border: 1px solid #ced4da;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 12px;
    cursor: text;
}

.tag-input-container:hover {
    -webkit-box-shadow: 0 0 0 4px #EEF2F6;
    box-shadow: 0 0 0 4px #EEF2F6;
}

.tag-input-container:focus-within {
    border-color: #5e941e;
    background-color: #ffffff;
}
.description-wrapper {
    position: relative;
}
.tag-input-wrapper { position: relative; }
.mode-toggle-btn {
    position: absolute;
    top: -15px;
    left: 20px;
    width: 85px;
    height: 22px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 5;
    background-color: #a4a4a4;
    border: none;
    color: #ffffff;
  
}

.mode-toggle-btn:hover {
    background-color: #ffcbcc;
    color: #9b0709;
    border: 1px solid #9b0709;
}

.suggestion-prompt {
    position: absolute;
    top: 18px;
    left: 9px;
    z-index: 2;      padding: 6px;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: #adb5bd;
    transition: opacity 0.2s ease;
    flex-direction: column;
}

.suggestion-prompt.hidden {
    opacity: 0;
}

.suggestion-btn {
    background: none;
    border: none;
    color: #518c0a;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    pointer-events: auto; 
   
}


@media (max-width: 768px) {
    .suggestion-btn {
        font-size: 14px;
    }   .suggestion-prompt {
        font-size: 14px;
    }

}

.suggestion-btn span {
    text-decoration: underline;
}

.suggestion-btn:hover {
    background-color: #f3f0ff;
}

.suggestion-btn .icon {
    font-size: 1.2em;
}

textarea.description::placeholder {
    color: transparent;
}

.tags-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
}

.prompt-text {
    color: #495057;
    font-weight: 500;
}

.prompt-text.product-title {
    font-weight: bold;
    color: #212529;
}

.tag {
    display: inline-flex;
    align-items: center;
    background-color: #e9ecef;
    color: #495057;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.tag-remove {
    width: 16px;
    height: 16px;
    background-color: #adb5bd;
    color: white;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.tag-remove:hover {
    background-color: #868e96;
}

.add-tag-btn {
    background: #e9ecef;
    border: none;
    color: #495057;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-tag-btn:hover {
    background-color: #ced4da;
}

.custom-dropdown {
    position: absolute;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    white-space: nowrap;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item.selected {
    font-weight: bold;
    background-color: #e9ecef;
}

.tag.single-select-tag {
    cursor: pointer;
}

.tag.single-select-tag:hover {
    background-color: #ced4da;
}

.tag-input-container textarea.description {
    width: 100%;
    min-height: 80px;
    border: none;
    padding: 12px 0 0 0;
    margin: 0;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
}

.description-wrapper.is-invalid .tag-input-container,
.description-wrapper.is-invalid textarea.description {   
    border: solid 2px #dc3545;
}
    @media (max-width: 992px) {
 span.radio-content {
    font-size: 14px;
}

span.radio-content .title {
    font-size: 1rem;
    padding-bottom: 9px;
}
.accordion-body {
    padding: 0;
}
.accordion-item.active:before {
    background: unset;
}
.pricing-block-2 .banner-simple{    margin: 1px;} 
    }
    
/* --- Core Component Styles --- */
.wrapper-desktop {
    display: flex;
    gap: 2rem;
}

.block-aside {
   width: 24rem;  
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
}

.block-aside.aside-pinned-bottom {
    top: auto;
    bottom: 2rem;
}

.block-aside.is-collapsed {
    width: 5rem; /* 80px */
}

.block-scroll-content {
    flex-grow: 1;
    min-width: calc(100% - 120px);
}

/* --- Text & Icon Visibility --- */
.aside-anchors-item span,
.aside-anchors-item i.icon,
.banner-simple-header > div,
.banner-simple-footer {
    opacity: 1;
    transition: opacity 150ms ease-in-out;
    white-space: nowrap;
}

.block-aside.is-collapsed .aside-anchors-item span,
.block-aside.is-collapsed .aside-anchors-item i.icon,
.block-aside.is-collapsed .banner-simple-header > div,
.block-aside.is-collapsed .banner-simple-body,
.block-aside.is-collapsed .banner-simple-footer {
    opacity: 0;
    pointer-events: none;
}

/* --- CTA Banner Animation --- */
.banner-simple-body,
.banner-simple-footer {
    transition-property: opacity, max-height, margin, padding;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
    max-height: 500px;
    overflow: hidden;
}

.block-aside:not(.is-collapsed) .banner-simple-body,
.block-aside:not(.is-collapsed) .banner-simple-footer,
.block-aside:not(.is-collapsed) .banner-simple-header > div {
    transition-delay: 300ms;
}

.block-aside.is-collapsed .banner-simple-body,
.block-aside.is-collapsed .banner-simple-footer {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    transition-delay: 0ms;
}

 
.aside-anchors::-webkit-scrollbar { width: 6px; }
.aside-anchors::-webkit-scrollbar-track { background: transparent; }
.aside-anchors::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 20px; }

/* --- Custom Icon Styles --- */
.ph {
    font-family: "Phosphor"!important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.5rem; /* Размер иконки */
}

/* --- Общие иконки --- */
.ph.ph-caret-right:before { content: "\e13a"; }
.ph.ph-arrow-up-right:before { content: "\e092"; }

/* --- Иконки для секции "AI Services" (с заменами) --- */
.ph.ph-chat-circle-dots:before { content: "\e218"; } /* Замена: ph-envelope-simple */
.ph.ph-graph:before { content: "\e4ae"; } /* Замена: ph-trend-up */
.ph.ph-magnifying-glass:before { content: "\e1d6"; } /* Замена: ph-crosshair */
.ph.ph-sparkle:before { content: "\e2dc"; } /* Замена: ph-lightbulb */
.ph.ph-chart-line-up:before { content: "\e4ae"; } /* Замена: ph-trend-up */
.ph.ph-users-three:before { content: "\e68e"; }

/* --- Иконки для секции "IT Services" (с заменами) --- */
.ph.ph-briefcase:before { content: "\e478"; } /* Замена: ph-tag */
.ph.ph-lifebuoy:before { content: "\e582"; } /* Замена: ph-handshake */
.ph.ph-infinity:before { content: "\e036"; } /* Замена: ph-arrow-clockwise */
.ph.ph-cloud-arrow-up:before { content: "\e08e"; } /* Замена: ph-arrow-up */
.ph.ph-chalkboard-teacher:before { content: "\e4c2"; } /* Замена: ph-user */
.ph.ph-puzzle-piece:before { content: "\e1bc"; } /* Замена: ph-code */

/* --- Иконки для секции "Product Development" (с заменами) --- */
.ph.ph-rocket-launch:before { content: "\e4ae"; } /* Замена: ph-trend-up */
.ph.ph-device-mobile:before { content: "\e1e2"; } /* Замена: ph-device-mobile-camera */
.ph.ph-browser:before { content: "\e32e"; } /* Замена: ph-monitor */
.ph.ph-cloud:before { content: "\eba4"; } /* Замена: ph-devices */
.ph.ph-shopping-cart-simple:before { content: "\e478"; } /* Замена: ph-tag */
.ph.ph-smiley:before { content: "\e4c2"; } /* Замена: ph-user */
.ph.ph-graduation-cap:before { content: "\e7ba"; } /* Замена: ph-eyeglasses */
.ph.ph-cpu:before { content: "\e1bc"; } /* Замена: ph-code */