@font-face {
    font-family: 'CenturyGothic';
    src: url('../fonts/century-gothic-regular.ttf');
    
    font-weight: 400;
    font-style: normal;
  }


  @font-face {
    font-family: 'DMSans-Regular';
    src: url('../fonts/centurygothic.ttf');
    src: url('../fonts/DMSans-Regular.ttf');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'Butler-Medium';
    src: url('../fonts/Butler-Medium.woff');
    
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'Butler-Light';
    src: url(../fonts/Butler-Light.woff);
  }

  @font-face {
    font-family: 'Geometria-Light';
    src: url(../fonts/Geometria-Light.ttf);
  }

  body {
    padding-top: 10px;
    margin: 0; /* Remove default margins */
    height: 100%; /* Full height */
    background-color: #FFFEFD;
  }


/* коричнева кнопка  */

.round-button {
    background-color: #A3836E; /* Колір кнопки */
    color: white; /* Колір стрілочки */
    border: none; /* Без рамки */
    border-radius: 50%; /* Робить кнопку круглою */
    width: 60px; /* Ширина кнопки */
    height: 60px; /* Висота кнопки */
    display: flex; /* Центрування стрілочки */
    align-items: center; /* Вертикальне вирівнювання */
    justify-content: center; /* Горизонтальне вирівнювання */
    font-size: 29px; /* Розмір стрілочки */
    cursor: pointer; /* Курсор у вигляді руки при наведенні */
    transition: background-color 0.3s ease; /* Плавна зміна кольору при наведенні */
}

.round-button:hover {
    background-color: #775f4e; /* Зміна кольору при наведенні */
    cursor: url('../images/cursor_green.png'), auto;

}

nav {
    position: fixed; /* Фіксуємо навбар */
    top: 0; /* Закріплюємо зверху */
    left: 0; /* Вирівнюємо по лівому краю */
    right: 0; /* Вирівнюємо по правому краю */
    background-color: #ffffff; /* Колір фону (можна змінити) */
    z-index: 1000; /* Задаємо z-index, щоб перекрити інші елементи */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Легка тінь для покращення видимості */
}


#logo-container {
    /* margin-left: 0; */
    padding: 20px;
    height: 50px;
}


#logo-container img{
    margin-top: -22px;
    height: 55px;
}

#round-button-nav {
    /* margin-right: 0; */
    padding: 20px;
   
}

#container {
    display: flex;
    justify-content: space-between; /* Distribute space between items */
    align-items: center; /* Center vertically */
    position: relative; /* To position the round button */
}

#nav-container{
font-family:'DMSans-Regular', sans-serif;

font-weight: normal; 
    line-height: 1;
    letter-spacing: 2px;

}

#nav-container .nav li a {
    color: #A6A5A7;
    font-size: 18px;
    transition: color 0.3s ease; /* Плавна зміна кольору */
cursor: pointer;
}

#nav-container .nav li a:hover {
    color: #ffffff; /* Колір тексту при наведенні */
    background-color: rgba(166, 165, 167, 0.2); /* Легкий фон для підсвічування */
    border-radius: 5px; /* Закруглення країв фону (за бажанням) */
    cursor: url('../images/cursor_green.png'), auto;
}

#nav-container .nav {
    list-style: none; /* Вимикаємо стандартні маркери списку */
    justify-content: space-around; /* Distribute space among the items */
    flex: 1; /* Allow it to grow to fill space */
    display: flex; /* Використовуємо flexbox для горизонтального розташування */
    
}

#nav-container .nav li {
    display: flex; /* Додаємо flex для вирівнювання елементів */
    align-items: center; /* Вирівнюємо по центру вертикально */
    position: relative; /* Позиція для псевдоелемента */
    padding: 0 10px; /* Внутрішні відступи */
}

#nav-container .nav li:not(:last-child)::after {
    content: "|"; /* Роздільник */
    position: absolute; /* Абсолютне позиціонування */
    height: 30px;
    right: 0; /* Вирівнювання по правому краю */
    top: 27px; /* Вирівнювання по верхньому краю */
    color: #5E5E5E; /* Колір роздільника */
    margin-left: 10px; /* Відступ між текстом і роздільником */
}

#image-container {
    display: flex; /* Enable flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: flex-start; /* Align items to the top */
    height: calc(100vh - 70px); /* Full viewport height minus navbar height */
    padding-top: 70px; /* Space for the navbar */
    overflow: hidden; /* Prevent overflow */
}

