/**
 * Front Page Style
 * front-page-style.css
 */

html, body {
    margin: 48px 0 0 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    box-sizing: border-box;
    background: #fff;
    overflow-x: hidden;
}

@media (max-width: 1440px) and (min-width: 1269px) {
    html, body {
        margin: 38px 0 0 0 !important;
    }
}

@media (max-width: 1268px) {
    html, body {
        margin: 35px 0 0 0 !important;
    }
}

@media (max-width: 767px) {
    html, body {
        margin: 32px 0 0 0 !important;
    }
}

@media (max-width: 480px) {
    html, body {
        margin: 29px 0 0 0 !important;
    }
}

html {
    scroll-behavior: smooth;
}

/* Front Page Base Style */
.front-page {
    font-family: 'Roboto', sans-serif;
    width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.front-page h1, h2, h3, p, ul {
    font-family: 'Roboto', sans-serif;
}

.front-page h2 {
    font-size: 38px;
}

.front-page ul {
    font-size: 20px;
}

.general-highlight-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 182px;
    height: 52px;
    background-color: transparent;
    color: #374151;
    border: 1px solid #CECECE;
    border-radius: 8px;
    letter-spacing: -1%;
    font-weight: 500;
    font-size: 20px;
    transition: all 0.3s ease;
    padding-bottom: 1px;
}

.general-highlight-button:hover {
    color: #FFFFFF;
    border: 1px solid #0C65AF;
    background-color: #0C65AF;
}

/* Hero Section */
.hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 40px 100px 40px;
    overflow: hidden;
    margin-bottom: 0;
    border: 1px solid #F1F5F9;

    background-image: 
        url("https://nextgis.ru/img/for-mainpage-isolines.svg"),
        url("https://nextgis.ru/img/for-mainpage-roads.svg"),
        linear-gradient(to right, #F1F5F9 2px, transparent 1px),
        linear-gradient(to bottom, #F1F5F9 2px, transparent 1px),
        linear-gradient(to top, #F1F5F9 5%, #FFFFFF);

    background-size: 
        370px 610px,
        310px 440px,
        40px 100%,
        100% 40px,
        100% 100%;

    background-position:
        left 15% top 10%,
        right 15% top 5%,
        0 0,
        0 0,
        0 0;

    background-repeat:
        no-repeat, 
        no-repeat, 
        repeat, 
        repeat,
        no-repeat;
    
    z-index: 0;
}

.hero-section .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-section h1 {
    font-size: 72px;
    line-height: 100%;
    margin-bottom: 30px;
    color: #1D1D1B;
}

.hero-section p {
    font-size: 24px;
    line-height: 145%;
    margin-bottom: 60px;
    color: #374151;
    width: 615px;
    margin-left: auto;
    margin-right: auto;
}

.hero-button-section {
    display: flex;
    flex-direction: row;
    gap: 20px;
    font-size: 24px;
    margin-bottom: 60px;
    justify-content: center;
    width: 100%;
}

.hero-button-section .button-get-started {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 236px;
    height: 66px;
    background-color: #0C65AF;
    color: #FFFFFF;
    border: 2px solid #0C65AF;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.hero-button-section .button-get-started:hover {
    background-color: #0952A5;
}

.hero-button-section .button-learn-more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 236px;
    height: 66px;
    background-color: transparent;
    color: #374151;
    border: 2px solid #374151;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.hero-button-section .button-learn-more:hover {
    border-color: #0C65AF;
    color: #0C65AF;
}

.hero-bullets {
    list-style: none;
    display: flex;
    gap: 92px;
    padding: 0;
    justify-content: center;
}

.hero-bullets li {
    position: relative;
    padding-left: 42px;
    color: #374151;
}

.hero-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%230C65AF' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%230C65AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

/* Highlight 1 */
.highlight-first-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F1F5F9;
    border: 1px solid transparent;
    min-height: 560px;
}

.highlight-first-bg .general-visible-content {
    display: flex;
    width: 1280px;
    height: 414px;
    gap: 44px;
}

.highlight-first-bg .general-visible-content .left-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 618px;
    height: 100%;
}

.highlight-first-bg .general-visible-content .left-part h2 {
    color: #1D1D1B;
    line-height: 108%;
    letter-spacing: -3%;
    margin-bottom: 10px;
    margin-top: 0;
}

.highlight-first-bg .general-visible-content .left-part ul {
    color: #374151;
    padding-left: 32px;
    list-style: none;
    margin-bottom: 44px;
}

.highlight-first-bg .general-visible-content .left-part ul li {
    position: relative;
    margin-bottom: 15px;
}

.highlight-first-bg .general-visible-content .left-part ul li:last-child {
    margin-bottom: 0;
}

.highlight-first-bg .general-visible-content .left-part ul li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.highlight-first-bg .general-visible-content .right-part {
    width: 618px;
    height: 100%;
}

.feature-slider {
    width: 618px;
    max-height: 414px;
}
    
.slider-visual {
    position: relative;
    width: 618px;
    height: 350px;
    margin-bottom: 12px;
}
    
.slider-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #5B97CC, #A9C8E4, #CFDCE8, #CCE0F2, #7CC2FF);
    border-radius: 10px;
}
    
.slider-image-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 574px;
    height: 310px;
    border-radius: 0 0 10px 0;
    overflow: hidden;
}
    
.slider-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}
    
.slider-image.active {
    opacity: 1;
}
    
.slider-controls {
    display: flex;
    align-items: center;
}
    
.slider-arrow {
    width: 52px;
    height: 52px;
    border: 1px solid #0C65AF;
    border-radius: 8px;
    background: transparent;
    color: #0C65AF;
    font-size: 20px;
    cursor: pointer;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: #0C65AF;
    color: #FFFFFF;
}
    
.slider-text {
    color: #0C65AF;
    font-size: 16px;
    margin-left: 30px;
}

/* Highlight 2 */
.highlight-second-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid transparent;
    min-height: 560px;
}

.highlight-second-bg .general-visible-content {
    display: flex;
    width: 1280px;
    height: 414px;
    gap: 44px;
}

.highlight-second-bg .general-visible-content .left-part {
    width: 618px;
    height: 100%;
}

.complex-image-h2 {
    position: relative;
    width: 618px;
    height: 414px;
}
    
.base-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #5B97CC, #A9C8E4, #CFDCE8, #CCE0F2, #7CC2FF);
    border-radius: 10px;
    overflow: hidden;
}
    
.background-1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 473px;
    height: 318px;
    background: linear-gradient(45deg, #CF5757, #F8A726);
    opacity: 0.5;
    mix-blend-mode: luminosity;
    border-radius: 0 10px 0 0;
}

.image-1 {
    position: absolute;
    top: 7px;
    right: 0;
    width: 463px;
    height: 301px;
    overflow: hidden;
}

.image-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.background-2 {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 324px;
    height: 219px;
    background: linear-gradient(45deg, #CF5757, #F8A726);
    opacity: 0.5;
    mix-blend-mode: luminosity;
    border-radius: 0 10px 10px 0;
}

.image-2 {
    position: absolute;
    left: 5px;
    bottom: 30px;
    width: 309px;
    height: 199px;
    overflow: hidden;
}

.image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.icon-base {
    position: absolute;
    width: 58px;
    height: 58px;
    background: linear-gradient(45deg, #CF5757, #F8A726);
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    border-radius: 4px;
}

.icon-base-1 {
    top: 7px;
    left: 77px;
}

.icon-base-2 {
    bottom: 20px;
    right: 226px;
}

.icon-base-3 {
    bottom: 20px;
    right: 162px;
}

.icon-base-4 {
    bottom: 20px;
    right: 98px;
}

.icon-image {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
}

.icon-image img {
    max-width: 80%;
    max-height: 80%;
}

.icon-image-1 {
    top: 7px;
    left: 77px;
}

.icon-image-2 {
    bottom: 20px;
    right: 226px;
}
    
.icon-image-3 {
    bottom: 20px;
    right: 162px;
}
    
.icon-image-4 {
    bottom: 20px;
    right: 98px;
}

.highlight-second-bg .general-visible-content .right-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 618px;
    height: 100%;
}

.highlight-second-bg .general-visible-content .right-part h2 {
    color: #1D1D1B;
    line-height: 108%;
    letter-spacing: -3%;
    margin-bottom: 10px;
    margin-top: 0;
}

.highlight-second-bg .general-visible-content .right-part ul {
    color: #374151;
    padding-left: 32px;
    list-style: none;
    margin-bottom: 44px;
}

.highlight-second-bg .general-visible-content .right-part ul {
    padding-left: 32px;
    list-style: none;
}

.highlight-second-bg .general-visible-content .right-part ul li {
    position: relative;
    margin-bottom: 15px;
}

.highlight-second-bg .general-visible-content .right-part ul li:last-child {
    margin-bottom: 0;
}

.highlight-second-bg .general-visible-content .right-part ul li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

/* Highlight 3 */
.highlight-third-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid linear-gradient(to bottom, #F1F5F9 5%, #FFFFFF);
    min-height: 560px;
    background-image: linear-gradient(to bottom, #F1F5F9 5%, #FFFFFF);
}

.highlight-third-bg .general-visible-content {
    display: flex;
    width: 1280px;
    height: 414px;
    gap: 44px;
}

.highlight-third-bg .general-visible-content .left-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 618px;
    height: 100%;
}

.highlight-third-bg .general-visible-content .left-part h2 {
    color: #1D1D1B;
    line-height: 108%;
    letter-spacing: -3%;
    margin-bottom: 10px;
    margin-top: 0;
}

.highlight-third-bg .general-visible-content .left-part ul {
    color: #374151;
    padding-left: 32px;
    list-style: none;
    margin-bottom: 44px;
}

.highlight-third-bg .general-visible-content .left-part ul li {
    position: relative;
}

.highlight-third-bg .general-visible-content .left-part ul {
    padding-left: 32px;
    list-style: none;
}

.highlight-third-bg .general-visible-content .left-part ul li {
    position: relative;
    margin-bottom: 15px;
}

.highlight-third-bg .general-visible-content .left-part ul li:last-child {
    margin-bottom: 0;
}

.highlight-third-bg .general-visible-content .left-part ul li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.gis-badges-container {
    display: flex;
    flex-direction: row;
    width: auto;
    height: auto;
    margin-bottom: 35px;
    margin-top: -20px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px 0;
    overflow: visible;
}

.gis-badge {
    display: flex;
    align-items: center;
    border: 1px solid #374151;
    border-radius: 50px;
    padding: 6px 15px 5px 15px;
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.gis-badge:not(:last-child) {
    margin-right: 10px;
}

.gis-badge img {
    margin-right: 8px;
}

.gis-badge:nth-child(3) img {
    margin-right: 7px;
}

.highlight-third-bg .general-visible-content .right-part {
    width: 618px;
    height: 100%;
}

.complex-image-h3 {
    display: flex;
    justify-content: space-between;
    width: 618px;
    height: 414px;
}
    
.complex-image-h3 .image-osm,
.complex-image-h3 .image-dem,
.complex-image-h3 .image-msbld {
    width: calc((618px - 30px) / 3);
    height: 414px;
    overflow: hidden;
}
    
.complex-image-h3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Highlight 4 */
.highlight-fourth-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    min-height: 560px;
}

.highlight-fourth-bg .general-visible-content {
    width: 1280px;
    height: 498px;
    position: relative;
}

.fourth-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.fourth-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fourth-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 60px;
    box-sizing: border-box;
}

.highlight-fourth-bg .general-visible-content h2 {
    color: #FFFFFF;
    line-height: 108%;
    letter-spacing: -3%;
    margin-bottom: 10px;
    margin-top: 0;
}

.highlight-fourth-bg .general-visible-content ul {
    color: #FFFFFF;
    padding-left: 32px;
    list-style: none;
    margin-bottom: 44px;
}

.highlight-fourth-bg .general-visible-content ul li {
    position: relative;
    margin-bottom: 15px;
}

.highlight-fourth-bg .general-visible-content ul li:last-child {
    margin-bottom: 0;
}

.highlight-fourth-bg .general-visible-content ul li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.fourth-button {
    color: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    background-color: transparent !important;
}

.fourth-button:hover {
    color: #FFFFFF !important;
    border: 1px solid transparent !important;
    background-color: #00000070 !important;
}

.fourth-mobile-screen {
    display: none;
}

/* Highlight 5 */
.highlight-fifth-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid linear-gradient(to bottom, #FFFFFF 5%, #F1F5F9);
    min-height: 560px;
    background-image: linear-gradient(to bottom, #FFFFFF 5%, #F1F5F9);
}

.highlight-fifth-bg .general-visible-content {
    display: flex;
    justify-content: space-between;
    width: 1280px;
    height: 414px;
}

.highlight-fifth-bg .general-visible-content .left-part {
    width: 618px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
    position: relative;
    width: 618px;
    height: 346px;
}

.highlight-fifth-bg .general-visible-content .left-part .h5-tracker-web {
    position: absolute;
    top: 0;
    left: 0;
    width: 618px;
    height: 346px;
}

.highlight-fifth-bg .general-visible-content .left-part .h5-tracker-mobile {
    position: absolute;
    top: 95px;
    right: 38px;
    width: 145px;
    height: 292px;
}

.highlight-fifth-bg .general-visible-content .right-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 618px;
    height: 100%;
}

.highlight-fifth-bg .general-visible-content .right-part h2 {
    color: #1D1D1B;
    line-height: 108%;
    letter-spacing: -3%;
    margin-bottom: 10px;
    margin-top: 0;
}

.highlight-fifth-bg .general-visible-content .right-part ul {
    color: #374151;
    padding-left: 32px;
    list-style: none;
    margin-bottom: 44px;
}

.highlight-fifth-bg .general-visible-content .right-part ul li {
    position: relative;
    margin-bottom: 15px;
}

.highlight-fifth-bg .general-visible-content .right-part ul li:last-child {
    margin-bottom: 0;
}

.highlight-fifth-bg .general-visible-content .right-part ul li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

