:root {
    --primary-color: #3C4BE8;
    --primary-hover: #3c4ae89e;
    --text-color: #545454;
    --placeholder-color: #9C9FBE;
    --background-light: #F0F0F7;
    --white: #FFF;
    --black: #000;
    --border-light: #ccc;
    --border-mobile: rgba(0, 0, 0, 0.10);
    --h1: #01112A;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('fonts/HelveticaNeueCyr-Light.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
  /* Відключення фону автозаповнення */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--White) inset !important;
  -webkit-text-fill-color: var(--Black) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  border-left: none;
  border-right: none;
  border-top: none;
  transition: background-color 3000s ease-in-out 0s;
  font-size: 16px;
  font-family: 'Poppins';
}

.form-group input:autofill {
  background-color: var(--White) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  border-left: none;
  border-right: none;
  border-top: none;
  font-size: 16px;
  font-family: 'Poppins';
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

a {
    text-decoration: none;
}
/* Pagination Styles for .pagination-ipo */
.pagination-ipo {
    clear: both;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
    padding: 10px 0;
}

/* Якщо paginate_links генерує ul > li (з 'type' => 'list') */
.pagination-ipo ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.pagination-ipo li {
    display: inline; /* Або inline-block, якщо потрібні відступи між li */
}

.pagination-ipo .page-numbers {
    display: inline-flex; /* Використовуємо flex для легкого центрування вмісту */
    align-items: center;
    justify-content: center;
    width: 40px;  /* Фіксована ширина */
    height: 40px; /* Фіксована висота (рівна ширині для кола) */
    margin: 0 5px; /* Відступи між кнопками */
    color: #3C4BE8; /* Ваш основний колір для тексту/іконок */
    background-color: #fff; /* Білий фон */
    border: 1px solid #3C4BE8; /* Рамка вашим основним кольором */
    border-radius: 50%; /* Робить елемент круглим */
    text-decoration: none;
    font-size: 14px; /* Розмір цифр */
    line-height: 1; /* Скидаємо line-height, бо flex центрує */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    box-sizing: border-box; /* Щоб padding/border не збільшували розмір */
}

.pagination-ipo .page-numbers:hover,
.pagination-ipo .page-numbers:focus {
    background-color: #e0e3ff; /* Світліший відтінок вашого кольору для ховеру */
    color: #2d38c7; /* Темніший відтінок для тексту при ховері */
    border-color: #2d38c7;
}

.pagination-ipo .page-numbers.current {
    background-color: #3C4BE8; /* Ваш основний колір для поточної сторінки */
    color: #fff; /* Білий текст */
    border-color: #3C4BE8;
    font-weight: bold;
    cursor: default;
}

.pagination-ipo .page-numbers.current:hover,
.pagination-ipo .page-numbers.current:focus {
    background-color: #3C4BE8;
    color: #fff;
    border-color: #3C4BE8;
}

.pagination-ipo .page-numbers.dots {
    border: none;
    background-color: transparent;
    color: #555; /* Колір для трьох крапок */
    width: auto; /* Автоматична ширина для трьох крапок */
    cursor: default;
}

/* Стилі спеціально для кнопок "назад" (prev) та "вперед" (next) */
.pagination-ipo .prev,
.pagination-ipo .next {
    background-color: #3C4BE8; /* Ваш основний колір фону */
    color: #fff; /* Білі стрілки */
    border-color: #3C4BE8;
    font-size: 18px; /* Можна зробити стрілки трохи більшими */
    font-weight: bold;
}

.pagination-ipo .prev:hover,
.pagination-ipo .next:hover,
.pagination-ipo .prev:focus,
.pagination-ipo .next:focus {
    background-color: #2d38c7; /* Темніший відтінок вашого кольору для ховеру */
    border-color: #2d38c7;
    color: #fff;
}

/* Responsive adjustments if needed */
@media (max-width: 480px) {
    .pagination-ipo .page-numbers {
        width: 36px;
        height: 36px;
        margin: 0 3px;
        font-size: 13px;
    }
     .pagination-ipo .prev,
     .pagination-ipo .next {
        font-size: 16px;
    }
}
body {
    padding: 0 40px;
    background: #FFF;
    max-width: 2000px;
    margin: auto;
}


.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    background: #fff;
    position: fixed;
    left: 40px;
    right: 40px;
    z-index: 1000;
    max-width: 2000px;
    margin: auto;
    margin-left: -40px;
    margin-right: -40px;
    padding: 0 40px;    
    padding-bottom: 1px;
}

nav.active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* для плавного скролу на iOS */
  }

  
.logo img {
    width: 193.287px;
    height: 50.761px;
    max-width: 100%;
    transition: width 0.3s ease;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 40px;
}
.active-page {
    color: #F12D00;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 16px */    
}

nav a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 300;
    line-height: 100%;
    color: var(--text-color);
    transition: color 0.3s;
}

nav a:hover {
    color: var(--primary-color);
}

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

.search-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.search-bar {
    border: none;
    border-radius: 6px;
    display: flex;
    width: 211px;
    height: 52px;
    padding: 18px 40px 18px 18px;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 100%;
    outline: none;
    background: var(--background-light);
}

.search-bar::placeholder {
    color: var(--placeholder-color);
}

.search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.weekly-updates {
    display: flex;
    padding: 18px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 100px;
    background: var(--primary-color);
    color: var(--white);
    font-size: 16px !important;
    font-weight: 500;
    line-height: 100%;
    transition: background 0.3s;
    text-decoration: none;
}

.weekly-updates:hover {
    background: var(--primary-hover);
}