#body-first-pic {
    max-width: 100%; /* Ensure it doesn’t exceed the width of the container */
    max-height: 100%; /* Ensure it doesn’t exceed the height of the container */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the entire image is visible */
    display: block; /* Prevent extra space below the image */
}


/* ABout us */
#container-about-us{
    display: flex; /* Enable flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: flex-start; /* Align items to the top */

}


.line {
    width: 70%; /* Ширина лінії 70% */
    height: 2px; /* Товщина лінії */
    background-color: #000; /* Колір лінії */
    margin: 20px auto; /* Центрування лінії */
}

#we_are_multi img {
    width: 70%; /* Makes the image 60% smaller */
    height: auto; /* Maintains aspect ratio */
    max-width: 100%; /* Prevents overflow */
    padding-left: 20px;
    padding-top: 20px;

}
#container-about-us {
    display: flex; /* Включаємо Flexbox */
    width: 100%; /* Ширина контейнера 100% */
    padding: 30px 15px;
}

#element1-about-us {
    flex: 2; /* 2/6 */
    min-width: 100px; /* Мінімальна ширина */
}

#element2-about-us {
    flex: 3; /* 3/6 */
    min-width: 400px; /* Мінімальна ширина */
    padding: 0px 25px;
    display: flex; /* Включаємо Flexbox */
    flex-direction: column; /* Ставимо елементи в стовпчик */
}

.element3-about-us {
   flex: 1; /* 1/6 */
    max-width: 60px; /* Мінімальна ширина */

}

.element3-about-us img {
    width: 100%; /* Зображення буде адаптуватися до ширини батьківського елемента */
    height: 400px; /* Пропорційне збереження висоти */
        height: auto; 
}



#element2-about-us p {
    color: #444444;
    font-family: 'CenturyGothic', sans-serif;
    text-align: justify;
    font-weight: normal; 
    font-size: 22px;
    margin-bottom: 10px; /* Відстань між текстом та кнопкою */
}

.button-container {
    display: flex; /* Включаємо Flexbox для контейнера кнопки */
    justify-content: flex-end; /* Вирівнює кнопку вправо */
    width: 100%; /* Ширина контейнера кнопки 100% */
}

.custom-button {
    background-color: #C9DB47; /* Встановлюємо колір кнопки */
    color: #444444; /* Колір тексту */
    border: none; /* Прибираємо обводку */
    padding: 10px 20px; /* Внутрішні поля кнопки */
    font-size: 16px; /* Розмір шрифту */
    cursor: pointer; /* Показує, що кнопка клікабельна */
    border-radius: 30px; /* Закруглення кутів */
    transition: background-color 0.3s; /* Плавний перехід кольору фону */
    font-family: 'Butler-Medium', sans-serif;
    font-weight: normal; 
    font-size: 18px;
    margin-top: 10px; /* Відстань зверху для кнопки */
    cursor: pointer;
}

.custom-button:hover {
    background-color: #B0C83A; /* Колір кнопки при наведенні */

    cursor: url('../images/cursor_green.png'), auto;
}



/* Main privilege clients */
.container_privilage_clients {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; /* Center items */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent scrollbars */
    max-height: 840px;
}

/* Style each image wrapper */
.image-wrapper {
    flex: 1; /* Take up equal space in the flex container */
    width: 100%; /* Full width of the container */
    position: relative; /* Positioning context for child elements */
    overflow: hidden; /* Hide overflowing parts of the image */
    padding-left: 8%;
    padding-right: 8%;
    height: 200px;
}

/* Style the privilege image to have a specific height */
.privilege-image {
    height: 80%; /* Set height to 80% of its container */
    transform: translateY(-4%); /* Shift the image up by 10% to hide the top */
}

/* Style the clients image to have the same height */
.clients-image {
    height: 80%; /* Set height to 80% of its container */
    transform: translateY(4%); /* Shift the image down by 10% to hide the bottom */
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 20px;
}

/* Style the images to ensure they fit nicely */
.responsive-image {
    width: 100%; /* Ensure the image takes full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the images cover their container */
}

.scroll-container {
    width: 550px;
    position: relative;
    height: 250px; /* Збільшуємо висоту контейнера, щоб бачити більше 5 елементів */
    overflow: hidden; /* Приховуємо все, що виходить за межі */
    cursor: pointer; /* Змінюємо курсор на вказівник */
    margin-top: 20px; /* Відступ зверху */
    padding: 20px;

}

.scroll-list {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease; /* Додаємо плавність до прокрутки */
    display: flex; /* Відображаємо елементи в рядок */
    flex-direction: column; /* Вирівнюємо елементи по вертикалі */

}