/* Highlight 6 */
.highlight-sixth-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid transparent;
    min-height: 560px;
}

.highlight-sixth-bg .general-visible-content {
    display: flex;
    width: 1280px;
    height: 414px;
    gap: 44px;
}

.highlight-sixth-bg .general-visible-content .left-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 618px;
    height: 100%;
}

.highlight-sixth-bg .general-visible-content .left-part h2 {
    color: #1D1D1B;
    line-height: 108%;
    letter-spacing: -3%;
    margin-bottom: 10px;
    margin-top: 0;
}

.highlight-sixth-bg .general-visible-content .left-part ul {
    color: #374151;
    padding-left: 32px;
    list-style: none;
    margin-bottom: 44px;
}

.highlight-sixth-bg .general-visible-content .left-part ul {
    padding-left: 32px;
    list-style: none;
}

.highlight-sixth-bg .general-visible-content .left-part ul li {
    position: relative;
    margin-bottom: 15px;
}

.highlight-sixth-bg .general-visible-content .left-part ul li:last-child {
    margin-bottom: 0;
}

.highlight-sixth-bg .general-visible-content .left-part ul li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.highlight-sixth-bg .general-visible-content .left-part {
    width: 618px;
    height: 100%;
}

.complex-image-h6 {
    position: relative;
    width: 618px;
    height: 414px;
}

.base-gradient-h6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #5B97CC, #A9C8E4, #CFDCE8, #CCE0F2, #7CC2FF);
    border-radius: 10px;
    overflow: hidden;
}

.image-1-h6 {
    position: absolute;
    top: 25px;
    left: 19px;
    width: 565px;
    height: 318px;
    overflow: hidden;
}

.image-1-h6 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-2-h6 {
    position: absolute;
    bottom: 34px;
    left: 99px;
    width: 341px;
    height: 283px;
    overflow: hidden;
}

.image-2-h6 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-3-h6 {
    position: absolute;
    top: 54px;
    right: 15px;
    width: 261px;
    height: 85px;
    overflow: hidden;
}

.image-3-h6 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Highlight 7 */
.highlight-seventh-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F1F5F9;
    border: 1px solid transparent;
    min-height: 560px;
}

.highlight-seventh-bg .general-visible-content {
    display: flex;
    width: 1280px;
    height: 414px;
    gap: 44px;
}

.highlight-seventh-bg .general-visible-content .right-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 618px;
    height: 100%;
}

.highlight-seventh-bg .general-visible-content .right-part h2 {
    color: #1D1D1B;
    line-height: 108%;
    letter-spacing: -3%;
    margin-bottom: 10px;
    margin-top: 0;
}

.highlight-seventh-bg .general-visible-content .right-part ul {
    color: #374151;
    padding-left: 32px;
    list-style: none;
    margin-bottom: 44px;
}

.highlight-seventh-bg .general-visible-content .right-part ul {
    padding-left: 32px;
    list-style: none;
}

.highlight-seventh-bg .general-visible-content .right-part ul li {
    position: relative;
    margin-bottom: 15px;
}

.highlight-seventh-bg .general-visible-content .right-part ul li:last-child {
    margin-bottom: 0;
}

.highlight-seventh-bg .general-visible-content .right-part ul li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.highlight-seventh-bg .general-visible-content .right-part {
    width: 618px;
    height: 100%;
}

.highlight-seventh-bg .general-visible-content .left-part {
    width: 618px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.complex-image-h7 {
    position: relative;
    width: 618px;
    height: 414px;
}

.base-gradient-h7 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #5B97CC, #A9C8E4, #CFDCE8, #CCE0F2, #7CC2FF);
    border-radius: 10px;
    overflow: hidden;
}