.burger-menu {
    display: none;
    cursor: pointer;
    width: 35px;
    height: 28px;
    z-index: 1001;
}

.mobile, .mobile-search, li .weekly-updates {
    display: none;
}

.burger {
    position: relative;
    width: 35px;
    height: 25px;
    background: transparent;
    cursor: pointer;
    display: block;
}

.burger input {
    display: none;
}

.burger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--black);
    border-radius: 9px;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.burger span:nth-of-type(1) {
    top: 0;
    transform-origin: center;
}

.burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center;
}

.burger span:nth-of-type(3) {
    bottom: 0;
    transform-origin: center;
}

.burger input:checked ~ span:nth-of-type(1) {
    transform: rotate(45deg) translate(7px, 5px);
}

.burger input:checked ~ span:nth-of-type(2) {
    opacity: 0;
    transform: translateX(-100%);
}

.burger input:checked ~ span:nth-of-type(3) {
    transform: rotate(-45deg) translate(3px, -2px);
    bottom: 10px;
}
.search-container.pc-search {
    display: flex;
}
.header {
    transition: all 0.3s ease;
}
.header .logo img,
.header .burger-menu {
    transition: all 0.3s ease;
}

@media (max-width: 1368px) {
    nav ul {
        gap: 20px;
    }
    .search-container.pc-search {
        display: none;
    }
    .search-container.mob-search {
        display: flex;
    }
    .mobile-search {
        display: flex;
        padding-top: 100px;
    }
    .search-container, .search-bar, .weekly-updates {
        width: 100%;
    }
}

@media (max-width: 1068px) {
    .header {
        margin-left: -16px;
        margin-right: -16px;
        padding: 0 16px;
    }
    li .weekly-updates, .mobile-search {
        display: flex;
    }

    .header {
        left: 16px;
        right: 16px;
        transition: all 0.3s ease, right 0.3s ease;
    }
    .logo {
        z-index: 1001;
    }
    .active-page {
        font-size: 24px;
    }
    nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        background: var(--white);
        padding: 80px 20px 20px;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
        overflow-y: auto;
    }

    nav.active {
        display: block;
        opacity: 1;
    }

    nav ul {
        padding: 20px 0 0;
        flex-direction: column;
    }

    nav ul li {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    nav.active ul li {
        opacity: 1;
        transform: translateY(0);
    }

    nav.active ul li:nth-child(1) { transition-delay: 0.1s; }
    nav.active ul li:nth-child(2) { transition-delay: 0.2s; }
    nav.active ul li:nth-child(3) { transition-delay: 0.3s; }
    nav.active ul li:nth-child(4) { transition-delay: 0.4s; }
    nav.active ul li:nth-child(5) { transition-delay: 0.5s; }

    nav a {
        display: block;
        padding: 10px 0;
        color: var(--text-color);
        font-family: Poppins;
        font-size: 24px;
        font-style: normal;
        font-weight: 300;
        line-height: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
        padding-bottom: 40px;
        transition: all 0.3s;
    }

    nav a:hover {
        border-bottom: 1px solid var(--primary-color);
        color: var(--primary-color);
    }

    .search {
        display: none;
        margin-top: 20px;
        width: 100%;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        transition-delay: 0.6s;
    }

    .search-container, .search-bar, .weekly-updates {
        width: 100%;
    }

    .weekly-updates {
        margin-top: 20px;
    }

    .burger-menu {
        display: block;
    }
}
@media (max-width: 768px) {
    body {
        padding: 0 16px;
    }
    .logo img {
        width: 190px;
        height: 49.898px; 
    }
}



.video-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease forwards;
  }
  
  .video-popup-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    transform: scale(0.8);
    opacity: 0;
    animation: popupOpen 0.4s ease forwards;
  }
  
  .video-wrapper iframe {
    width: 100%;
    height: 450px;
    display: block;
    border: none;
  }
  
  .close-btn {
    position: absolute;
    top: 20px;
    display: flex;
    right: 40px;
    cursor: pointer;
    z-index: 1100;
    background: var(--primary-hover);
    padding: 8px;
    border-radius: 10px;
    transition: background 0.3s ease, transform 0.3s ease;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
  }
  
  .close-btn:hover {
    background: var(--primary-color);
    transform: rotate(90deg);
  }
  
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes popupOpen {
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  
  @keyframes popupClose {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(0.8);
      opacity: 0;
    }
  }
  
  .video-popup-overlay.fade-out {
    animation: fadeOut 0.3s ease forwards;
  }
  
  .video-popup-content.popup-close {
    animation: popupClose 0.4s ease forwards;
  }

.video-conteiner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.weekly-video {
    display: flex;
    padding: 18px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #3C4BE8;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    text-decoration: none;
    color: var(--white);
    transition: all 0.3s;
    margin-top: 20px;
}
.weekly-video:hover {
    background: var(--primary-hover);
}

