*,
*::before,
*::after {
    box-sizing: border-box !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}


img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}


.home-frame {
    width: 100%;
    position: relative;
    background-color: #3b9a21;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.frame-home-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.inner-frame-1 {
    width: 100%;
    min-height: 100vh;

    flex: 1;
    background: radial-gradient(50% 50%at 50% 50%, #b9ffae 0%, #a8f499 8%, #7ed06c 33%, #64bb4f 56%, #5bb445 75%, #52ad3b 81%, #3c9b22 100%),
        radial-gradient(50% 50% at 50% 50%, #c8ffff 0, #b9f4e7 8%, #8dd5a2 33%, #6abc6b 56%, #51aa43 75%, #419f2a 81%, #3c9b22 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0px;
    padding-top: 40px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 5vw;
    box-sizing: border-box;
    gap: 20px;
    flex-wrap: nowrap;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.head-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.officelogicland-parent {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(12px, 1.2vw, 18px);
}

.officelogicland {
    position: relative;
    word-wrap: break-word;
}

.logo-logic-parent {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.logo-logic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logic-land-logo-icon {
    height: 35px;
    width: auto;
    object-fit: contain;
}

.logic-land {
    font-weight: bold;
    color: #fff;
    text-align: center;
    font-size: clamp(16px, 2vw, 28px);
}

.abonentska-slushba {
    position: relative;

    font-size: clamp(16px, 2vw, 28px);
    font-family: Inter;
    color: #fff;
    text-align: center;
}

.frame-child {
    display: none;
}

.body {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


    padding: 40px 40px 8px 40px;

    position: relative;
    gap: 10px;


    box-sizing: border-box;
}

.frame-background-main {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;

    max-width: 1400px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: darken;
    z-index: 0;
    pointer-events: none;
}

.background-main-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.navigation-nadiyno-functional {
    width: 100%;

    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 5vw 50px;
    gap: 40px;
    z-index: 1;
    box-sizing: border-box;
}

.func-nad {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0px;
    box-sizing: border-box;
    gap: clamp(20px, 4vw, 40px);
    flex-wrap: wrap;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.frame-nadiyno {
    flex: 1 1 280px;

    max-width: 480px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, max-width 0.3s ease;
}

.nadiyno,
.functionalno {
    position: relative;
    font-size: clamp(24px, 3vw, 32px);
    font-family: Inter;
    color: #fff;
    text-align: center;
}

.frame-nad-icon,
.frame-fun-icon {
    width: 100%;
    height: auto;
    box-shadow: 0px 4px 4px #1a5e1a;
    border-radius: 30px;
    object-fit: cover;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.frame-nadiyno:hover {
    transform: translateY(-6px);
}

.frame-nadiyno:hover .frame-nad-icon,
.frame-nadiyno:hover .frame-fun-icon {
    box-shadow: 0px 12px 20px #124212;
}


.navigation-panel {
    width: 100%;

    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 10px 12px;
    gap: 30px;
    flex-wrap: wrap;
    box-sizing: border-box;
    height: auto !important;
}

.wrapper {
    flex: 1 1 250px;
    box-shadow: 0px 4px 4px #1a5e1a;
    border-radius: 20px;
    background-color: rgba(26, 94, 26, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px !important;
    height: auto !important;
    min-height: 20px;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.wrapper span {
    text-align: center;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    font-size: clamp(15px, 1.3vw, 19px) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    width: 100%;
}

.wrapper:hover {
    background-color: rgba(26, 94, 26, 0.6);
    transform: translateY(-3px);
    box-shadow: 0px 6px 12px #124212;
}

.nadiyno-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.inne-framer-2 {
    width: 100%;
    min-height: 100vh;
    background: radial-gradient(135.53% 71.33% at 3.12% 50%, #8ce77d, #68cc58);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0px 40px;
    box-sizing: border-box;
    gap: 0px;
}

.text-nadiyno {
    width: 100%;
    background-color: rgba(26, 94, 26, 0.2);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 20px 20px clamp(20px, 8vw, 100px);
    box-sizing: border-box;
    text-align: left;
    font-size: clamp(24px, 3.5vw, 50px);
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.text-nadiyno .b {
    position: relative;
    text-align: left;
}

.frame-unait-1 {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 5vw;
    box-sizing: border-box;
    text-align: left;
    color: #fff;
    font-family: 'Inter', sans-serif;
    flex-wrap: wrap;
    gap: 40px;
}

.operator-informstion {
    flex: 1 1 400px;
    min-width: 300px;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

.image-operator {
    flex: 1 1 300px;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-operator-1-icon {
    width: 100%;
    height: auto;
    max-width: 438px;
    object-fit: contain;
}

.frame-inform {
    flex: 1 1 300px;
    min-width: 300px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    justify-content: flex-start;
    gap: clamp(16px, 3vw, 24px);
}

.wrapper2 {
    width: 100%;
    height: auto;
    border-radius: 20px;
    background-color: rgba(89, 182, 67, 0.6);
    display: flex;
    align-items: center;
    padding: 16px 20px;
    box-sizing: border-box;
    min-height: 60px;
}

.v-kooboctsi-1,
.v-kooboctsi-2,
.v-kooboctsi-3 {
    width: 100%;
    position: relative;
    font-size: clamp(14px, 1vw, 20px);
    display: flex;
    font-family: 'Inter', sans-serif;
    color: #fff;
    text-align: left;
    align-items: center;
}

.map-logic-text {
    flex: 1 1 350px;
    min-width: 300px;
    max-width: 600px;
    background: linear-gradient(270deg, #66c955, #59bb45);
    border-left: 5px solid #1a5e1a;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    border-radius: 0 20px 20px 0;
    box-sizing: border-box;
    overflow-y: visible;

}

.frame-map-image {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.frame-map-image-1-icon {
    width: 100%;
    height: auto;
    min-width: 250px;
    max-width: 752px;
    object-fit: contain;
}

.korobka-logic-text {
    width: 100%;
    font-size: clamp(14px, 1vw, 20px);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #fff;
    line-height: 1.2;
}

.text-logic {
    width: 100%;
    border-radius: 15px;
    background-color: rgba(26, 94, 26, 0.25);
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 6px;
    box-sizing: border-box;
}

.div,
.ul {
    width: 100%;
    font-weight: 400;
    font-size: clamp(12px, 0.9vw, 16px);
    line-height: 1.3;
    color: #fff;
}

.ul {
    margin: 0;
    padding-left: 15px;
}

.li {
    margin-bottom: 4px;
    word-wrap: break-word;
}

.functional-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.inne-framer-3 {
    width: 100%;
    flex: 1;
    background-color: #68cc58;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0px;
    box-sizing: border-box;
    gap: 20px;
}

.frame-unait-2 {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: clamp(18px, 4vw, 26px) clamp(22px, 6vw, 35px);
    box-sizing: border-box;
    text-align: left;
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    flex-wrap: wrap;
    gap: 10px;
}

.abonent-frame {
    flex: 1;
    min-width: 320px;
    max-width: 495px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.image-abonent-icon {
    width: 100%;
    max-width: 433px;
    height: auto;
}

.text-abonent {
    min-height: 180px;
    position: relative;
    border-radius: 30px;
    background-color: rgba(26, 94, 26, 0.2);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 50px;
    box-sizing: border-box;
    gap: 12px;
    text-align: center;
}

.komun-kab {
    max-width: 300px;
    width: 100%;
    position: relative;
    font-size: 20px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.abon-texy-kor {
    position: relative;
    font-size: 18px;
    text-align: left;
}

.ol {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    padding-left: 27px;
}

.li {
    margin-bottom: 0px;
    word-wrap: break-word;
}

.span {
    text-decoration: underline;
}

.bot-frame {
    flex: 1 1 450px;
    min-width: 0;
    max-width: 1205px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

.frame-bot-chat {
    width: 100%;
    max-width: 1205px;

    display: flex;
    flex-direction: column;
}

.frame-botu {
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 30px 0px 0px 0px;
    background: linear-gradient(90deg, rgba(60, 155, 34, 0.2), rgba(104, 204, 88, 0.2));
    border-top: 4px dashed #1a5e1a;
    border-left: 4px dashed #1a5e1a;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 50px;
    gap: 20px;
    text-align: center;
    flex-wrap: wrap;
}

.chat-bot {
    position: relative;
    font-size: 30px;
    font-family: 'Inter', sans-serif;
    color: #fff;
    text-align: center;
    backdrop-filter: blur(4px);
}

.viber-tg-fb {
    display: flex;
    align-items: center;
    gap: 100px;
    text-align: left;
    font-size: 24px;
    flex-wrap: wrap;
}

.korobka-viber {
    display: flex;
    align-items: center;
    gap: 20px;
}

.viber {
    height: 40px;
    width: 40px;
    filter: drop-shadow(0px 4px 4px #1a5e1a);
    display: flex;
    align-items: center;
}

.viber-icon {
    align-self: stretch;
    width: 40px;
    position: relative;
    max-height: 100%;
}

.viber-text {
    position: relative;
}

.land-taxt {
    width: 100%;
    flex-grow: 1;
    max-width: 1205px;
    background: linear-gradient(90deg, rgba(73, 168, 49, 0.5), rgba(104, 204, 88, 0.5));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 120px 50px;
    box-sizing: border-box;
}

.text-v-vb-tg-fb-land {
    max-width: 300px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.ul {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    padding-left: 32px;
}

.frame-image-vib-tg-fb-icon {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;

    position: relative;
    z-index: 2;
    margin-top: clamp(-276px, -14.4vw, -30px);
    margin-bottom: clamp(-150px, -7.8vw, 0px);
}

.app-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-color: #fff;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inner-frame-4 {
    width: 100%;
    flex: 1;
    background: radial-gradient(84.5% 63.85% at 74.17% 50%, #68cc58 69.71%, #8bcf84);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 150px);
    box-sizing: border-box;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.dodatki {
    width: 100%;
    max-width: 1220px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(40px, 6vw, 100px);
    flex-wrap: wrap;
}

.dodatok-kontroler {
    flex: 1 1 320px;
    max-width: 514px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.dodatok-abonenta {
    flex: 1 1 320px;
    max-width: 514px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.img-kontrol-icon,
.img-dod-abon-icon {
    width: 100%;
    max-width: 414px;
    height: auto;
    min-width: 250px;
    object-fit: contain;
}

.text-kontrol,
.text-dod-ab {
    position: relative;
    border-radius: 30px;
    background-color: rgba(26, 94, 26, 0.2);
    width: 100%;
    max-width: 380px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px clamp(20px, 3vw, 50px);
    box-sizing: border-box;
    gap: 12px;
    text-align: center;
    font-size: clamp(20px, 1.5vw, 24px);
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.dodaok-kontroler-text,
.dod-abon-text {
    position: relative;
}

.dodatok-text-kontrol,
.dodatok-abon-text {
    width: 280px;
    position: relative;
    font-size: 16px;
    display: flex;
    font-family: Inter;
    color: #fff;
    text-align: left;
    align-items: center;

}

.dodatok-text-kontrol-txt,
.dodatok-abon-text-txt {
    width: 100%;
}

.abzats {
    margin: 0 auto;
}

.ol {
    margin: 0 auto;
    font-family: inherit;
    font-size: inherit;
    padding-left: 21px;
}

.abzats-1 {
    margin-bottom: 0px;
}




.navigation-page-dla-vodpos {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.inner-frame-5 {
    width: 100%;
    flex: 1;
    background: linear-gradient(121.64deg, #68cc58 63.98%, #84c7cf);
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.frame-text-inform {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    box-sizing: border-box;
    gap: 50px;
}

.dla-vodopostachanya {
    width: 100%;
    box-shadow: 0px 4px 4px #1a5e1a;
    border-radius: 40px;
    background-color: rgba(26, 94, 26, 0.2);
    display: flex;
    align-items: center;
    padding: 15px clamp(30px, 4vw, 50px);
    box-sizing: border-box;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 700;
}

.dla-vodpos {
    max-width: 400px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}

.vodokanal-text {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 50px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.korobka-texty {
    flex: 1 1 800px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.odyn,
.dva,
.tri,
.chotiri {
    width: 100%;
    max-width: 1046px;
    height: auto;
    background: linear-gradient(90deg, rgba(73, 168, 49, 0.5), rgba(104, 204, 88, 0.5));
    border-left: 4px solid #1a5e1a;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    gap: 10px;

}

.pidzagolovok {
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 600;
}

.text-inf {
    position: relative;
    font-size: clamp(14px, 1.5vw, 16px);
    font-family: 'Inter', sans-serif;
    color: #fff;
    text-align: left;
}

.woman {
    flex: 1 1 100px;
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 20px 0px;
}

.x-1-icon {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
}

.navigation-page-dla-jak {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.inner-frame-6 {
    width: 100%;
    flex: 1;
    background: linear-gradient(72.44deg, #9ac661, #73cb5a 25.86%, #68cc58 60.34%, #83c8cd);
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.frame-text-inform-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    box-sizing: border-box;
    gap: 50px;
}

.dla-jak {
    width: 100%;
    box-shadow: 0px 4px 4px #1a5e1a;
    border-radius: 40px;
    background-color: rgba(26, 94, 26, 0.2);
    display: flex;
    align-items: center;
    padding: 15px clamp(30px, 4vw, 50px);
    box-sizing: border-box;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 700;
}

.dla-jaka {
    max-width: 400px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}

.jak-text {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 50px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.korobka-texty-2 {
    flex: 1 1 800px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.odyn,
.dva,
.tri {
    width: 100%;
    max-width: 1046px;
    height: auto;
    background: linear-gradient(90deg, rgba(73, 168, 49, 0.5), rgba(104, 204, 88, 0.5));
    border-left: 4px solid #1a5e1a;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    gap: 10px;

}

.pidzagolovok {
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 600;
}

.text-inf {
    position: relative;
    font-size: clamp(14px, 1.2vw, 18px);
    /* Розширив верхній ліміт шрифту */
    font-family: 'Inter', sans-serif;
    color: #fff;
    text-align: left;
    line-height: 1.4;
}

.woman-2 {
    flex: 1 1 100px;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 20px 0px;
}

.jakh-logo3x-1 {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
}


.navigation-page-dla-tpv {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.inner-frame-7 {
    width: 100%;
    flex: 1;
    background: linear-gradient(107.56deg, #9ac661, #73cb5a 27.4%, #68cc58 64.42%, #86cc82 84.13%, #b2ccbf);
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.frame-text-inform-3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    box-sizing: border-box;
    gap: 50px;
}

.dla-tpv {
    width: 100%;
    box-shadow: 0px 4px 4px #1a5e1a;
    border-radius: 40px;
    background-color: rgba(26, 94, 26, 0.2);
    display: flex;
    align-items: center;
    padding: 15px clamp(30px, 4vw, 50px);
    box-sizing: border-box;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 700;
}

.tpv-zag {
    max-width: 400px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}

.tpv-text {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 50px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.korobka-texty-3 {
    flex: 1 1 800px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.odyn,
.dva,
.tri,
.chotiri {
    width: 100%;
    max-width: 1046px;
    height: auto;
    background: linear-gradient(90deg, rgba(73, 168, 49, 0.5), rgba(104, 204, 88, 0.5));
    border-left: 4px solid #1a5e1a;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    gap: 10px;

}

.pidzagolovok {
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 600;
}

.text-inf {
    position: relative;
    font-size: clamp(14px, 1.2vw, 18px);
    font-family: 'Inter', sans-serif;
    color: #fff;
    text-align: left;
    line-height: 1.4;
}

.woman-3 {
    flex: 1 1 100px;
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 20px 0px;
}

.korobka-konfidents {
    width: 100%;
    position: relative;
    box-shadow: 0px 16px 16px #3c9b22 inset;
    background-color: #58b64c;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center; /* Змінено на center для кращого вигляду на мобільних */
    font-size: clamp(16px, 1.5vw, 24px); /* Гнучкий шрифт */
    color: #fff;
    font-family: 'Inter', sans-serif; /* Додано запасний шрифт */
}

.smuga {
    width: 100%;
    box-sizing: border-box; /* Захист від розтягування */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Відступи плавно зменшуються на малих екранах */
    padding: clamp(30px, 4vw, 50px) clamp(20px, 5vw, 80px); 
}

.konteyn-smug {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 20px);
    max-width: 100%;
    flex-wrap: wrap; /* ДОДАНО: Дозволяє тексту перенестися, якщо екран надто вузький */
}

.sav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vector-icon {
    height: auto;
    width: clamp(25px, 2vw, 35px); /* Адаптивний розмір іконки */
    position: relative;
}

.polit-konfid {
    position: relative;
    font-weight: 600;
}

.a {
    color: inherit;
}

.span {
    text-decoration: underline;
}

.smuga-2 {
    width: 100%;
    background-color: #3c9b22;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(15px, 2vw, 20px) 10px; /* Гнучкі відступи */
    gap: 10px;
    font-size: clamp(14px, 1.2vw, 20px); /* Гнучкий шрифт копірайту */
    box-sizing: border-box;
    flex-wrap: wrap; /* Безпечний переніс для телефонів */
}

.mini-logo {
    height: clamp(35px, 3vw, 45px); /* Гнучкий логотип */
    width: clamp(35px, 3vw, 45px);
    border-radius: 50%; /* 50% робить ідеальне коло замість 100px */
    background-color: rgba(236, 246, 233, 0.9);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aiumin-1-icon {
    height: clamp(15px, 1.5vw, 19px);
    width: auto; /* Щоб не спотворювались пропорції */
    position: relative;
}

.text-2009 {
    display: flex;
    align-items: center;
}

.tpv-image3x-1-icon {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
}


.butom-scroll {
    width: 60px;
    height: 60px;
    margin: 0;
    position: fixed;
    right: 39px;
    bottom: 39px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.butom-arrow-icon {
    align-self: stretch;
    height: 60px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 100%;
}

.butom-arrow-icon:hover {
    transform: translateY(-6px);
    box-shadow: 0px 12px 20px #124212;
}

#butomArrow {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hidden-arrow {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ================================================== */
/* ГОЛОВНИЙ КОНТЕЙНЕР                                 */
/* ================================================== */
.body-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 40px);
    position: relative;
    isolation: isolate;
    gap: 10px;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Inter', sans-serif; /* ВИПРАВЛЕНО: Додано лапки та запасний шрифт */
}

/* ================================================== */
/* ФОНОВЕ ЗОБРАЖЕННЯ                                  */
/* ================================================== */
.frame-background-main-2 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(4px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: darken;
    z-index: 0;
    pointer-events: none;
}

.background-main-2 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.background-main-icon-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================================== */
/* ЗЕЛЕНИЙ БЛОК З ТЕКСТОМ                             */
/* ================================================== */
.text-polit-konf {
    width: 100%;
    max-width: 1600px;
    border-radius: 30px;
    background-color: rgba(44, 119, 33, 0.7);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(30px, 5vw, 50px);
    gap: clamp(20px, 3vw, 40px);
    z-index: 1;
    box-sizing: border-box;
}

.politik-zag {
    border-left: 10px solid #74da74;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
}

.div {
    position: relative;
    font-weight: 600;
    font-size: clamp(24px, 2.5vw, 36px);
}

.text-bagato {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    font-size: clamp(16px, 1.5vw, 24px);
}

/* ================================================== */
/* ВНУТРІШНІЙ ТЕКСТ                                   */
/* ================================================== */
.aboncomua-container {
    width: 100%;
    position: relative;
}

.aboncomua,
.p,
.p9 {
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.aboncomua,
.p9 {
    font-weight: 600;
}

.p {
    font-size: clamp(18px, 1.8vw, 28px);
}
/* ================================================== */
/* НИЖНЯ СМУГА / ФУТЕР                                */
/* ================================================== */


@media (min-width: 1921px) {

    .frame-background-main,
    .navigation-nadiyno-functional,
    .navigation-panel {
        max-width: 2300px;
    }

    .frame-nadiyno {
        max-width: 750px;
        gap: 24px;
    }

    .nadiyno,
    .functionalno {
        font-size: 40px;
    }

    .navigation-panel {
        gap: 50px;
        padding: 20px;
    }

    .wrapper {
        flex-basis: 350px;
        padding: 20px 30px !important;
    }

    .wrapper span {
        font-size: 24px !important;
    }

    .head {
        padding: 20px 5vw;
    }

    .logic-land-logo-icon {
        height: 45px;
    }

    .logic-land,
    .abonentska-slushba {
        font-size: 40px;
    }

    .officelogicland-parent {
        font-size: 24px;
    }
}


@media (min-width: 1921px) {

    .frame-background-main,
    .navigation-nadiyno-functional,
    .navigation-panel {

        max-width: 2300px;
    }

    .frame-nadiyno {
        max-width: 750px;
        gap: 24px;
    }

    .nadiyno,
    .functionalno {
        font-size: 40px;
    }


    .navigation-panel {
        gap: 50px;

        padding: 20px;
    }

    .wrapper {
        flex-basis: 350px;

        padding: 20px 30px !important;

        border-radius: 40px;
    }

    .wrapper span {
        font-size: 24px !important;
    }
}

@media (min-width: 1921px) {
    .frame-unait-1 {
        padding: 60px 6vw;
        gap: 100px;
    }


    .operator-informstion {
        max-width: 1600px;
    }


    .image-operator-1-icon {
        max-width: 600px;

    }


    .frame-inform {
        max-width: 900px;
    }

    .wrapper2 {
        padding: 24px 30px;
        min-height: 80px;
    }
}

@media (min-width: 1921px) {

    .map-logic-text {
        max-width: 950px;
    }

    .frame-map-image {
        flex: 1 1 auto;
    }

    .frame-map-image-1-icon {
        max-width: 100% !important;
        max-height: 800px !important;
        object-fit: contain;
    }

    .korobka-logic-text {
        font-size: 28px;
    }

    .text-logic {
        padding: 20px;
        gap: 12px;
    }

    .div,
    .ul {
        font-size: 22px;
    }

    .ul {
        padding-left: 25px;
    }

    .li {
        margin-bottom: 8px;
    }
}

@media (min-width: 1921px) {

    .frame-unait-2 {
        align-items: stretch;
    }


    .abonent-frame {
        max-width: 650px;
    }

    .image-abonent-icon {
        max-width: 550px;
    }

    .text-abonent {
        padding: 34px 0px;
    }

    .komun-kab {
        font-size: 28px;
        max-width: 400px;
    }

    .abon-texy-kor {
        font-size: 24px;
    }

    .bot-frame,
    .frame-bot-chat,
    .land-taxt {
        max-width: 1700px;
    }

    .frame-botu {
        padding: 30px 70px;
    }

    .chat-bot {
        font-size: 40px;
    }

    .viber-tg-fb {
        font-size: 32px;
        gap: 200px;
    }

    .viber,
    .viber-icon {
        width: 55px;
        height: 55px;
    }

    .land-taxt {
        padding: 185px 70px;
    }

    .text-v-vb-tg-fb-land {
        max-width: 500px;
        font-size: 28px;
    }

    .text-v-vb-tg-fb-land .ul {
        font-size: 26px;
        line-height: 1.5;
    }

    .frame-image-vib-tg-fb-icon {
        max-width: 1600px;
        margin-top: -320px;
    }
}

@media (max-width: 1024px) {
    .frame-unait-2 {
        align-items: center;
    }

    .frame-image-vib-tg-fb-icon {
        position: relative;
        top: auto;
        margin-top: 20px;
    }

    .land-taxt {
        flex-grow: 0;
        padding: 50px 30px;
    }
}

@media (min-width: 1921px) {

    .frame-image-vib-tg-fb-icon {
        max-width: 1600px;
        margin-top: -320px;
    }
}

@media (max-width: 1024px) {
    .frame-image-vib-tg-fb-icon {
        margin-top: 10px;
        margin-bottom: 0px;
    }
}


@media (min-width: 1921px) {

    .dodatki {
        max-width: 1900px;
    }

    .dodatok-kontroler,
    .dodatok-abonenta {
        max-width: 700px;
        gap: 20px;
    }

    .img-kontrol-icon,
    .img-dod-abon-icon {
        max-width: 550px;
    }

    .text-kontrol,
    .text-dod-ab {
        max-width: 500px;
        padding: 30px 50px;
        font-size: 28px;
        border-radius: 40px;

    }

    .dodatok-text-kontrol,
    .dodatok-abon-text {
        font-size: 20px;
        width: 350px
    }

    .ol {
        padding-left: 30px;
    }
}

@media (min-width: 1921px) {

    .frame-text-inform {
        padding: 70px 2vw;
        gap: 20px;
    }

    .vodokanal-text {
        max-width: 2500px;
        padding: 0 2vw;
        gap: 40px;
    }

    .dla-vodopostachanya {
        font-size: 34px;
        padding: 20px 40px;
        border-radius: 50px;
    }

    .dla-vodpos {
        max-width: 800px;
    }

    .korobka-texty {
        flex: 1 1 1200px;
        max-width: 1900px;
        gap: 30px;
    }

    .odyn,
    .dva,
    .tri,
    .chotiri {
        width: 100%;
        max-width: none;
        padding: 40px 50px;
        gap: 20px;
        border-left: 6px solid #1a5e1a;
    }

    .pidzagolovok {
        font-size: 30px;
    }

    .text-inf {
        font-size: 24px;
        line-height: 1.5;
    }

    .x-1-icon {
        max-width: 600px;
    }
}

@media (min-width: 1921px) {


    .frame-text-inform-2 {
        padding: 70px 2vw;
        gap: 20px;
    }

    .jak-text {
        max-width: 2500px;
        padding: 0 2vw;
        gap: 40px;

    }

    .dla-jak {
        font-size: 34px;
        padding: 20px 40px;
        border-radius: 50px;
    }

    .korobka-texty-2 {
        flex: 1 1 1200px;
        max-width: 1900px;
        gap: 30px;
    }

    .odyn,
    .dva,
    .tri {
        width: 100%;
        max-width: none;
        padding: 40px 50px;
        gap: 20px;
        border-left: 6px solid #1a5e1a;

    }

    .pidzagolovok {
        font-size: 30px;
    }

    .text-inf {
        font-size: 24px;
        line-height: 1.5;
    }

    .jakh-logo3x-1 {
        max-width: 600px;
    }
}


@media (min-width: 1921px) {

    .frame-text-inform-3 {
        padding: 70px 2vw;
        gap: 20px;
    }


    .tpv-text {
        max-width: 2500px;
        padding: 0 2vw;
        gap: 40px;
    }


    .dla-tpv {
        font-size: 34px;
        padding: 20px 40px;
        border-radius: 50px;
    }

    .tpv-zag {
        max-width: 450px;
    }


    .korobka-texty-3 {
        flex: 1 1 1200px;
        max-width: 1900px;
        gap: 30px;
    }


    .odyn,
    .dva,
    .tri,
    .chotiri {
        width: 100%;
        max-width: none;
        padding: 40px 50px;
        gap: 20px;
        border-left: 6px solid #1a5e1a;
    }

    .pidzagolovok {
        font-size: 30px;
    }

    .text-inf {
        font-size: 24px;
        line-height: 1.5;
    }

    .tpv-image3x-1-icon {
        max-width: 600px;
    }

    .butom-scroll {
        width: 80px;
        height: 80px;
        right: 60px;
        bottom: 60px;
    }

    .butom-arrow-icon {
        height: 80px;
    }
}
/* ================================================== */
/* НАЛАШТУВАННЯ ДЛЯ 2560px+ (Футер)                   */
/* ================================================== */
@media (min-width: 1921px) {
    
    /* Збільшуємо загальний шрифт для великого блоку */
    .korobka-konfidents {
        font-size: 32px; 
    }

    /* Збільшуємо відступи в основній смузі */
    .smuga {
        padding: 70px 120px; 
    }

    /* Збільшуємо іконку вектора (щит/документ) */
    .vector-icon {
        width: 45px;
    }

    /* Збільшуємо нижню смугу з копірайтом */
    .smuga-2 {
        font-size: 26px;
        padding: 30px 20px;
    }

    /* Масштабуємо міні-логотип у футері */
    .mini-logo {
        height: 60px;
        width: 60px;
    }

    .aiumin-1-icon {
        height: 26px;
    }
}
/* ================================================== */
/* НАЛАШТУВАННЯ ДЛЯ 2560px+ (Медіа-запит)             */
/* ================================================== */
@media (min-width: 1921px) {
    
    /* Додаємо більше повітря навколо основного блоку */
    .body-2 {
        padding: 60px 5vw;
    }

    /* Розширюємо зелену плашку, щоб вона не здавалася "вузькою" на великому екрані */
    .text-polit-konf {
        max-width: 2100px; 
        padding: 80px 100px;
        gap: 60px;
        border-radius: 40px; /* Трохи більший радіус для масивного блоку */
    }

    /* Масштабуємо зелену смужку збоку від заголовка */
    .politik-zag {
        border-left-width: 16px;
        padding-left: 30px;
    }

    /* Збільшуємо всі шрифти, щоб їх було зручно читати на 2K */
    .div {
        font-size: 48px;
    }

    .text-bagato {
        font-size: 32px;
    }

    .p {
        font-size: 36px;
    }

    .aboncomua,
    .p9 {
        font-size: 30px;
    }
}