.scroll-item {
    font-family: 'Butler-Medium';
    font-size: 24px;
    height: 50px; /* Висота кожного елемента */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease; /* Анімація для збільшення */
    cursor: pointer;
}

.scroll-item:hover{
    cursor: url('../images/cursor_green.png'), auto;
}
.scroll-item.active {
    transform: scale(1.5); /* Збільшення активного елемента */
    z-index: 1; /* Піднімає елемент на передній план */
}



/* .green-dot {
    width: 18px; /* Ширина точки */
    /* height: 18px; /* Висота точки */
    /* background-color: #C9DB47; 
    border-radius: 60%; 
    margin-left: 30px;
    color: #000; 
}  */

.privilage_clients_central{
    display: flex; /* Включаємо Flexbox для контейнера */
    align-items: center; /* Центруємо вертикально */
    padding-bottom: 120px;
}

/* Загальний контейнер */
.trusted_companies_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центруємо по вертикалі */
    align-items: center; /* Центруємо по горизонталі */
    height: 100vh; /* Контейнер займатиме всю висоту екрану */
    text-align: center; /* Текст центрується */
    padding: 20px;
    box-sizing: border-box; /* Враховуємо padding у розрахунках ширини/висоти */
}

/* Стилізація для тексту */
.trusted_companies {
    font-size: 25px; /* Розмір шрифту для заголовка */
    font-family:'CenturyGothic';
    margin-bottom: 20px; /* Відступ від тексту до картинки */
    color: #282828;
}



/* Контейнер для картинки */
.trusted_companies_pic img {
    max-width: 95%; /* Зображення адаптується до ширини контейнера, не більше 80% */
    height: auto; /* Збереження співвідношення сторін */
}

/* Для адаптивності */
@media screen and (max-width: 768px) {
    .trusted_companies {
        font-size: 1.5em; /* Зменшуємо текст на менших екранах */
    }

    .trusted_companies_pic img {
        max-width: 100%; /* Зображення займатиме всю ширину контейнера */
    }
}



/* Основний контейнер */
.we_help_wrapper {
    display: flex;
    justify-content: space-between; /* Простір між текстом і зображенням */
    align-items: center; /* Вирівнюємо елементи по вертикалі */
    padding: 40px; /* Відступи навколо блоку */
    box-sizing: border-box;
    height: 100vh; /* Займаємо всю висоту екрану */
background-color: #E3DEDB;
}

/* Контейнер для лівої частини (текст і заголовок) */
.we_help_content {
    flex: 1; /* Ліва частина займатиме більше простору */
    max-width: 50%; /* Ліва частина займатиме не більше половини */
}

.we_help_left_part img {
    max-width: 100%; /* Зображення займає всю доступну ширину контейнера */
    height: 200px; /* Зберігаємо пропорції зображення */
margin-left: -10px;
}

.we_help_text {
    margin-top: 20px; /* Відступ між заголовком і текстом */
  
    line-height: 1.6; /* Поліпшення читабельності */
    font-size: 20px; /* Розмір шрифту для заголовка */
    font-family:'CenturyGothic';
    max-width: 500px;
    text-align: justify;
}


/* Контейнер для кнопки */
.we-help-button-wrapper {
    position: relative; /* Позиціонування відносно цього контейнера */
    display: inline-block;
    width: 100%; /* Ширина контейнера, за потреби */
    height: 100px; /* Фіксована висота контейнера для прикладу */
}