.video-h1 {
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 40px */
    text-align: center;
    padding-top: 160px;
    padding-bottom: 30px;
}
.video-grid {
    justify-content: center;
    overflow-x: hidden;
    padding: 0;
    gap: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Приховуємо смугу прокрутки в Chrome, Safari */
.video-grid::-webkit-scrollbar {
    display: none;
}

.video-card {
    position: relative;
    /* Зменшуємо ширину картки для мобільних */
    width: 398px;
    height: 244px;    
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    /* Забезпечуємо, щоб картка не стискалася */
    flex-shrink: 0;
}

.video-preview {
    width: 100%;
    height: 244px;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30.051px;
    height: 30.051px;    
    transition: opacity 0.3s;
}

.play-button:hover {
    opacity: 0.8;
}

.video-player {
    display: none;
    width: 100%;
    height: 100%;
}

.video-card.playing .video-preview,
.video-card.playing .play-button {
    display: none;
}

.video-card.playing .video-player {
    display: block;
}

/* Медіа-запит для десктопів */
@media (max-width: 768px) {
    .close-btn {
        right: 16px;
    }
    .video-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    .video-h1 {
        font-size: 32px;
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .video-card {
        width: 90%;
        height: 244px;
    }
}





.top-news {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    border-radius: 20px;
    background: url(img/card/back.jpg) lightgray 50% / cover no-repeat;
    text-align: center;
    margin: 0.5px;
}

.container-ipo {
    margin: 60px 0.1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    border-radius: 20px;
    background: url(img/card/back.jpg) lightgray 50% / cover no-repeat;
    text-align: center;
}
.top-news-padding {
    padding-top: 100px;
}

.card-container-ipo {
    display: flex;
    justify-content: center;
    gap: 40px 20px;
    flex-wrap: wrap;
    padding-bottom: 40px;
}

.card-ipo {
    border-radius: 12px;
    background: #011737;
    width: 30%; /* Базова ширина для великих екранів */
    height: auto;
    padding: 21px 25px 66px 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box; /* Щоб padding не збільшував розмір */
}


.card-logo-ipo {
    margin-bottom: 31px;
    max-height: 60px;
    width: auto;
    height: 60px;
}

.ipo-h1 {
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    color: var(--white);
    padding-top: 60px;
    padding-bottom: 40px;
}
.card-ipo h2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 21.6px */
    color: var(--white);
    padding-bottom: 26px;
    text-align: left;
}
.card-ipo p {
    color: #DADADA;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    text-align: left;
}
.card-ipo a {
    color: #F12D00;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;    
}
.weekly-ipo {
    display: flex;
    padding: 18px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #3C4BE8;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    text-decoration: none;
    color: var(--white);
    transition: all 0.3s;
    margin-bottom: 60px;
}
.weekly-ipo:hover {
    background: var(--primary-hover);
}
@media (max-width: 1368px) {
    .top-news-padding {
        padding-top: 30px;
    }
}
/* Для екранів до 1024px (планшети) */
@media (max-width: 1024px) {
    .card-ipo {
        width: 45%; /* Картки займають більше місця */
    }
}

/* Для екранів до 768px (мобільні пристрої) */
@media (max-width: 768px) {
    .card-ipo {
        width: 100%; /* Картки на всю ширину */
        padding: 21px 31px 41px 34px;
    }
    .ipo-h1 {
        font-size: 32px;
    }
    .card-ipo {
        margin: 0px 10px;
    }
}










.table-conteiner.top {
    padding-top: 5%;
}
@media (max-width: 1368px) {
    .table-conteiner.top {
        padding-top: 0%;
    }
}


.table-conteiner {
    padding-bottom: 40px;
}
.header-table {
    text-align: center;
    color: #1a2a44;
    padding-top: 80px;
    padding-bottom: 40px;
}
.header-table h2 {
    color: #01112A;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 38.4px */
    padding: 0px 10px 32px;
}
.p-table {
    color: #3C4BE8;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 18px */
    padding-top: 14px;
}
.header-table p {
    margin: 5px 0;
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 18px */
}
.table-wrapper {
    width: 90%;
    margin: auto;
}
.thead-container, .tbody-container {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px; /* Відступ між thead і tbody */
}
.thead-container table, .tbody-container table {
    width: 100%;
    border-collapse: collapse;
}
.thead-container th, .tbody-container td {
    padding: 10px;
    text-align: left;
    height: 76px;
}
.thead-container th {
    background: #011737;
    color: white;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    height: 80px;
}
.tbody-container tr:nth-child(even) {
    background-color: #DFDFEC;
}
.tbody-container td {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    color: #5E5E5E;
}

/* Колір для першого та другого стовпчика */
.tbody-container td:nth-child(1),
.tbody-container td:nth-child(2) {
    color: #3C4BE8;
}

.tbody-container tr:nth-child(odd) {
    background-color: #F0F0F7;
}
/* Забезпечення однакової ширини стовпців для вирівнювання */
.thead-container th:nth-child(1), .tbody-container td:nth-child(1) { width: 17%; } /* Company */
.thead-container th:nth-child(2), .tbody-container td:nth-child(2) { width: 8%; } /* Ticker */
.thead-container th:nth-child(3), .tbody-container td:nth-child(3) { width: 11%; } /* Trade Date */
.thead-container th:nth-child(4), .tbody-container td:nth-child(4) { width: 10%; } /* Shares (M) */
.thead-container th:nth-child(5), .tbody-container td:nth-child(5) { width: 11%; } /* Price Range */
.thead-container th:nth-child(6), .tbody-container td:nth-child(6) { width: 12%; } /* Deal Size (M) */
.thead-container th:nth-child(7), .tbody-container td:nth-child(7) { width: 15%; } /* Underwriters */

td a{
    color: #3C4BE8;
}

@media screen and (max-width: 768px) {
    .header-table {
      padding-top: 40px;
      padding-bottom: 20px;
    }
  
  
  
    .table-wrapper {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  
    .thead-container,
    .tbody-container {
      min-width: 800px;
    }
  
    .thead-container table,
    .tbody-container table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      min-width: 1500px;
    }
  
    .thead-container th,
    .tbody-container td {
      white-space: nowrap;
      text-align: left;
      padding: 8px;
      font-size: 14px;
    }
  
    .thead-container th {
      height: 60px;
      font-size: 14px;
    }
  
    .tbody-container td {
        height: 60px;
    }
  
    .tbody-container tr:nth-child(even) {
      background-color: #DFDFEC;
    }
  
    .tbody-container tr:nth-child(odd) {
      background-color: #F0F0F7;
    }  
  }
  







  .recent-table-container {
    padding-bottom: 40px;
}
.recent-header-table {
    text-align: center;
    color: #1a2a44;
    padding-top: 80px;
    padding-bottom: 40px;
}
.recent-header-table h2 {
    color: #01112A;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 38.4px */
    padding: 0px 10px 0px;
}
.recent-p-table {
    color: #3C4BE8;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 18px */
    padding-top: 14px;
}
.recent-header-table p {
    margin: 5px 0;
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 18px */
}
.recent-table-wrapper {
    width: 90%;
    margin: auto;
}
.recent-thead-container, .recent-tbody-container {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
}
.recent-thead-container table, .recent-tbody-container table {
    width: 100%;
    border-collapse: collapse;
}
.recent-thead-container th, .recent-tbody-container td {
    padding: 10px;
    text-align: left;
    height: 76px;
}
.recent-tbody-container td {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    color: #5E5E5E;
}

/* Колір для першого та другого стовпчика */
.recent-tbody-container td:nth-child(1),
.recent-tbody-container td:nth-child(2) {
    color: #3C4BE8;
}
.recent-thead-container th {
    background: #011737;
    color: white;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    height: 80px;
}
.recent-tbody-container tr:nth-child(even) {
    background-color: #DFDFEC;
}
.recent-tbody-container tr:nth-child(odd) {
    background-color: #F0F0F7;
}
.red-text {
    color: #FF4E4E;
}
.green-text {
    color: #2CD653;
}
/* Column widths */
.recent-thead-container th:nth-child(1), .recent-tbody-container td:nth-child(1) { width: 17%; } /* Company */
.recent-thead-container th:nth-child(2), .recent-tbody-container td:nth-child(2) { width: 8%; } /* Ticker */
.recent-thead-container th:nth-child(3), .recent-tbody-container td:nth-child(3) { width: 11%; } /* Offer Date */
.recent-thead-container th:nth-child(4), .recent-tbody-container td:nth-child(4) { width: 10%; } /* Deal Size (M) */
.recent-thead-container th:nth-child(5), .recent-tbody-container td:nth-child(5) { width: 11%; } /* Current Price */
.recent-thead-container th:nth-child(6), .recent-tbody-container td:nth-child(6) { width: 15%; } /* Today's Change */
.recent-thead-container th:nth-child(7), .recent-tbody-container td:nth-child(7) { width: 30%; } /* Return from IPO */
@media screen and (max-width: 768px) {
    .recent-header-table {
        padding-top: 40px;
        padding-bottom: 20px;
    }
    .recent-table-wrapper {
        width: 100%;
        overflow-x: auto; /* Залишаємо скрол */
        -webkit-overflow-scrolling: touch;
    }
    .recent-thead-container,
    .recent-tbody-container {
        min-width: 1000px; /* Мінімальна ширина для таблиці, щоб вона прокручувалася */
    }
    .recent-thead-container table,
    .recent-tbody-container table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed; /* Фіксована ширина колонок */
    }
    .recent-thead-container th,
    .recent-tbody-container td {
        white-space: nowrap;
        text-align: left;
        padding: 8px;
        font-size: 14px;
    }
    .recent-thead-container th {
        height: 60px;
        font-size: 14px;
    }
    .recent-tbody-container td {
        height: 60px;
    }
}