.background-h7 {
    position: absolute;
    top: 28px;
    left: 0;
    width: 572px;
    height: 366px;
    background: linear-gradient(45deg, #CF5757, #F8A726);
    opacity: 0.5;
    mix-blend-mode: luminosity;
    border-radius: 0 10px 10px 0;
}

.image-1-h7 {
    position: absolute;
    top: 38px;
    left: 0;
    width: 562px;
    height: 346px;
    overflow: hidden;
}

.image-1-h7 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-2-h7 {
    position: absolute;
    bottom: 89px;
    right: 0;
    width: 289px;
    height: 228px;
    overflow: hidden;
}

.image-2-h7 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-3-h7 {
    position: absolute;
    bottom: 0;
    left: 166px;
    width: 143px;
    height: 228px;
    overflow: hidden;
}

.image-3-h7 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Client Section */
.clients-bg {
    width: 100%;
    height: 286px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clients-visible-content {
    width: 1280px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.clients-visible-content h2 {
    color: #1D1D1B;
    margin-top: -15px;
    margin-bottom: 10px;
    font-size: 38px;
    line-height: 108%;
    letter-spacing: -3%;
    text-align: center;
}

.clients-visible-content p {
    color: #374151;
    margin: 0;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
}

.clients-visible-content .logos {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.clients-visible-content .logos div {
    width: 198px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clients-visible-content .logos div img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Form Section */
.form-bg {
    width: 100%;
    padding: 50px 0; 
    height: auto; 
    min-height: 820px; 
    background-color: #0C65AF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.form-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(to right, #1f78c0 2px, transparent 2px),
        linear-gradient(to bottom, #1f78c0 2px, transparent 2px);
    background-size: 40px 40px;
    opacity: 0.8;
    mask: radial-gradient(ellipse at center, transparent 50%, black 100%);
    z-index: 1;
    pointer-events: none;
}

.form-bg > * {
    position: relative;
    z-index: 2;
}

.form-bg .general-visible-content {
    width: 1280px;
    height: auto; 
    min-height: 720px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-bg .general-visible-content .left-part {
    width: 618px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.form-bg .general-visible-content .left-part h2 {
    color: #FFFFFF;
    margin: 0;
    margin-bottom: 14px;
}

.form-bg .general-visible-content .left-part p {
    color: #FFFFFF;
    font-size: 20px;
    margin: 0;
    margin-bottom: 41px;
}

.form-bg .general-visible-content .left-part .form-bullets {
    color: #FFFFFF;
    padding-left: 32px;
    list-style: none;
    margin: 0;
    max-height: 190px;
}

.form-bg .general-visible-content .left-part .form-bullets li {
    position: relative;
    margin-bottom: 25px;
}

.form-bg .general-visible-content .left-part .form-bullets li:last-child {
    margin-bottom: 0;
}

.form-bg .general-visible-content .left-part .form-bullets li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%237CC2FF' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%237CC2FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.form-bg .general-visible-content .left-part .bullet-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form-bg .general-visible-content .left-part .bullet-main {
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 7px;
    font-weight: 500;
    line-height: 20px;
}

.form-bg .general-visible-content .left-part .bullet-sub {
    font-size: 16px;
    color: #7CC2FF;
    line-height: 150%;
}

.form-bg .general-visible-content .right-part {
    width: 618px;
    height: auto; 
    min-height: 685px; 
}

.form-bg .general-visible-content .right-part .form-container {
    width: 100%;
    height: auto; 
    min-height: 685px; 
    background-color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.form-bg .general-visible-content .right-part .form-container h3 {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -3%;
    line-height: 108%;
    color: #1D1D1B;
    margin: 0;
    padding-top: 34px;
    padding-left: 30px;
    margin-bottom: 23px;
}

.form-bg .general-visible-content .right-part .contact-form {
    padding: 0 30px 30px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-bg .general-visible-content .right-part .form-fields {
    width: 558px;
    margin-bottom: 15px;
}

.form-bg .general-visible-content .right-part .form-field {
    margin-bottom: 18px;
}

.form-bg .general-visible-content .right-part .form-field:last-child {
    margin-bottom: 0;
}

.form-bg .general-visible-content .right-part .form-field label {
    display: block;
    font-size: 16px;
    color: #374151;
    margin-bottom: 4px;
    font-weight: 400;
}

.form-bg .general-visible-content .right-part .form-field input,
.form-bg .general-visible-content .right-part .form-field textarea {
    width: 558px;
    height: 38px;
    background-color: white;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 16px;
    color: #374151;
    box-sizing: border-box;
}

.form-bg .general-visible-content .right-part .form-field textarea {
    height: 94px;
    padding: 12px;
    resize: none;
    font-family: inherit;
}

.form-bg .general-visible-content .right-part .form-field input:focus,
.form-bg .general-visible-content .right-part .form-field textarea:focus {
    outline: none;
    border-color: #0C65AF;
}

.form-bg .general-visible-content .right-part .form-field input.error,
.form-bg .general-visible-content .right-part .form-field textarea.error {
    border-color: #dc2626;
}

.form-bg .general-visible-content .right-part .checkbox-field {
    display: flex;
    align-items: flex-start;
    margin-bottom: 38px;
}

.form-bg .general-visible-content .right-part .checkbox-field input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    margin-right: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.form-bg .general-visible-content .right-part .checkbox-field label {
    font-size: 16px;
    color: #374151;
    line-height: 150%;
    cursor: pointer;
    flex: 1;
}

.form-bg .general-visible-content .right-part .submit-button {
    width: 558px;
    height: 52px;
    background-color: #0C65AF;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -1%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-bg .general-visible-content .right-part .submit-button:hover {
    background-color: #0a5494;
}

.form-bg .general-visible-content .right-part .submit-button:active {
    background-color: #084373;
}

/* Footer Section */
.front-page-footer {
    width: 100%;
    height: 408px;
    background-color: #1D1D1B;
}

.footer-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-content {
    width: 1280px;
    height: 271px;
    position: relative;
}

.footer-group-brand {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}

.footer-logo img {
    width: 258px;
    height: 32px;
    object-fit: contain;
}

.footer-description {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 400;
    color: #9CA3AF;
    line-height: 146%;
    max-width: 330px;
}

.footer-social {
    margin-top: 30px;
    width: 222px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.social-link {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.social-link img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.footer-group-menu {
    position: absolute;
    top: 0;
    right: 136px;
    width: 627px;
    height: 148px;
    display: flex;
    justify-content: space-between;
}

.footer-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.footer-column-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 15px;
}

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-menu-link {
    font-size: 16px;
    font-weight: 400;
    color: #9CA3AF;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu-link:hover {
    color: #ffffff;
}

.footer-group-links {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 20px;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.footer-service-link {
    font-size: 14px;
    font-weight: 400;
    color: #9CA3AF;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-service-link:hover {
    color: #ffffff;
}

.footer-group-copyright {
    position: absolute;
    bottom: 0;
    left: 0;
}

.footer-copyright {
    font-size: 14px;
    font-weight: 400;
    color: #9CA3AF;
    margin: 0;
}

/* Unified media queries for all sections */
@media (max-width: 1440px) and (min-width: 1269px) {

    .front-page h2 {
        font-size: 36px;
    }

    .front-page ul {
        font-size: 18px;
    }

    .general-highlight-button {
        font-size: 18px;
        width: 162px;
        height: 48px;
    }

    .hero-section h1 {
        font-size: 70px;
    }

    .hero-section p {
        font-size: 22px;
        width: 600px;
    }

    .hero-button-section {
        font-size: 22px;
    }

    .hero-button-section .button-get-started {
        width: 230px;
        height: 60px;
    }

    .hero-button-section .button-learn-more {
        width: 230px;
        height: 60px;
    }

    .slider-arrow {
        font-size: 16px;
        width: 48px;
        height: 48px;
    }

    .slider-text {
        font-size: 16px;
    }

    .highlight-first-bg .general-visible-content {
        width: 1200px;
    }

    .highlight-first-bg .general-visible-content .left-part {
        width: 588px;
    }

    .highlight-first-bg .general-visible-content .right-part {
        width: 588px;
    }

    .feature-slider {
        width: 588px;
    }

    .slider-visual {
        width: 588px;
        height: 333px;
    }

    .slider-image-container {
        width: 545px;
        height: 294px;
    }

    .highlight-second-bg .general-visible-content {
        width: 1200px;
    }

    .highlight-second-bg .general-visible-content .left-part {
        width: 588px;
    }

    .highlight-second-bg .general-visible-content .right-part {
        width: 588px;
    }

    .complex-image-h2 {
        width: 588px;
        height: 394px;
    }

    .background-1 {
        width: 450px;
        height: 303px;
        top: 0;
        right: 0;
    }

    .image-1 {
        width: 442px;
        height: 287px;
        top: 7px;
        right: 0;
    }

    .background-2 {
        width: 309px;
        height: 209px;
        left: 0;
        bottom: 20px;
    }

    .image-2 {
        width: 295px;
        height: 190px;
        left: 5px;
        bottom: 30px;
    }

    .icon-base {
        width: 55px;
        height: 55px;
    }

    .icon-image {
        width: 55px;
        height: 55px;
    }

    .icon-base-1 {
        top: 7px;
        left: 73px;
    }

    .icon-image-1 {
        top: 7px;
        left: 73px;
    }

    .icon-base-2 {
        bottom: 20px;
        right: 216px;
    }

    .icon-image-2 {
        bottom: 20px;
        right: 216px;
    }

    .icon-base-3 {
        bottom: 20px;
        right: 155px;
    }

    .icon-image-3 {
        bottom: 20px;
        right: 155px;
    }

    .icon-base-4 {
        bottom: 20px;
        right: 94px;
    }

    .icon-image-4 {
        bottom: 20px;
        right: 94px;
    }

    .highlight-third-bg .general-visible-content {
        width: 1200px;
    }

    .highlight-third-bg .general-visible-content .left-part {
        width: 588px;
    }

    .highlight-third-bg .general-visible-content .right-part {
        width: 588px;
    }

    .complex-image-h3 {
        width: 588px;
        height: 394px;
    }

    .complex-image-h3 .image-osm,
    .complex-image-h3 .image-dem,
    .complex-image-h3 .image-msbld {
        width: calc((588px - 15px) / 3);
        height: 394px;
        border-radius: 10px;
        overflow: hidden;
    }

    .highlight-fourth-bg .general-visible-content {
        width: 1200px;
        height: 475px;
    }

    .fourth-content-wrapper {
        border-radius: 16px;
        overflow: hidden;
    }

    .fourth-bg-image {
        border-radius: 10px;
    }

    .highlight-fifth-bg .general-visible-content {
        width: 1200px;
    }

    .highlight-fifth-bg .general-visible-content .left-part {
        width: 588px;
    }

    .highlight-fifth-bg .general-visible-content .right-part {
        width: 588px;
    }

    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        width: 588px;
        height: 330px;
    }

    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-web {
        width: 588px;
        height: 330px;
    }

    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-mobile {
        width: 138px;
        height: 278px;
        top: 91px;
        right: 36px;
    }

    .highlight-sixth-bg .general-visible-content {
        width: 1200px;
    }

    .highlight-sixth-bg .general-visible-content .left-part {
        width: 588px;
    }

    .highlight-sixth-bg .general-visible-content .right-part {
        width: 588px;
    }

    .complex-image-h6 {
        width: 588px;
        height: 394px;
    }

    .image-1-h6 {
        width: 539px;
        height: 304px;
        top: 24px;
        left: 18px;
    }

    .image-2-h6 {
        width: 325px;
        height: 270px;
        bottom: 32px;
        left: 94px;
    }

    .image-3-h6 {
        width: 249px;
        height: 81px;
        top: 52px;
        right: 14px;
    }

    .highlight-seventh-bg .general-visible-content {
        width: 1200px;
    }

    .highlight-seventh-bg .general-visible-content .left-part {
        width: 588px;
    }

    .highlight-seventh-bg .general-visible-content .right-part {
        width: 588px;
    }

    .complex-image-h7 {
        width: 588px;
        height: 394px;
    }

    .background-h7 {
        width: 545px;
        height: 348px;
        top: 27px;
        left: 0;
    }

    .image-1-h7 {
        width: 535px;
        height: 329px;
        top: 36px;
        left: 0;
    }

    .image-2-h7 {
        width: 275px;
        height: 217px;
        bottom: 85px;
        right: 0;
    }

    .image-3-h7 {
        width: 136px;
        height: 217px;
        bottom: 0;
        left: 158px;
    }

    .clients-visible-content {
        width: 1200px;
    }

    .clients-visible-content h2 {
        font-size: 36px;
    }

    .clients-visible-content p {
        font-size: 18px;
    }

    .form-bg .general-visible-content {
        width: 1200px;
    }

    .form-bg .general-visible-content .left-part {
        width: 588px;
        min-height: 720px;
    }

    .form-bg .general-visible-content .right-part {
        width: 588px;
    }

    .form-bg .general-visible-content .left-part h2 {
        font-size: 36px;
    }

    .form-bg .general-visible-content .left-part p {
        font-size: 18px;
    }

    .form-bg .general-visible-content .left-part .bullet-main {
        font-size: 18px;
    }

    .form-bg .general-visible-content .left-part .bullet-sub {
        font-size: 14px;
    }

    .form-bg .general-visible-content .right-part .form-container h3 {
        font-size: 22px;
    }

    .form-bg .general-visible-content .right-part .form-field label {
        font-size: 14px;
    }

    .form-bg .general-visible-content .right-part .form-field input,
    .form-bg .general-visible-content .right-part .form-field textarea {
        font-size: 14px;
    }

    .form-bg .general-visible-content .right-part .checkbox-field label {
        font-size: 14px;
    }

    .form-bg .general-visible-content .right-part .submit-button {
        font-size: 18px;
    }

    .form-bg .general-visible-content .right-part .form-fields {
        width: 528px;
    }

    .form-bg .general-visible-content .right-part .form-field input,
    .form-bg .general-visible-content .right-part .form-field textarea {
        width: 528px;
    }

    .form-bg .general-visible-content .right-part .submit-button {
        width: 528px;
    }

    .footer-content {
        width: 1200px;
    }

    .footer-description {
        font-size: 14px;
    }

    .footer-column-title {
        font-size: 13px;
    }

    .footer-menu-link {
        font-size: 14px;
    }

    .footer-service-link {
        font-size: 14px;
    }

    .footer-copyright {
        font-size: 14px;
    }

}

/* Unified media queries for hero, footer and highlights 1-7 (without clients and form sections) */
@media (max-width: 1268px) and (min-width: 1024px) {

    .hero-section {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 60px 40px 100px 40px;
        overflow: hidden;
        margin-bottom: 0;
        border: 1px solid #F1F5F9;
    }

    .highlight-first-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-first-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
    }
    
    .highlight-first-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }

    .highlight-first-bg .general-visible-content .left-part ul {
        margin-bottom: 30px;
    }
    
    .highlight-first-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .feature-slider {
        width: 100%;
        max-width: 1119px;
        max-height: none;
    }
    
    .slider-visual {
        width: 100%;
        max-width: 1119px;
        height: auto;
        aspect-ratio: 618/350;
        margin-top: 30px;
    }

    .slider-gradient {
        border-radius: 12px;
    }
    
    .slider-image-container {
        width: 1040px;
        height: 563px;
        bottom: 0;
        right: 0;
        border-radius: 0 0 12px 0;
        max-width: 92.94%;
        max-height: 90.37%;
    }

    .slider-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom right;
    }

    .highlight-second-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-second-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
    }
    
    .highlight-second-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-second-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-second-bg .general-visible-content .right-part ul {
        margin-bottom: 30px;
    }
    
    .complex-image-h2 {
        width: 100%;
        max-width: 1119px;
        height: auto;
        aspect-ratio: 618/414;
        margin-top: 30px;
    }
    
    .base-gradient {
        border-radius: 12px;
    }
    
    .background-1 {
        width: 856px;
        height: 575px;
        max-width: 76.51%;
        max-height: 76.81%;
        border-radius: 0 12px 0 0;
    }
    
    .image-1 {
        width: 838px;
        height: 545px;
        max-width: 74.92%;
        max-height: 72.71%;
        top: 1.69%;
        right: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .background-2 {
        width: 586px;
        height: 396px;
        max-width: 52.43%;
        max-height: 52.90%;
        left: 0;
        bottom: 4.83%;
        border-radius: 0 12px 12px 0;
    }
    
    .image-2 {
        width: 559px;
        height: 360px;
        max-width: 50.00%;
        max-height: 48.07%;
        left: 0.8%;
        bottom: 7.25%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .icon-base {
        width: 105px;
        height: 105px;
        max-width: 9.39%;
        max-height: 14.01%;
        border-radius: 6px;
    }
    
    .icon-base-1 {
        top: 1.69%;
        left: 12.46%;
    }
    
    .icon-base-2 {
        bottom: 4.83%;
        right: 36.57%;
    }
    
    .icon-base-3 {
        bottom: 4.83%;
        right: 26.21%;
    }
    
    .icon-base-4 {
        bottom: 4.83%;
        right: 15.86%;
    }
    
    .icon-image {
        width: 105px;
        height: 105px;
        max-width: 9.38%;
        max-height: 12.64%;
    }
    
    .icon-image-1 {
        top: 2.35%;
        left: 12.4%;
    }
    
    .icon-image-2 {
        bottom: 5.55%;
        right: 36.54%;
    }
    
    .icon-image-3 {
        bottom: 5.55%;
        right: 26.2%;
    }
    
    .icon-image-4 {
        bottom: 5.55%;
        right: 15.85%;
    }

    .highlight-third-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-third-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
    }
    
    .highlight-third-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-third-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-third-bg .general-visible-content .right-part .complex-image-h3 {
        margin-bottom: 30px;
    }
    
    .complex-image-h3 {
        width: 100%;
        max-width: 1119px;
        height: auto;
        aspect-ratio: 618/414;
        margin-top: 30px;
    }
    
    .complex-image-h3 .image-osm,
    .complex-image-h3 .image-dem,
    .complex-image-h3 .image-msbld {
        width: calc((100% - 54px) / 3);
        height: 100%;
        overflow: hidden;
    }

    .highlight-fourth-bg {
        padding: 0;
        min-height: auto;
    }
    
    .highlight-fourth-bg .general-visible-content {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 1359/711;
    }
    
    .fourth-content-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .fourth-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .fourth-content-overlay {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 1119px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;

        box-sizing: border-box;
    }
    
    .highlight-fourth-bg .general-visible-content h2 {
        color: #FFFFFF;
        line-height: 108%;
        letter-spacing: -3%;
        margin-bottom: 10px;
        margin-top: 0;
    }
    
    .highlight-fourth-bg .general-visible-content ul {
        color: #FFFFFF;
        padding-left: 32px;
        list-style: none;
        margin-bottom: 30px;
    }
    
    .highlight-fourth-bg .general-visible-content ul li {
        position: relative;
    }
    
    .highlight-fourth-bg .general-visible-content ul li::before {
        content: '';
        position: absolute;
        left: -32px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px;
    }
    
    .fourth-button {
        color: #FFFFFF !important;
        border: 1px solid #FFFFFF !important;
        background-color: transparent !important;
    }
    
    .fourth-button:hover {
        color: #FFFFFF !important;
        border: 1px solid transparent !important;
        background-color: #00000070 !important;
    }

    .highlight-fifth-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-fifth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        margin: 40px 0 50px 0;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        width: 100%;
        max-width: 1119px;
        height: auto;
        aspect-ratio: 618/346;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-web {
        width: 100%;
        max-width: 1119px;
        height: auto;
        aspect-ratio: 618/346;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-mobile {
        width: 262px;
        height: 529px;
        max-width: 23.42%;
        max-height: 84.39%;
        top: 27.46%;
        right: 6.15%;
    }

    .highlight-fifth-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-fifth-bg .general-visible-content .right-part ul {
        margin-bottom: 30px;
    }

    .highlight-sixth-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-sixth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
    }
    
    .highlight-sixth-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-sixth-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }

    .highlight-sixth-bg .general-visible-content .left-part ul {
        margin-bottom: 30px;
    }
    
    .complex-image-h6 {
        width: 100%;
        max-width: 1119px;
        height: auto;
        aspect-ratio: 618/414;
        margin-top: 30px;
    }
    
    .base-gradient-h6 {
        border-radius: 12px;
    }
    
    .image-1-h6 {
        position: absolute;
        width: 1023px;
        height: 575px;
        max-width: 91.42%;
        max-height: 76.81%;
        top: 6.04%;
        left: 3.07%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h6 {
        position: absolute;
        width: 617px;
        height: 512px;
        max-width: 55.18%;
        max-height: 68.36%;
        left: 16.02%;
        bottom: 8.21%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h6 {
        position: absolute;
        width: 472px;
        height: 154px;
        max-width: 42.23%;
        max-height: 20.53%;
        top: 13.53%;
        right: 2.5%;
        border-radius: 0;
        overflow: hidden;
    }

    .highlight-seventh-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
    }
    
    .highlight-seventh-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-seventh-bg .general-visible-content .right-part ul {
        margin-bottom: 30px;
    }
    
    .complex-image-h7 {
        width: 100%;
        max-width: 1119px;
        height: auto;
        aspect-ratio: 618/414;
        margin-top: 30px;
    }
    
    .base-gradient-h7 {
        border-radius: 12px;
    }
    
    .background-h7 {
        position: absolute;
        width: 1035px;
        height: 662px;
        max-width: 92.56%;
        max-height: 88.41%;
        top: 6.76%;
        left: 0;
        border-radius: 0 12px 12px 0;
    }
    
    .image-1-h7 {
        position: absolute;
        width: 1017px;
        height: 626px;
        max-width: 90.94%;
        max-height: 83.57%;
        top: 9.18%;
        left: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h7 {
        position: absolute;
        width: 523px;
        height: 413px;
        max-width: 46.76%;
        max-height: 55.07%;
        right: 0;
        bottom: 21.50%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h7 {
        position: absolute;
        width: 259px;
        height: 413px;
        max-width: 23.14%;
        max-height: 55.07%;
        left: 26.86%;
        bottom: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .front-page-footer {
        padding: 0;
    }
    
    .footer-container {
        padding: 0 30px;
        box-sizing: border-box;
    }
    
    .footer-content {
        width: 100%;
        max-width: 1119px;
        margin: 0 auto;
        height: 271px;
        position: relative;
    }

    .footer-group-brand {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .footer-group-menu {
        position: absolute;
        top: 0;
        right: 0;
        width: 548px;
        height: 148px;
    }
    
    .footer-group-links {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 20px;
        gap: 20px;
    }
    
    .footer-group-copyright {
        position: absolute;
        bottom: 0;
        left: 0;
    }

}

/* A separate special media query for the fourth section */
@media (max-width: 1195px) and (min-width: 1024px) {

    .fourth-content-overlay {
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
    }

}

/* Unified media queries for hero, footer and highlights 1-7 (without hero and client sections) */
@media (max-width: 1023px) and (min-width: 850px) {

    .hero-section {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 60px 30px 100px 30px;
        overflow: hidden;
        margin-bottom: 0;
        border: 1px solid #F1F5F9;
    }

    .highlight-first-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-first-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        gap: 30px;
    }
    
    .highlight-first-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }

    .highlight-first-bg .general-visible-content .left-part ul {
        margin-bottom: 30px;
    }
    
    .highlight-first-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .feature-slider {
        width: 100%;
        max-width: calc(100vw - 60px);
        max-height: none;
    }
    
    .slider-visual {
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        aspect-ratio: 618/350;
        margin-top: 30px;
    }

    .slider-gradient {
        border-radius: 12px;
    }
    
    .slider-image-container {
        width: calc((100vw - 60px) * 0.9294);
        height: calc(((100vw - 60px) * 618 / 350) * 0.9037);
        bottom: 0;
        right: 0;
        border-radius: 0 0 12px 0;
        max-width: 92.94%;
        max-height: 90.37%;
    }

    .slider-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom right;
    }

    .highlight-second-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-second-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        gap: 30px;
    }
    
    .highlight-second-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-second-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-second-bg .general-visible-content .right-part ul {
        margin-bottom: 30px;
    }
    
    .complex-image-h2 {
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        aspect-ratio: 618/414;
        margin-top: 30px;
    }
    
    .base-gradient {
        border-radius: 12px;
    }
    
    .background-1 {
        width: calc((100vw - 60px) * 0.7651);
        height: calc(((100vw - 60px) * 414 / 618) * 0.7681);
        max-width: 76.51%;
        max-height: 76.81%;
        border-radius: 0 12px 0 0;
    }
    
    .image-1 {
        width: calc((100vw - 60px) * 0.7492);
        height: calc(((100vw - 60px) * 414 / 618) * 0.7271);
        max-width: 74.92%;
        max-height: 72.71%;
        top: 1.69%;
        right: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .background-2 {
        width: calc((100vw - 60px) * 0.5243);
        height: calc(((100vw - 60px) * 414 / 618) * 0.5290);
        max-width: 52.43%;
        max-height: 52.90%;
        left: 0;
        bottom: 4.83%;
        border-radius: 0 12px 12px 0;
    }
    
    .image-2 {
        width: calc((100vw - 60px) * 0.5000);
        height: calc(((100vw - 60px) * 414 / 618) * 0.4807);
        max-width: 50.00%;
        max-height: 48.07%;
        left: 0.8%;
        bottom: 7.25%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .icon-base {
        width: calc((100vw - 60px) * 0.0939);
        height: calc(((100vw - 60px) * 414 / 618) * 0.1401);
        max-width: 9.39%;
        max-height: 14.01%;
        border-radius: 6px;
    }
    
    .icon-base-1 {
        top: 1.69%;
        left: 12.46%;
    }
    
    .icon-base-2 {
        bottom: 4.83%;
        right: 36.57%;
    }
    
    .icon-base-3 {
        bottom: 4.83%;
        right: 26.21%;
    }
    
    .icon-base-4 {
        bottom: 4.83%;
        right: 15.86%;
    }
    
    .icon-image {
        width: calc((100vw - 60px) * 0.0938);
        height: calc(((100vw - 60px) * 414 / 618) * 0.1264);
        max-width: 9.38%;
        max-height: 12.64%;
    }
    
    .icon-image-1 {
        top: 2.35%;
        left: 12.4%;
    }
    
    .icon-image-2 {
        bottom: 5.55%;
        right: 36.54%;
    }
    
    .icon-image-3 {
        bottom: 5.55%;
        right: 26.2%;
    }
    
    .icon-image-4 {
        bottom: 5.55%;
        right: 15.85%;
    }

    .highlight-third-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-third-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        gap: 30px;
    }
    
    .highlight-third-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-third-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-third-bg .general-visible-content .right-part .complex-image-h3 {
        margin-bottom: 30px;
    }
    
    .complex-image-h3 {
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        aspect-ratio: 618/414;
        margin-top: 30px;
    }
    
    .complex-image-h3 .image-osm,
    .complex-image-h3 .image-dem,
    .complex-image-h3 .image-msbld {
        width: calc((100% - 40px) / 3);
        height: 100%;
        overflow: hidden;
    }

    .highlight-fourth-bg {
        padding: 0;
        min-height: auto;
    }
    
    .highlight-fourth-bg .general-visible-content {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 1359/711;
    }
    
    .fourth-content-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .fourth-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .fourth-content-overlay {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: calc(100vw - 60px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 10px;
        padding-right: 0;
        box-sizing: border-box;
    }
    
    .highlight-fourth-bg .general-visible-content h2 {
        color: #FFFFFF;
        line-height: 108%;
        letter-spacing: -3%;
        margin-bottom: 10px;
        margin-top: 0;
    }
    
    .highlight-fourth-bg .general-visible-content ul {
        color: #FFFFFF;
        padding-left: 32px;
        list-style: none;
        margin-bottom: 30px;
    }
    
    .highlight-fourth-bg .general-visible-content ul li {
        position: relative;
        margin-bottom: 8px;
    }
    
    .highlight-fourth-bg .general-visible-content ul li::before {
        content: '';
        position: absolute;
        left: -32px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px;
    }
    
    .fourth-button {
        color: #FFFFFF !important;
        border: 1px solid #FFFFFF !important;
        background-color: transparent !important;
    }
    
    .fourth-button:hover {
        color: #FFFFFF !important;
        border: 1px solid transparent !important;
        background-color: #00000070 !important;
    }

    .highlight-fifth-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-fifth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        gap: 30px;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }

    .highlight-fifth-bg .general-visible-content .right-part ul {
        margin-bottom: 30px;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        margin: 40px 0 50px 0;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        aspect-ratio: 618/346;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-web {
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        aspect-ratio: 618/346;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-mobile {
        width: calc((100vw - 60px) * 0.2342);
        height: calc(((100vw - 60px) * 346 / 618) * 0.8439);
        max-width: 23.42%;
        max-height: 84.39%;
        top: 27.46%;
        right: 6.15%;
    }

    .highlight-fifth-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-fifth-bg .general-visible-content .right-part ul {
        margin-bottom: 25px;
    }

    .highlight-sixth-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-sixth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        gap: 30px;
    }
    
    .highlight-sixth-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-sixth-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }

    .highlight-sixth-bg .general-visible-content .left-part ul {
        margin-bottom: 30px;
    }
    
    .complex-image-h6 {
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        aspect-ratio: 618/414;
        margin-top: 30px;
    }
    
    .base-gradient-h6 {
        border-radius: 12px;
    }
    
    .image-1-h6 {
        position: absolute;
        width: calc((100vw - 60px) * 0.9142);
        height: calc(((100vw - 60px) * 414 / 618) * 0.7681);
        max-width: 91.42%;
        max-height: 76.81%;
        top: 6.04%;
        left: 3.07%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h6 {
        position: absolute;
        width: calc((100vw - 60px) * 0.5518);
        height: calc(((100vw - 60px) * 414 / 618) * 0.6836);
        max-width: 55.18%;
        max-height: 68.36%;
        left: 16.02%;
        bottom: 8.21%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h6 {
        position: absolute;
        width: calc((100vw - 60px) * 0.4223);
        height: calc(((100vw - 60px) * 414 / 618) * 0.2053);
        max-width: 42.23%;
        max-height: 20.53%;
        top: 13.53%;
        right: 2.5%;
        border-radius: 0;
        overflow: hidden;
    }

    .highlight-seventh-bg {
        padding: 50px 30px 70px 30px;
        min-height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        gap: 30px;
    }
    
    .highlight-seventh-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-seventh-bg .general-visible-content .right-part h2 {
        font-size: 26px;
    }

    .highlight-seventh-bg .general-visible-content .right-part ul {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .highlight-seventh-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .complex-image-h7 {
        width: 100%;
        max-width: calc(100vw - 60px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient-h7 {
        border-radius: 8px;
    }
    
    .background-h7 {
        position: absolute;
        width: calc((100vw - 60px) * 0.9256);
        height: calc(((100vw - 60px) * 335 / 500) * 0.8841);
        max-width: 92.56%;
        max-height: 88.41%;
        top: 6.76%;
        left: 0;
        border-radius: 0 8px 8px 0;
    }
    
    .image-1-h7 {
        position: absolute;
        width: calc((100vw - 60px) * 0.9094);
        height: calc(((100vw - 60px) * 335 / 500) * 0.8357);
        max-width: 90.94%;
        max-height: 83.57%;
        top: 9.18%;
        left: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h7 {
        position: absolute;
        width: calc((100vw - 60px) * 0.4676);
        height: calc(((100vw - 60px) * 335 / 500) * 0.5507);
        max-width: 46.76%;
        max-height: 55.07%;
        right: 0;
        bottom: 21.50%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h7 {
        position: absolute;
        width: calc((100vw - 60px) * 0.2314);
        height: calc(((100vw - 60px) * 335 / 500) * 0.5507);
        max-width: 23.14%;
        max-height: 55.07%;
        left: 26.86%;
        bottom: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .front-page-footer {
        padding: 0;
        height: 550px;
    }
    
    .footer-container {
        padding: 0 30px;
        box-sizing: border-box;
    }
    
    .footer-content {
        width: 100%;
        max-width: 1119px;
        margin: 0 auto;
        min-height: 450px;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .footer-group-brand {
        position: static;
        width: 100%;
        max-width: 330px;
    }
    
    .footer-group-menu {
        position: static;
        width: 548px;
        height: 148px;
        margin-top: 30px;
        margin-left: 0;
    }
    
    .footer-bottom-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        box-sizing: border-box;
    }

    .footer-group-copyright {
        position: static !important;
        margin-bottom: 10px;
    }

    .footer-group-links {
        position: static !important;
        display: flex;
        gap: 20px;
    }

}

/* Unified media queries for hero, footer and highlights 1-3, 5-7 (without hero, section 4 and client sections) */
@media (max-width: 849px) and (min-width: 530px) {

    .front-page ul {
        font-size: 18px;
    }

    .general-highlight-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 170px;
        height: 47px;
        border-radius: 4px;
        font-size: 18px;
        padding-bottom: 0
    }

    .hero-section {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 20px 60px 20px;
        overflow: hidden;
        margin-bottom: 0;
        border: 1px solid #F1F5F9;
        
    background-image: 
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%20368%20605%22%3E%0A%20%20%3Cpath%20fill%3D%22%23E2E2E2%22%20d%3D%22M217%20605c-15%200-25-12-30-25-13-35-38-59-77-73-24-9-34-26-33-55l3-44c2-13%2010-23%2024-32%2013-8%2025-17%2036-27%205-4%208-11%2010-19a585%20585%200%200%200%2014-60c5-16%202-31-7-49l-16-24-2-3c-13-18-26-33-49-37-14-2-24-12-33-22l-7-7c-14-14-28-26-41-36-9-7-12-13-6-25C14%2043%2032%2023%2060%207c9-5%2022-4%2034-4h2a539%20539%200%200%201%2060%208c12%201%2024-1%2037-8%2014-6%2025-3%2037%209l19%2018%2018%2017%204%203c5%205%2012%2011%209%2017l-4%208-10%2015c-6%209-9%2017-7%2026%201%208%207%2016%2016%2023%208%206%2015%2014%2018%2023%2013%2034%2026%2068%2036%20100%205%2014%207%2029%208%2044%200%2018%204%2030%2013%2039%2015%2014%2020%2032%2016%2055a2815%202815%200%200%200-11%2063c-3%2018-13%2034-28%2043-14%2010-20%2023-25%2037-17%2049-29%2051-72%2060l-6%201-7%201ZM80%204c-7%200-14%201-20%204C33%2024%2015%2044%204%2067c-5%2012-2%2017%206%2024%2013%2010%2027%2022%2041%2036l7%207c9%2010%2019%2020%2032%2022%2024%203%2037%2019%2050%2037l2%203%2016%2024c10%2019%2012%2034%208%2050l-8%2033-6%2027c-2%209-6%2016-11%2020-11%2010-23%2019-36%2027-14%209-21%2019-23%2032-3%2014-3%2029-3%2043-1%2029%209%2045%2032%2054%2039%2014%2064%2038%2078%2073%205%2014%2017%2027%2034%2024l7-1c44-10%2054-12%2071-60%205-13%2011-27%2026-37%2014-9%2024-24%2027-43l3-22%207-41c4-22%200-39-15-53-9-10-13-22-14-40%200-15-3-30-7-43l-36-101c-4-8-10-16-18-22-10-7-15-15-17-24-1-9%201-18%208-27l9-15%205-7c2-6-4-11-9-16l-4-3-18-17-19-18c-12-12-22-15-35-8-14%206-26%208-38%207l-23-3-37-4h-2L80%204Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23E2E2E2%22%20d%3D%22M226%20584c-20%200-30-16-37-31-11-21-28-33-43-42l-21-13a68%2068%200%200%201-28-62c2-22%2014-40%2032-48%2020-10%2035-26%2049-41%2011-11%2022-22%2034-31l5-7%201-5c2-4-2-9-7-12-17-13-22-31-13-54%203-10%209-19%2015-28l7-11c3-5%204-10%202-14-2-3-5-6-11-7l-9-1h-7c-9%200-16-3-20-8-3-5-5-11-3-19%204-28-1-37-26-49-14-7-22-16-26-29-3-10-2-19%202-25%203-5%209-8%2017-9%2020-2%2037%203%2049%2015%2028%2029%2043%2064%2043%20103%201%2014%206%2022%2015%2024%2023%204%2035%2021%2044%2036%2013%2023%2028%2050%2021%2081-6%2030-1%2058%2018%2093%2018%2032%2015%2077-19%2096-15%208-20%2021-24%2037l-5%2018c-5%2025-22%2039-50%2042l-5%201Zm-20-408h6c5%202%209%205%2011%209s1%209-2%2015l-6%2010c-6%2010-12%2019-16%2029-8%2022-4%2039%2013%2052%203%202%2010%208%208%2014l-2%204c-1%203-2%206-5%208-13%209-23%2020-34%2031-14%2015-29%2031-49%2041-18%208-29%2026-31%2048-2%2024%209%2047%2027%2060l21%2013c15%209%2032%2022%2043%2042%208%2015%2017%2030%2036%2030h5c27-4%2043-17%2049-41l5-18c3-14%208-30%2024-39%2034-18%2036-62%2019-93-19-35-25-64-18-94%207-31-8-57-21-81-9-14-20-30-43-34-10-2-16-11-16-26-1-39-15-73-43-102a54%2054%200%200%200-48-15c-7%201-13%204-16%209-4%206-4%2014-1%2023%203%2013%2011%2022%2025%2029%2025%2012%2030%2022%2026%2050-1%207%200%2014%204%2018%203%205%209%207%2018%208h11Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23E2E2E2%22%20d%3D%22m236%20543-5-2-7-4-14-9-27-22-16-13-7-6c-5-3-10-6-14-11-8-9-12-20-11-30s8-19%2019-25c10-6%2019-14%2028-22l11-11%206-5%209-8c9-8%2020-11%2030-9s19%208%2025%2018l2%203c7%2011%2015%2023%2019%2035%205%2016%203%2029-7%2040a89%2089%200%200%200-28%2058c0%207-3%2019-10%2022l-3%201Zm-5-3c3%202%205%202%207%201%206-3%2010-14%2010-21%201-22%2010-41%2028-59%209-10%2012-23%206-39-4-12-11-23-18-34l-2-3c-6-10-15-16-25-18-9-1-19%202-28%209a151%20151%200%200%200-15%2013l-12%2011c-8%208-17%2016-28%2022-10%206-16%2014-18%2024-1%2010%203%2021%2012%2029%203%204%208%208%2013%2011l7%206%2016%2013%2027%2022%2014%209%206%204Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23E2E2E2%22%20d%3D%22m215%20495-5-1c-14-6-27-13-38-21-7-5-10-12-10-19%200-6%203-12%2010-18%209-7%2020-15%2026-25%208-12%2020-27%2033-20%2016%204%2029%2014%2033%2027%205%2014%203%2028-7%2040-9%2012-17%2023-27%2032-4%203-10%205-15%205Zm10-104c-10%200-19%2011-25%2020-7%2011-18%2019-27%2026-7%205-10%2011-10%2017%200%207%204%2013%2010%2018%2011%208%2023%2015%2038%2021%204%202%2013%200%2018-4%2010-9%2018-20%2027-31%209-12%2012-26%207-39s-16-23-32-26v-1l-6-1ZM73%2089l-9-3c-8-4-10-9-11-16%200-5%201-9%204-11%202-3%207-3%2012-2l4%202%208%205c6%206%207%2013%202%2020-3%204-6%205-10%205ZM63%2058l-5%202c-3%202-4%205-4%2010%201%207%203%2011%2010%2015%208%203%2013%204%2018-2%204-6%204-13-2-18l-8-5-4-1-5-1Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23E2E2E2%22%20d%3D%22M229%20565c-11%200-21-6-29-19-10-18-24-32-43-42l-18-12a56%2056%200%200%201-23-51c2-18%2013-33%2029-41%209-4%2021-11%2030-19%2023-24%2048-41%2078-53%204-2%207-2%2010-1%207%203%2011%2016%2014%2026l3%207%205%2014c4%2012%209%2024%2015%2035%2014%2025%2013%2040-4%2060l-6%206-7%208-12%2028-2%2013-1%208c-3%2018-13%2029-31%2032l-8%201Zm30-237-5%201c-30%2012-56%2029-78%2053-9%208-21%2015-30%2019-17%208-27%2023-29%2040-1%2019%207%2038%2023%2050l18%2011c18%2011%2033%2025%2044%2043%209%2015%2020%2021%2035%2018%2017-4%2027-14%2029-31l1-8c1-4%201-9%203-13%203-11%207-21%2012-29l7-8%206-6c17-20%2017-34%204-58-7-11-11-23-15-35a533%20533%200%200%200-8-22c-3-10-7-21-14-24l-3-1Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23E2E2E2%22%20d%3D%22m220%20447-3-1c-1-2%200-7%203-11%202-2%205-3%208-2h1v1l1%202c1%203%202%205%201%206l-6%203-3%202h-2Zm5-13-4%202c-3%203-4%207-2%209h3l2-1%206-3-1-4-2-2-2-1ZM268%20265l-10-3-5-2-3-1-10-3c-5-3-8-6-8-10-1-3%201-7%205-11l8-5%204-3c6-2%208-1%2010%201l2%201c7%202%2014%2011%2017%2019%201%203%202%207%200%2010-3%205-6%207-10%207Zm-19-36-3%202-8%205c-4%204-5%207-5%2010%201%203%203%206%207%208l10%204a108%20108%200%200%201%209%203c7%203%2013%205%2018-3%201-2%201-6-1-10-3-8-10-16-15-18l-2-1c-2-1-4-2-10%200Z%22%2F%3E%0A%3C%2Fsvg%3E"),
        linear-gradient(to right, #F1F5F9 2px, transparent 1px),
        linear-gradient(to bottom, #F1F5F9 2px, transparent 1px),
        linear-gradient(to top, #F1F5F9 5%, #FFFFFF);

    background-size: 
        195px 320px,
        40px 100%,
        100% 40px,
        100% 100%;

    background-position:
        left 15% top 10%,
        0 0,
        0 0,
        0 0;

    background-repeat:
        no-repeat, 
        repeat, 
        repeat,
        no-repeat;
    }

    .hero-section h1 {
        font-size: 54px;
        line-height: 100%;
        margin-bottom: 20px;
    }

    .hero-section p {
        width: 480px;
        font-size: 18px;
        line-height: 145%;
        margin-bottom: 40px;
        color: #374151;
    }

    .hero-button-section {
        display: flex;
        flex-direction: row;
        gap: 15px;
        font-size: 18px;
        margin-bottom: 40px;
        justify-content: center;
        width: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hero-button-section .button-get-started,
    .hero-button-section .button-learn-more {
        font-size: 20px;
        width: 200px;
        height: 50px;
        align-self: center;
    }

    .hero-bullets {
        display: flex;
        flex-direction: row;
        gap: 15px;
        font-size: 40px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hero-bullets li {
        position: relative;
        padding-left: 30px;
        color: #374151;
        margin-right: 15px;
    }

    .hero-bullets li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%230C65AF' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%230C65AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px;
    }

    .highlight-first-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-first-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-first-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }

    .highlight-first-bg .general-visible-content .left-part h2 {
        font-size: 26px;
    }

    .highlight-first-bg .general-visible-content .left-part ul {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .highlight-first-bg .general-visible-content .left-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .highlight-first-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .feature-slider {
        width: 100%;
        max-width: calc(100vw - 40px);
        max-height: none;
    }
    
    .slider-visual {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/280;
        margin-top: 25px;
    }

    .slider-gradient {
        border-radius: 8px;
    }
    
    .slider-image-container {
        width: calc((100vw - 40px) * 0.9294);
        height: calc(((100vw - 40px) * 500 / 280) * 0.9037);
        bottom: 0;
        right: 0;
        border-radius: 0 0 8px 0;
        max-width: 92.94%;
        max-height: 90.37%;
    }

    .slider-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom right;
    }

    .slider-controls .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .slider-controls .slider-text {
        font-size: 14px;
        margin-left: 20px;
    }

    .highlight-second-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-second-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-second-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-second-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-second-bg .general-visible-content .right-part h2 {
        font-size: 26px;
    }

    .highlight-second-bg .general-visible-content .right-part ul {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .highlight-second-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .complex-image-h2 {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient {
        border-radius: 8px;
    }
    
    .background-1 {
        width: calc((100vw - 40px) * 0.7651);
        height: calc(((100vw - 40px) * 335 / 500) * 0.7681);
        max-width: 76.51%;
        max-height: 76.81%;
        border-radius: 0 8px 0 0;
    }
    
    .image-1 {
        width: calc((100vw - 40px) * 0.7492);
        height: calc(((100vw - 40px) * 335 / 500) * 0.7271);
        max-width: 74.92%;
        max-height: 72.71%;
        top: 1.69%;
        right: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .background-2 {
        width: calc((100vw - 40px) * 0.5243);
        height: calc(((100vw - 40px) * 335 / 500) * 0.5290);
        max-width: 52.43%;
        max-height: 52.90%;
        left: 0;
        bottom: 4.83%;
        border-radius: 0 8px 8px 0;
    }
    
    .image-2 {
        width: calc((100vw - 40px) * 0.5000);
        height: calc(((100vw - 40px) * 335 / 500) * 0.4807);
        max-width: 50.00%;
        max-height: 48.07%;
        left: 0.8%;
        bottom: 7.25%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .icon-base {
        width: calc((100vw - 40px) * 0.0939);
        height: calc(((100vw - 40px) * 335 / 500) * 0.1401);
        max-width: 9.39%;
        max-height: 14.01%;
        border-radius: 4px;
    }
    
    .icon-base-1 {
        top: 1.69%;
        left: 12.46%;
    }
    
    .icon-base-2 {
        bottom: 4.83%;
        right: 36.57%;
    }
    
    .icon-base-3 {
        bottom: 4.83%;
        right: 26.21%;
    }
    
    .icon-base-4 {
        bottom: 4.83%;
        right: 15.86%;
    }
    
    .icon-image {
        width: calc((100vw - 40px) * 0.0938);
        height: calc(((100vw - 40px) * 335 / 500) * 0.1264);
        max-width: 9.38%;
        max-height: 12.64%;
    }
    
    .icon-image-1 {
        top: 2.35%;
        left: 12.4%;
    }
    
    .icon-image-2 {
        bottom: 5.55%;
        right: 36.54%;
    }
    
    .icon-image-3 {
        bottom: 5.55%;
        right: 26.2%;
    }
    
    .icon-image-4 {
        bottom: 5.55%;
        right: 15.85%;
    }

    .highlight-third-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-third-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-third-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-third-bg .general-visible-content .left-part h2 {
        font-size: 26px;
    }

    .highlight-third-bg .general-visible-content .left-part ul {
        font-size: 18px;
    }

    .highlight-third-bg .general-visible-content .left-part ul li::before {
        top: 0.2em;
        transform: none;
    }

    .gis-badges-container {
        display: flex;
        flex-direction: row;
        width: auto;
        height: auto;
        margin-bottom: 35px;
        margin-top: -20px;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 5px 0;
        overflow: visible;
    }

    .gis-badge {
        display: flex;
        align-items: center;
        border: 1px solid #374151;
        border-radius: 50px;
        padding: 6px 15px 5px 15px;
        font-size: 16px;
        font-weight: 500;
        color: #374151;
        white-space: nowrap;
    }

    .gis-badge:not(:last-child) {
        margin-right: 10px;
    }

    .gis-badge img {
        margin-right: 8px;
    }

    .gis-badge:nth-child(3) img {
        margin-right: 7px;
    }
    
    .highlight-third-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-third-bg .general-visible-content .right-part .complex-image-h3 {
        margin-bottom: 25px;
    }
    
    .complex-image-h3 {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .complex-image-h3 .image-osm,
    .complex-image-h3 .image-dem,
    .complex-image-h3 .image-msbld {
        width: calc((100% - 30px) / 3);
        height: 100%;
        overflow: hidden;
    }

    .highlight-fifth-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-fifth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-fifth-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-fifth-bg .general-visible-content .right-part h2 {
        font-size: 26px;
    }

    .highlight-fifth-bg .general-visible-content .right-part ul {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .highlight-fifth-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        margin: 30px 0 40px 0;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/280;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-web {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/280;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-mobile {
        width: calc((100vw - 40px) * 0.2342);
        height: calc(((100vw - 40px) * 280 / 500) * 0.8439);
        max-width: 23.42%;
        max-height: 84.39%;
        top: 27.46%;
        right: 6.15%;
    }

    .highlight-sixth-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-sixth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-sixth-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }

    .highlight-sixth-bg .general-visible-content .left-part h2 {
        font-size: 26px;
    }

    .highlight-sixth-bg .general-visible-content .left-part ul {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .highlight-sixth-bg .general-visible-content .left-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .highlight-sixth-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .complex-image-h6 {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient-h6 {
        border-radius: 8px;
    }
    
    .image-1-h6 {
        position: absolute;
        width: calc((100vw - 40px) * 0.9142);
        height: calc(((100vw - 40px) * 335 / 500) * 0.7681);
        max-width: 91.42%;
        max-height: 76.81%;
        top: 6.04%;
        left: 3.07%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h6 {
        position: absolute;
        width: calc((100vw - 40px) * 0.5518);
        height: calc(((100vw - 40px) * 335 / 500) * 0.6836);
        max-width: 55.18%;
        max-height: 68.36%;
        left: 16.02%;
        bottom: 8.21%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h6 {
        position: absolute;
        width: calc((100vw - 40px) * 0.4223);
        height: calc(((100vw - 40px) * 335 / 500) * 0.2053);
        max-width: 42.23%;
        max-height: 20.53%;
        top: 13.53%;
        right: 2.5%;
        border-radius: 0;
        overflow: hidden;
    }

    .highlight-seventh-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-seventh-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-seventh-bg .general-visible-content .right-part h2 {
        font-size: 26px;
    }

    .highlight-seventh-bg .general-visible-content .right-part ul {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .highlight-seventh-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .complex-image-h7 {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient-h7 {
        border-radius: 8px;
    }
    
    .background-h7 {
        position: absolute;
        width: calc((100vw - 40px) * 0.9256);
        height: calc(((100vw - 40px) * 335 / 500) * 0.8841);
        max-width: 92.56%;
        max-height: 88.41%;
        top: 6.76%;
        left: 0;
        border-radius: 0 8px 8px 0;
    }
    
    .image-1-h7 {
        position: absolute;
        width: calc((100vw - 40px) * 0.9094);
        height: calc(((100vw - 40px) * 335 / 500) * 0.8357);
        max-width: 90.94%;
        max-height: 83.57%;
        top: 9.18%;
        left: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h7 {
        position: absolute;
        width: calc((100vw - 40px) * 0.4676);
        height: calc(((100vw - 40px) * 335 / 500) * 0.5507);
        max-width: 46.76%;
        max-height: 55.07%;
        right: 0;
        bottom: 21.50%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h7 {
        position: absolute;
        width: calc((100vw - 40px) * 0.2314);
        height: calc(((100vw - 40px) * 335 / 500) * 0.5507);
        max-width: 23.14%;
        max-height: 55.07%;
        left: 26.86%;
        bottom: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .front-page-footer {
        height: auto;
        min-height: 408px;
        padding: 50px 0;
    }

    .footer-content {
        width: calc(100% - 40px);
        height: auto;
        max-width: 1280px;
        margin: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .footer-group-brand {
        position: static;
        width: 100%;
        align-items: flex-start;
    }

    .footer-logo {
        width: 100%;
        max-width: 258px;
    }

    .footer-logo img {
        width: 100%;
        max-width: 258px;
        height: auto;
    }

    .footer-description {
        margin-top: 15px;
        font-size: 16px;
        max-width: 100%;
        width: 65%;
    }

    .footer-social {
        margin-top: 30px;
        width: 100%;
        max-width: 222px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        row-gap: 5px;
    }

    .social-link {
        flex: 0 0 auto;
    }

    .footer-group-menu {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .footer-column {
        width: 100%;
        max-width: 200px;
        text-align: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .footer-column-title {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .footer-menu {
        align-items: center;
        gap: 8px;
    }

    .footer-menu-link {
        font-size: 16px;
    }

    .footer-group-links {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    .footer-service-link {
        font-size: 14px;
        text-align: center;
    }

    .footer-group-copyright {
        position: static;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-copyright {
        font-size: 14px;
        text-align: center;
    }

}

@media (max-width: 529px) and (min-width: 361px) {

    .front-page ul {
        font-size: 18px;
    }

    .general-highlight-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 170px;
        height: 47px;
        border-radius: 4px;
        font-size: 18px;
        padding-bottom: 0
    }

    .hero-section {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 20px 60px 20px;
        overflow: hidden;
        margin-bottom: 0;
        border: 1px solid #F1F5F9;
        
    background-image: 
        linear-gradient(to right, #F1F5F9 2px, transparent 1px),
        linear-gradient(to bottom, #F1F5F9 2px, transparent 1px),
        linear-gradient(to top, #F1F5F9 5%, #FFFFFF);

    background-size: 
        40px 100%,
        100% 40px,
        100% 100%;

    background-position:
        0 0,
        0 0,
        0 0;

    background-repeat:
        repeat, 
        repeat,
        no-repeat;
    }

    .hero-section h1 {
        font-size: 42px;
        line-height: 100%;
        margin-bottom: 20px;
    }

    .hero-section p {
        width: 100%;
        font-size: 18px;
        line-height: 145%;
        margin-bottom: 40px;
        color: #374151;
    }

    .hero-button-section {
        display: flex;
        flex-direction: row;
        gap: 15px;
        font-size: 18px;
        margin-bottom: 40px;
        justify-content: center;
        width: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hero-button-section .button-get-started,
    .hero-button-section .button-learn-more {
        font-size: 20px;
        width: 200px;
        height: 50px;
        align-self: center;
        border-radius: 4px;
    }

    .hero-bullets {
        display: flex;
        flex-direction: row;
        gap: 15px;
        font-size: 40px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hero-bullets li {
        position: relative;
        padding-left: 30px;
        color: #374151;
        margin-right: 15px;
    }

    .hero-bullets li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%230C65AF' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%230C65AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px;
    }

    .highlight-first-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-first-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-first-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }

    .highlight-first-bg .general-visible-content .left-part h2 {
        font-size: 26px;
    }

    .highlight-first-bg .general-visible-content .left-part ul {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .highlight-first-bg .general-visible-content .left-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .highlight-first-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .feature-slider {
        width: 100%;
        max-width: calc(100vw - 40px);
        max-height: none;
    }
    
    .slider-visual {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/280;
        margin-top: 25px;
    }

    .slider-gradient {
        border-radius: 8px;
    }
    
    .slider-image-container {
        width: calc((100vw - 40px) * 0.9294);
        height: calc(((100vw - 40px) * 500 / 280) * 0.9037);
        bottom: 0;
        right: 0;
        border-radius: 0 0 8px 0;
        max-width: 92.94%;
        max-height: 90.37%;
    }

    .slider-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom right;
    }

    .slider-controls .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .slider-controls .slider-text {
        font-size: 14px;
        margin-left: 20px;
    }

    .highlight-second-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-second-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-second-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-second-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-second-bg .general-visible-content .right-part h2 {
        font-size: 26px;
    }

    .highlight-second-bg .general-visible-content .right-part ul {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .highlight-second-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .complex-image-h2 {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient {
        border-radius: 8px;
    }
    
    .background-1 {
        width: calc((100vw - 40px) * 0.7651);
        height: calc(((100vw - 40px) * 335 / 500) * 0.7681);
        max-width: 76.51%;
        max-height: 76.81%;
        border-radius: 0 4px 0 0;
    }
    
    .image-1 {
        width: calc((100vw - 40px) * 0.7492);
        height: calc(((100vw - 40px) * 335 / 500) * 0.7271);
        max-width: 74.92%;
        max-height: 72.71%;
        top: 1.69%;
        right: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .background-2 {
        width: calc((100vw - 40px) * 0.5243);
        height: calc(((100vw - 40px) * 335 / 500) * 0.5290);
        max-width: 52.43%;
        max-height: 52.90%;
        left: 0;
        bottom: 4.83%;
        border-radius: 0 4px 4px 0;
    }
    
    .image-2 {
        width: calc((100vw - 40px) * 0.5000);
        height: calc(((100vw - 40px) * 335 / 500) * 0.4807);
        max-width: 50.00%;
        max-height: 48.07%;
        left: 0.8%;
        bottom: 7.25%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .icon-base {
        width: calc((100vw - 40px) * 0.0939);
        height: calc(((100vw - 40px) * 335 / 500) * 0.1401);
        max-width: 9.39%;
        max-height: 14.01%;
        border-radius: 4px;
    }
    
    .icon-base-1 {
        top: 1.69%;
        left: 12.46%;
    }
    
    .icon-base-2 {
        bottom: 4.83%;
        right: 36.57%;
    }
    
    .icon-base-3 {
        bottom: 4.83%;
        right: 26.21%;
    }
    
    .icon-base-4 {
        bottom: 4.83%;
        right: 15.86%;
    }
    
    .icon-image {
        width: calc((100vw - 40px) * 0.0938);
        height: calc(((100vw - 40px) * 335 / 500) * 0.1264);
        max-width: 9.38%;
        max-height: 12.64%;
    }
    
    .icon-image-1 {
        top: 2.35%;
        left: 12.4%;
    }
    
    .icon-image-2 {
        bottom: 5.55%;
        right: 36.54%;
    }
    
    .icon-image-3 {
        bottom: 5.55%;
        right: 26.2%;
    }
    
    .icon-image-4 {
        bottom: 5.55%;
        right: 15.85%;
    }

    .highlight-third-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-third-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-third-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-third-bg .general-visible-content .left-part h2 {
        font-size: 26px;
    }

    .highlight-third-bg .general-visible-content .left-part ul {
        font-size: 18px;
    }

    .highlight-third-bg .general-visible-content .left-part ul li::before {
        top: 0.2em;
        transform: none;
    }

    .gis-badges-container {
        display: flex;
        flex-direction: row;
        width: auto;
        height: auto;
        margin-bottom: 35px;
        margin-top: -20px;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 5px 0;
        overflow: visible;
    }

    .gis-badge {
        display: flex;
        align-items: center;
        border: 1px solid #374151;
        border-radius: 50px;
        padding: 6px 15px 5px 15px;
        font-size: 16px;
        font-weight: 500;
        color: #374151;
        white-space: nowrap;
    }

    .gis-badge:not(:last-child) {
        margin-right: 10px;
    }

    .gis-badge img {
        margin-right: 8px;
    }

    .gis-badge:nth-child(3) img {
        margin-right: 7px;
    }
    
    .highlight-third-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-third-bg .general-visible-content .right-part .complex-image-h3 {
        margin-bottom: 25px;
    }

    .complex-image-h3 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .complex-image-h3 .image-osm,
    .complex-image-h3 .image-dem,
    .complex-image-h3 .image-msbld {
        width: calc((100% - 15px) / 3);
        height: 100%;
        overflow: hidden;
        border-radius: inherit;
    }

    .highlight-fifth-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-fifth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-fifth-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-fifth-bg .general-visible-content .right-part h2 {
        font-size: 26px;
    }

    .highlight-fifth-bg .general-visible-content .right-part ul {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .highlight-fifth-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        margin: 30px 0 40px 0;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/280;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-web {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/280;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-mobile {
        width: calc((100vw - 40px) * 0.2342);
        height: calc(((100vw - 40px) * 280 / 500) * 0.8439);
        max-width: 23.42%;
        max-height: 84.39%;
        top: 27.46%;
        right: 6.15%;
    }

    .highlight-sixth-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-sixth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-sixth-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }

    .highlight-sixth-bg .general-visible-content .left-part h2 {
        font-size: 26px;
    }

    .highlight-sixth-bg .general-visible-content .left-part ul {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .highlight-sixth-bg .general-visible-content .left-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .highlight-sixth-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .complex-image-h6 {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient-h6 {
        border-radius: 8px;
    }
    
    .image-1-h6 {
        position: absolute;
        width: calc((100vw - 40px) * 0.9142);
        height: calc(((100vw - 40px) * 335 / 500) * 0.7681);
        max-width: 91.42%;
        max-height: 76.81%;
        top: 6.04%;
        left: 3.07%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h6 {
        position: absolute;
        width: calc((100vw - 40px) * 0.5518);
        height: calc(((100vw - 40px) * 335 / 500) * 0.6836);
        max-width: 55.18%;
        max-height: 68.36%;
        left: 16.02%;
        bottom: 8.21%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h6 {
        position: absolute;
        width: calc((100vw - 40px) * 0.4223);
        height: calc(((100vw - 40px) * 335 / 500) * 0.2053);
        max-width: 42.23%;
        max-height: 20.53%;
        top: 13.53%;
        right: 2.5%;
        border-radius: 0;
        overflow: hidden;
    }

    .highlight-seventh-bg {
        padding: 40px 20px 50px 20px;
        min-height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-seventh-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-seventh-bg .general-visible-content .right-part h2 {
        font-size: 26px;
    }

    .highlight-seventh-bg .general-visible-content .right-part ul {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .highlight-seventh-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .complex-image-h7 {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient-h7 {
        border-radius: 8px;
    }
    
    .background-h7 {
        position: absolute;
        width: calc((100vw - 40px) * 0.9256);
        height: calc(((100vw - 40px) * 335 / 500) * 0.8841);
        max-width: 92.56%;
        max-height: 88.41%;
        top: 6.76%;
        left: 0;
        border-radius: 0 8px 8px 0;
    }
    
    .image-1-h7 {
        position: absolute;
        width: calc((100vw - 40px) * 0.9094);
        height: calc(((100vw - 40px) * 335 / 500) * 0.8357);
        max-width: 90.94%;
        max-height: 83.57%;
        top: 9.18%;
        left: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h7 {
        position: absolute;
        width: calc((100vw - 40px) * 0.4676);
        height: calc(((100vw - 40px) * 335 / 500) * 0.5507);
        max-width: 46.76%;
        max-height: 55.07%;
        right: 0;
        bottom: 21.50%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h7 {
        position: absolute;
        width: calc((100vw - 40px) * 0.2314);
        height: calc(((100vw - 40px) * 335 / 500) * 0.5507);
        max-width: 23.14%;
        max-height: 55.07%;
        left: 26.86%;
        bottom: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .front-page-footer {
        height: auto;
        min-height: 408px;
        padding: 50px 0;
    }

    .footer-content {
        width: calc(100% - 40px);
        height: auto;
        max-width: 1280px;
        margin: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .footer-group-brand {
        position: static;
        width: 100%;
        align-items: flex-start;
    }

    .footer-logo {
        width: 100%;
        max-width: 258px;
    }

    .footer-logo img {
        width: 100%;
        max-width: 258px;
        height: auto;
    }

    .footer-description {
        margin-top: 15px;
        font-size: 16px;
        max-width: 100%;
        width: 100%;
    }

    .footer-social {
        margin-top: 30px;
        width: 100%;
        max-width: 222px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        row-gap: 5px;
    }

    .social-link {
        flex: 0 0 auto;
    }

    .footer-group-menu {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .footer-column {
        width: 100%;
        max-width: 200px;
        text-align: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .footer-column-title {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .footer-menu {
        align-items: center;
        gap: 8px;
    }

    .footer-menu-link {
        font-size: 16px;
    }

    .footer-group-links {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    .footer-service-link {
        font-size: 14px;
        text-align: center;
    }

    .footer-group-copyright {
        position: static;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-copyright {
        font-size: 14px;
        text-align: center;
    }

}

/* A separate special media query for the fourth section */
@media (max-width: 849px) and (min-width: 361px) {

    .highlight-fourth-bg {
        padding: 0;
        min-height: auto;
    }
    
    .highlight-fourth-bg .general-visible-content {
        width: 100%;
        max-width: none;
        height: auto;
        position: relative;
    }

    .fourth-content-wrapper {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        align-items: stretch;
        padding: 50px 0;
        box-sizing: border-box;
        min-height: 450px;
    }
    
    .fourth-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 0;
    }
    
    .fourth-content-overlay {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: calc(100vw - 40px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 8px;
        padding-right: 15px;
        box-sizing: border-box;
        z-index: 1;
    }
    
    .highlight-fourth-bg .general-visible-content h2 {
        color: #FFFFFF;
        line-height: 108%;
        letter-spacing: -3%;
        margin-bottom: 8px;
        margin-top: 0;
        font-size: 26px;
    }
    
    .highlight-fourth-bg .general-visible-content ul {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .highlight-fourth-bg .general-visible-content ul li::before {
        top: 0.2em;
        transform: none;
    }
    
    .fourth-button {
        color: #FFFFFF !important;
        border: 1px solid #FFFFFF !important;
        background-color: transparent !important;
    }
    
    .fourth-button:hover {
        color: #FFFFFF !important;
        border: 1px solid transparent !important;
        background-color: #00000070 !important;
    }
    
    .fourth-mobile-screen {
        display: block;
        width: 100%;
        padding: 50px 20px 70px 20px;
        box-sizing: border-box;
    }
    
    .fourth-mobile-screen-image {
        width: 100%;
        max-width: 809px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

}

/* A separate special media queries for the form section */
@media (max-width: 1268px) and (min-width: 850px) {

    .form-bg {
        padding: 50px 0 70px 0;
        height: auto;
        min-height: auto;
    }
    
    .form-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 0;
        margin: 0 30px;
        box-sizing: border-box;
    }
    
    .form-bg .general-visible-content .left-part {
        width: 100%;
        min-height: 450px;
        height: auto;
        margin-bottom: 0;
        margin-top: -50px;
    }
    
    .form-bg .general-visible-content .left-part p {
        margin-bottom: 30px;
    }
    
    .form-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .form-bg .general-visible-content .right-part .form-container {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }
    
    .form-bg .general-visible-content .right-part .form-container h3 {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .form-bg .general-visible-content .right-part .contact-form {
        padding: 0 30px 30px 30px;
    }
    
    .form-bg .general-visible-content .right-part .form-fields {
        width: 100%;
    }
    
    .form-bg .general-visible-content .right-part .form-field input,
    .form-bg .general-visible-content .right-part .form-field textarea {
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-bg .general-visible-content .right-part .submit-button {
        width: 100%;
}

    .form-bg .general-visible-content .right-part .checkbox-field {
        width: 100%;
    }
}

@media (max-width: 849px) and (min-width: 530px) {

    .form-bg {
        padding: 50px 0 70px 0;
        height: auto;
        min-height: auto;
    }
    
    .form-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
        margin: 0 20px;
        box-sizing: border-box;
    }
    
    .form-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
        margin-bottom: 40px;
    }

    .form-bg .general-visible-content .left-part h2 {
        font-size: 26px;
    }

    .form-bg .general-visible-content .left-part p {
        font-size: 18px;
    }

    .form-bg .general-visible-content .left-part .form-bullets {
        color: #FFFFFF;
        padding-left: 32px;
        list-style: none;
        margin: 0;
        max-height: 190px;
    }

    .form-bg .general-visible-content .left-part .bullet-main {
        font-size: 18px;
    }

    .form-bg .general-visible-content .left-part .bullet-sub {
        font-size: 16px;
    }
    
    .form-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .form-bg .general-visible-content .right-part .form-container {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    
    .form-bg .general-visible-content .right-part .form-container h3 {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .form-bg .general-visible-content .right-part .contact-form {
        padding: 0 30px 30px 30px;
    }
    
    .form-bg .general-visible-content .right-part .form-fields {
        width: 100%;
    }
    
    .form-bg .general-visible-content .right-part .form-field input,
    .form-bg .general-visible-content .right-part .form-field textarea {
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-bg .general-visible-content .right-part .submit-button {
        width: 100%;
        font-size: 18px;
    }
    
    .form-bg .general-visible-content .right-part .checkbox-field {
        width: 100%;
    }

}

@media (max-width: 529px) and (min-width: 440px) {

    .form-bg {
        padding: 50px 0 70px 0;
        height: auto;
        min-height: auto;
    }
    
    .form-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
        margin: 0 20px;
        box-sizing: border-box;
    }
    
    .form-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
        margin-bottom: 40px;
        overflow: visible;
    }

    .form-bg .general-visible-content .left-part h2 {
        font-size: 26px;
    }

    .form-bg .general-visible-content .left-part p {
        font-size: 18px;
    }

    .form-bg .general-visible-content .left-part .form-bullets {
        color: #FFFFFF;
        padding-left: 32px;
        list-style: none;
        margin: 0;
        height: auto;
        margin-bottom: 0;
    }

    .form-bg .general-visible-content .left-part .bullet-main {
        font-size: 18px;
    }

    .form-bg .general-visible-content .left-part .bullet-sub {
        font-size: 16px;
    }
    
    .form-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .form-bg .general-visible-content .right-part .form-container {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    
    .form-bg .general-visible-content .right-part .form-container h3 {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .form-bg .general-visible-content .right-part .contact-form {
        padding: 0 30px 30px 30px;
    }
    
    .form-bg .general-visible-content .right-part .form-fields {
        width: 100%;
    }
    
    .form-bg .general-visible-content .right-part .form-field input,
    .form-bg .general-visible-content .right-part .form-field textarea {
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-bg .general-visible-content .right-part .submit-button {
        width: 100%;
        font-size: 18px;
        border-radius: 4px;
    }
    
    .form-bg .general-visible-content .right-part .checkbox-field {
        width: 100%;
    }

}

@media (max-width: 439px) and (min-width: 361px) {

    .form-bg {
        padding: 50px 0 70px 0;
        height: auto;
        min-height: auto;
    }
    
    .form-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
        margin: 0 20px;
        box-sizing: border-box;
    }
    
    .form-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
        margin-bottom: 40px;
        overflow: visible;
    }

    .form-bg .general-visible-content .left-part h2 {
        font-size: 26px;
    }

    .form-bg .general-visible-content .left-part p {
        font-size: 18px;
    }

    .form-bg .general-visible-content .left-part .form-bullets {
        color: #FFFFFF;
        padding-left: 32px;
        list-style: none;
        margin: 0;
        height: auto;
        margin-bottom: 40px;
    }

    .form-bg .general-visible-content .left-part .bullet-main {
        font-size: 18px;
    }

    .form-bg .general-visible-content .left-part .bullet-sub {
        font-size: 16px;
    }
    
    .form-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .form-bg .general-visible-content .right-part .form-container {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    
    .form-bg .general-visible-content .right-part .form-container h3 {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .form-bg .general-visible-content .right-part .contact-form {
        padding: 0 30px 30px 30px;
    }
    
    .form-bg .general-visible-content .right-part .form-fields {
        width: 100%;
    }
    
    .form-bg .general-visible-content .right-part .form-field input,
    .form-bg .general-visible-content .right-part .form-field textarea {
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-bg .general-visible-content .right-part .submit-button {
        width: 100%;
        font-size: 18px;
        border-radius: 4px;
    }
    
    .form-bg .general-visible-content .right-part .checkbox-field {
        width: 100%;
    }

}

/* A separate special media queries for the client section */
@media (max-width: 1023px) and (min-width: 850px) {

    .clients-bg {
        padding: 0;
        height: auto;
        min-height: 320px;
    }
    
    .clients-visible-content {
        width: 100%;
        max-width: 100vw;
        height: auto;
        min-height: 200px;
    }
    
    .clients-visible-content .logos {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 8px;
        row-gap: 25px;
        width: 100%;
        justify-items: center;
        align-items: center;
    }
    
    .clients-visible-content .logos div {
        width: 105px;
        height: 28px;
    display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .clients-visible-content .logos div:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    
    .clients-visible-content .logos div:nth-child(2) {
        grid-column: 3 / 5;
        grid-row: 1;
    }
    
    .clients-visible-content .logos div:nth-child(3) {
        grid-column: 5 / 7;
        grid-row: 1;
    }
    
    .clients-visible-content .logos div:nth-child(4) {
        grid-column: 2 / 4;
        grid-row: 2;
    }
    
    .clients-visible-content .logos div:nth-child(5) {
        grid-column: 4 / 6;
        grid-row: 2;
    }

}

@media (max-width: 849px) and (min-width: 530px) {

    .clients-bg {
        padding: 0;
        height: auto;
        min-height: 380px;
    }
    
    .clients-visible-content {
        width: 100%;
        max-width: 100vw;
        height: auto;
        min-height: 260px;
    }

    .clients-visible-content h2 {
        font-size: 26px;
    }

    .clients-visible-content p {
        font-size: 18px;
    }
    
    .clients-visible-content .logos {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 8px;
        row-gap: 25px;
        width: 100%;
        justify-items: center;
        align-items: center;
    }
    
    .clients-visible-content .logos div {
        width: 105px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .clients-visible-content .logos div:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    
    .clients-visible-content .logos div:nth-child(2) {
        grid-column: 3 / 5;
        grid-row: 1;
    }
    
    .clients-visible-content .logos div:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    
    .clients-visible-content .logos div:nth-child(4) {
        grid-column: 3 / 5;
        grid-row: 2;
    }
    
    .clients-visible-content .logos div:nth-child(5) {
        grid-column: 2 / 4;
        grid-row: 3;
    }

}

@media (max-width: 529px) and (min-width: 361px) {

    .clients-bg {
        padding: 0;
        height: auto;
        min-height: 450px;
    }
    
    .clients-visible-content {
        width: 100%;
        max-width: 100vw;
        height: auto;
        min-height: 330px;
    }

    .clients-visible-content h2 {
        font-size: 26px;
    }

    .clients-visible-content p {
        width: 90%;
        font-size: 18px;
    }
    
    .clients-visible-content .logos {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        gap: 0;
        row-gap: 25px;
        width: 100%;
        justify-items: center;
        align-items: center;
    }
    
    .clients-visible-content .logos div {
        width: 105px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .clients-visible-content .logos div:nth-child(1) {
        grid-row: 1;
    }
    
    .clients-visible-content .logos div:nth-child(2) {
        grid-row: 2;
    }
    
    .clients-visible-content .logos div:nth-child(3) {
        grid-row: 3;
    }
    
    .clients-visible-content .logos div:nth-child(4) {
        grid-row: 4;
    }
    
    .clients-visible-content .logos div:nth-child(5) {
        grid-row: 5;
    }

}

/* Unified media queries <360px for all sections */
@media (max-width: 360px) {

    .front-page ul {
        font-size: 14px;
    }

    .general-highlight-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 40px;
        border-radius: 4px;
        font-size: 16px;
        padding-bottom: 0
    }

    .hero-section {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 16px 60px 16px;
        overflow: hidden;
        margin-bottom: 0;
        border: 1px solid #F1F5F9;
        
    background-image: 
        linear-gradient(to right, #F1F5F9 2px, transparent 1px),
        linear-gradient(to bottom, #F1F5F9 2px, transparent 1px),
        linear-gradient(to top, #F1F5F9 5%, #FFFFFF);

    background-size: 
        40px 100%,
        100% 40px,
        100% 100%;

    background-position:
        0 0,
        0 0,
        0 0;

    background-repeat:
        repeat, 
        repeat,
        no-repeat;
    }

    .hero-section h1 {
        font-size: 34px;
        line-height: 100%;
        margin-bottom: 20px;
    }

    .hero-section p {
        width: 100%;
        font-size: 14px;
        line-height: 145%;
        margin-bottom: 40px;
        color: #374151;
    }

    .hero-button-section {
        display: flex;
        flex-direction: row;
        gap: 15px;
        margin-bottom: 40px;
        justify-content: center;
        width: 100%;
    align-items: flex-start;
        flex-wrap: wrap;
    }

    .hero-button-section .button-get-started,
    .hero-button-section .button-learn-more {
        font-size: 16px;
        width: 150px;
        height: 40px;
        align-self: center;
        border-radius: 4px;
    }

    .hero-button-section .button-learn-more {
       border: 1px solid #374151; 
    }

    .hero-bullets {
        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hero-bullets li {
        position: relative;
        padding-left: 25px;
        color: #374151;
        margin-right: 15px;
    }

    .hero-bullets li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 45%;
        transform: translateY(-45%);
        width: 15px;
        height: 15px;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%230C65AF' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%230C65AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 15px;
    }

    .highlight-first-bg {
        padding: 40px 16px 50px 16px;
        min-height: auto;
    }
    
    .highlight-first-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-first-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }

    .highlight-first-bg .general-visible-content .left-part h2 {
        font-size: 22px;
    }

    .highlight-first-bg .general-visible-content .left-part ul {
        padding-left: 25px;
        margin-bottom: 25px;
        font-size: 14px;
    }

    .highlight-first-bg .general-visible-content .left-part ul li::before {
        top: 0.2em;
        left: -25px;
        transform: none;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 15px;
    }

    .highlight-first-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .feature-slider {
        width: 100%;
        max-width: calc(100vw - 32px);
        max-height: none;
    }
    
    .slider-visual {
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        aspect-ratio: 500/280;
        margin-top: 25px;
    }

    .slider-gradient {
        border-radius: 4px;
    }
    
    .slider-image-container {
        width: calc((100vw - 32px) * 0.9294);
        height: calc(((100vw - 32px) * 500 / 280) * 0.9037);
        bottom: 0;
        right: 0;
        border-radius: 0 0 4px 0;
        max-width: 92.94%;
        max-height: 90.37%;
    }

    .slider-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom right;
    }

    .slider-controls .slider-arrow {
        width: 30px;
        height: 30px;
        font-size: 12px;
        border-radius: 4px;
    }

    .slider-controls .slider-text {
        font-size: 12px;
        margin-left: 5px;
        margin-right: 0;
    }

    .highlight-second-bg {
        padding: 40px 16px 50px 16px;
        min-height: auto;
    }
    
    .highlight-second-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-second-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-second-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-second-bg .general-visible-content .right-part h2 {
        font-size: 22px;
    }

    .highlight-second-bg .general-visible-content .right-part ul {
        padding-left: 25px;
        margin-bottom: 25px;
        font-size: 14px;
    }

    .highlight-second-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        left: -25px;
        transform: none;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 15px;
    }
    
    .complex-image-h2 {
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient {
        border-radius: 4px;
    }
    
    .background-1 {
        width: calc((100vw - 40px) * 0.7651);
        height: calc(((100vw - 40px) * 335 / 500) * 0.7681);
        max-width: 76.51%;
        max-height: 76.81%;
        border-radius: 0 2px 0 0;
    }
    
    .image-1 {
        width: calc((100vw - 32px) * 0.7492);
        height: calc(((100vw - 32px) * 335 / 500) * 0.7271);
        max-width: 74.92%;
        max-height: 72.71%;
        top: 1.69%;
        right: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .background-2 {
        width: calc((100vw - 32px) * 0.5243);
        height: calc(((100vw - 32px) * 335 / 500) * 0.5290);
        max-width: 52.43%;
        max-height: 52.90%;
        left: 0;
        bottom: 4.83%;
        border-radius: 0 2px 2px 0;
    }
    
    .image-2 {
        width: calc((100vw - 32px) * 0.5000);
        height: calc(((100vw - 32px) * 335 / 500) * 0.4807);
        max-width: 50.00%;
        max-height: 48.07%;
        left: 0.8%;
        bottom: 7.25%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .icon-base {
        width: calc((100vw - 32px) * 0.0939);
        height: calc(((100vw - 32px) * 335 / 500) * 0.1401);
        max-width: 9.39%;
        max-height: 14.01%;
        border-radius: 2px;
    }
    
    .icon-base-1 {
        top: 1.69%;
        left: 12.46%;
    }
    
    .icon-base-2 {
        bottom: 4.83%;
        right: 36.57%;
    }
    
    .icon-base-3 {
        bottom: 4.83%;
        right: 26.21%;
    }
    
    .icon-base-4 {
        bottom: 4.83%;
        right: 15.86%;
    }
    
    .icon-image {
        width: calc((100vw - 40px) * 0.0938);
        height: calc(((100vw - 40px) * 335 / 500) * 0.1264);
        max-width: 9.38%;
        max-height: 12.64%;
    }
    
    .icon-image-1 {
        top: 2.35%;
        left: 12.4%;
    }
    
    .icon-image-2 {
        bottom: 5.55%;
        right: 36.54%;
    }
    
    .icon-image-3 {
        bottom: 5.55%;
        right: 26.2%;
    }
    
    .icon-image-4 {
        bottom: 5.55%;
        right: 15.85%;
    }

    .highlight-third-bg {
        padding: 40px 16px 50px 16px;
        min-height: auto;
    }
    
    .highlight-third-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-third-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }

    .highlight-third-bg .general-visible-content .left-part h2 {
        font-size: 22px;
    }

    .highlight-third-bg .general-visible-content .left-part ul {
        padding-left: 25px;
        font-size: 14px;
    }

    .highlight-third-bg .general-visible-content .left-part ul li::before {
        top: 0.2em;
        left: -25px;
        transform: none;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 15px;
    }

    .gis-badges-container {
        display: flex;
        flex-direction: row;
        width: auto;
        height: auto;
        margin-bottom: 40px;
        margin-top: -20px;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 5px 0;
        overflow: visible;
    }

    .gis-badge {
        display: flex;
        align-items: center;
        border: 1px solid #374151;
        border-radius: 50px;
        padding: 6px 15px 5px 15px;
        font-size: 16px;
        font-weight: 500;
        color: #374151;
        white-space: nowrap;
    }

    .gis-badge:not(:last-child) {
        margin-right: 10px;
    }

    .gis-badge img {
        margin-right: 8px;
    }

    .gis-badge:nth-child(3) img {
        margin-right: 7px;
    }
    
    .highlight-third-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .highlight-third-bg .general-visible-content .right-part .complex-image-h3 {
        margin-bottom: 25px;
    }

    .complex-image-h3 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .complex-image-h3 .image-osm,
    .complex-image-h3 .image-dem,
    .complex-image-h3 .image-msbld {
        width: calc((100% - 10px) / 3);
        height: 100%;
        overflow: hidden;
        border-radius: inherit;
    }

    .highlight-fourth-bg {
        padding: 0;
        min-height: auto;
    }
    
    .highlight-fourth-bg .general-visible-content {
        width: 100%;
        max-width: none;
        height: auto;
        position: relative;
    }
    
    .fourth-content-wrapper {
        position: relative;
        width: 100%;
        height: auto;
        padding: 50px 0;
        box-sizing: border-box;
        min-height: 400px;
    }
    
    .fourth-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 0;
    }
    
    .fourth-content-overlay {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: calc(100vw - 32px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 8px;
        padding-right: 16px;
        box-sizing: border-box;
        z-index: 1;
    }
    
    .highlight-fourth-bg .general-visible-content h2 {
        color: #FFFFFF;
        line-height: 108%;
        letter-spacing: -3%;
        margin-bottom: 8px;
        margin-top: 0;
        font-size: 22px;
    }
    
    .highlight-fourth-bg .general-visible-content ul {
        padding-left: 25px;
        font-size: 14px;
        margin-bottom: 25px;
    }

    .highlight-fourth-bg .general-visible-content ul li::before {
        top: 0.2em;
        left: -25px;
        transform: none;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 15px;
    }

    .fourth-mobile-screen {
        display: block;
        width: 100%;
        padding: 40px 16px;
        box-sizing: border-box;
    }
    
    .fourth-mobile-screen-image {
        width: 100%;
        max-width: 809px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .highlight-fifth-bg {
        padding: 40px 16px 50px 16px;
        min-height: auto;
    }
    
    .highlight-fifth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-fifth-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-fifth-bg .general-visible-content .right-part h2 {
        font-size: 22px;
    }

    .highlight-fifth-bg .general-visible-content .right-part ul {
        padding-left: 25px;
        font-size: 14px;
        margin-bottom: 25px;
    }

    .highlight-fifth-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        left: -25px;
        transform: none;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 15px;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        margin: 30px 0 40px 0;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .complex-image-h5 {
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        aspect-ratio: 500/280;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-web {
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        aspect-ratio: 500/280;
    }
    
    .highlight-fifth-bg .general-visible-content .left-part .h5-tracker-mobile {
        width: calc((100vw - 32px) * 0.2342);
        height: calc(((100vw - 32px) * 280 / 500) * 0.8439);
        max-width: 23.42%;
        max-height: 84.39%;
        top: 27.46%;
        right: 6.15%;
    }

    .highlight-sixth-bg {
        padding: 40px 16px 50px 16px;
        min-height: auto;
    }
    
    .highlight-sixth-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-sixth-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
    }

    .highlight-sixth-bg .general-visible-content .left-part h2 {
        font-size: 22px;
    }

    .highlight-sixth-bg .general-visible-content .left-part ul {
        padding-left: 25px;
        margin-bottom: 25px;
        font-size: 14px;
    }

    .highlight-sixth-bg .general-visible-content .left-part ul li::before {
        top: 0.2em;
        left: -25px;
        transform: none;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 15px;
    }
    
    .highlight-sixth-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .complex-image-h6 {
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient-h6 {
        border-radius: 4px;
    }
    
    .image-1-h6 {
        position: absolute;
        width: calc((100vw - 32px) * 0.9142);
        height: calc(((100vw - 32px) * 335 / 500) * 0.7681);
        max-width: 91.42%;
        max-height: 76.81%;
        top: 6.04%;
        left: 3.07%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h6 {
        position: absolute;
        width: calc((100vw - 32px) * 0.5518);
        height: calc(((100vw - 32px) * 335 / 500) * 0.6836);
        max-width: 55.18%;
        max-height: 68.36%;
        left: 16.02%;
        bottom: 8.21%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h6 {
        position: absolute;
        width: calc((100vw - 32px) * 0.4223);
        height: calc(((100vw - 32px) * 335 / 500) * 0.2053);
        max-width: 42.23%;
        max-height: 20.53%;
        top: 13.53%;
        right: 2.5%;
        border-radius: 0;
        overflow: hidden;
    }

    .highlight-seventh-bg {
        padding: 40px 16px 50px 16px;
        min-height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        gap: 25px;
    }
    
    .highlight-seventh-bg .general-visible-content .left-part {
        order: 2;
        width: 100%;
        height: auto;
    }
    
    .highlight-seventh-bg .general-visible-content .right-part {
        order: 1;
        width: 100%;
        height: auto;
    }

    .highlight-seventh-bg .general-visible-content .right-part h2 {
        font-size: 22px;
    }

    .highlight-seventh-bg .general-visible-content .right-part ul {
        padding-left: 25px;
        margin-bottom: 25px;
        font-size: 14px;
    }

    .highlight-seventh-bg .general-visible-content .right-part ul li::before {
        top: 0.2em;
        left: -25px;
        transform: none;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%2347CE79' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%2347CE79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 15px;
    }
    
    .complex-image-h7 {
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        aspect-ratio: 500/335;
        margin-top: 25px;
    }
    
    .base-gradient-h7 {
        border-radius: 4px;
    }
    
    .background-h7 {
        position: absolute;
        width: calc((100vw - 32px) * 0.9256);
        height: calc(((100vw - 32px) * 335 / 500) * 0.8841);
        max-width: 92.56%;
        max-height: 88.41%;
        top: 6.76%;
        left: 0;
        border-radius: 0 2px 2px 0;
    }
    
    .image-1-h7 {
        position: absolute;
        width: calc((100vw - 32px) * 0.9094);
        height: calc(((100vw - 32px) * 335 / 500) * 0.8357);
        max-width: 90.94%;
        max-height: 83.57%;
        top: 9.18%;
        left: 0;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-2-h7 {
        position: absolute;
        width: calc((100vw - 32px) * 0.4676);
        height: calc(((100vw - 32px) * 335 / 500) * 0.5507);
        max-width: 46.76%;
        max-height: 55.07%;
        right: 0;
        bottom: 21.50%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .image-3-h7 {
        position: absolute;
        width: calc((100vw - 32px) * 0.2314);
        height: calc(((100vw - 32px) * 335 / 500) * 0.5507);
        max-width: 23.14%;
        max-height: 55.07%;
        left: 26.86%;
        bottom: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .clients-bg {
        padding: 0;
        height: auto;
        min-height: 400px;
    }
    
    .clients-visible-content {
        width: 100%;
        max-width: 100vw;
        height: auto;
        min-height: 330px;
    }

    .clients-visible-content h2 {
        font-size: 22px;
    }

    .clients-visible-content p {
        width: 90%;
        font-size: 14px;
    }
    
    .clients-visible-content .logos {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        gap: 0;
        row-gap: 25px;
        width: 100%;
        justify-items: center;
        align-items: center;
    }
    
    .clients-visible-content .logos div {
        width: 95px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .clients-visible-content .logos div:nth-child(1) {
        grid-row: 1;
    }
    
    .clients-visible-content .logos div:nth-child(2) {
        grid-row: 2;
    }
    
    .clients-visible-content .logos div:nth-child(3) {
        grid-row: 3;
    }
    
    .clients-visible-content .logos div:nth-child(4) {
        grid-row: 4;
    }
    
    .clients-visible-content .logos div:nth-child(5) {
        grid-row: 5;
    }

    .form-bg {
        padding: 50px 0 70px 0;
        height: auto;
        min-height: auto;
    }
    
    .form-bg .general-visible-content {
        flex-direction: column;
        width: 100%;
        max-width: 1119px;
        height: auto;
        gap: 30px;
        margin: 0 16px;
        box-sizing: border-box;
    }
    
    .form-bg .general-visible-content .left-part {
        width: 100%;
        height: auto;
        margin-bottom: -20px;
        overflow: visible;
    }

    .form-bg .general-visible-content .left-part h2 {
        font-size: 22px;
    }

    .form-bg .general-visible-content .left-part p {
        font-size: 14px;
    }

    .form-bg .general-visible-content .left-part .form-bullets {
        color: #FFFFFF;
        padding-left: 25px;
        list-style: none;
        margin: 0;
        height: auto;
        margin-bottom: 40px;
    }

    .form-bg .general-visible-content .left-part .form-bullets li::before {
        left: -25px;
        top: 2px;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%237CC2FF' stroke-width='2' fill='transparent'/%3E%3Cpath d='M6 10L9 13L14 7' stroke='%237CC2FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 15px;
    }

    .form-bg .general-visible-content .left-part .bullet-main {
        font-size: 14px;
    }

    .form-bg .general-visible-content .left-part .bullet-sub {
        font-size: 12px;
    }
    
    .form-bg .general-visible-content .right-part {
        width: 100%;
        height: auto;
    }
    
    .form-bg .general-visible-content .right-part .form-container {
        width: 100%;
        height: auto;
        border-radius: 4px;
    }
    
    .form-bg .general-visible-content .right-part .form-container h3 {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .form-bg .general-visible-content .right-part .contact-form {
        padding: 0 20px 20px 20px;
    }
    
    .form-bg .general-visible-content .right-part .form-fields {
        width: 100%;
    }
    
    .form-bg .general-visible-content .right-part .form-field input,
    .form-bg .general-visible-content .right-part .form-field textarea {
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .form-bg .general-visible-content .right-part .form-field label {
        font-size: 14px;
    }

    .form-bg .general-visible-content .right-part .checkbox-field input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }

    .form-bg .general-visible-content .right-part .checkbox-field label {
        font-size: 12px;
    }
    
    .form-bg .general-visible-content .right-part .submit-button {
        width: 100%;
        height: 45px;
        font-size: 16px;
        border-radius: 4px;
    }
    
    .form-bg .general-visible-content .right-part .checkbox-field {
        width: 100%;
    }

    .front-page-footer {
        height: auto;
        min-height: 408px;
        padding: 50px 0;
    }

    .footer-content {
        width: calc(100% - 32px);
        height: auto;
        max-width: 1280px;
        margin: 0 16px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .footer-group-brand {
        position: static;
        width: 100%;
        align-items: flex-start;
    }

    .footer-logo {
        width: 100%;
        max-width: 258px;
    }

    .footer-logo img {
        width: 100%;
        max-width: 258px;
        height: auto;
    }

    .footer-description {
        margin-top: 15px;
        font-size: 14px;
        max-width: 100%;
        width: 100%;
    }

    .footer-social {
        margin-top: 30px;
        width: 100%;
        max-width: 222px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        row-gap: 5px;
    }

    .social-link {
        flex: 0 0 auto;
    }

    .footer-group-menu {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .footer-column {
        width: 100%;
        max-width: 200px;
        text-align: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .footer-column-title {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .footer-menu {
        align-items: center;
        gap: 8px;
    }

    .footer-menu-link {
        font-size: 14px;
    }

    .footer-group-links {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    .footer-service-link {
        font-size: 14px;
        text-align: center;
    }

    .footer-group-copyright {
        position: static;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-copyright {
        font-size: 14px;
        text-align: center;
    }

}

@media (max-width: 320px) {
    .form-bg .general-visible-content .left-part {
        margin-bottom: -5px;
    }
}

.anchor-offset {
    scroll-margin-top: 80px;
}
@media (max-width: 767px) {
    .anchor-offset {
        scroll-margin-top: 64px;
    }
}

/* Form Notification */
.form-message {
    padding: 15px 20px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
    animation: slideIn 0.3s ease-in-out;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button style during sending */
.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}