/* Кнопка з абсолютним позиціонуванням */
.we-help-button {
    position: absolute;
    bottom: 0; /* Кнопка внизу контейнера */
    right: 0; /* Кнопка в правому куті */
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.we-help-button:hover{
    cursor: url('../images/cursor_green.png'), auto;
}

.we-help-button img{
    height: 80px;
    display: block;
    
}
/* Картинка всередині кнопки */




/* Контейнер для зображення */
.we_help_pic {
    flex: 1; /* Займає решту доступного простору */
    max-width: 45%; /* Обмеження ширини зображення */
    display: flex;
    justify-content: center;
   
}

.we_help_pic img {
    max-width: 100%; /* Зображення адаптується до контейнера */
    height: auto; /* Зберігаємо пропорції */
}

/* Адаптивність для мобільних пристроїв */
@media screen and (max-width: 768px) {
    .we_help_wrapper {
        flex-direction: column; /* Перемикаємо на вертикальне вирівнювання для мобільних */
        height: auto; /* Висота автоматично підлаштовується */
        padding: 20px;
    }

    .we_help_content, .we_help_pic {
        max-width: 100%; /* Елементи займають всю ширину на мобільних */
    }

    .we_help_text {
        font-size: 1em; /* Зменшуємо текст для мобільних */
        text-align: center; /* Текст по центру */
        margin-top: 15px;
    }

    .we_help_pic img {
        max-width: 80%; /* Зображення менше на мобільних */
    }
}


.capabilities-header{
    padding:150px 30px;
}
.capabilities-header img{
height: 160px;

}
.capabilities-text {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Чотири рівних стовпці */
    gap: 2%; /* Відступ між блоками */
    color: #282828;
    padding: 30px;
}

.capabilities-text-block {

    padding: 10px; /* Внутрішні відступи */
    border-radius: 8px; /* Згладжені кути */
    box-sizing: border-box; /* Враховує відступи всередині блоку */
}

.capabilities-text-header {
    font-family: 'Butler-Light';
   
    font-size: 48px;
    margin-bottom: 10px;
    line-height: 1.1;
}

.capabilities-text-main {
    font-family: 'Geometria-Light';
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1;
    
}

.capabilities-text-list {
    font-family: 'Geometria-Light';
    font-size: 18px;
    line-height: 2;
}


/* case_review */

.case-studies{
padding: 30px 0px;
}
.case-studies-text img{
    height: 140px;
}

.case-studies-pic-wrapper {
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    overflow: hidden; /* Prevent overflow of the image */
}

.case-studies-pic {
    
    width: 100%; /* Ensure the image does not exceed the viewport width */
   height: 100%; /* Ensure the image does not exceed the viewport height */
    object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
}


/* Container for reviews */
.review-wrapper{
    background-color: #E3DEDB;
    padding: -30px;
}

.HEAR-WHAT-text {
    display: flex;               /* Enable flexbox */
    justify-content: center;      /* Center horizontally */
    align-items: center;          /* Center vertically */
                
}

.HEAR-WHAT-text img {
    max-width: 100%;              /* Ensure image doesn't overflow */
    height: 300px;     
    padding-top: 70px;           /* Maintain aspect ratio */
}

.review-text {
    padding: 100px;
    display: flex;
    flex-wrap: wrap; /* Allows the blocks to wrap into rows */
    gap: 3%; /* Adds space between the blocks */
    color: #282828;
    font-family: 'CenturyGothic';
}

/* Review block styles */
.review-text-block {
    background-color: #D1CAC6; /* Light grey background */
    border-radius: 25px; /* Rounded corners */
    padding: 20px;
    flex: 1 1 calc(20% - 20px); /* Each block takes 25% width with spacing */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
    box-sizing: border-box;
}

/* Review images */
.review-pic img {
    
    height: 70px;
  
}

/* Review header styles */
.review-text-header {
    font-size: 22px;
    font-weight: bold;
    margin-top: 15px;
}

/* Review main text */
.review-text-main {
    font-size: 18px;
    margin-top: 10px;
    line-height: 1.5;
}

/* Reviewer info */
.review-text-list {
    margin-top: 15px;
    /* font-style: italic; */
    font-size: 18px;
}



/* contact */


/* Контейнер для всього блоку */
.lets-devise-wrapper {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items:end; /* Center the items horizontally */
    width: 100%; /* Set full width for the container */
    margin: 0 auto; /* Center the whole block */
    padding: 100px;
}

/* Стиль для зображення "let's devise" */
.lets-devise img {
    height: 200px;
    display: block; /* Block to ensure it's treated as a single element */
    margin: 0 auto; /* Center the image */
}

/* Лінія під зображенням */
.line-contact {
    width: 100%;
    height: 4px;
    background-color: #000;
    margin: 20px auto; /* Center the line horizontally */
}

/* Контейнер для тексту та кнопки */
.contact-button-wrapper {
    display: flex; /* Display items in a horizontal row */
    align-items:flex-start; /* Vertically center the items */
    justify-content: space-between; /* Ensure spacing between text and button */
    width: 100%; /* Full width for the contact section */
    max-width: 500px; /* Optional: Limit the max width for better layout */
    margin-top: 20px; /* Space above the contact section */
    transform: translateX(-75%); /* Зміщення вліво на 30% */
    
}

/* Стиль для тексту */
.contact-text {
    font-size: 24px;
    
    font-family: 'Geometria-Light';
}

/* Кнопка без фону зі зображенням */
.contact-button {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.contact-button:hover{
    cursor: url('../images/cursor_green.png'), auto;
}
.contact-button img{
    height: 80px; /* Set the height for the image */
    display: block;
}

#LINK-DIGITAL-AGENCY-footer {
    display: flex;              /* Використовуємо flexbox для вирівнювання */
    justify-content:left;    /* Центруємо логотип по горизонталі */
    align-items: flex-end;      /* Розміщуємо логотип внизу сторінки */
    width: 100%;                /* Ширина контейнера на весь екран */
    padding: 20px 60px;            /* Додаємо відступи для гарного вигляду */
}

#LINK-DIGITAL-AGENCY {
    max-width: 1000px;           /* Обмежуємо ширину логотипу */
    height: auto;               /* Автоматично змінюємо висоту пропорційно ширині */
}