.research-section {
    text-align: center;
    padding-bottom: 40px;
  }
  
  .research-section h2 {
    color: #01112A;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 40px */    
    padding-bottom: 40px;
    padding-top: 40px;
  }
  
  .research-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 колонок на великих екранах */
    gap: 20px;
    margin: 0 auto;
  }
  

  .research-item {
    border-radius: 10px;
    background: #F0F0F7;
    padding: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  
  
  .research-item img {
    display: flex;
    width: 70px;
    height: 68px;
    padding: 13px 13.5px 13px 14.5px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #DFDFEC;
  }
  
  .research-item span {
    text-align: left;
    color: #01112A;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
  }
  @media (max-width: 1368px) {
    .research-grid {
        grid-template-columns: repeat(4, 1fr); /* мінімум 4 колонки на великих екранах */
    }
  }
  @media (max-width: 1168px) {
    .research-grid {
        grid-template-columns: repeat(2, 1fr); /* мінімум 4 колонки на великих екранах */
    }
  }
  @media (max-width: 768px) {
    .research-section h2 {
        font-size: 32px;
    }
    .research-grid {
        grid-template-columns: repeat(1, 1fr); /* мінімум 4 колонки на великих екранах */
    }
  }







  .ipo-tip {
    border-radius: 10px;
    background: #F0F0F7;
    display: flex;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}
.ipo-tip h2 {
    color: #F12D00;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 20px */    
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.ipo-tip h2 img {
    width: 70px;
    flex-shrink: 0;
    display: flex;
    padding: 16px 16px 14px 16px;
    justify-content: center;
    align-items: center;
    margin-right: 13px;
    border-radius: 5px;
    background: #DFDFEC;
}
.ipo-tip p {
    color: #5E5E5E;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 19.6px */
}

.ipo-tip a {
    text-decoration: none;
}
.ipo-tip p a {
    color: #3C4BE8;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.see-all {
    display: flex;
    width: 166px;
    padding: 18px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: var(--primary-color);
    color: var(--white);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 16px */
    transition: all 0.3s;
}
.see-all:hover {
    background-color: var(--primary-hover);
}
@media (min-width: 768px) {
    .ipo-tip {
        display: none;
    }
}









.calendar-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.calendar-section {
    padding-bottom: 40px;
    width: 50%;
}

.title-block {
    text-align: center;
    color: #1a2a44;
    padding-top: 80px;
    padding-bottom: 40px;
}

.title-block h3 {
    color: #01112A;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    padding: 0px 10px 0;
    margin: 0;
}

.data-container {
    width: 90%;
    margin: auto;
}

.header-row, .body-row {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
}

.header-row table, .body-row table {
    width: 100%;
    border-collapse: collapse;
}

.header-row th, .body-row td {
    padding: 10px;
    text-align: left;
    height: 76px;
}

.header-row th {
    background: #011737;
    color: white;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    height: 80px;
}

.body-row tr:nth-child(even) {
    background-color: #DFDFEC;
}

.body-row td {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    color: #5E5E5E;
}

.body-row td:nth-child(1),
.body-row td:nth-child(2) {
    color: #3C4BE8;
}

.body-row tr:nth-child(odd) {
    background-color: #F0F0F7;
}

.header-row th:nth-child(1), .body-row td:nth-child(1) { width: 50%; }
.header-row th:nth-child(2), .body-row td:nth-child(2) { width: 25%; }
.header-row th:nth-child(3), .body-row td:nth-child(3) { width: 25%; }

@media screen and (max-width: 768px) {
    .calendar-wrapper {
        flex-direction: column;
    }

    .calendar-section {
        width: 100%;
    }

    .title-block {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .data-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header-row,
    .body-row {
        min-width: 600px;
    }

    .header-row table,
    .body-row table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        min-width: 600px;
    }

    .header-row th,
    .body-row td {
        white-space: nowrap;
        text-align: left;
        padding: 8px;
        font-size: 14px;
    }

    .header-row th {
        height: 60px;
        font-size: 14px;
    }

    .body-row td {
        height: 60px;
    }

    .body-row tr:nth-child(even) {
        background-color: #DFDFEC;
    }

    .body-row tr:nth-child(odd) {
        background-color: #F0F0F7;
    }
}
















.ipo-news-container {
    padding-top: 40px;
    padding-bottom: 40px;
    margin: 0.5px;
}

.ipo-news-container h1 {
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 40px */
    color: #01112A;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-back {
    border-radius: 6px;
    background: #F0F0F7;
    padding: 20px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.news-sections {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.news-section {
    width: 50%;
}
.top-news-sections {
    padding-top: 10px;
}

.section-header {
    border-radius: 10px;
    background: #011737;
    display: flex;
    padding: 20px;
    align-items: center;
    gap: 20px;
    flex: 1 0 0;
    margin-bottom: 10px;
}

.section-header .icon {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 7px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: var(--Orange, #F12D00);
    margin-right: 10px;
}

.section-header h2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 18px */
    color: var(--white);
    margin: 0;
}

.news-item {
    border-radius: 6px;
    border: 1px solid rgba(1, 23, 55, 0.10);
    background: #DFDFEC;
    padding: 19px 18px;
    display: flex;
    align-items: flex-end;
}

.news-item a {
    color: var(--black);
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 19.6px */
    margin: 0;
    flex: 1;
    text-decoration: none;
    margin-right: 20%;
    transition: all 0.3s;
}
.news-item a:hover {
    color: var(--primary-color);
}
.news-item .date {
    color: #858585;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 16.8px */   
}

@media (max-width: 768px) {
    .news-sections {
        flex-direction: column;
    }
    .news-item a {
        margin-right: 5%;
    }
    .news-section {
        width: 100%;
    }
}







.news-block {
    margin: 0 auto;
    padding-bottom: 40px;
}

.news-block .date {
    color: #858585;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 16.8px */   
}

.news-block h1 {
    color: #01112A;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 125% */
    text-align: left;
    padding-top: 40px;
    padding-bottom: 40px;
}

.news-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.image-wrapper {
    overflow: hidden;
    border-radius: 6px;
    height: 280px;
}

.news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

/* 🔥 Коли наводиш на всю карточку — збільшується тільки зображення */
.news-card:hover .news-image {
    transform: scale(1.1);
}


.news-card {
    overflow: hidden;
}

.news-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    align-self: stretch;
    overflow: hidden;
    color: var(--black);
    text-overflow: ellipsis;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 130% */
    font-family: "Helvetica Neue";
    padding-top: 20px;
    padding-bottom: 8px;
}

.news-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    align-self: stretch;
    overflow: hidden;
    color: var(--black);
    text-overflow: ellipsis;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 19.6px */
    padding-bottom: 16px;
}

.news-link {
    display: block; /* Ensure the link takes up the full card area */
    text-decoration: none; /* Remove default underline */
    color: inherit; /* Inherit text color */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .news-cards {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 0 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        box-sizing: border-box;
    }

    .news-cards::-webkit-scrollbar {
        display: none;
    }

    .news-card {
        flex: 0 0 80vw;
        scroll-snap-align: start;
        min-width: 0;
        box-sizing: border-box;
    }

    .news-link {
        flex: 0 0 80vw; /* Match the card width */
        display: block;
        scroll-snap-align: start; /* Ensure link aligns with snap */
    }
}






.header-news-page {
    padding-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.date-news {
    color: #6D6E76;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    padding-top: 10px;
}
h1.h1-news {
    color: #01112A;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    padding-top: 10px;
    padding-bottom: 40px;
    width: 680px;
}
img.img-news {
    display: block;
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center -130px;
    border-radius: 10px;
}
.highlight-news h2 {
    color: #01112A;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
}
p.news-text {
    color: #6D6E76;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}
.news-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 843px;
    margin: auto;
    padding: 40px 0;
}
.highlight-news h3 {
    color:  #161722;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
    opacity: 0.78;
}
@media (max-width: 768px) {
    .date-news {
        font-size: 14px;
    }
    .news-content {
        width: 100%;
        padding: 0;
    }
    h1.h1-news {
        width: 100%;
        font-size: 28px;
    }
    img.img-news {
        height: 100%;
        object-position: initial;
    }
    .header-news-page {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .highlight-news h2 {
        color: #01112A;
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px;
    }
    .highlight-news h2 {
        font-size: 24px;
        line-height: normal;
    }
    p.news-text {
        line-height: normal;
        padding-top: 24px;
    }
}









.recent-table-container.top-pricing {
    padding-top: 120px;
}
.top-pricing .recent-header-table {
    padding-top: 0;
}
@media (max-width: 768px) {
    .recent-table-container.top-pricing {
        padding-top: 20px;
    }
}

.pricing-info {
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}
.top-info-pricing {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.right-info-pricing img {
    width: 640px;
    height: 482px;
    object-fit: cover;
}
.left-info-pricing {
    width: 45%;
    gap: 32px;
    display: flex;
    flex-direction: column;
}
.pricing-info h2 {
    color: #01112A;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px; /* 150% */
}
.pricing-info p {
    color: #6D6E76;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
}
.botom-info-pricing {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1300px) {
    .right-info-pricing img {
        width: auto;
        height: 350px;
        padding: 30px;
    }
}
@media (max-width: 968px) {
    .pricing-info {
        gap: 30px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .top-info-pricing {
        flex-direction: column;
        gap: 30px;
    }
    .left-info-pricing {
        width: 100%;
        gap: 10px;
    }
    .right-info-pricing img {
        width: 100%;
        height: auto;
        padding: 0px;        
    }
    .botom-info-pricing {
        flex-direction: column-reverse;
        gap: 30px;
    }
    .pricing-info h2 {
        font-size: 28px;
        line-height: normal;
    }
}









.chart-container {
    padding: 0;
    width: 100%;
    margin: auto;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.chart-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}
.chart-buttons {
    display: flex;
    gap: 8px;
}
.chart-buttons button {
    background: #3c4be83b;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}
.chart-buttons button:hover {
    background: #e0e4ff;
    color: #3C4BE8;
}
.chart-buttons button.active {
    background: #3C4BE8;
    color: #ffffff;
}
canvas {
    max-height: 500px;
}
.header-company {
    gap: 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 120px;
    padding-bottom: 40px;
} 
.des-company {
    border-radius: 10px;
    background: #F0F0F7;
    display: flex;
    padding: 32px;
    gap: 24px;
    flex-direction: column;
}
.info-des {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #E3E3ED;
    padding-bottom: 24px;
}
.header-company h1{
    color: #01112A;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 40px */
} 
.header-company p{
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 18px */
} 

p.industy {
    color: var(--primary-color);
    font-size: 18px;
}
p.blank-info {
    text-align: left;
    width: 695px;
}
.desc-mere p {
    color: #6D6E76;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
}
.more-all-dess {
    color: #6D6E76;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.desc-mere {
  font-size: 16px;
  line-height: 28px;
  color: #6D6E76;
  text-align: left;
  overflow: hidden;
  max-height: none;
  opacity: 1;
  cursor: pointer;
}

.desc-mere.animate {
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.text-wrapper {
  display: inline;
}

.toggle-text-btn {
  display: inline;
  color: #6D6E76;
  text-decoration: underline;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.desc-mere.hidden-more .toggle-text-btn {
  display: none;
}
.info-data-sections {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-bottom: 20px;
}
.header-data {
    color: #01112A;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}
.header-data {
    color: #01112A;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    border-bottom: 1px solid #E3E3ED;
    width: 100%;
    padding-bottom: 24px;
    margin-bottom: 10px;
}
.infos-data a{
    color: #3C4BE8;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 19.2px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    width: 336px;
}
.info-data {
    border-radius: 10px;
    background: #F0F0F7;
    display: flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    align-items: center;
}
.infos-data {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.company-data {
    padding-bottom: 20px;
}
.chart-container {
    padding: 0;
    width: 100%;
    margin: auto;
    border-radius: 10px;
    background: #F0F0F7;
    padding: 32px;
    margin-bottom: 40px;
}
.infos-data {
    color: #6D6E76;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.company-page {
    width: 90%;
    margin: auto;
}
.img-name img {
        width: auto;
        min-width: auto;
        min-height: 50px;
        max-height: 100px;
}
.img-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    justify-content: center;
    padding-bottom: 25px;
}
@media (max-width: 768px) {
    .chart-title {
        font-size: 18px;
    }
    .header-data {
        padding-bottom: 15px;
        margin-bottom: -5px;
    }
    .img-name {
        padding-bottom: 20px;
        flex-direction: column;
    }
    .card-logo-ipo {
        margin-bottom: 31px;
        max-height: 60px;
        width: auto;
        height: auto;
        max-width: 200px;
    }
    .company-page {
        width: 100%;
        margin: auto;
    }
    .infos-data {
        font-size: 14px;
    }
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 15px;
    }   
    .header-company {
        padding-top: 20px;
        padding-bottom: 20px;
    } 
    .header-company h1 {
        font-size: 22px;
        text-align: left;
    }
    .info-data-sections {
        flex-direction: column;
    }
    .chart-container {
        padding: 0;
    }
    .info-data {
        padding: 20px 15px;
    }
    .des-company {
        padding: 20px 15px;
        gap: 10px;
    }
    .info-des {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-bottom: 15px;
    }
    p.blank-info {
        width: 100%;
    }
    .header-company p {
        font-size: 18px;
    }
    .desc-mere {
        font-size: 14px;
    }
    p.industy {
        font-size: 16px;
    }
    .news-data .infos-data {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .news-data .infos-data a {
        width: 100%;
    }
}






.priced-information {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 auto;
}

.card-priced {
    display: flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
    border-radius: 10px;
    background: #F0F0F7;
}
.card-priced p {
    color: #6D6E76;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
}
.card-priced h2 {
    color: #01112A;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 24px */
}



.shapes-text h2 {
    color: #01112A;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 24px;
}
.shapes-text p {
    color:#6D6E76;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
    padding-bottom: 40px;
    text-align: center;
}
.grid-shapes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 0 auto;
    padding-bottom: 80px;
}
.shapes-card {
    display: flex;
    padding: 32px 24px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    flex: 1 0 0;
    border-radius: 10px;
    background: #F0F0F7;
    color: #01112A;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    justify-content: center;
}
.block-footer-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 80px;
    gap: 24px;
    margin: auto;
    width: 60%;
}
.block-footer-price h2 {
    color: #01112A;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
}
.block-footer-price p {
    color:#6D6E76;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
}




.video-grid-interviews {
    justify-content: center;
    overflow-x: hidden;
    padding: 0;
    gap: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 40px;
}


@media (max-width: 768px) {
    .video-grid-interviews .video-card {
        width: 100%;
    }
    .priced-information {
        grid-template-columns: 1fr;
    }
    .card-priced {
        padding: 20px;
    }
    .grid-shapes {
        grid-template-columns: 1fr;
    }
    .shapes-card {
        padding: 20px;
        text-align: left;
        align-items: flex-start;
    }
    .shapes-text h2 {
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 28px;
        text-align: left;
    }
    .shapes-text p {
        text-align: left;
    }
    .grid-shapes {
        padding-bottom: 20px;
    }
    .block-footer-price {
        padding-bottom: 40px;
        width: 100%;
    }
    .block-footer-price h2 {
        font-size: 28px;
        text-align: left;
    }    
    .block-footer-price p {
        text-align: left;
    }
}


footer.footer {
    display: flex;
    padding: 48px 108px;
    flex-direction: column;
    gap: 80px;
    background: #011737;
    margin: 0 -40px;
}

.footer-one-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-two-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
a.info-li {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    transition: color 0.3s ease;
}

a.info-li:hover {
    color: #F12D00;
}

.social-icons img {
    width: 30px;
    height: auto;
}
.footer-one-block img {
    width: 193.287px;
    height: auto;
}
.social-icons {
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.copyright {
    color: #FFF;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: 0.5;
}
.info-ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.category-footer {
    display: flex;
    flex-direction: row;
    gap: 60px;
}
.footer-info-text {
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.5;
    padding-bottom: 16px;
}



@media (max-width: 768px) {
    footer.footer {
        padding: 30px 20px;
        margin: 0;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .footer-one-block {
        flex-direction: column;
        gap: 20px;
    }
    .footer-two-block {
        flex-direction: row;
    }
    .social-icons {
        gap: 15px;
    }
    .footer-one-block img {
        width: 150px;
    }
}




.weekly-conteiner {
    padding-top: 140px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: row;
}

.right-weekly {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.right-weekly h1 {
    color: #01112A;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: capitalize;
    width: 70%;
}
.right-weekly p {
    color: #01112A;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    width: 70%;
}

.thank-you-weekly h1 {
    color: #fff;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: capitalize;
    width: 70%;
}
.thank-you-weekly p {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    width: 70%;
}
.thank-you-weekly {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    background: #011737;
    padding: 20px;
    border-radius: 20px;
    justify-content: center;
    height: 70vh;
    width: 100%;
}
.left-weekly {
    border-radius: 10px;
    background: #F0F0F7;
    display: flex;
    padding: 32px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    flex-shrink: 0;
    width: 50%;
}

button.weekly-updates {
    outline: none;
    border: none;
    width: 50%;
    margin: auto;
    margin-top: 32px;
}
.form-weekly label {
    color: #01112A;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.form-weekly input#first-name {
    display: flex;
    padding: 13px 20px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid rgba(23, 31, 60, 0.10);
    background: #FFF;
    outline: none;
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
}
.form-weekly input#last-name {
    display: flex;
    padding: 13px 20px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid rgba(23, 31, 60, 0.10);
    background: #FFF;
    outline: none;
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
}
.form-weekly input#email {
    display: flex;
    padding: 13px 20px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid rgba(23, 31, 60, 0.10);
    background: #FFF;
    outline: none;
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
}
.form-weekly {
    width: 100%;
}
.form-weekly input#first-name::placeholder {
    color: #9C9FBE;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 22.4px */
}
.form-weekly input#last-name::placeholder {
    color: #9C9FBE;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 22.4px */
}
.form-weekly input#email::placeholder {
    color: #9C9FBE;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 22.4px */
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-weekly select {
    display: flex;
    padding: 13px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid rgba(23, 31, 60, 0.10);
    background: #FFF;
    outline: none;
    width: 100%;
    margin-bottom: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 13.75C9.8402 13.75 9.6802 13.6889 9.55816 13.5669L3.30816 7.31685C3.06395 7.07263 3.06395 6.67717 3.30816 6.4331C3.55238 6.18904 3.94785 6.18888 4.19191 6.4331L10 12.2412L15.8082 6.4331C16.0524 6.18888 16.4479 6.18888 16.6919 6.4331C16.936 6.67732 16.9361 7.07279 16.6919 7.31685L10.4419 13.5669C10.3199 13.6889 10.1599 13.75 10 13.75Z" fill="%239C9FBE"/></svg>');
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 40px; /* Місце для стрілки */
    color: #9C9FBE;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 22.4px */
}

/* Стилі для "плейсхолдерної" опції */
.form-weekly select option {
    color: #000000;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 22.4px */
}


.checkbox-label {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  margin-right: 10px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid rgba(23, 31, 60, 0.10);
  background: var(--W-Background, #FFF);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  cursor: pointer;
  outline: none;
}

.checkbox-label input[type="checkbox"]:checked {
  background: var(--W-Background, #FFF);
  border: 1px solid rgba(23, 31, 60, 0.10);
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_678_545)'%3E%3Cpath d='M9.44912 14.8896L6.13019 11.78L5 12.8315L9.44912 17L19 8.05145L17.8778 7L9.44912 14.8896Z' fill='%23F12D00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_678_545'%3E%3Crect width='24' height='24' rx='3' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: checkmark 0.3s ease-in-out forwards;
}

@keyframes checkmark {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.checkbox-label label {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}


@media (max-width: 1168px) {
    .weekly-conteiner {
        padding-top: 20px;
    }
    .weekly-conteiner {
            flex-direction: column;
    }
    .right-weekly {
        width: 100%;
        gap: 20px;
        padding-bottom: 20px;
    }
    .left-weekly {
        width: 100%;
        padding: 20px 10px;
    }
    .right-weekly h1 {
        font-size: 28px;
        width: 100%;
    }
    .right-weekly p {
        width: 100%;
    }
    .thank-you-weekly h1 {
        font-size: 28px;
        width: 100%;
    }
    .thank-you-weekly p {
        width: 100%;
    }
    button.weekly-updates {
        width: 100%;
    }
}

.video-conteiner .weekly-video {
    background-color: #F12D00;
}
.video-conteiner .weekly-video:hover {
  background-color: #f12c00ae;
}
.fade-in-element {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.fade-in-element.is-visible {
    opacity: 1;
}






.research-conteiner {
    display: flex;
    flex-direction: column;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(../src/img/Research/reserch.jpg) lightgray 50% / cover no-repeat;
    padding: 60px 10px;
}
.background-top {
    padding-top: 100px;
    padding-bottom: 40px;
}
.research-conteiner h1 {
    color: #FFF;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 40px */
}
.research-conteiner p {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */   
}
.research-h1-p {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 50%;
    margin: auto;
}

@media (max-width: 1368px) {
    .background-top {
        padding-top: 10px;
    }
}
@media (max-width: 768px) {
    .research-h1-p {
        width: 100%;
        gap: 20px;
    }
    .research-conteiner h1 {
        font-size: 28px;
    }
    .research-conteiner {
        height: 70svh;
    }
}



canvas {
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -webkit-optimize-contrast; /* Webkit (Chrome, Safari) */
    image-rendering: crisp-edges; /* Стандарт */
    -ms-interpolation-mode: nearest-neighbor; /* IE */
}
.page-content-wrapper {
    width: 70%;
    margin: auto;
}
p.p-grafick {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    text-align: left;
    margin: auto;
    width: 80%;
    padding-bottom: 40px;
    padding-top: 20px;
}
.main-title-custom {
    text-align: center;
    margin-bottom: -11px;
    margin-left: 70px;
    font-size: 12px;
    font-weight: 400;
}
.chart-scroll-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.chart-render-area {
    position: relative;
    width: 100%;
    height: 500px; /* Initial height, ensure canvas has dimensions before JS runs */
    background-color: transparent;
}
.video-conteiner-ipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 40px;
}
.video-h1-ipo {
    color: #01112A;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}
.video-conteiner-ipo .weekly-video {
    background-color: #F12D00;
}
.video-conteiner-ipo .weekly-video:hover {
  background-color: #f12c00ae;
}
@media (max-width: 1168px) {
    .main-title-custom {
        margin-left: 0px;
    }
    .video-conteiner-ipo {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .chart-render-area {
        height: 450px;
    }
    .video-h1-ipo {
        font-size: 28px;
    }
    .page-content-wrapper {
        width: 100%;
    }
    p.p-grafick {
        width: 100%;
        padding-top: 0px;
        padding-bottom: 20px;
    }
}


.find-conteiner {
    display: flex;
    flex-direction: column;
    padding: 40px;
    gap: 20px;
}
.text-find-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.find-ipo {
    display: flex;
    padding: 32px;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    border-radius: 10px;
    background: #F0F0F7;
}
.img-find-right img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    max-width: 546px;
    min-width: 546px;    
}

.text-find-left h3 {
    color: #01112A;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}
.text-find-left p {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}
@media (max-width: 768px) {
    .find-conteiner {
        padding: 20px 0px;
    }
    .find-ipo {
        flex-direction: column; 
        padding: 20px 10px;
        gap: 15px;
    }
    .text-find-left {
        gap: 15px;
    }
    .text-find-left h3 {
        font-size: 28px;
    }
    .img-find-right img {
        max-width: 100%;
        min-width: 100%;            
    }
}

.icon img {
    width: 25px;
    height: 25px;
}