.link-footer {
    display: flex;
    justify-content: space-between; /* Лівий і правий блоки по боках */
    align-items: center;
    padding:15px 60px;
    background-color: #f8f8f8;
    font-size: 14px;
    color:#A6A5A7;
    width: 100%;
    box-sizing: border-box;
}

.link-footer-left {
    flex: 1; /* Лівий блок буде займати місце зліва */
    text-align: left; /* Вирівнювання тексту по лівому краю */
}

.link-footer-right {
    display: flex;
    justify-content: center; /* Вирівнювання по центру для правого блоку */
    align-items: center;
    gap: 20px;           /* Відстань між елементами */
}

.center-footer-content {
    display: flex;
    justify-content:baseline; /* Центрування в середині батьківського контейнера */
    align-items: center;
    gap: 20px;           /* Відстань між елементами */
    text-align: center;
    flex: 1; /* Вирівнювання по центру */
    margin-left: -12%;
}

/* Вертикальні лінії між елементами */
.center-footer-content div {
    position: relative; 
    padding: 0 5px;      /* Відступи для відстані навколо тексту */
}

.center-footer-content div:not(:last-child)::after {
    content: '|';         /* Символ вертикальної лінії */
    position: absolute;
    right: -10px;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #A6A5A7;          /* Колір лінії */
}

/* Стилізація посилань */
.center-footer-content a {
    text-decoration: none;
    color: #A6A5A7;
}

.center-footer-content a:hover {
    text-decoration: underline;
    
}




.contact-form {
    max-width: 700px;
    margin: 0;
    padding: 30px;
}


.contact-form h2 {
    margin-bottom: 20px;
    font-family: 'CenturyGothic';
    font-size: 24px;
}

.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 10px;
    background-color: rgba(221,217,206,0.26);
    height: 45px;
}


.contactFormAndText{

    display: flex;
    justify-content:space-between;
    align-items: flex-start;

}

#contactForm {
    display: block;
    align-items: flex-start;
    gap: 15px;
    flex: 1;
    font-family: 'DMSans-Regular';
}

#contactForm input,
#contactForm textarea {
    flex: 1;
    background-color:rgba(221,217,206,0.26);
}

#contactForm button {
    flex-shrink: 0;
    padding: 10px 20px;
    background-color: rgba(176,143,121,0.92);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    width: 200px;
   
}

#contactForm button:hover {
    background-color: #B08F79;
    cursor: url('../images/cursor_green.png'), auto;
}

.form-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.based-in {
   
    padding-top: 50px;
   

}

.based-in p:first-child{
    font-family: 'CenturyGothic';
    font-size: 22px;
    color: #444444;

}

.based-in p:last-child(){
    font-family: 'Geometria-Light';
    font-size: 32px;
    color: #A6A5A7;
}

.based_social{
    display: flex;
    justify-content:baseline;
    align-items:normal;
    margin-left: -30%;
gap:200px;


}
.social_media {
    text-align: center; /* Центрує весь блок соціальних медіа */

    padding-top: 50px;
    
}

.social_media_text {
    font-size: 20px;
    font-family: 'CenturyGothic';
    color: #282828;
    margin-bottom: 10px;
}

.social_media_links {
    display: flex;
    justify-content: center; /* Вирівнює іконки по центру */
    gap: 10px; /* Відступ між іконками */
}

.social_media_links a img {
    width: 30px; /* Зменшений розмір іконок */
    height: 30px; /* Висота іконок */
    transition: transform 0.3s ease; /* Анімація при наведенні */
}

.social_media_links a img:hover {
    transform: scale(1.1); /* Збільшує іконку при наведенні */
}



/* page additional css */

.page_general{
    padding: 60px;
}

#container-page-nav{
    display: flex;
    justify-content: space-between; /* Distribute space between items */
    align-items: center; /* Center vertically */
    position: relative; /* To position the round button */
    height: 100px;
}