/* --- assets/website/css/App.css --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

ul {
    list-style-type: none
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type="number"] {
    -moz-appearance: textfield
}

table{
    z-index: 99;
}

input:focus,
button:focus {
    box-shadow: none !important
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    min-height: 100vh
}

.nav-container .logo {
    display: flex
}

.nav-container .logo img {
    width: 126px;
    height: auto;
    display: block
}

.search-section {
    background: rgb(255 255 255 / .98);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgb(0 0 0 / .05);
    padding: 10px 12px;
    position: relative;
    z-index: 9
}

.search-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 30% 65%;
    justify-content: space-between;
    gap: 2rem
}

.search-wrapper {
    position: relative;
    flex: 1;
    max-width: 500px
}

.search-input-container {
    position: relative;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease
}

.search-input-container:focus-within {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgb(102 126 234 / .1)
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 2
}

.search-input {
    width: 100%;
    padding: 12px 15px 12px 50px;
    border: none;
    background: #fff0;
    font-size: 16px;
    outline: none;
    border-radius: 12px
}

.search-input::placeholder {
    color: #6c757d
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgb(0 0 0 / .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    max-height: 500px;
    overflow-y: auto;
    z-index: 1001
}

.search-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.search-content {
    padding: 20px
}

.mobile-search-wrapper {
    position: relative
}

@media (max-width:576px) {
    .search-container {
        grid-template-columns: 100%;
        justify-content: center;
        gap: 1rem
    }

    .journey-btn {
        width: 100%;
        text-align: center
    }

    .table-header {
        padding: 10px !important
    }
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 24px;
    background: none;
    border: none;
    color: #333
}

.trending-section {
    margin-bottom: 15px
}

.trending-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #495057;
    font-weight: 600;
    font-size: 14px
}

.trending-header svg {
    color: #ffc107
}

.category-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap
}

.category-tab {
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #6c757d
}

.category-tab.active,
.category-tab:hover {
    background: #667eea;
    color: #fff;
    border-color: #667eea
}

.trending-items {
    display: grid;
    gap: 8px
}

.trending-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease
}

.trending-item:hover {
    background: #f8f9fa;
    transform: translateX(5px)
}

.item-name {
    color: #333;
    font-weight: 500
}

.item-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600
}

.auth-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap
}

/* Mobile header: keep the Login / Free Trial / country buttons a compact
   right-aligned row (content-width) instead of stretching to full width. */
@media (max-width: 576px) {
    .navbar .search-container .auth-buttons {
        width: 100%;
        justify-content: flex-end;
        gap: 8px
    }
    .navbar .search-container .auth-buttons .login-btn,
    .navbar .search-container .auth-buttons .signup-btn {
        width: auto !important;
        flex: 0 0 auto;
        height: auto;
        padding: 8px 16px
    }
}

.utility-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-right: 8px
}

.utility-controls:last-child {
    margin-right: 0
}

.country-selector {
    position: relative
}

.country-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    height: 100%
}

.country-btn:hover {
    border-color: #667eea;
    background: #fff
}

.country-code {
    font-weight: 600;
    color: #495057
}

.country-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgb(0 0 0 / .15);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    z-index: 1001
}

.country-selector:hover .country-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px
}

.country-item:hover {
    background: #f8f9fa
}

.country-item.active {
    background: #e3f2fd;
    color: #1976d2
}

.login-btn,
.signup-btn {
    padding: 6px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 14px;
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.login-btn {
    background: #fff0;
    color: #333;
    border: 2px solid #dee2e6
}

.login-btn:hover {
    border-color: #667eea;
    color: #667eea
}

.signup-btn {
    background-image: linear-gradient(to right, #159ad5 0%, #159ad5 51%, #159ad5 100%);
    color: #fff;
    border: 1px solid #159ad5
}

.navbar {
    background: rgb(255 255 255 / .95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgb(0 0 0 / .1);
    padding: 0 12px;
    position: sticky;
    top: 0;
    /* High enough to sit above page content (incl. the global `table{z-index:99}`)
       so nav dropdowns are never obscured, but below modal overlays (9999+). */
    z-index: 1000
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0
}

.nav-item {
    position: relative
}

.nav-link,
button.nav-link {
    display: block !important;
    padding: 20px 15px !important;
    text-decoration: none !important;
    color: #333;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    position: relative !important
}

button.nav-link {
    border: unset;
    background-color: unset;
    font-size: 16px;
    line-height: unset;
    font-weight: 500 !important;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    width: 100%;
    text-align: left
}

.nav-link:hover {
    color: #667eea;
    transform: translateY(-2px)
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left
}

.nav-link:hover::after {
    transform: scaleX(1)
}

.dropdown-arrow {
    margin-left: 2px;
    font-size: .8rem;
    transition: transform 0.3s ease
}

.nav-item:hover .dropdown-arrow {
    transform: rotate(180deg)
}

.h-300.dropdown {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 300px
}

.w-300.dropdown {
    min-width: 250px
}

.h-300.dropdown::-webkit-scrollbar {
    width: 8px;
    height: 5px
}

.h-300.dropdown::-webkit-scrollbar-track {
    background: #f0f0f0
}

.h-300.dropdown::-webkit-scrollbar-thumb {
    background-color: #3498db;
    border-radius: 10px;
    border: 2px solid #fff0;
    background-clip: content-box
}

.dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 10px 40px rgb(0 0 0 / .15);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border-top: 3px solid #667eea
}

.nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.dropdown-item {
    position: relative
}

.dropdown-link,
button.dropdown-link {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    margin: 4px
}

button.dropdown-link {
    border: unset;
    background-color: unset;
    display: flex;
    justify-content: space-between;
    width: -webkit-fill-available;
    text-align: left;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    cursor: pointer
}

.dropdown-link:hover {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: #fff;
    transform: translateX(5px)
}

.sub-dropdown {
    position: absolute;
    top: 0;
    right: 100%;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 10px 40px rgb(0 0 0 / .15);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    border-left: 3px solid #764ba2
}

.dropdown-item:hover .sub-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px
}

.hamburger.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px)
}

.hamburger.active span:nth-child(2) {
    opacity: 0
}

.hamburger.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px)
}

.content {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
    text-align: center
}

.content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgb(0 0 0 / .3)
}

.content p {
    font-size: 1.2rem;
    opacity: .9;
    max-width: 600px;
    margin: 0 auto
}

@media screen and (max-width:991px) {
    body.dark-theme :where(.nav-menu) {
        background: #2a2a3a !important;
        color: #fff
    }

    .nav-link::after,
    .floating-element {
        display: none !important
    }

    .search-wrapper,
    .commentary-box {
        max-width: 100% !important
    }

    .container {
        padding: 15px
    }

    .auth-buttons {
        width: auto;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 8px
    }

    /* On mobile the toolbar wraps, so the buttons must NOT stretch to the
       (now-taller) parent height — keep them their natural size. */
    .auth-buttons .login-btn,
    .auth-buttons .signup-btn {
        height: auto;
        padding: 7px 16px
    }

    .auth-buttons .signup-btn > a {
        padding: 0;
        color: inherit;
        white-space: nowrap
    }

    button.nav-link {
        border-bottom: 1px solid #f0f0f0;
        display: flex !important;
        align-items: center;
        justify-content: space-between
    }

    .search-dropdown {
        left: 0;
        right: 0
    }

    .hamburger {
        display: flex
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 100%;
        flex-direction: column;
        background: #fff;
        width: 100%;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgb(0 0 0 / .05);
        height: calc(100vh - 70px);
        overflow-y: auto
    }

    .nav-menu.active {
        left: 0
    }

    .nav-item {
        margin: 0
    }

    .nav-link {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0
    }

    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: #f8f9fa;
        border-radius: 0;
        border-top: none;
        border-left: 3px solid #667eea;
        display: none
    }

    .dropdown.active {
        display: block
    }

    .sub-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: #e9ecef;
        border-left: 3px solid #764ba2;
        margin-left: 20px;
        display: none
    }

    .sub-dropdown.active {
        display: block
    }

    .dropdown-link {
        padding: 10px 30px;
        margin: 0;
        border-radius: 0
    }

    .content h1 {
        font-size: 2rem
    }

    .content p {
        font-size: 1rem
    }
}

@media (max-width:767px) {
    .search-content {
        padding: 10px
    }

    .category-tabs {
        flex-wrap: nowrap;
        overflow-x: auto
    }

    .item-name {
        font-size: 13px
    }

    .trending-item {
        padding: 8px;
        gap: 5px
    }

    .search-dropdown {
        max-height: 250px
    }

    .trending-section {
        margin-bottom: 0
    }

    .category-section,
    .upComing-Sec,
    .product-review,
    .dailyNesw-sec,
    .googleReview,
    .faq,
    .footer {
        padding: 20px 12px !important
    }
}

.marquee-sec {
    background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%)
}

.marquee-container {
    border-radius: 8px;
    padding: 5px 12px;
    overflow: hidden;
    position: relative;
    max-width: 1200px;
    margin: 0 auto
}

.marquee-wrapper {
    display: flex;
    align-items: center;
    gap: 15px
}

.trading-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgb(255 255 255 / .2);
    padding: 8px 12px;
    border-radius: 6px;
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / .3);
    flex-shrink: 0
}

.icon-flash {
    width: 20px;
    height: 20px;
    animation: flash 1.5s infinite;
    fill: #f6f338
}

@keyframes flash {

    0%,
    50% {
        opacity: 1
    }

    25%,
    75% {
        opacity: .3
    }
}

.icon-text {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px
}

.marquee-content {
    flex: 1;
    overflow: hidden;
    position: relative
}

.marquee-track {
    display: flex;
    animation: scroll 130s linear infinite;
    gap: 40px;
    align-items: center;
    width: fit-content
}

@keyframes scroll {
    0% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(-100%)
    }
}

.news-item {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    flex-shrink: 0
}

.news-bullet {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0
}

.news-bullet.red {
    background: #f44336
}

.news-text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgb(0 0 0 / .1)
}

.news-highlight {
    color: gold;
    font-weight: 600
}

@media (max-width:768px) {
    .search-input {
        font-size: 13px
    }

    .trading-icon {
        padding: 6px 8px
    }

    .icon-text {
        font-size: 12px
    }

    .news-text {
        font-size: 13px
    }
}

.marquee-container:hover .marquee-track {
    animation-play-state: paused
}

.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px
}

.left-section {
    padding: 20px;
    background: #f8f9fa
}

.main-title {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.2
}

.subtitle {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px
}

.trial-info {
    background: #e3f2fd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 35px
}

.trial-text {
    font-size: 18px;
    color: #302e2e;
    font-weight: 600
}

.terms-text {
    font-size: 16px;
    color: #666
}

.terms-link {
    color: #1976d2;
    text-decoration: none;
    font-weight: 700
}

.journey-buttons {
    display: flex;
    gap: 15px 10px;
    margin-bottom: 30px;
    flex-wrap: wrap
}

.journey-btn {
    padding: 10px 30px;
    background: #1976d2;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    transition: background 0.3s
}

.journey-btn:hover {
    background: #1565c0
}

.right-section {
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: column
}

.video-container {
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0
}

.video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none
}

.form-section {
    background: #1976d2;
    padding: 20px;
    border-radius: 8px;
    color: #fff
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    margin-bottom: 15px
}

#freeTrialForm .form-group{
    margin:0;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-input {
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    width:100%;
}

.form-input::placeholder {
    color: #999
}

.math-section {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700
}

.math-input {
    width: 60px;
    text-align: center;
    padding: 8px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: #26c6da;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 15px
}

.submit-btn:hover {
    background: #00bcd4
}

.inputError {
    color: #f7002e;
    font-weight: 600
}

@media (max-width:1024px) {
    .main-content {
        grid-template-columns: 1fr
    }
}

@media (max-width:768px) {
    .left-section {
        padding: 20px
    }

    .main-title {
        font-size: 24px
    }

    .brand-name {
        font-size: 24px
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .journey-btn {
        display: inline-block
    }

    .contact-item {
        font-size: 18px
    }

    .phone {
        font-size: 20px
    }
}

@media (max-width:480px) {
    .container {
        margin: 0 10px
    }

    .left-section {
        padding: 15px
    }

    .right-section {
        padding: 15px
    }

    .main-title {
        font-size: 20px
    }

    .brand-name {
        font-size: 20px
    }
}

.homeBanner {
    background-color: #f8f9fa;
    padding: 30px 12px
}

.homeBanner .container {
    box-shadow: rgb(0 0 0 / .1) 0 2px 10px;
    background: #fff;
    padding: 0
}

.product-review .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-shadow: none !important;
    background: none !important
}

.product-review .header {
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-bottom: 20px
}

.product-review .header .pr-do-not-use-ffba-a-8wanz6 {
    width: 350px;
    margin-bottom: 10px
}

.product-review .header h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgb(0 0 0 / .3)
}

.product-review .rating-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap
}

.product-review .stars {
    display: flex;
    gap: 5px
}

.product-review a {
    text-decoration: none
}

.product-review .star {
    color: gold;
    font-size: 28px;
    filter: drop-shadow(1px 1px 2px rgb(0 0 0 / .3))
}

.product-review .rating-text {
    font-size: 1.2rem;
    font-weight: 600
}

.product-review .review-count {
    background: rgb(255 255 255 / .2);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / .3)
}

.product-review .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px
}

.product-review .testimonial-card {
    background: rgb(255 255 255 / .98);
    border-radius: 5px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / .3);
    transition: all 0.3s ease;
    position: relative
}

.product-review .testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 10px rgb(0 0 0 / .075)
}

.product-review .video-container {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0
}

.product-review .video-thumbnail {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease
}

.product-review .video-thumbnail .thumbnail-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.product-review .video-thumbnail:hover {
    transform: scale(1.02)
}

.product-review .video-thumbnail::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / .4);
    z-index: 1
}

.product-review .play-button {
    width: 55px;
    height: 55px;
    background: rgb(255 255 255 / .95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 30px rgb(0 0 0 / .3)
}

.product-review .play-button:hover {
    transform: scale(1.1);
    background: rgb(255 255 255);
    box-shadow: 0 15px 40px rgb(0 0 0 / .4)
}

.product-review .video-player {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.product-review .video-player.active {
    display: block
}

.product-review .video-thumbnail.hidden {
    display: none
}

.product-review .card-content {
    padding: 20px
}

.product-review .reviewer-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0
}

.product-review .reviewer-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1565c0;
    background: linear-gradient(135deg, #667eea, #1565c0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    text-shadow: none
}

.product-review .review-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px
}

.product-review .review-stars {
    display: flex;
    gap: 2px
}

.product-review .review-stars .star {
    font-size: 18px;
    color: gold;
    filter: drop-shadow(1px 1px 1px rgb(0 0 0 / .2))
}

.product-review .rating-summary .star.star-half {
    position: relative;
    display: inline-block;
    color: lightgray
}

.product-review .rating-summary .star.star-half::before {
    content: "★";
    color: gold;
    position: absolute;
    width: 50%;
    overflow: hidden
}

.product-review .review-date {
    color: #666;
    font-size: .85rem;
    font-weight: 500;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid #e9ecef
}

.product-review .review-text {
    color: #444;
    line-height: 1.7;
    font-size: 1rem;
    position: relative;
    padding-left: 20px
}

.product-review .review-text::before {
    content: '"';
    position: absolute;
    left: -6px;
    top: -18px;
    font-size: 3rem;
    color: #667eea;
    opacity: .3;
    font-family: serif
}

@media (max-width:768px) {
    .product-review .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .product-review .video-container {
        height: 200px
    }

    .product-review .play-button {
        width: 60px;
        height: 60px;
        font-size: 24px
    }

    .product-review .reviewer-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .product-review .review-meta {
        align-items: flex-start;
        flex-direction: row;
        gap: 15px
    }
}

@media (max-width:480px) {
    .product-review .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .product-review .video-container {
        height: 180px
    }

    .product-review .card-content {
        padding: 20px
    }

    .product-review .play-button {
        width: 50px;
        height: 50px;
        font-size: 20px
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.product-review .testimonial-card {
    animation: fadeInUp 0.6s ease forwards
}

.product-review .testimonial-card:nth-child(1) {
    animation-delay: 0.1s
}

.product-review .testimonial-card:nth-child(2) {
    animation-delay: 0.2s
}

.product-review .testimonial-card:nth-child(3) {
    animation-delay: 0.3s
}

.product-review .testimonial-card:hover .play-button {
    transform: scale(1.1)
}

.product-review .testimonial-card:hover .reviewer-name {
    background: linear-gradient(135deg, #764ba2, #667eea);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0
}

.dailyNesw-sec {
    background-color: #f8f9fa;
    padding: 20px 12px 50px
}

.dailyDose-container {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden
}

.dailyDose-container .main-header,
.category-title,
.section-title {
    padding: 16px 20px;
    background-color: #fff;
    border-bottom: 0 solid #e1e4e8;
    border: 1px solid #e1e4e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid #146fb0;
    padding-left: 10px
}

.dailyDose-container .sidebar-header {
    border-left: 5px solid #146fb0;
    padding-left: 10px
}

.dailyDose-container .main-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #24292e;
    text-transform: uppercase;
    letter-spacing: .5px
}

.dailyDose-container .see-all {
    background-color: #0366d6;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 1px solid #e1e4e8;
    padding: 4px 8px;
    border-radius: 3px;
    transition: all 0.2s;
    font-weight: 700
}

.dailyDose-container .see-all:hover {
    background-color: #fff0;
    color: #24292e
}

.dailyDose-container .content-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    min-height: 600px;
    gap: 20px
}

.dailyDose-container .main-section {
    display: flex;
    flex-direction: column
}

.dailyDose-container .main-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    flex: 1;
    margin-top: 20px
}

.dailyDose-container .news-card {
    position: relative;
    border: 1px solid #e1e4e8;
    overflow: hidden;
    transition: all 0.2s;
    display: flex;
    flex-direction: column
}

.dailyDose-container .news-card:hover {
    background-color: #f6f8fa
}

.dailyDose-container .main-content a {
    text-decoration: none;
    background-color: #fff
}

.dailyDose-container .news-card-img {
    overflow: hidden;
    position: relative
}

.dailyDose-container .news-card-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #00000017;
    width: 100%;
    height: 100%
}

.dailyDose-container .main-content a:hover img {
    transform: scale(1.2)
}

.dailyDose-container .news-image {
    width: 100%;
    height: 100%;
    display: block;
    transition: all 0.5s ease
}

.dailyDose-container .news-info {
    padding: 15px
}

.dailyDose-container .news-title {
    font-size: 1rem;
    font-weight: 600;
    color: #24292e;
    line-height: 1.3;
    margin-bottom: 8px
}

.dailyDose-container .news-date {
    font-size: 12px;
    font-weight: 600;
    color: #0366d6;
    text-transform: uppercase;
    letter-spacing: .5px
}

.dailyDose-container .news-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: #0366d6;
    color: #fff;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px
}

.dailyDose-container .sidebar {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #e1e4e8
}

.dailyDose-container .sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e1e4e8;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.dailyDose-container .sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: #24292e;
    text-transform: uppercase;
    letter-spacing: .5px
}

.dailyDose-container .sidebar-item:hover .sidebar-headline {
    text-decoration: underline
}

.dailyDose-container .sidebar-item {
    padding: 12px 20px;
    border-bottom: 1px solid;
    transition: background-color 0.2s;
    text-decoration: none;
    display: block
}

.dailyDose-container .sidebar-item:hover {
    background-color: #fff
}

.dailyDose-container .sidebar-item:last-child {
    border-bottom: none
}

.dailyDose-container .sidebar-date {
    font-size: 12px;
    color: #0366d6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px
}

.dailyDose-container .sidebar-headline {
    font-size: 1rem;
    font-weight: 500;
    color: #24292e;
    line-height: 1.3
}

.articleTitle-sec {
    display: flex;
    gap: 10px;
    width: 100%
}

.articleImg {
    max-width: 50px;
    height: 50px;
    overflow: hidden;
    width: 100%
}

.articleImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right
}

@media (max-width:768px) {
    .dailyDose-container .content-grid {
        grid-template-columns: 1fr
    }

    .dailyDose-container .main-content {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto
    }
}

@media (max-width:480px) {
    .dailyDose-container .main-content {
        grid-template-columns: 1fr
    }

    .dailyDose-container .header,
    .dailyDose-container .sidebar-header {
        padding: 12px 16px
    }

    .dailyDose-container .news-info {
        padding: 12px
    }

    .dailyDose-container .sidebar-item {
        padding: 10px 16px
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background: rgb(255 255 255 / .95);
    border-radius: 20px;
    overflow: hidden
}

.table-container {
    padding: 30px
}

.table-wrapper {
    background: #fff;
    border-radius: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.table-scroll {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: auto
}

.table-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.table-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px
}

.table-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px
}

.table-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8
}

.table-header {
    background: #1565c0;
    padding: 20px 30px
}

.table-header h5 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px
}

.table-header p {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 22px
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem
}

th,
td {
    padding: 16px 20px;
    text-align: left;
    border: 1px solid #e2e8f0
}

th {
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .5px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgb(0 0 0 / .1)
}

tr:hover {
    background: #f8fafc
}

.upComing-Sec tr td a:hover .stock-code {
    color: #334155
}

.stock-code {
    font-weight: 700;
    color: #667eea;
    font-size: 1rem
}

.company-name {
    font-weight: 500;
    color: #334155
}

.yield-badge {
    background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: .85rem;
    display: inline-block;
    min-width: 60px;
    text-align: center
}

.type-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px
}

.type-interim {
    background: #dbeafe;
    color: #1e40af
}

.type-final {
    background: #dcfce7;
    color: #166534
}

.franking-bar {
    background: #e2e8f0;
    border-radius: 10px;
    height: 8px;
    position: relative;
    margin: 5px 0
}

.franking-fill {
    background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%);
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease
}

.franking-text {
    font-size: .8rem;
    color: #64748b;
    margin-top: 2px
}

/* ---- Upcoming Dividends — professional polish (scoped) ---- */
.upComing-Sec {
    padding: 20px 12px 40px
}

.upComing-Sec .table-container {
    max-width: 1200px;
    margin: 0 auto
}

.upComing-Sec .table-wrapper {
    box-shadow: 0 12px 34px rgb(15 23 42 / .10);
    border: 1px solid #e8edf3
}

.upComing-Sec .table-header {
    background: linear-gradient(120deg, #0d47a1 0%, #1565c0 55%, #1e88e5 100%);
    padding: 22px 28px
}

.upComing-Sec .th-lead {
    display: flex;
    align-items: flex-start;
    gap: 16px
}

.upComing-Sec .th-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgb(255 255 255 / .16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem
}

.upComing-Sec .table-header h5 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px
}

.upComing-Sec .div-count {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    background: rgb(255 255 255 / .18);
    border: 1px solid rgb(255 255 255 / .28);
    padding: 3px 10px;
    border-radius: 999px
}

.upComing-Sec .table-header p {
    font-size: .92rem;
    opacity: .92;
    max-width: 760px
}

/* Alignment + numeric legibility (scoped so global table rules stay intact) */
.upComing-Sec .div-table td,
.upComing-Sec .div-table th {
    vertical-align: middle
}

/* ------------------------------------------------------------------
 * Sortable column headers.
 *
 * The header was already sticky with a shadow, so the affordance has to
 * come from the cursor, the hover and the icon rather than from adding
 * another border or background — anything heavier fights the sticky
 * shadow and makes the row look detached when scrolled.
 * ------------------------------------------------------------------ */
.upComing-Sec .div-table th.th-sort {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease
}

.upComing-Sec .div-table th.th-sort:hover {
    background: #eef2f7;
    color: #1565c0
}

/* Visible focus ring — these carry tabindex and role=button, so keyboard
   users must be able to see which column they are about to sort. inset so
   the outline is not clipped by the sticky header's overflow. */
.upComing-Sec .div-table th.th-sort:focus-visible {
    outline: 2px solid #1565c0;
    outline-offset: -2px;
    color: #1565c0
}

.upComing-Sec .div-table th.th-sort .sort-ico {
    margin-left: 6px;
    font-size: .72em;
    opacity: .38;
    transition: opacity .15s ease
}

.upComing-Sec .div-table th.th-sort:hover .sort-ico {
    opacity: .7
}

/* The active column keeps its icon at full strength and tints the label,
   so which column is driving the order is readable at a glance rather
   than needing the icon direction to be decoded. */
.upComing-Sec .div-table th.is-asc,
.upComing-Sec .div-table th.is-desc {
    color: #1565c0;
    background: #eaf2fd
}

.upComing-Sec .div-table th.is-asc .sort-ico,
.upComing-Sec .div-table th.is-desc .sort-ico {
    opacity: 1;
    color: #1565c0
}

/* Right-aligned numeric headers put the icon between the label and the
   edge; nudge it back so the column of figures below still lines up with
   the heading rather than sitting under the icon. */
.upComing-Sec .div-table th.num.th-sort .sort-ico {
    margin-left: 5px;
    margin-right: -2px
}

.upComing-Sec .div-table th.num,
.upComing-Sec .div-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.upComing-Sec .div-table th.ctr,
.upComing-Sec .div-table td.ctr {
    text-align: center
}

.upComing-Sec .div-table td.nowrap {
    white-space: nowrap;
    color: #475569;
    font-variant-numeric: tabular-nums
}

.upComing-Sec .div-table tbody tr {
    transition: background .15s ease
}

.upComing-Sec .div-table tbody tr:hover {
    background: #eef4fd
}

/* Ticker chip + links */
.upComing-Sec .code-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none
}

.upComing-Sec .code-link .stock-code {
    color: #0d47a1;
    font-weight: 800;
    letter-spacing: .3px
}

.upComing-Sec .code-go {
    font-size: .62rem;
    color: #94a3b8;
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity .15s ease, transform .15s ease
}

.upComing-Sec .code-link:hover .code-go {
    opacity: 1;
    transform: translateX(0)
}

.upComing-Sec .name-link {
    text-decoration: none
}

.upComing-Sec .name-link:hover .company-name {
    color: #1565c0;
    text-decoration: underline
}

/* Yield badge — emphasise as the key figure */
.upComing-Sec .yield-badge {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 2px 6px rgb(21 128 61 / .28);
    min-width: 66px
}

/* Ex-dividend — the date investors watch */
.upComing-Sec .exdiv-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #0d47a1;
    background: #e8f1fd;
    border: 1px solid #cfe0fa;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: .82rem
}

.upComing-Sec .exdiv-date i {
    font-size: .78rem;
    color: #1565c0
}

/* Franking bar sizing */
.upComing-Sec .franking-bar {
    min-width: 84px;
    max-width: 120px
}

/* ------------------------------------------------------------------
 * ESTIMATED values (066).
 *
 * One rule governs all of these: an estimate must never be able to pass
 * for a confirmed figure at a glance. Confirmed cells are solid and
 * saturated; estimates are outlined, desaturated and carry a literal
 * "est." tag. Colour alone is not enough — the tag is what survives
 * greyscale printing, a colour-blind reader, and a screenshot pasted
 * into a client email, which is exactly how this table travels.
 * ------------------------------------------------------------------ */
.est-marker {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
    vertical-align: baseline
}

.upComing-Sec .est-val {
    color: #64748b;
    font-weight: 600
}

/* Franking: the bar still draws, because a level reads better as a bar
   than as text — but flat and grey-blue rather than the confirmed
   gradient, and never at full opacity. */
.upComing-Sec .franking-bar--est {
    background: #eef2f7;
    border: 1px dashed #cbd5e1
}

.upComing-Sec .franking-fill--est {
    background: #b6c6da;
    opacity: .85
}

.upComing-Sec .franking-text--est {
    color: #7c8ba1;
    font-style: italic
}

.upComing-Sec .franking-text--est .est-marker {
    font-style: normal
}

/* Type: keeps its interim/final hue so the badge is still scannable,
   but hollowed out — border instead of fill. */
.upComing-Sec .type-badge--est {
    background: transparent;
    border: 1px dashed currentColor;
    opacity: .8;
    font-weight: 500
}

/* Yield, estimated: the confirmed badge is a solid green pill, so this
   is the same shape unfilled. */
.upComing-Sec .yield-badge--est {
    background: transparent;
    border: 1px dashed #94a3b8;
    color: #64748b;
    box-shadow: none;
    font-weight: 600
}

/* Yield, forward annual: a DIFFERENT quantity, not a weaker one, so it
   is neither muted nor green — a distinct slate-blue, with the unit
   spelled out. The unit is the part that stops a 4.31% annual figure
   being compared against a 2.95% single payment. */
.upComing-Sec .yield-badge--fwd {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: 0 2px 6px rgb(71 85 105 / .24);
    color: #fff
}

.upComing-Sec .yield-badge--fwd .yield-unit {
    font-size: .66rem;
    font-weight: 700;
    opacity: .85;
    letter-spacing: .02em
}

/* The em-dash cells are informational, so make it obvious they can be
   interrogated rather than looking like a rendering failure. */
.upComing-Sec td [title] {
    cursor: help
}

/* Empty state */
.upComing-Sec .div-empty-row td {
    padding: 0
}

.upComing-Sec .div-empty {
    text-align: center;
    padding: 52px 20px;
    color: #64748b
}

.upComing-Sec .div-empty i {
    font-size: 2.1rem;
    color: #b6c2d3;
    margin-bottom: 12px
}

.upComing-Sec .div-empty p {
    font-size: 1.02rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px
}

.upComing-Sec .div-empty span {
    font-size: .86rem
}

@media (max-width:768px) {
    .upComing-Sec .table-header {
        padding: 18px 18px
    }
    .upComing-Sec .th-ico {
        display: none
    }
    .upComing-Sec .div-table td,
    .upComing-Sec .div-table th {
        padding: 12px 14px
    }
}

.category-section {
    padding: 50px 12px;
    max-width: 1200px;
    margin: auto
}

.category-title,
.section-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: #24292e;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 30px
}

.section-title h2 {
    margin-bottom: 0
}

.section-title {
    margin-bottom: 30px
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px
}

.category-card {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgb(0 0 0 / .08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-decoration: none
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgb(0 0 0 / .15)
}

.category-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    overflow: hidden
}

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

.category-content {
    padding: 20px
}

.category-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1565c0;
    margin-bottom: 8px
}

.category-content p {
    color: #58677d;
    font-size: .9rem;
    line-height: 1.5
}

.category-con {
    margin-top: 30px
}

.category-con p {
    margin-bottom: 10px
}

.Divifooter {
    background: #333;
    color: #94a3b8;
    padding: 10px 20px;
    text-align: left
}

.Divifooter p {
    font-size: .9rem;
    line-height: 1.6
}

.Divifooter strong {
    color: #e2e8f0
}

@media (max-width:768px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        padding: 20px
    }

    .stat-card {
        padding: 20px
    }

    .table-container {
        padding: 20px
    }

    th,
    td {
        padding: 12px 15px;
        font-size: .85rem
    }
}

@media (max-width:480px) {
    .stats-grid {
        grid-template-columns: 1fr;
        padding: 15px
    }

    th,
    td {
        padding: 10px 12px;
        font-size: .8rem
    }

    .table-container {
        padding: 10px 0
    }
}

.upComing-Sec,
.product-review {
    background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%);
    padding: 50px 12px;
    position: relative;
    z-index: 0
}

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #007bff;
    color: #fff;
    border: none;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    box-shadow: 2px 2px 20px rgb(0 0 0 / .3);
    z-index: 999
}

.scroll-to-top:hover {
    background-color: #0056b3
}

.scroll-to-top.visible {
    opacity: 1
}

.faq {
    width: 100%;
    padding: 50px 12px;
    background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%)
}

.faq .container-fluid {
    max-width: 1200px;
    margin: 0 auto
}

.faq .content-subtitle {
    font-size: 15px;
    margin-bottom: 10px;
    display: block;
    color: var(--default-color)
}

.faq .content-title {
    color: var(--heading-color);
    font-size: 22px;
    margin-bottom: 30px
}

.faq p {
    line-height: 1.7;
    color: var(--default-color)
}

.faq .custom-accordion .accordion-item {
    background-color: var(--surface-color);
    margin-bottom: 20px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #159ad5
}

.btn-link.collapsed {
    border-bottom: 0 !important
}

.btn-link {
    border-bottom: 1px solid #159ad5 !important;
    cursor: pointer
}

.faq .custom-accordion .accordion-item:last-child {
    margin-bottom: 0
}

.faq .custom-accordion .accordion-item .btn-link {
    display: block;
    width: 100%;
    white-space: wrap !important;
    padding: 15px 50px 15px 10px;
    text-decoration: none;
    text-align: left;
    color: var(--default-color);
    border: none;
    border-radius: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    font-size: 16px
}

.faq .custom-accordion .accordion-item .collapse.show {
    border-top: 1px solid #159ad5
}

.faq .custom-accordion .accordion-item p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7
}

.faq .custom-accordion .accordion-item .btn-link span {
    background-color: #159ad5;
    color: #fff;
    font-weight: 500;
    min-width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 12px
}

.faq .custom-accordion .accordion-item .btn-link:before {
    content: "\f282";
    display: inline-block;
    color: #159ad5;
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px
}

.faq .custom-accordion .accordion-item .btn-link[aria-expanded="true"] {
    color: var(--accent-color)
}

.faq .custom-accordion .accordion-item .btn-link[aria-expanded="true"]:before {
    font-family: "bootstrap-icons" !important;
    content: "\f286";
    color: #159ad5;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.faq .custom-accordion .accordion-item .accordion-body {
    padding: 20px 20px 20px 10px;
    background: #fff;
    color: var(--default-color)
}

.googleReview {
    padding: 50px 12px;
    position: relative
}

.googleReview .container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: unset;
    box-shadow: unset;
    padding: 0
}

.googleReview .swiper-slide {
    height: auto !important
}

.review-header {
    text-align: center;
    margin-bottom: 35px;
    animation: fadeInUp 0.8s ease-out
}

.testi-title {
    font-size: clamp(1rem, 2vw, 2rem);
    font-weight: 700;
    color: #24292e;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgb(0 0 0 / .2)
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    background: rgb(255 255 255 / .15);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / .2);
    padding: 15px 25px;
    border-radius: 50px;
    color: #24292e;
    font-weight: 600;
    box-shadow: 0 8px 32px rgb(0 0 0 / .1)
}

.rating-text {
    font-size: 1.1rem
}

.rating-count {
    color: #ffeb3b;
    text-decoration: underline;
    font-weight: 700
}

.reviewSlide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px
}

.reviewCard {
    background: rgb(255 255 255 / .95);
    border-radius: 5px;
    padding: 30px;
    border: 1px solid rgb(255 255 255 / .2);
    transform: translateY(20px);
    opacity: 0;
    animation: slideInUp 0.8s ease-out forwards;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid #eee
}

.reviewCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1e88e5, #1976d2, #0d47a1);
    transform: scaleX(0);
    transition: transform 0.3s ease
}

.reviewCard:hover {
    transform: translateY(-10px)
}

.reviewCard:hover::before {
    transform: scaleX(1)
}

.reviewCard:nth-child(1) {
    animation-delay: 0.1s
}

.reviewCard:nth-child(2) {
    animation-delay: 0.3s
}

.reviewCard:nth-child(3) {
    animation-delay: 0.5s
}

.reviewCard:nth-child(4) {
    animation-delay: 0.7s
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px
}

.customer-info {
    display: flex;
    align-items: center;
    gap: 15px
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e88e5, #1976d2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgb(30 136 229 / .3)
}

.customer-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1565c0;
    margin-bottom: 5px
}

.stars {
    display: flex;
    gap: 2px
}

.fa-star {
    color: #ffc107;
    font-size: 1rem;
    text-shadow: 0 1px 3px rgb(0 0 0 / .1)
}

.google-logo {
    width: 30px;
    height: 30px;
    opacity: .8
}

.testimonial-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #424242;
    font-weight: 400;
    position: relative;
    overflow-y: auto;
    max-height: 100px;
    scrollbar-width: auto;
    scrollbar-width: thin;
    scrollbar-width: none
}

.quote-icon {
    position: absolute;
    top: -10px;
    left: -20px;
    font-size: 20px;
    color: #1e88e5;
    opacity: .2
}

.floating-element {
    position: absolute;
    border-radius: 50%;
    background: rgb(255 255 255 / .1);
    animation: float 6s ease-in-out infinite
}

.floating-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    right: 5%;
    animation-delay: 0s
}

.floating-2 {
    width: 120px;
    height: 120px;
    bottom: 15%;
    left: 3%;
    animation-delay: 2s
}

.floating-3 {
    width: 60px;
    height: 60px;
    top: 60%;
    right: 8%;
    animation-delay: 4s
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-20px) rotate(180deg)
    }
}

@media (max-width:768px) {
    .reviewSlide {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .reviewCard {
        padding: 25px;
        margin: 0 10px
    }

    .review-header {
        margin-bottom: 20px
    }

    .reviewSlide {
        margin-top: 20px
    }

    .dailyDose-container .main-header h2,
    .dailyDose-container .sidebar-title,
    .category-title,
    .section-title h2 {
        font-size: 16px !important;
        font-weight: 700
    }

    .product-review .header .pr-do-not-use-ffba-a-8wanz6 {
        width: 280px
    }

    .rating-badge {
        gap: 5px;
        padding: 12px 20px;
        width: 100%
    }
}

@media (max-width:480px) {
    .googleReview {
        padding: 40px 10px
    }

    .reviewCard {
        padding: 20px;
        margin: 0 5px
    }

    .customer-info {
        gap: 10px
    }

    .avatar {
        width: 45px;
        height: 45px;
        font-size: 1.1rem
    }

    .customer-name {
        font-size: 1.1rem
    }
}

.footer {
    background: linear-gradient(135deg, #07080c 0%, #131212 100%);
    color: #fff;
    padding: 0 12px 20px;
    margin-bottom: 0
}

.footer-column {
    position: relative
}

.footer-column::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -10px;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #00bfff, transparent);
    animation: lineScroll 4s linear infinite;
    opacity: .7
}

@keyframes lineScroll {
    0% {
        top: -100%
    }

    100% {
        top: 100%
    }
}

.footer-column:nth-child(1)::before {
    animation-delay: 0s
}

.footer-column:nth-child(2)::before {
    animation-delay: 1s
}

.footer-column:nth-child(3)::before {
    animation-delay: 2s
}

.footer-column:nth-child(4)::before {
    animation-delay: 3s
}

@media (max-width:991px) {
    .footer-column::before {
        display: none
    }
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto
}

.footer-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: 50px;
    padding: 50px 0;
    overflow: hidden
}

.footer .newsletter-column {
    display: contents
}

.footer .newsletter-section-wrapper {
    grid-column: 4;
    grid-row: 1
}

.footer-column h3 {
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 600;
    position: relative;
    padding-bottom: 12px
}

.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, #0099ff);
    border-radius: 2px
}

.footer .logo-section {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.footer .logo img {
    width: 180px;
    height: auto;
    display: block
}

.footer .contact-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 14px;
    line-height: 1.8
}

.footer .contact-item {
    display: flex;
    gap: 12px;
    align-items: baseline
}

.footer .contact-item i {
    color: #00d4ff;
    font-size: 16px
}

.footer .contact-item a {
    color: #fff;
    text-decoration: none
}

.footer .social-links {
    display: flex;
    gap: 15px;
    margin-top: 10px
}

.footer .social-links a {
    width: 40px;
    height: 40px;
    background: rgb(255 255 255 / .1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px)
}

.footer .social-links a:hover {
    background: linear-gradient(135deg, #00d4ff, #0099ff);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgb(0 212 255 / .4)
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.footer-links li {
    position: relative;
    padding-left: 18px
}

.footer-links li::before {
    content: '▪';
    position: absolute;
    left: 0;
    color: #00d4ff;
    font-size: 18px;
    line-height: normal
}

.footer-links a {
    color: rgb(255 255 255 / .8);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-block
}

.footer-links a:hover {
    color: #00d4ff;
    padding-left: 2px
}

.footer .newsletter-section {
    background: rgb(255 255 255 / .05);
    padding: 15px;
    border-radius: 5px;
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / .1)
}

.footer .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px
}

.footer .newsletter-form input {
    padding: 14px 20px;
    border: 1px solid rgb(255 255 255 / .2);
    background: rgb(255 255 255 / .1);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease
}

.footer .newsletter-form input::placeholder {
    color: rgb(255 255 255 / .5)
}

.footer .newsletter-form input:focus {
    border-color: #00d4ff;
    background: rgb(255 255 255 / .15)
}

.footer .subscribe-btn {
    padding: 14px 30px;
    background: linear-gradient(135deg, #00d4ff, #0099ff);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px
}

.footer .subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(0 212 255 / .4)
}

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgb(255 255 255 / .1);
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
    color: rgb(255 255 255 / .6)
}

@media (max-width:1200px) {
    .footer-content {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 40px
    }

    .footer .newsletter-section-wrapper {
        grid-column: 1 / -1
    }
}

@media (max-width:768px) {
    .footer {
        padding: 40px 20px 20px
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 0
    }

    .footer-column {
        border-bottom: 1px solid rgb(255 255 255 / .1)
    }

    .footer-column:first-child {
        border-bottom: none;
        margin-bottom: 20px
    }

    .footer-column:last-child {
        border-bottom: none
    }

    .footer-column:not(:first-child) h3 {
        font-size: 18px;
        margin-bottom: 0;
        padding: 20px 0;
        cursor: pointer;
        position: relative;
        user-select: none
    }

    .footer-column:not(:first-child) h3::after {
        display: none
    }

    .footer-column:not(:first-child) h3::before {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
        font-size: 14px
    }

    .footer-column:not(:first-child) h3.active::before {
        transform: translateY(-50%) rotate(180deg)
    }

    .footer-column:not(:first-child) .footer-links {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease
    }

    .footer-column:not(:first-child) h3.active+.footer-links {
        max-height: 1000px;
        padding-bottom: 20px
    }

    .footer .newsletter-section-wrapper {
        grid-column: 1;
        max-height: none;
        overflow: visible;
        margin-top: 0;
        border-top: 1px solid rgb(255 255 255 / .1);
        padding-top: 20px
    }

    .footer .newsletter-section-wrapper .newsletter-section {
        margin-top: 0 !important
    }

    .footer .newsletter-section-wrapper h3 {
        padding: 0 !important;
        margin-bottom: 15px !important;
        cursor: default !important
    }

    .footer .newsletter-section-wrapper h3::before {
        display: none !important
    }

    .footer .newsletter-section {
        padding: 25px 20px
    }

    .footer .contact-info {
        font-size: 13px
    }

    .footer-bottom {
        font-size: 12px
    }

    .footer-content {
        padding: 30px 0
    }

    .footer-bottom {
        padding-top: 20px
    }
}

@media (max-width:480px) {
    .footer {
        padding: 0 15px 15px
    }

    .footer .social-links a {
        width: 36px;
        height: 36px
    }

    .footer .newsletter-form input,
    .footer .subscribe-btn {
        padding: 12px 18px;
        font-size: 13px
    }
}

.az-list form button.alphabet-btn {
    background: #333;
    padding: 8px 12px;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    cursor: pointer;
    border: none
}

.az-list form button.alphabet-btn:hover {
    background: #00b4ff
}

.az-list a:hover {
    background: #00b4ff
}

.footer {
    background: linear-gradient(135deg, #07080c 0%, #131212 100%);
    color: #fff;
    padding: 0 12px 20px;
    margin-bottom: 0
}

.footer-column {
    position: relative
}

.footer-column::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -10px;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #00bfff, transparent);
    animation: lineScroll 4s linear infinite;
    opacity: .7
}

@keyframes lineScroll {
    0% {
        top: -100%
    }

    100% {
        top: 100%
    }
}

.footer-column:nth-child(1)::before {
    animation-delay: 0s
}

.footer-column:nth-child(2)::before {
    animation-delay: 1s
}

.footer-column:nth-child(3)::before {
    animation-delay: 2s
}

.footer-column:nth-child(4)::before {
    animation-delay: 3s
}

@media (max-width:991px) {
    .footer-column::before {
        display: none
    }
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto
}

.footer-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: 50px;
    padding: 50px 0;
    overflow: hidden
}

.footer .newsletter-column {
    display: contents
}

.footer .newsletter-section-wrapper {
    grid-column: 4;
    grid-row: 1
}

.az-list {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    padding-top: 20px;
    border-top: 1px solid rgb(255 255 255 / .1);
    margin-bottom: 20px
}

.az-content h3 {
    margin-bottom: 20px
}

.footer-column h3,
.az-content h3 {
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 600;
    position: relative;
    padding-bottom: 12px
}

.footer-column h3::after,
.az-content h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, #0099ff);
    border-radius: 2px
}

.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, #0099ff);
    border-radius: 2px
}

.footer .logo-section {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.footer .logo img {
    width: 180px;
    height: auto;
    display: block
}

.footer .contact-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 14px;
    line-height: 1.8
}

.footer .contact-item {
    display: flex;
    gap: 12px
}

.welcome-section {
    background: #fff;
    border-radius: 12px;
    padding: 40px 20px
}

.welcome-text {
    /* font-size: 32px; */
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    border-bottom: 2px solid #333;
    padding-bottom: 10px
}

.welcome-text span {
    color: #667eea
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px
}

.product-card {
    background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgb(102 126 234 / .3)
}

.product-card a {
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    display: block;
    transition: all 0.2s ease
}

.product-card:hover a {
    color: #fffacd
}

@media (max-width:768px) {
    .welcome-text {
        font-size: 24px;
        margin-bottom: 20px
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px
    }

    .product-card {
        padding: 15px
    }

    .product-card a {
        font-size: 14px
    }
}

@media (max-width:480px) {
    .welcome-section {
        padding: 20px 15px
    }

    .welcome-text {
        font-size: 20px
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .product-card {
        padding: 12px
    }

    .product-card a {
        font-size: 13px
    }

    .login-btn,
    .country-btn {
        padding: 6px
    }
}

.account-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgb(0 0 0 / .2);
    min-width: 200px;
    margin-top: 8px;
    display: none;
    z-index: 1000;
    overflow: hidden
}

.account-dropdown.active {
    display: block
}

.account-dropdown a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid #eee
}

.account-dropdown a:last-child {
    border-bottom: none
}

.account-dropdown a:hover {
    background: #667eea;
    color: #fff;
    padding-left: 25px
}

.account-section {
    position: relative;
    display: inline-block;
    height: 100%
}

.account-section a.login-btn span {
    margin-left: 6px;
    line-height: normal
}

.account-section a.login-btn,
.referFrend {
    border: 1px solid #dee2e6;
    background: #f8f9fa
}

.indexImg-con img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.indexImg-con {
    margin-top: 30px
}

.policy-content-sec.mt-0 {
    margin-top: 0
}

.tradingchart {
    height: 500px;
    margin-bottom: 50px
}

.tradingchart .tradingview-widget-container iframe {
    pointer-events: auto
}

.tradingview-widget-copyright {
    display: none
}

.kapitales-journey {
    padding: 40px 0
}

.kapi-journy-con {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.kapi-journy-img img {
    width: 100%;
    max-width: 500px;
    height: auto
}

.indexImg-con.mx-600 {
    max-width: 600px
}

.report-faq-container {
    max-width: 800px;
    margin: 0 auto
}

.report-faq-item {
    background: #fff;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .1);
    overflow: hidden
}

.report-faq-question {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    user-select: none
}

.report-faq-question:hover {
    background-color: #f8f8f8
}

.report-faq-item.active .faq-question {
    background-color: #667eea;
    color: #fff
}

.report-faq-toggle {
    font-size: 24px;
    transition: transform 0.3s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.report-faq-item.active .report-faq-toggle {
    transform: rotate(180deg)
}

.report-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease
}

.report-faq-item.active .report-faq-answer {
    max-height: 500px
}

.report-faq-answer-content {
    padding: 20px;
    color: #555;
    line-height: 1.8;
    background-color: #fafafa
}

.report-faq-answer ul {
    margin-left: 20px;
    margin-top: 10px
}

.report-faq-answer li {
    margin-bottom: 8px;
    color: #666
}

.junerySec {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .1);
    margin-bottom: 25px;
    overflow: hidden
}

.junerySec-title {
    background-color: #0284c7;
    color: #fff;
    padding: 15px;
    font-weight: 700;
    font-size: 14px
}

.junery-table-sec .table-wrapper {
    overflow-x: auto;
    border-radius: 0
}

.junery-table-sec table {
    width: 100%;
    border-collapse: collapse
}

.junery-table-sec thead tr {
    background-color: #0369a1;
    color: #fff
}

.junery-table-sec th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap
}

.junery-table-sec td {
    padding: 12px 15px;
    font-size: 13px;
    border-bottom: 1px solid #e5e7eb
}

.junery-table-sec tbody tr:nth-child(even) {
    background-color: #f9fafb
}

.junery-table-sec tbody tr:hover {
    background-color: #eff6ff
}

.junery-table-sec .ticker {
    font-weight: 700;
    color: #0284c7
}

.junery-table-sec .growth {
    font-weight: 700;
    color: #0284c7
}

.new-badge {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    animation: pulse 1.5s infinite
}

.newAchive {
    display: flex;
    gap: 10px;
    align-items: baseline
}

.newAchive i {
    color: #007bff
}

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

    50% {
        transform: scale(1.2);
        opacity: .8
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@media (max-width:768px) {

    .junery-table-sec th,
    td {
        padding: 8px 10px;
        font-size: 12px
    }

    .junerySec-title {
        padding: 10px;
        font-size: 12px
    }

    .tradingview-widget-container.htv {
        height: 75px !important
    }

    .tradingview-widget-container iframe {
        height: 100% !important
    }
}

.profile-con {
    padding: 30px 0
}

.profile-con .mxw-800,
.profile-con .mxw-1200 {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgb(0 0 0 / .1)
}

.profile-con .mxw-1200 {
    max-width: 1200px
}

.profile-con .mxw-800.mx-420 {
    max-width: 420px
}

.refer-head .logo img {
    width: 150px
}

.refer-head p {
    font-size: 14px
}

.refer-head {
    text-align: center;
    margin-bottom: 20px
}

.profile-con h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 30px
}

.profile-con .subscription-header {
    background: #90EE90;
    padding: 8px 15px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 700
}

.profile-con .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 20px
}

.profile-con .info-item {
    flex: 1;
    min-width: 200px
}

.profile-con .info-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px
}

.profile-con .info-value {
    font-size: 14px;
    color: #333;
    font-weight: 400
}

.profile-con .input-group {
    margin-bottom: 20px;
    position: relative
}

.profile-con .input-field {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s
}

.profile-con .input-field:focus {
    border-color: #17a2b8
}

.profile-con .input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 18px
}

.profile-con .btn-update {
    width: 100%;
    max-width: 420px;
    padding: 15px;
    background: #17a2b8;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    display: block;
    margin: 30px auto 0
}

.profile-con .btn-update:hover {
    background: #138496
}

.subscription-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    overflow-x: auto;
    display: block;
    position: relative;
    z-index: 1
}

.subscription-table table {
    width: 100%;
    min-width: 600px
}

.subscription-table th {
    background: #3a3a3a;
    color: #fff;
    padding: 15px;
    text-align: left;
    font-weight: 600
}

.subscription-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd
}

.subscription-table th,
.subscription-table td {
    font-size: 14px
}

.btn-unsubscribe {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    transition: background 0.3s
}

.btn-unsubscribe:hover {
    background: #c82333
}

@media (max-width:768px) {
    .profile-con .mxw-800 {
        padding: 20px
    }

    .profile-con h1 {
        font-size: 24px
    }

    .profile-con .info-row {
        flex-direction: column
    }

    .subscription-table {
        font-size: 14px
    }

    .ticker-tab-con {
        flex-wrap: wrap
    }
}

@media (max-width:480px) {
    .profile-con .mxw-800 {
        padding: 15px
    }

    .profile-con h1 {
        font-size: 20px
    }

    .profile-con .input-field {
        padding: 12px 12px 12px 40px
    }

    .profile-con .btn-update {
        font-size: 14px
    }

    .ticker-tab {
        width: 100%
    }
}

.profile-ticker-sec {
    padding: 50px 0
}

.ticker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 20px
}

.ticker-head a {
    background-color: #007bff;
    padding: 10px;
    color: #fff;
    border: 1px solid #007bff;
    border-radius: 3px;
    transition: all 0.4s ease;
    font-weight: 500
}

.ticker-head a:hover {
    background-color: #fff0;
    border: 1px solid #007bff;
    color: #007bff
}

.profile-iframe {
    width: 100%;
    height: 290px;
    overflow: auto
}

.ticker-tab-con {
    display: flex;
    gap: 10px
}

.ticker-tab-sec {
    margin: 15px 0 30px
}

.ticker-tab {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease
}

.ticker-tab:hover {
    background-color: #f5f5f5
}

.ticker-tab.active {
    background-color: #159ad5;
    color: #fff;
    border-color: #159ad5
}

.ticker-tab-content {
    display: none;
    margin-top: 20px;
    border: 1px solid #d9d2d2;
    padding: 10px;
    border-radius: 5px
}

.tradingview-iframe {
    width: 100%;
    height: 400px;
    overflow: auto
}

.ticker-tab-content.active {
    display: block
}

.tradingview-widget-head {
    border: 1px solid #333;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.4s ease;
    margin-bottom: 15px
}

.tradingview-widget-head:hover {
    background-color: #159ad5;
    border: 1px solid #159ad5
}

.tradingview-widget-head:hover :where(a, span) {
    color: #fff
}

.tradingview-widget-head:hover a {
    text-decoration: underline
}

.signup-btn {
    background: linear-gradient(270deg, #159ad5, #00c6ff, #159ad5);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    position: relative;
    overflow: hidden;
    border: none;
    color: #fff
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.signup-btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgb(255 255 255 / .25) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
    pointer-events: none
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.1)
    }
}

@media (max-width:480px) {

    .login-btn,
    .signup-btn {
        width: 100%;
        font-size: 14px
    }
}

.blinkme {
    animation: blinker 1s linear infinite
}

@keyframes blinker {
    50% {
        opacity: .2
    }
}

.marketalert {
    color: red
}

.footer-column {
    position: relative
}

.footer-column::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -10px;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #00bfff, transparent);
    animation: lineScroll 4s linear infinite;
    opacity: .7
}

@keyframes lineScroll {
    0% {
        top: -100%
    }

    100% {
        top: 100%
    }
}

.footer-column:nth-child(1)::before {
    animation-delay: 0s
}

.footer-column:nth-child(2)::before {
    animation-delay: 1s
}

.footer-column:nth-child(3)::before {
    animation-delay: 2s
}

.footer-column:nth-child(4)::before {
    animation-delay: 3s
}

@media (max-width:991px) {
    .footer-column::before {
        display: none
    }
}

.page-number.btn-primary {
    background: #4dd0e1;
    color: #fff
}

.article-inner-content .article-social-sec .social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center
}

article.article-card a {
    display: flex;
    flex-direction: column;
    height: 100%
}

.socail-links-con {
    padding-top: 15px;
    border-top: 1px solid rgb(255 255 255 / .1)
}

@media (max-width:1200px) {
    .footer-content {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 40px !important
    }
}

@media (max-width:768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 30px 0 !important
    }
}

.tradingview-widget-container.company-widget,
.tradingview-widget-container {
    width: 100% !important;
    height: 100% !important
}

.tradingview-widget-container.ecomominCal {
    height: 600px !important
}

.news-card .news-info,
.dailyDose-container .news-info {
    display: flex;
    flex-direction: column;
    flex: 1
}

/*===============21.12.25==============================*/

.auth-buttons .signup-btn.open-modal-btn a{
    color:#fff;
}

.faq .container{
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.faq .container .row{
    display: block;
    margin: 0;
}

.card.cookie-alert .row{
        padding: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin:0;
}

.card.cookie-alert .row .btn-toolbar{
        padding: 0;
}

/* cookie start 21-jan-2026 */
   .cookie-box {
    position: fixed;
    bottom: 30px;
    left: 4vw;
    max-width: 350px;
    background: #fff;
    padding: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    z-index: 9999;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--transition);
    pointer-events: none;
}

.cookie-box.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cookie-text {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #333;
}

.cookie-btn {
    background: #000;
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.cookie-btn:hover {
    opacity: 0.8;
}

@media (max-width: 991px) {
    .kus-grid {
        display: block;
    }

    .item-1,
    .item-2,
    .item-3,
    .item-4 {
        grid-column: span 12 !important;
        margin-top: 0 !important;
    }

    .cookie-box {
        left: 20px;
        right: 20px;
        max-width: none;
    }
}
/* cookie start 21-jan-2026 */


/* --- assets/website/css/CommonServices.css --- */
.commonServices{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);color:#fff;min-height:100vh;overflow-x:hidden}.services-container{padding:50px 20px;max-width:1200px;margin:0 auto;position:relative;z-index:0}.serviceHead{text-align:center;margin-bottom:35px;position:relative;z-index:2}.serviceHead h1{font-size:clamp(2.2rem, 4vw, 3rem);font-weight:700;background:linear-gradient(135deg,#667eea 0%,#159ad5 100%);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text;margin-bottom:10px;letter-spacing:-.02em}.serviceHead p{font-size:1rem;opacity:.8;max-width:1000px;margin:0 auto;line-height:1.6;color:#555}.servicesGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px;position:relative}.serviceCard{background:rgb(255 255 255 / .03);backdrop-filter:blur(20px);border-radius:10px;border:1px solid rgb(0 0 0 / 18%);overflow:hidden;transition:all 0.4s cubic-bezier(.4,0,.2,1);position:relative;cursor:pointer;height:100%;max-width:380px;width:100%;display:flex;flex-direction:column;text-decoration:none}.serviceCard:hover .serviceImg img{transform:scale(1.1)}.serviceImg{height:200px;width:100%;position:relative;overflow:hidden}.serviceImg img{width:100%;height:100%;object-fit:cover;transition:all 0.4s cubic-bezier(.4,0,.2,1)}.serviceContent{padding:15px;text-align:center}.serviceContent h6{font-size:1.5rem;color:#2c3e50!important;font-weight:600;margin-bottom:15px;color:#fff;line-height:1.3}@media (max-width:580px){.serviceCard{max-width:100%}.servicesGrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.serviceImg{height:auto}.serviceContent h6{font-size:1rem;margin-bottom:0}}.parent-breadcrumb{color:#1e88e5;cursor:pointer}.article-con{display:grid;grid-template-columns:2fr 1fr;gap:40px;padding:40px 0}.article-con.grid1{grid-template-columns:1fr}.articles-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}.article-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgb(0 0 0 / .1);transition:all 0.3s ease;position:relative;display:flex;flex-direction:column;height:100%}.article-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgb(0 0 0 / .15)}.article-image{position:relative;height:200px;background-size:cover;background-position:center;overflow:hidden}.article-image img{width:100%;height:100%;object-fit:cover}.tag{position:absolute;top:15px;left:15px;background:#4dd0e1;color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase}
/* A category badge (Daily/Special) is not a cap band, so it does not borrow
   the cap band's colour. Only rendered when `research` is unset -- see
   kap_report_badge(); an empty value now emits no element at all rather than
   a blank pill. */
.tag--cat{background:#7986cb}.logo-overlay{position:absolute;top:15px;right:15px;background:rgb(255 255 255 / .9);padding:8px;border-radius:8px;font-weight:700;font-size:14px;color:#2c5aa0}.article-content{padding:25px;display:flex;flex-direction:column;flex:1;width:100%}.article-date{color:#666;font-size:13px;margin-bottom:10px;display:flex;align-items:center}.article-date::before{content:"📅";margin-right:5px}.article-title{font-size:16px;font-weight:600;color:#2c5aa0;margin-bottom:20px;line-height:1.4}.article-social-sec .article-date{margin-bottom:0;font-weight:600;font-size:16px}.article-social-sec{display:flex;justify-content:space-between;gap:10px;align-items:center}.article-social-sec .social-links{gap:10px;margin-top:0}.article-social-sec .social-links a{background:#1e88e5;color:#fff;width:30px;height:30px}.article-social-sec .social-links a i{font-size:13px}.commentary-content-box{margin-top:40px;padding-top:30px;border-top:1px solid #333}.commentary-content-box :where(p,h2,h3,ul){margin-bottom:15px}.commentary-content-box p strong{display: block;margin: 10px 0;}.commentary-content-box ul{list-style:square;padding-left:2rem}.commentary-content-box ul li{padding:.2rem}.commentary-content-box  table {min-width: auto !important;}.commentary-box{max-width:770px;width:100%;height:auto;overflow:hidden;margin:15px 0}.commentary-box img{width:100%;height:100%;object-fit:cover}.customerNotice{margin-top:50px}.customerNotice p{font-size:14px;font-style:italic}.dailyDose-container.mt-3 .sidebar{margin-top:40px;background:#fff!important}.read-more{background:linear-gradient(135deg,#007bff 0%,#007bff 100%);color:#fff;padding:12px 24px;border:none;border-radius:25px;cursor:pointer;font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.5px;transition:all 0.3s ease;margin-top:auto;width:140px}.read-more:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgb(77 208 225 / .4)}.pagi-container{display:flex;justify-content:center;align-items:center;gap:20px;margin:40px 0;padding:20px}.pagi-arrow{background:linear-gradient(135deg,#2c5aa0 0%,#1e3d72 100%);color:#fff;border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;transition:all 0.3s ease;position:relative;overflow:hidden}.pagi-arrow:hover{box-shadow:0 8px 25px rgb(44 90 160 / .3)}.pagi-arrow:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.pagi-arrow:disabled:hover{transform:none;box-shadow:none}.pagi-arrow::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgb(255 255 255 / .2);border-radius:50%;transform:translate(-50%,-50%);transition:all 0.3s ease}.pagi-arrow:hover::before{width:60px;height:60px}.pagi-info{background:#fff;padding:15px 25px;border-radius:25px;box-shadow:0 4px 15px rgb(0 0 0 / .1);font-weight:600;color:#2c5aa0;min-width:120px;text-align:center}.page-numbers{display:flex;gap:10px;align-items:center}.page-number{width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;font-weight:600;transition:all 0.3s ease;background:#fff;color:#666}.page-number:hover{background:#4dd0e1;color:#fff;transform:translateY(-2px)}.page-number.active{background:linear-gradient(135deg,#4dd0e1 0%,#26c6da 100%);color:#fff}.article-card.hidden{display:none}.articleSidebar{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%);padding:20px;border-radius:20px;height:fit-content;position:sticky;top:20px}.articleSidebar-logo{text-align:center}.articleSidebar-logo img{width:150px}.articleSidebar-title{text-align:center;color:#2c5aa0;font-size:14px;font-weight:600;margin-bottom:20px;text-transform:uppercase;letter-spacing:1px}.download-title{color:#2c5aa0;font-size:20px;font-weight:700;text-align:center;margin-bottom:30px;line-height:1.3}.articleSidebar .form-group{margin-bottom:20px}.articleSidebar .form-input{width:100%;padding:15px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:all 0.3s ease;background:#fff}.articleSidebar .form-input:focus{outline:none;border-color:#4dd0e1;box-shadow:0 0 0 3px rgb(77 208 225 / .1)}.download-btn{width:100%;background:linear-gradient(135deg,#2c5aa0 0%,#1e3d72 100%);color:#fff;padding:18px;border:none;border-radius:8px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin-bottom:20px;transition:all 0.3s ease}.download-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgb(44 90 160 / .3)}.disclaimer{font-size:11px;color:#666;line-height:1.4}.disclaimer a{color:#000;font-weight:600;text-decoration:underline}@media (max-width:968px){.article-con{grid-template-columns:1fr;gap:30px;justify-content:center}}@media (max-width:768px){.article-title{font-size:14px}.articles-section{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.articleSidebar{padding:30px 20px;margin-top:20px}.article-image{height:auto}.pagi-container{gap:15px;margin:30px 0}.pagi-arrow,.page-number{width:30px;height:30px;font-size:16px}.page-numbers{gap:0}}@media (max-width:480px){.article-content{padding:20px}.articles-section{grid-template-columns:1fr}.articleSidebar{padding:25px 15px}.pagi-container{gap:7px}.page-numbers{order:-1}}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.article-card{animation:fadeInUp 0.6s ease forwards}.article-card:nth-child(1){animation-delay:0.1s}.article-card:nth-child(2){animation-delay:0.2s}.article-card:nth-child(3){animation-delay:0.3s}.article-card:nth-child(4){animation-delay:0.4s}.pricing-card-sec{padding:50px 0;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);position:relative;z-index:0}.pricing-card-sec .container{background-color:unset}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-bottom:3rem}.pricing-grid .pricing-card{background:#fff;border-radius:20px;padding:2.5rem 1rem 1rem;border:1px solid #e2e8f0;transition:all 0.3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%;background-size:cover!important;width:100%}.pricing-grid .pricing-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#1d4ed8)}.pricing-grid .pricing-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px rgb(0 0 0 / .01)}.pricing-grid .pricing-card.usFlag{background:linear-gradient(45deg,rgb(255 253 249 / .8),#fff8f8),url(https://kapitales.com.au/assets/images/flag/american-flag.jpg) no-repeat}.pricing-grid .pricing-card.ukFlag{background:linear-gradient(45deg,rgb(255 253 249 / .8),#fff8f8),url(https://kapitales.com.au/assets/images/flag/uk-flag.jpg) no-repeat}.pricing-grid .pricing-card.caFlag{background:linear-gradient(45deg,rgb(255 253 249 / .8),#fff8f8),url(https://kapitales.com.au/assets/images/flag/canada-flag.jpg) no-repeat}.pricing-grid .pricing-card.nzFlag{background:linear-gradient(45deg,rgb(255 253 249 / .8),#fff8f8),url(https://kapitales.com.au/assets/images/flag/nzx-flag.jfif) no-repeat}.pricing-grid .pricing-card.indFlag{background:linear-gradient(45deg,rgb(255 253 249 / .8),#fff8f8),url(https://kapitales.com.au/assets/images/flag/india-flag.jpg) no-repeat}.pricing-grid .pricing-card.backReport{background-color:#000}.pricing-grid .pricing-card.backReport :where(.feature-text,.feature-icon,.price,span,.purchase-btn,.readMore){color:#fff}.pricing-grid .pricing-card.backReport .card-title{color:#ffd602}.pricing-grid .pricing-card.backReport::before,.pricing-grid .pricing-card.backReport .feature-icon,.pricing-grid .pricing-card.backReport .purchase-btn{background:#ffd602}.pricing-grid .pricing-card.backReport .features-list li:hover{background:#4d4d4e}.pricing-grid .pricing-card.backReport .purchase-btn.preBtn{background:linear-gradient(#96ff99,#eeac18c7)}.pricing-grid .card-title{font-size:1.2rem;font-weight:700;color:#1e293b;margin-bottom:.5rem;text-align:center}.pricing-grid .price-container{text-align:center;margin-bottom:0rem}.pricing-grid .price{font-size:1.5rem;font-weight:700;color:#3b82f6;margin-bottom:.5rem}.pricing-grid .price span{font-size:.9rem;color:#64748b;font-weight:500}.pricing-grid .features-list{list-style:none;margin-bottom:.5rem;flex-grow:1}.pricing-grid .features-list li{padding:.7rem 0;display:flex;align-items:flex-start;gap:.8rem;border-bottom:1px solid #f1f5f9;transition:all 0.3s ease}.pricing-grid .features-list li:last-child{border-bottom:none}.pricing-grid .features-list li:hover{background:#f8fafc;border-radius:8px;padding-left:1rem}.pricing-grid .feature-icon{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#159ad5);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.pricing-grid .feature-icon::after{content:'✓';color:#fff;font-size:12px;font-weight:700}.pricing-grid .feature-text{color:#475569;font-size:.95rem;line-height:1.5}.pricing-grid .extra-features{max-height:0;overflow:hidden;transition:max-height 0.5s ease-out}.pricing-grid .extra-features.expanded{max-height:500px;transition:max-height 0.5s ease-in}.pricing-grid .readMore{color:#3b82f6;background:unset;text-decoration:none;font-weight:600;font-size:.9rem;transition:all 0.3s ease;display:inline-block;margin-bottom:1rem;cursor:pointer;position:relative;padding:.5rem 0;text-transform:none}.pricing-grid .readMore:hover{color:#1d4ed8;transform:translateX(5px)}.pricing-grid .readMore::after{content:'→';margin-left:5px;transition:transform 0.3s ease}.pricing-grid .readMore.expanded::after{content:'↑';transform:rotate(0deg)}.pricing-grid .purchase-btn{width:100%;padding:1rem 2rem;background:linear-gradient(135deg,#3b82f6,#159ad5);color:#fff;border:none;border-radius:50px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:.5px}.pricing-grid .purchase-btn:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af);transform:translateY(-2px);box-shadow:0 10px 20px rgb(59 130 246 / .4)}@media (max-width:1024px){.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.pricing-grid .pricing-card.premium-box{transform:none;order:-1}}@media (max-width:768px){.container{padding:15px}.pricing-grid .page-description{font-size:1rem;margin-bottom:3rem}.pricing-grid .pricing-grid{grid-template-columns:1fr;gap:1.5rem}.pricing-grid .pricing-card{padding:2rem 1.5rem}.pricing-grid .card-title{font-size:1.3rem}}@media (max-width:480px){.pricing-grid .pricing-card{padding:1.5rem 1rem}.pricing-grid .purchase-btn{padding:.8rem 1.5rem;font-size:1rem}}.companySec{background:#fff;border-radius:20px;box-shadow:0 2px 20px rgb(0 0 0 / .1);margin-bottom:30px;overflow:hidden;margin:50px 0}.companySec-header{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff;padding:25px 30px;position:relative;overflow:hidden}.companySec-header::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgb(255 255 255 / .1) 0%,transparent 70%);animation:shimmer 3s infinite}@keyframes shimmer{0%,100%{transform:rotate(0deg)}50%{transform:rotate(180deg)}}.companySec-header h2{font-size:1.8rem;font-weight:600;margin-bottom:8px;position:relative;z-index:2}.companySec-header p{opacity:.9;font-size:.95rem;position:relative;z-index:2}.companySec .controls{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:#f8fafc;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;gap:15px}.show-entries{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#64748b}.show-entries select{padding:8px 12px;border:2px solid #e2e8f0;border-radius:8px;font-size:.9rem;background:#fff;transition:all 0.3s ease}.show-entries select:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px rgb(79 172 254 / .1)}.companySec .search-box{position:relative}.companySec .search-box input{padding:10px 40px 10px 15px;border:2px solid #e2e8f0;border-radius:12px;font-size:.9rem;width:250px;transition:all 0.3s ease}.companySec .search-box input:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px rgb(79 172 254 / .1);width:300px}.companySec .search-box::after{content:'🔍';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#94a3b8}.companySec .table-container{overflow-x:auto;max-height:600px;overflow-y:auto;padding:0}.companySec table{width:100%;border-collapse:collapse;font-size:.9rem}.companySec th{background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%);color:#334155;font-weight:600;padding:15px 20px;text-align:left;position:sticky;top:0;z-index:1;border-bottom:2px solid #cbd5e1;cursor:pointer;user-select:none;transition:all 0.3s ease}.companySec th:hover{background:linear-gradient(135deg,#e2e8f0 0%,#cbd5e1 100%)}.companySec th.sortable::after{content:' ↕';opacity:.5}.companySec th.sort-asc::after{content:' ↑';opacity:1;color:#4facfe}.companySec th.sort-desc::after{content:' ↓';opacity:1;color:#4facfe}.companySec td{padding:15px 20px;border-bottom:1px solid #f1f5f9;transition:all 0.3s ease}.companySec tr:hover td{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);transform:scale(1.002)}.companySec .company-link{color:#4facfe;text-decoration:none;font-weight:500;transition:all 0.3s ease;position:relative}.companySec .company-link:hover{color:#2563eb;text-decoration:underline}.companySec .company-link::after{content:'↗';opacity:0;margin-left:5px;transition:all 0.3s ease;font-size:.8em}.companySec .company-link:hover::after{opacity:1}.companySec .sector-badge{background:linear-gradient(135deg,#e0f2fe 0%,#b3e5fc 100%);color:#0277bd;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:500;display:inline-block}.companySec .ticker-code{font-weight:700;color:#334155;font-size:.9rem;letter-spacing:.5px}@media (max-width:768px){.dashboard-header h1{font-size:2rem}.companySec .controls{flex-direction:column;align-items:stretch;gap:15px}.companySec .search-box input{width:100%}.search-box input:focus{width:100%}.companySec table{font-size:.8rem}.companySec th,.companySec td{padding:12px 10px}}@media (max-width:480px){.companySec-header h2{font-size:1.5rem}.companySec th,.companySec td{padding:8px 6px;font-size:.75rem}.companySec .company-link{font-size:.8rem}.companySec .ticker-code{font-size:.8rem}.companySec .sector-badge{font-size:.7rem;padding:3px 8px}}.no-results{text-align:center;padding:40px;color:#64748b;font-style:italic}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn 0.3s ease}#productReport.article-con{display:grid!important;grid-template-columns:47fr 0fr!important;gap:3px!important;padding:40px 0!important}.subscribe_section{background-color:#f5f5f5;padding:40px 20px;font-family:Arial,sans-serif}.subscribe_list{max-width:1100px;margin:0 auto;background:#fff;padding:30px 40px;border-radius:10px;box-shadow:0 4px 15px rgb(0 0 0 / .1);display:flex;justify-content:space-between;align-items:center;gap:40px}.sub_1{flex:2}.sub_1 h4{font-size:28px;margin-bottom:20px;color:#222;font-weight:700}.sub_1 p{font-size:16px;line-height:1.6;color:#555;margin:0}.sub_2{flex:1;text-align:right}.sub_2 h6{font-size:16px;color:#888;margin-bottom:6px;font-weight:600}.sub_2 h4{font-size:40px;font-weight:900;margin:0 0 15px 0;color:#000}.sub_2 h4 span{font-size:16px;font-weight:400;color:#555;margin-left:5px}.btn-sub{background-color:#ffb600;border:none;padding:14px 30px;font-size:16px;font-weight:700;border-radius:6px;color:#222;cursor:pointer;text-transform:uppercase;transition:background-color 0.3s ease;display:inline-block;text-decoration:none}.btn-sub:hover{background-color:#e0a200;color:#000}@media (max-width:768px){.subscribe_list{flex-direction:column;text-align:center;gap:20px}.sub_2{text-align:center}}

/* --- assets/website/css/inner.css --- */
a{text-decoration:none}.commonPage{padding:40px 0;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%)}.cBg{background:unset;box-shadow:unset}.aboutSec{background:#fff;margin-bottom:40px;border-radius:15px;overflow:hidden;box-shadow:0 5px 20px rgb(0 0 0 / .03);transition:transform 0.3s ease,box-shadow 0.3s ease}.section-content{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:50px}.about-text{padding:20px 0}.about-title{font-size:1.8rem;font-weight:600;color:#2c3e50;margin-bottom:20px;position:relative}.about-title::after{content:'';position:absolute;bottom:-10px;left:0;width:60px;height:3px;background:linear-gradient(45deg,#007bff,#0056b3);border-radius:2px}.section-description{font-size:1rem;line-height:1.8;color:#555;margin-bottom:25px}.section-image{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 10px 25px rgb(0 0 0 / .15);height:100%}.section-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}.section-image:hover img{transform:scale(1.05)}.video-section{position:relative;cursor:pointer;overflow:hidden}.video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgb(0 0 0 / .4);display:flex;align-items:center;justify-content:center;transition:background 0.3s ease}.video-section:hover .video-overlay{background:rgb(0 0 0 / .6)}.play-button{width:80px;height:80px;background:rgb(255 255 255 / .9);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;box-shadow:0 5px 20px rgb(0 0 0 / .3)}.play-button:hover{transform:scale(1.1);background:#fff}.play-button::after{content:'';width:0;height:0;border-left:20px solid #007bff;border-top:12px solid #fff0;border-bottom:12px solid #fff0;margin-left:5px}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .9);z-index:1000;animation:fadeIn 0.3s ease}.modal.active{display:flex;align-items:center;justify-content:center}.modal-content{position:relative;width:90%;max-width:800px;background:#000;border-radius:10px;overflow:hidden}.modal-video{width:100%;height:450px}.close-modal{position:absolute;top:10px;right:30px;color:#fff;font-size:30px;cursor:pointer;transition:color 0.3s}.close-modal:hover{color:#007bff}.highlight-card{background:linear-gradient(135deg,#1e88e5,#0b539b);color:#fff;padding:30px;border-radius:15px;text-align:center;margin:20px 0}.highlight-number{font-size:3rem;font-weight:700;margin-bottom:10px}.highlight-text{font-size:1.1rem;opacity:.9}.aboutSec:nth-child(even) .section-content{direction:rtl}.aboutSec:nth-child(even) .about-text{direction:ltr}@media (max-width:768px){.section-content{grid-template-columns:1fr;padding:30px 20px;gap:30px}.aboutSec:nth-child(even) .section-content{direction:ltr}.about-title{font-size:1.5rem}.modal-content{width:95%}.modal-video{height:250px}.play-button{width:60px;height:60px}.play-button::after{border-left:15px solid #007bff;border-top:9px solid #fff0;border-bottom:9px solid #fff0}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fade-in{opacity:0;transform:translateY(30px);transition:all 0.6s ease}.fade-in.visible{opacity:1;transform:translateY(0)}.page-title{color:#444;background-color:#f6f6f6;position:relative}.page-title h1{font-size:24px;font-weight:700}.page-title .breadcrumbs ol{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;font-size:14px;font-weight:500;color:#333}.page-title .breadcrumbs ol li+li{padding-left:10px}.page-title .breadcrumbs ol li+li::before{content:"/";display:inline-block;padding-right:10px;color:color-mix(in srgb,var(--default-color),transparent 70%)}.page-title .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px;padding:10px;background:unset;overflow:unset}.mission-grid-con{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:4rem}.hero-image{position:relative;border-radius:20px;overflow:hidden;transition:transform 0.3s ease}.hero-image:hover{transform:translateY(-5px)}.hero-image img{width:100%;height:100%;object-fit:cover;filter:brightness(1.1) saturate(1.1)}.hero-content{display:flex;flex-direction:column;justify-content:center;gap:2rem}.mvv-card{background:rgb(255 255 255 / .95);backdrop-filter:blur(10px);padding:2rem;border-radius:0 0 20px 20px;border:1px solid rgb(255 255 255 / .2);transition:all 0.3s ease;position:relative;overflow:hidden}.mvv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#5f5eda)}.mvv-card:hover{transform:translateY(-5px)}.mvv-card-title{font-size:1.8rem;font-weight:600;margin-bottom:1rem;color:#2c3e50;display:flex;align-items:center;gap:.5rem}.card-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.mission-icon{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.vision-icon{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%)}.values-icon{background:linear-gradient(135deg,#fa709a 0%,#fee140 100%)}.mvv-card-content{color:#555;font-size:1.1rem;line-height:1.7}.values-list{list-style:none;margin-top:1rem}.values-list li{padding:.8rem 0;border-bottom:1px solid #eee;display:flex;align-items:flex-start;gap:1rem;transition:all 0.3s ease}.values-list li:last-child{border-bottom:none}.values-list li:hover{background:rgb(102 126 234 / .05);border-radius:10px;padding-left:1rem}.value-bullet{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);margin-top:.6rem;flex-shrink:0}.value-text{flex:1}.value-title{font-weight:600;color:#2c3e50}.value-description{color:#666;margin-top:.2rem}@media (max-width:768px){.mission-grid-con{grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}.hero-image{order:-1;max-height:250px}.mvv-card{padding:1.5rem}.mvv-card-title{font-size:1.5rem}.mvv-card-content{font-size:1rem}.values-list li{flex-direction:column;gap:.5rem}.value-bullet{margin-top:0}}@media (max-width:480px){.mvv-card{padding:1.2rem}.mvv-card-title{font-size:1.3rem}}.mvv-card{animation:fadeInUp 0.6s ease-out forwards}.mvv-card:nth-child(2){animation-delay:0.2s}.mvv-card:nth-child(3){animation-delay:0.4s}.contact-form-sec{position:relative;width:100%;padding:2rem;display:flex;align-items:center;justify-content:center}.contact-form-sec .form{width:100%;max-width:1000px;background-color:#fff;border-radius:10px;box-shadow:0 0 20px 1px rgb(0 0 0 / .1);z-index:1000;overflow:hidden;display:grid;grid-template-columns:repeat(2,1fr)}.contact-form-sec .contact-form{background-color:#159ad5;position:relative}.contact-form-sec .circle{border-radius:50%;background:linear-gradient(135deg,transparent 20%,#3f5158);position:absolute}.contact-form-sec .circle.one{width:130px;height:130px;top:130px;right:-40px}.contact-form-sec .circle.two{width:80px;height:80px;top:10px;right:30px}.contact-form-sec .contact-form:before{content:"";position:absolute;width:26px;height:26px;background-color:#159ad5;transform:rotate(45deg);top:50px;left:-13px}.contact-form-sec form{padding:2.3rem 2.2rem;z-index:10;overflow:hidden;position:relative}.contact-form-sec .title{color:#fff;font-weight:500;font-size:1.5rem;line-height:1;margin-bottom:.7rem}.contact-form-sec .input-container{position:relative;margin:1rem 0}.contact-form-sec .input{width:100%;outline:none;border:2px solid #fafafa;background:none;padding:1rem;color:#fff;font-weight:500;font-size:.95rem;letter-spacing:.5px;border-radius:5px;transition:0.3s}.contact-form-sec textarea.input{padding:.8rem 1.2rem;min-height:150px;border-radius:5px;resize:none;overflow-y:auto}.contact-form-sec .input-container label{position:absolute;top:50%;left:15px;transform:translateY(-50%);padding:0 .4rem;color:#fafafa;font-size:.9rem;font-weight:400;pointer-events:none;z-index:1000;transition:0.5s}.contact-form-sec .input-container.textarea label{top:1rem;transform:translateY(0)}.contact-form-sec .btn{padding:1rem;background-color:#fff;border:2px solid #fafafa;font-size:.95rem;color:#000;line-height:1;border-radius:5px;font-weight:600;outline:none;cursor:pointer;transition:0.3s;margin-top:20px;width:100%}.contact-form-sec .btn:hover{background-color:#fff0;color:#fff}.contact-form-sec .input-container input::placeholder{color:#fff}.contact-form-sec .input-container span{position:absolute;top:0;left:25px;transform:translateY(-50%);font-size:.8rem;padding:0 .4rem;color:#fff0;pointer-events:none;z-index:500}.contact-form-sec .input-container span:before,.contact-form-sec .input-container span:after{content:"";position:absolute;width:10%;opacity:0;transition:0.3s;height:5px;background-color:#159AD6;top:50%;transform:translateY(-50%)}.contact-form-sec .input-container span:before{left:50%}.contact-form-sec .input-container span:after{right:50%}.contact-form-sec .input-container.focus label{top:0;transform:translateY(-50%);left:25px;font-size:.8rem}.contact-form-sec .input-container.focus span:before,.contact-form-sec .input-container.focus span:after{width:50%;opacity:1}.contact-form-sec .contact-info{padding:2.3rem 2.2rem;position:relative}.contact-form-sec .contact-info .title{color:#000}.contact-form-sec .text{color:#333;margin:1.5rem 0 2rem 0}.contact-form-sec .information{display:flex;color:#555;gap:10px;margin:.7rem 0;align-items:baseline;font-size:.95rem}.contact-form-sec .information i{color:#159ad5}.contact-form-sec .icon{width:28px;margin-right:.7rem}.contact-form-sec .social-media{padding:0}.contact-form-sec .social-media p{color:#333}.contact-form-sec .social-icons{display:flex;margin-top:.5rem}.contact-form-sec .social-icons a{width:35px;height:35px;border-radius:5px;background:linear-gradient(45deg,#1abc9c,#159ad5);color:#fff;text-align:center;line-height:35px;margin-right:.5rem;transition:0.3s}.contact-form-sec .social-icons a:hover{transform:scale(1.05)}.contact-form-sec .contact-info:before{content:"";position:absolute;width:110px;height:100px;border:22px solid #1abc9c;border-radius:50%;bottom:-60px;right:50px;opacity:.3}.section-contact{position:relative;z-index:0}.contact-form-sec .big-circle{position:absolute;width:500px;height:500px;border-radius:50%;background:linear-gradient(to bottom,#1cd4af,#159ad5);bottom:48%;right:40%;transform:translate(-40%,38%)}.contact-form-sec .big-circle:after{content:"";position:absolute;width:360px;height:360px;background-color:#fafafa;border-radius:50%;top:calc(50% - 180px);left:calc(50% - 180px)}.contact-form-sec .square{position:absolute;height:400px;top:50%;left:50%;transform:translate(181%,11%);opacity:.2}.contact-form-sec .form-check p{color:#000;font-size:15px}.contact-form-sec .form-check{display:flex;gap:7px;align-items:baseline}.contact-form-sec .form-check p a{color:#fff;text-decoration:underline;transition:all 0.5s ease}.contact-form-sec .form-check p a:hover{color:#000}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{-webkit-text-fill-color:#333;-webkit-box-shadow:0 0 0 1000px #e3f2fd inset;transition:background-color 5000s ease-in-out 0s}.input.has-text{background-color:#e3f2fd!important}@media (max-width:850px){.contact-form-sec .form{grid-template-columns:1fr}.contact-form-sec .contact-info:before{bottom:initial;top:-75px;right:65px;transform:scale(.95)}.contact-form-sec .contact-form:before{top:-13px;left:initial;right:70px}.contact-form-sec .square{transform:translate(140%,43%);height:350px}.contact-form-sec .big-circle{bottom:75%;transform:scale(.9) translate(-40%,30%);right:50%}.contact-form-sec .text{margin:1rem 0 1.5rem 0}.contact-form-sec .social-media{padding:0}}@media (max-width:480px){.contact-form-sec .contact-form-sec{padding:1.5rem}.contact-form-sec .contact-info:before{display:none}.contact-form-sec .square,.contact-form-sec .big-circle{display:none}.contact-form-sec form,.contact-form-sec .contact-info{padding:1.7rem 1.6rem}.contact-form-sec .text,.contact-form-sec .information,.contact-form-sec .social-media p{font-size:.8rem}.contact-form-sec .title{font-size:1.15rem}.contact-form-sec .social-icons a{width:30px;height:30px;line-height:30px}.contact-form-sec .icon{width:23px}.contact-form-sec .input{padding:.45rem 1.2rem}.contact-form-sec .btn{padding:.45rem 1.2rem}}@media(max-width:540px){.contact-form-sec{padding:0}}.google_map{overflow:hidden;position:relative;height:200px}.google_map iframe{left:0;top:0;height:100%;width:100%;position:absolute}.privacy-sec{padding:50px 0}.policy-header{background:linear-gradient(135deg,#1e88e5 0%,#1976d2 100%);color:#fff;padding:50px 40px;text-align:center;position:relative;overflow:hidden}.policy-header h1{font-size:2.8em;margin-bottom:15px;font-weight:700;position:relative;z-index:1;text-shadow:2px 2px 4px rgb(0 0 0 / .2)}.policy-header p{font-size:1.2em;opacity:.95;position:relative;z-index:1}.policy-content-sec{margin-top:30px}.policy-section{margin-bottom:45px;animation:slideIn 0.5s ease-out;animation-fill-mode:both}.policy-section:last-child{margin-bottom:0}@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.policy-section-header{background:linear-gradient(135deg,#1e88e5 0%,#1976d2 100%);color:#fff;padding:18px 30px;border-radius:12px;margin-bottom:25px;font-size:1.4em;font-weight:600;box-shadow:0 4px 15px rgb(30 60 114 / .2);transition:transform 0.3s ease,box-shadow 0.3s ease;position:relative;overflow:hidden}.policy-section-header::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left 0.5s ease}.policy-section-header:hover::before{left:100%}.policy-section-header:hover{transform:translateY(-2px)}.policy-section-content{padding:25px;background:#f8f9fa;border-radius:12px;border-left:4px solid #1976d2}.policy-section-content p{margin-bottom:18px;color:#4a5568;line-height:1.8}.policy-section-content p:last-child{margin-bottom:0}.policy-info-list{list-style:none;padding:0;margin:20px 0}.policy-info-list li{padding:10px 0;padding-left:35px;position:relative;color:#4a5568;transition:all 0.3s ease;line-height:1.6}.policy-info-list li:hover{padding-left:40px;color:#1976d2}.policy-info-list li:before{content:"✓";position:absolute;left:0;top:16px;background:linear-gradient(135deg,#1e88e5 0%,#1976d2 100%);color:#fff;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700}.policy-highlight-box{background:linear-gradient(135deg,rgb(42 82 152 / .08) 0%,rgb(126 34 206 / .08) 100%);border-left:4px solid #1976d2;padding:25px;margin:25px 0;border-radius:10px;transition:all 0.3s ease}.policy-highlight-box:hover{box-shadow:0 4px 15px rgb(42 82 152 / .15);transform:translateX(5px)}.policy-highlight-box p{margin-bottom:12px}.policy-highlight-box p:last-child{margin-bottom:0}.policy-subsection{margin:30px 0}.policy-subsection-title{color:#1976d2;font-size:1.2em;font-weight:600;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid #e2e8f0;position:relative}.policy-subsection-title::after{content:'';position:absolute;bottom:-2px;left:0;width:60px;height:2px;background:linear-gradient(90deg,#1976d2,#7e22ce)}.policy-contact-info{background:linear-gradient(135deg,#f8fafc 0%,#e6f2ff 100%);padding:25px;border-radius:10px;border:2px solid #1976d2;margin:20px 0}.policy-contact-info p{margin:8px 0;color:#2d3748}.policy-contact-info strong{color:#1e3c72}.policy-content-sec a{color:#1976d2;text-decoration:none;font-weight:500;transition:color 0.3s ease}.policy-content-sec a:hover{color:#7e22ce;text-decoration:underline}@media (max-width:768px){.policy-header{padding:40px 25px}.policy-header h1{font-size:2em}.policy-header p{font-size:1em}.policy-section-header{font-size:1.2em;padding:15px 20px}.policy-section-content{padding:20px}.policy-info-list li{padding-left:30px}.policy-info-list li:hover{padding-left:35px}.privacy-sec{padding:30px 0}}@media (max-width:480px){.policy-header h1{font-size:1.6em}.policy-header p{font-size:.95em}.policy-section-content{padding:15px}.policy-highlight-box{padding:18px}}.companies-code{padding:50px 0;position:relative;z-index:0}.companies-code-sec{display:flex;gap:20px;padding:50px 0}.companies-code-sidebar{width:200px;background:#fff;box-shadow:2px 0 10px rgb(0 0 0 / .1);padding:20px 0}.companies-code-sec .tab{padding:15px 30px;cursor:pointer;font-size:18px;font-weight:700;color:#666;transition:all 0.3s ease;border-left:4px solid #fff0}.companies-code-sec .tab:hover{background-color:#f0f0f0}.companies-code-sec .tab.active{background:linear-gradient(90deg,#e6f3ff 0%,white 100%);color:#1e90ff;border-left:4px solid #1e90ff}.companies-content-area{flex:1;overflow-x:auto}.companies-code-sec h1{color:#1e90ff;font-size:24px;margin-bottom:10px}.companies-code-sec .subtitle{color:#666;font-size:14px;margin-bottom:30px}.companies-code-sec .year-content{display:none}.companies-code-sec .year-content.active{display:block}.companies-code-sec .month-section{margin-bottom:30px}.companies-code-sec .month-header{background:#1e90ff;color:#fff;padding:12px 20px;font-size:16px;font-weight:700;border-radius:5px;margin-bottom:15px}.companies-code-sec .table-wrapper{overflow-x:auto;margin-bottom:20px;background:#fff;border-radius:5px;box-shadow:0 2px 5px rgb(0 0 0 / .1)}.companies-code-sec table{width:100%;border-collapse:collapse;background:#fff}.companies-code-sec thead{background:#e6f3ff}.companies-code-sec th{padding:12px 15px;text-align:left;font-weight:700;color:#333;border:2px solid #1e90ff;white-space:nowrap;font-size:15px;text-align:center}.companies-code-sec td{padding:12px 15px;border:2px solid #1e90ff;color:#555}.companies-code-sec tbody tr:hover{background-color:#f8f9fa}.companies-code-sec .serial{text-align:center;font-weight:600;color:#1e90ff}.companies-code-sec .empty-state{text-align:center;padding:60px 20px;color:#999;font-size:16px}@media screen and (max-width:768px){.companies-code-sec{flex-direction:column}.companies-code{padding:20px 0}.companies-code-sidebar{width:100%;display:flex;overflow-x:auto;padding:10px 0}.companies-code-sec .tab{padding:12px 20px;white-space:nowrap;border-left:none;border-bottom:4px solid #fff0}.companies-code-sec .tab.active{border-left:none;border-bottom:4px solid #1e90ff}.companies-content-area{padding:15px}.companies-code-sec h1{font-size:20px}.companies-code-sec table{font-size:13px}.companies-code-sec th,.companies-code-sec td{padding:8px 10px}}@media screen and (max-width:480px){.companies-content-area{padding:10px}.companies-code-sec h1{font-size:18px}.companies-code-sec .subtitle{font-size:12px}.companies-code-sec table{font-size:11px}.companies-code-sec th,.companies-code-sec td{padding:6px 8px}.companies-code-sec .month-header{font-size:14px;padding:10px 15px}}.module-header{background:#fff;padding:1rem 2rem;box-shadow:0 2px 5px rgb(0 0 0 / .1);position:sticky;top:0;z-index:100}.module-header nav{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;flex-wrap:wrap}.module-header .nav-buttons{display:flex;gap:1rem;align-items:center}.module-search-container{position:relative;display:flex;align-items:center}.module-header .module-search-input{width:0;padding:0;border:1px solid #ddd;border-radius:5px;font-size:1rem;transition:width 0.3s ease,padding 0.3s ease,opacity 0.3s ease;opacity:0;overflow:hidden}.module-header .module-search-input.active{width:250px;padding:1rem;opacity:1;margin-right:.5rem}.module-header .btn-search{background:#fff;border:1px solid #ddd;padding:1rem;border-radius:5px;cursor:pointer;transition:background 0.3s}.module-header .btn-search:hover{background:#f8f9fa}.module-header .btn-modules{background:#0ea5e9;color:#fff;border:none;padding:1rem 2rem;border-radius:5px;cursor:pointer;font-size:1rem;transition:background 0.3s}.module-header .btn-modules:hover{background:#0284c7}.module-hero{background:linear-gradient(135deg,#e0f2f7 0%,#f0f4f8 100%);padding:4rem 2rem;min-height:80vh;display:flex;align-items:center}.module-hero-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.module-hero-content h1{font-size:3rem;color:#1e293b;margin-bottom:1rem;line-height:1.2}.module-hero-content p{font-size:1.1rem;color:#64748b;margin-bottom:2rem}.module-hero .btn-primary{background:#0ea5e9;color:#fff;border:none;padding:1rem 2rem;border-radius:5px;cursor:pointer;font-size:1rem;font-weight:600;transition:background 0.3s}.module-hero .btn-primary:hover{background:#0284c7}.module-hero-image{text-align:center;position:relative}.module-hero-image img{max-width:100%;height:auto}.modules{padding:4rem 2rem;background:#fff}.modules-container{max-width:1200px;margin:0 auto}.modules h2{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#1e293b}.modules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.module-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;transition:transform 0.3s,box-shadow 0.3s;display:flex;flex-direction:column;height:100%}.module-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgb(0 0 0 / .1)}.module-image{width:100%;height:200px;object-fit:cover}.module-content{padding:1.5rem;display:flex;flex-direction:column;flex-grow:1}.module-content h3{font-size:1.3rem;color:#1e293b;margin-bottom:1rem;flex-grow:1}.module-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1rem}.chapter-count{color:#64748b;font-size:.9rem}.module-arrow{background:#0ea5e9;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.3s}.module-arrow:hover{background:#0284c7}@media (max-width:768px){.module-hero-container{grid-template-columns:1fr;text-align:center}.module-hero-content h1{font-size:2rem}.modules-grid{grid-template-columns:1fr}.module-header .nav-buttons{gap:.5rem;flex-wrap:wrap}.search-input.active{width:150px}}.hero_ellipse_icon .ellipse1{position:absolute;right:100%;top:0%;margin-right:-130px;animation:animationFramesOne 20s infinite linear}.hero_ellipse_icon .ellipse2{position:absolute;top:30%;right:10%;animation:animationFramesOne 20s infinite linear}.hero_ellipse_icon .ellipse4{position:absolute;bottom:25%;right:50%;animation:animationFramesOne 20s infinite linear}@keyframes animationFramesOne{0%{-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}20%{-webkit-transform:translate(73px,-1px) rotate(36deg);transform:translate(73px,-1px) rotate(36deg)}40%{-webkit-transform:translate(100px,72px) rotate(72deg);transform:translate(100px,72px) rotate(72deg)}60%{-webkit-transform:translate(83px,122px) rotate(108deg);transform:translate(83px,122px) rotate(108deg)}80%{-webkit-transform:translate(-40px,72px) rotate(144deg);transform:translate(-40px,72px) rotate(144deg)}100%{-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}}.module-stock-sec{padding:30px 0}.module-badge{display:inline-block;background-color:#09c;color:#fff;padding:6px 16px;border-radius:4px;font-size:14px;font-weight:600;margin-bottom:30px}.module-stock-sec h1{font-size:2.5rem;color:#222;margin-bottom:40px}.module-content-wrapper{display:grid;grid-template-columns:1fr;gap:30px;align-items:start}.module-text-content{background:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 8px rgb(0 0 0 / .1)}.module-content-sec{margin-bottom:30px}.module-content-sec:last-child{margin-bottom:0}.module-content-wrapper h2 a{color:#09c;font-size:1.3rem;margin-bottom:12px;display:block}.module-content-wrapper p{color:#555;font-size:1rem;line-height:1.7}.module-image-content{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 8px rgb(0 0 0 / .1)}.module-image-content img{width:100%;height:auto;border-radius:6px;display:block}@media (min-width:768px){.module-content-wrapper{grid-template-columns:1.5fr 1fr}.module-stock-sec h1{font-size:3rem}}@media (max-width:767px){.module-stock-sec h1{font-size:2rem}.module-content-wrapper h2{font-size:1.2rem}.module-text-content{padding:20px}}.module-h3{margin-bottom:20px}.module-img{margin:30px 0}.alphabet-section{margin-bottom:40px}.alphabet-header{display:flex;align-items:center;gap:15px;margin-bottom:20px}.alphabet-badge{background:linear-gradient(135deg,#0099cc,#006699);color:#fff;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;border-radius:8px;box-shadow:0 3px 10px rgb(0 153 204 / .3);flex-shrink:0}.terms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;padding-left:65px}.term-link{background:#e7e7e77a;padding:12px 16px;border-radius:6px;color:#000;font-size:.95rem;transition:all 0.3s ease;box-shadow:0 2px 5px rgb(0 0 0 / .05);border-left:3px solid #fff0;text-decoration:underline}.term-link:hover{background:#f0f9ff;border-left-color:#09c;transform:translateX(5px);box-shadow:0 3px 8px rgb(0 0 0 / .1)}@media (max-width:768px){.terms-grid{grid-template-columns:1fr;padding-left:0}.alphabet-header{flex-direction:column;align-items:flex-start}.alphabet-badge{width:45px;height:45px;font-size:1.3rem}}@media (min-width:769px) and (max-width:1024px){.terms-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}.definition-con{padding:50px 0}.commentary-content-box.pt0{padding-top:0;border:0;margin-top:0}.toc-list li>a{text-decoration:none;display:grid;grid-template-columns:auto max-content;align-items:end;margin-top:10px}.toc-list :where(ol,li){list-style-type:none}.table-index{margin:30px 0}.toc-list li>a>.title{position:relative;overflow:hidden}.table-index a span{color:#1137a4;font-weight:600}.toc-list li>a .leaders::after{position:absolute;padding-inline-start:.25ch;content:" . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . ";text-align:right}.quiz-container{padding:30px;border-radius:8px;box-shadow:0 2px 10px rgb(0 0 0 / .1)}#quiz_msg{padding:15px;margin-bottom:20px;border-radius:4px;display:none}#quiz_msg.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb;display:block}#quiz_msg.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;display:block}.quiz-option p{font-size:16px;font-weight:600;color:#333;margin-bottom:15px;margin-top:25px}.quiz-option p:first-child{margin-top:0}.quiz-container .form-check{margin-bottom:12px;padding-left:0}.quiz-container .form-check-input{width:18px;height:18px;margin-right:10px;cursor:pointer;vertical-align:middle}.quiz-container .form-check-label{cursor:pointer;font-size:15px;color:#555;display:inline;vertical-align:middle}.quiz-container .form-check:hover .quiz-container .form-check-label{color:#007bff}.quiz-container .btn{padding:12px 30px;font-size:16px;border:none;border-radius:4px;cursor:pointer;transition:background 0.3s}.quiz-container .btn-primary{background:#007bff;color:#fff}.quiz-container .btn-primary:hover{background:#0056b3}.btn-quiz{margin-top:30px;width:100%;max-width:200px}.quiz-container .mt-3{margin-top:20px}.quiz-container .mb-5{margin-bottom:30px}@media (max-width:768px){.quiz-container{padding:20px}.quiz-option p{font-size:15px}.quiz-container .form-check-label{font-size:14px}.quiz-container .btn-quiz{max-width:100%}}@media (max-width:480px){.quiz-container{padding:15px}.quiz-option p{font-size:14px}.quiz-container .form-check-label{font-size:13px}.quiz-container .form-check-input{width:16px;height:16px}}.investors-queries{padding:30px 0}.queries-faq-item{margin-bottom:8px;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px rgb(0 0 0 / .1)}.faq-question{width:100%;padding:16px 20px;background:#17a2b8;color:#fff;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:500;transition:background 0.3s;text-align:left}.faq-question:hover{background:#138496}.queries-faq-icon{font-size:20px;font-weight:700;flex-shrink:0;margin-left:16px}.queries-faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease;background:#f8f9fa}.queries-faq-answer-content{padding:24px;line-height:1.6;font-size:14px;color:#333}.queries-faq-answer.active{max-height:2000px}.queries-faq-answer strong{display:block;margin-bottom:12px;color:#000}.queries-faq-answer p{margin-bottom:16px}@media (max-width:768px){.faq-question{padding:12px 16px;font-size:13px}.queries-faq-answer-content{padding:16px;font-size:13px}.queries-faq-icon{font-size:18px}}

/* --- assets/website/css/login.css --- */
.login-popup-overlay{width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:999;padding:30px 0}.login-popup{background:#fff;max-width:900px;width:100%;height:100%;border-radius:8px;position:relative;display:grid;grid-template-columns:1fr 1fr;transition:all 0.5s ease}.login-popup .show-login-btn{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff;border:none;padding:18px 36px;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px;position:fixed;top:20px;right:20px}.login-popup .show-login-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgb(79 172 254 / .3)}.login-popup .show-login-btn:active{transform:translateY(0)}.login-popup .login-left-section{flex:1;background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);position:relative;overflow:hidden;padding:0}.login-popup .swiper{width:100%;height:100%}.login-popup .swiper-slide{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;padding:20px}.login-popup .slide-icon{width:120px;height:120px;margin-bottom:30px;background:rgb(255 255 255 / .2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px}.login-popup .slide-title{font-size:28px;font-weight:700;margin-bottom:15px;line-height:1.2}.login-popup .slide-description{font-size:16px;opacity:.9;line-height:1.5;max-width:300px}.login-popup .swiper-pagination{bottom:30px!important;display:none!important}.login-popup .swiper-pagination-bullet{background:rgb(255 255 255 / .5)!important;width:12px!important;height:12px!important}.login-popup .swiper-pagination-bullet-active{background:white!important}.login-popup .login-right-section{flex:1;padding:30px;display:flex;flex-direction:column;justify-content:start;background:#fafbfc;border:1px solid #2bccfe}.login-popup .close-btn,.freeTrial-overlay .close-btn{position:absolute;top:20px;right:25px;background:rgb(0 0 0 / .1);border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;color:#666;transition:all 0.3s ease;z-index:10}.login-popup .close-btn:hover,.freeTrial-overlay .close-btn:hover{background:rgb(0 0 0 / .2);transform:rotate(90deg)}.login-popup .login-header{text-align:center;margin-bottom:40px}.login-popup .login-title{font-size:32px;font-weight:700;color:#2c3e50;margin-bottom:8px}.login-popup .login-subtitle{color:#7f8c8d;font-size:16px}.login-popup .form-group{margin-bottom:25px}.login-popup .form-label{display:block;color:#2c3e50;font-weight:600;margin-bottom:8px;font-size:14px}.login-popup .form-input{width:100%;padding:15px 20px;border:2px solid #e1e8ed;border-radius:12px;font-size:16px;transition:all 0.3s ease;background:#fff}.login-popup .form-input:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px rgb(79 172 254 / .1)}.login-popup .checkbox-group{display:flex;align-items:center;gap:12px;margin-bottom:20px}.login-popup .checkbox{width:18px;height:18px;accent-color:#4facfe}.login-popup .checkbox-label{font-size:14px;color:#5a6c7d;line-height:1.4}.login-popup .checkbox-label a{color:#4facfe;text-decoration:none}.login-popup .checkbox-label a:hover{text-decoration:underline}.login-popup .login-btn{width:100%;background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff;border:none;padding:18px!important;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px}.login-popup .login-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgb(79 172 254 / .3)}.login-popup .login-btn:active{transform:translateY(0)}.login-popup .login-footer{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid #e1e8ed}.login-popup .login-footer a{color:#4facfe;text-decoration:none;font-weight:600;transition:color 0.3s ease;cursor:pointer}.login-popup .login-form-section{display:none;opacity:0;transform:translateY(20px);transition:all 0.4s ease}.login-popup .login-form-section.active{display:block;opacity:1;transform:translateY(0)}.login-popup .form-row{display:flex;gap:15px;margin-bottom:25px}.login-popup .form-group.half-width{flex:1}.login-popup .success-message{background:linear-gradient(135deg,#4ade80 0%,#22c55e 100%);color:#fff;padding:15px 20px;border-radius:12px;margin-bottom:25px;text-align:center;font-weight:600;animation:slideDown 0.5s ease-out}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.login-popup .password-strength{margin-top:8px;height:4px;background:#e1e8ed;border-radius:2px;overflow:hidden;transition:all 0.3s ease}.login-popup .password-strength-bar{height:100%;width:0;transition:all 0.3s ease;border-radius:2px}.strength-weak{background:#ef4444;width:25%}.strength-fair{background:#f59e0b;width:50%}.strength-good{background:#10b981;width:75%}.strength-strong{background:#059669;width:100%}.login-popup .form-input:invalid{border-color:#ef4444}.login-popup .form-input:valid{border-color:#40bafe}.login-popup .footer-separator{margin:0 10px;color:#bdc3c7}@media (max-width:768px){.login-popup .login-popup{flex-direction:column;max-width:420px;min-height:auto}.login-popup .login-popup .login-left-section{height:300px}.login-popup .login-right-section{padding:40px 30px}.login-popup .slide-title{font-size:24px}.login-popup .slide-icon{width:80px;height:80px;font-size:32px;margin-bottom:20px}.login-popup .login-title{font-size:28px}.login-popup .checkbox-group{align-items:flex-start;gap:8px}.login-popup .form-row{flex-direction:column;gap:0}.login-popup .form-group.half-width{margin-bottom:25px}}@media (max-width:480px){.login-popup .login-right-section{padding:30px 20px}.login-popup .login-title{font-size:24px}.login-popup .form-input{padding:12px 16px}.login-popup .login-popup .login-btn{padding:15px}}@media (max-width:767px){.login-popup{grid-template-columns:1fr}}.freeTrial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .5);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000;opacity:0;transition:opacity 0.3s ease}.freeTrial-overlay.show{display:flex;opacity:1}.freeTrial-overlay .modal{background:linear-gradient(135deg,#40E0D0 0%,#48CAE4 50%,#0096C7 100%);border-radius:24px;padding:40px;width:100%;height:90vh;max-width:650px;position:relative;box-shadow:0 25px 50px rgb(0 0 0 / .25),0 0 0 1px rgb(255 255 255 / .1);overflow:auto;display:flex;justify-content:center;flex-direction:column;animation:slideUp 0.4s cubic-bezier(.34,1.56,.64,1)}@keyframes slideUp{0%{transform:translateY(100px);opacity:0}100%{transform:translateY(0);opacity:1}}.freeTrial-overlay .close-btn{background:rgb(249 247 247 / .2)}.freeTrial-overlay .title{text-align:center;margin-bottom:30px}.freeTrial-overlay .logo{text-align:center}.freeTrial-overlay .title h2{font-size:28px;color:#2c3e50;font-weight:800;margin-bottom:8px}.freeTrial-overlay .trial-text{color:#e74c3c;font-weight:800;font-size:28px}.freeTrial-overlay .form-container{position:relative;z-index:1}.freeTrial-overlay .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.freeTrial-overlay .form-group{position:relative}.freeTrial-overlay .form-input{width:100%;padding:16px 20px;border:2px solid rgb(255 255 255 / .2);border-radius:12px;font-size:16px;background:rgb(255 255 255 / .9);transition:all 0.3s ease;color:#2c3e50;font-weight:500}.freeTrial-overlay .form-input::placeholder{color:#7f8c8d;font-weight:400}.freeTrial-overlay .form-input:focus{outline:none;border-color:#2c3e50;background:#fff;transform:translateY(-2px);box-shadow:0 8px 25px rgb(0 0 0 / .1)}.freeTrial-overlay .checkbox-container{display:flex;align-items:flex-start;gap:12px;margin:25px 0;color:#2c3e50;font-size:14px;line-height:1.5}.freeTrial-overlay .checkbox{width:20px;height:20px;margin-top:2px;accent-color:#e74c3c}.freeTrial-overlay .checkbox-text a{color:#2c3e50;text-decoration:underline;font-weight:600}.freeTrial-overlay .checkbox-text a:hover{color:#34495e}.freeTrial-overlay .submit-btn{width:100%;padding:18px;background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 8px 25px rgb(231 76 60 / .3)}.freeTrial-overlay .submit-btn:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgb(231 76 60 / .4)}.freeTrial-overlay .submit-btn:active{transform:translateY(0)}.freeTrial-overlay .no-credit{text-align:center;color:#e74c3c;font-weight:600;font-size:14px;margin-top:12px}@media (max-width:1180px){.freeTrial-overlay .modal{justify-content:start}}@media (max-width:640px){.freeTrial-overlay .modal{padding:30px 20px;margin:10px;border-radius:20px}.freeTrial-overlay .form-row{grid-template-columns:1fr;gap:12px}.freeTrial-overlay .title h2{font-size:24px}.freeTrial-overlay .form-input{padding:14px 16px;font-size:16px}.freeTrial-overlay .checkbox-container{font-size:13px}}@media (max-width:480px){.freeTrial-overlay .modal{padding:25px 15px}.freeTrial-overlay{padding:0}.freeTrial-overlay .title h2{font-size:20px;line-height:1.3}.login-popup-overlay{padding:10px}}
/* ==========================================================================
   Sleek tick mark (client feedback, 9 Aug 2026: "tick mark ko thoda sleek
   kar do ... ek aake load ho jaye"). Replaces the native square checkbox on
   the auth pages with a rounded box whose tick DRAWS ITSELF IN on check.
   The real <input> is kept (offscreen) so keyboard, screen readers and
   HTML form validation all behave exactly as before.
   ========================================================================== */
.kap-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:14px;line-height:1.45;color:#5a6c7d;margin-bottom:20px}
.kap-check__in{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.kap-check__box{flex:none;width:21px;height:21px;margin-top:1px;border-radius:7px;border:1.7px solid #cfd9e6;background:#fff;display:grid;place-items:center;transition:background .18s ease,border-color .18s ease,transform .18s cubic-bezier(.2,.9,.3,1.3)}
.kap-check__box svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.kap-check__tick{stroke-dasharray:18;stroke-dashoffset:18}
.kap-check:hover .kap-check__box{border-color:#9db8d8}
.kap-check__in:checked+.kap-check__box{background:linear-gradient(135deg,#1565c0,#26c6da);border-color:transparent;transform:scale(1.04)}
.kap-check__in:checked+.kap-check__box .kap-check__tick{animation:kapTickDraw .34s cubic-bezier(.65,0,.35,1) forwards}
.kap-check__in:focus-visible+.kap-check__box{box-shadow:0 0 0 3px rgba(21,101,192,.22)}
.kap-check__lbl a{color:#1565c0;text-decoration:underline;text-underline-offset:2px}
@keyframes kapTickDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .kap-check__box,.kap-check__in:checked+.kap-check__box{transition:none;transform:none}
  .kap-check__tick{stroke-dashoffset:0}
  .kap-check__in:checked+.kap-check__box .kap-check__tick{animation:none}
}

/* Show/hide password toggle */
.kap-pw{position:relative}
.kap-pw .form-input{padding-right:44px}
.kap-pw__eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;background:none;border:0;border-radius:8px;color:#8fa2b8;cursor:pointer;transition:color .15s,background .15s}
.kap-pw__eye:hover{color:#1565c0;background:#eef5fd}
.kap-pw__eye:focus-visible{outline:2px solid #1565c0;outline-offset:1px}

/* Submit button busy state — stops the double-submits that were creating
   duplicate accounts. */
.login-popup .login-btn[disabled]{opacity:.65;cursor:progress}

/* The 4-slide panel had no progress indicator: the Swiper init pointed at
   ".swiper-pagination1" (matches nothing) AND the bullets were display:none.
   Both fixed — the bullet styles above were already written for this. */
.login-popup .swiper-pagination{bottom:22px!important;display:block!important}
.login-popup .swiper-pagination-bullet{opacity:.55;transition:opacity .18s,width .18s}
.login-popup .swiper-pagination-bullet-active{opacity:1;width:24px!important;border-radius:6px!important}


/* --- assets/website/css/custom.css --- */
/* Christmas - 2025 */
/* .snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  opacity: 0.8;
}

.snowflake {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 50%;
  opacity: 0.7;
  pointer-events: none;
  animation: fall linear infinite;
} */

.article-con img {
 width: 100% !important;
}
.article-con .articleSidebar-logo img {
 width: 150px !important;
}

@keyframes fall {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(100vh);
  }
}

.snowflake {
  background: linear-gradient(45deg, #ff2a1b, #fc48ab);
}

.nav-container .logo-container {
  position: relative;
  display: flex;
}

.nav-container .logo-container img {
  width: 126px;
  height: auto;
  display: block;
}

.nav-container .logo-container .christmas-cap {
  position: absolute;
  top: 0px;
  left: 20%;
  transform: translateX(-50%);
  width: 45px;
  height: auto;
  animation: bounceWobble 1s ease-in-out infinite;
}

@keyframes bounceWobble {
  0% {
    transform: translateX(-100%) translateY(0) rotate(0deg);
  }
  30% {
    transform: translateX(-100%) translateY(-10px) rotate(5deg);
  }
  50% {
    transform: translateX(-100%) translateY(0) rotate(-5deg);
  }
  70% {
    transform: translateX(-100%) translateY(-5px) rotate(3deg);
  }
  100% {
    transform: translateX(-100%) translateY(0) rotate(0deg);
  }
}

/* The free-trial popup (#model / #model-body / #close-btn) was removed on
   10 Aug 2026 — the header button now scrolls to the one form in the home-page
   hero. Its rules are deleted here so the stylesheet doesn't carry dead weight. */
.closed-1{
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
.abs-1
{
  position: absolute;
  bottom:10px;
  left:10px;
}
.bod-1
{
  color:#202020;
  font-size:28px;
}
.bld-1
{
  font-weight:700;
}
.ft-wg
{
  font-weight:400px;
  font-size:14px;
}
.bg-img-popover
{
  background: linear-gradient(90deg, rgb(232 232 241 / 37%) 0%, rgb(220 220 236 / 46%) 35%, rgb(180 234 245 / 10%) 100%) , url(assets/img/popup_bg.png);
}
.bg-img-popover h4
{
    color: #fff;
    background: linear-gradient(#6f6ed6, #3c079e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pop-h6
{
  font-size:1rem;
  margin-bottom:15px;
}
.sign_up_heading
{
font-weight: 500;
font-size: 32px;
color: #000;
line-height: 30px;
padding-top: 0px;
padding-bottom: 0px;
letter-spacing: 1px;
text-align:center;
}
.modal-header
{
  padding:22px;
  background-color:#ffffff;
}
/* .david_signup* belonged to the removed free-trial popup — deleted. */
.popup-cover {
    margin-top: 1rem;
    text-align: center;
}
.text-center {
    text-align: center !important;
}
.sign_up_heading {
    font-weight: 500;
    font-size: 35px;
    color: #000;
    line-height: 30px;
    padding-top: 12px;
    padding-bottom: 5px;
    letter-spacing: 1px;
    text-align: center;
}
.heading_span {
    color: #d11338;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.text-capitalize {
    text-transform: capitalize !important;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
@media (min-width: 768px) {
    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

}
/* (mobile overrides for the removed free-trial popup deleted) */
.form-group {
    margin-bottom: 1rem;
    margin: 10px;
}
.checkbox-container {
    display: flex;
    align-items: flex-start; /* checkbox stays at the top-left */
    gap: 10px;
}

.checkbox-container .checkbox {
    margin-top: 4px; /* optional fine-tuning */
}

.checkbox-container p {
    margin: 0; /* remove default spacing */
    line-height: 1.4;
}
.no-credit{
    color: red;
    text-align: center;
}

/* cookie */
.cookie-alert {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 15px;
    margin: 0!important;
    z-index: 999;
    opacity: 0;
    transform: translateY(100%);
    transition: .5s ease-out;
    background: #d1d1d1;
    color: #000
}

.cookie-alert.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s
}

.btn-toolbar,.single_what_we_do .what_we_do_figure {
    padding: 10px 0
}

.cookie-alert .card-body p {
    font-size: 13px;
    /*padding-top: 15px*/
}

#full-article table img {
  width: 40px !important;
  max-width: unset !important;
}

#full-article table td img {
  vertical-align: middle;
  margin-right: 6px;
}

.up{
  color: green;
}
.down{
  color: red;
}
/* =====================================================================
 * R15 — "Recent Picks for You" home rail (application/views/website/home.php)
 * Plain CSS, no framework. Icons are Font Awesome 6 classes in the markup.
 * ===================================================================== */
.krp{background:#fff;padding:44px 0 48px}
.krp-wrap{max-width:1180px;margin:0 auto;padding:0 18px;font-family:"Segoe UI",Inter,system-ui,sans-serif;color:#16202e}
.krp-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.krp-head h2{margin:0;font-size:25px;font-weight:800;letter-spacing:-.02em;color:#0f2747;display:flex;align-items:center;gap:10px}
.krp-head h2 .fa-solid{color:#1565c0;font-size:20px}
.krp-sub{margin:6px 0 0;font-size:13px;color:#5a6577;max-width:660px;line-height:1.5}
.krp-more{font-size:12.5px;font-weight:700;color:#1565c0;text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid #cddcf0;border-radius:999px;padding:8px 15px;transition:background .14s,border-color .14s}
.krp-more:hover{background:#eef5fd;border-color:#1565c0;text-decoration:none;color:#0d5bb5}
.krp-more .fa-solid{font-size:10px}

.krp-state{text-align:center;color:#5a6577;font-size:13.5px}
.krp-loading{padding:34px 0}
.krp-loading .fa-solid{color:#1565c0;margin-right:8px}
.krp-empty{background:#f7fafd;border:1px dashed #cfdcea;border-radius:16px;padding:34px 22px}
.krp-empty-ic{width:52px;height:52px;border-radius:14px;background:#eef5fd;color:#1565c0;display:grid;place-items:center;font-size:20px;margin:0 auto 12px}
.krp-empty-t{font-size:16px;font-weight:800;color:#0f2747}
.krp-empty-s{font-size:13px;color:#5a6577;margin:6px auto 16px;max-width:520px;line-height:1.55}
.krp-empty-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#1e88e5,#1565c0);color:#fff;font-weight:700;font-size:13px;padding:10px 18px;border-radius:10px;text-decoration:none}
.krp-empty-cta:hover{color:#fff;text-decoration:none;filter:brightness(1.05)}

.krpSlider{padding-bottom:34px}
.krpSlider .swiper-slide{height:auto}
.krp-pag{bottom:0!important}
.krp-pag .swiper-pagination-bullet-active{background:#1565c0}

.krp-card{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid #e6ebf1;border-radius:16px;padding:16px 17px 15px;box-shadow:0 1px 3px rgba(15,39,71,.06);transition:transform .14s,box-shadow .14s,border-color .14s}
.krp-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,39,71,.12);border-color:#cddcf0}
.krp-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.krp-prod{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#1565c0;background:#eef5fd;border-radius:999px;padding:4px 10px;text-decoration:none;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.krp-prod:hover{background:#ddeafc;color:#0d5bb5;text-decoration:none}
.krp-age{font-size:11px;color:#8795a7;font-weight:600;white-space:nowrap}

.krp-idrow{display:flex;flex-direction:column;gap:3px;margin-bottom:11px}
.krp-tk{font-family:"Cascadia Code","Consolas",monospace;font-weight:800;font-size:19px;color:#0f2747;letter-spacing:.01em;text-decoration:none;align-self:flex-start}
a.krp-tk:hover{color:#1565c0;text-decoration:none}
.krp-tk--locked{display:inline-flex;align-items:center;gap:8px;background:#f1f4f8;border:1px dashed #cbd5e1;color:#8795a7;border-radius:9px;padding:3px 11px;font-size:16px;letter-spacing:.18em}
.krp-tk--locked .fa-solid{font-size:12px;letter-spacing:0}
.krp-co{font-size:12px;color:#5a6577;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.krp-co--locked{color:#95a3b4;font-style:italic}

.krp-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.krp-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:4px 9px;border-radius:999px;background:#eef2f7;color:#5a6577}
.krp-badge .fa-solid{font-size:9.5px}
.krp-badge--fundamental{background:#eef5fd;color:#1565c0}
.krp-badge--technical{background:#f3edfb;color:#7b3fb5}
.krp-risk--low{background:#e8f7ee;color:#1d8a4e}
.krp-risk--medium{background:#fff4e0;color:#b26a00}
.krp-risk--high{background:#fdecea;color:#c0392b}

.krp-mid{display:flex;align-items:center;gap:14px;margin-bottom:13px}
.krp-ring{width:84px;height:84px;flex:0 0 84px}
.krp-ring-bg{fill:none;stroke:#eef2f7;stroke-width:8}
.krp-ring-fg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1)}
.krp-ring.lo .krp-ring-fg{stroke:#f0a33c}
.krp-ring.mid .krp-ring-fg{stroke:#1565c0}
.krp-ring.hi .krp-ring-fg{stroke:#1d8a4e}
.krp-ring-v{font-size:17px;font-weight:800;fill:#0f2747;font-family:"Segoe UI",Inter,system-ui,sans-serif}
.krp-ring-l{font-size:8.5px;font-weight:700;fill:#8795a7;text-transform:uppercase;letter-spacing:.06em;font-family:"Segoe UI",Inter,system-ui,sans-serif}
.krp-pot{min-width:0}
.krp-pot .l{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#8795a7}
.krp-pot .v{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px}
.krp-pot .v.up{color:#1d8a4e}
.krp-pot .v.dn{color:#c0392b}
.krp-pot .e{display:block;font-size:10.5px;color:#8795a7;line-height:1.35;margin-top:3px}

.krp-kvs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#eef2f7;border:1px solid #eef2f7;border-radius:10px;overflow:hidden;margin-bottom:13px}
.krp-kv{background:#fbfdff;padding:8px 11px}
.krp-kv .k{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#8795a7}
.krp-kv .v{display:block;font-size:14px;font-weight:800;color:#0f2747;font-variant-numeric:tabular-nums;margin-top:2px}
/* Second (stretch) target, printed after Target 1 in the same slot. Quieter
   than the scored target on purpose — see the openCard() note in home.php. */
.krp-kv .krp-t2{font-size:11.5px;font-weight:700;color:#5a6577;white-space:nowrap}
.krp-kv .v--locked{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#95a3b4;font-weight:700}
.krp-kv .v--locked .fa-solid{font-size:10px}

.krp-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13px;padding:10px 14px;border-radius:10px;text-decoration:none;transition:filter .14s,background .14s}
.krp-cta--open{background:#eef5fd;color:#1565c0;border:1px solid #cddcf0}
.krp-cta--open:hover{background:#ddeafc;color:#0d5bb5;text-decoration:none}
.krp-cta--lock{background:linear-gradient(135deg,#1e88e5,#1565c0);color:#fff}
.krp-cta--lock:hover{color:#fff;text-decoration:none;filter:brightness(1.06)}

/* Legend for the open card's two figures. They are measured from different
   starting points -- "travelled" from our entry, "potential left" from today's
   price -- and a client read the pair as contradicting each other, so the card
   now says so once, under the rail, instead of twice on every card. */
.krp-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:16px 0 0;padding:11px 14px;background:#f7f9fc;border:1px solid #e6ecf4;border-radius:10px;font-size:12px;line-height:1.5;color:#5a6577}
.krp-legend-i{flex:1 1 260px}
.krp-legend-i strong{color:#0f2747;font-weight:700}
.krp-legend-n{flex:1 1 100%;color:#8795a7;font-size:11.5px}
@media (max-width:560px){.krp-legend{gap:5px 0}}

.krp-disc{margin:18px 0 0;font-size:11.5px;color:#8795a7;line-height:1.5}
.krp-disc .fa-solid{margin-right:5px}

@media (max-width:560px){
  .krp{padding:34px 0 38px}
  .krp-head h2{font-size:21px}
  .krp-mid{gap:11px}
  .krp-ring{width:74px;height:74px;flex-basis:74px}
  .krp-pot .v{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .krp-card,.krp-ring-fg{transition:none!important}
}

/* Swiper-less fallback for the Recent Picks rail (CDN failure) — see home.php. */
.krpSlider.krp-noswiper{overflow:visible;padding-bottom:0}
.krpSlider.krp-noswiper .swiper-wrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;transform:none!important}
.krpSlider.krp-noswiper .swiper-slide{width:auto!important;margin:0!important}
.krpSlider.krp-noswiper .krp-pag{display:none}

/*custom css add for responsive
date - 20-aug-2026 by krishna
*/
@media(max-width:767px){

  .auth-buttons .account-section{
    height:unset;
  }

  .dashboard-sec { padding-inline: 12px;}

  
  .kap-market--bare .kmkt-live {
      flex-wrap: wrap; 
  }
  button#kapAiBtn::before{
    display: none;
  }
}
.knews-foot {
      margin-block: 12px;
      justify-content: center !important;
  }

.kap-market--bare .kmkt-live {
    border-radius: 10px !important;
    gap: 20px !important;
    justify-content: space-between;
}

.kap-pw__eye{
      transform: translateX(-50%) !Important;
}
.kap-market .kmkt-live{
  align-items: baseline !important;
}
span#kmktAsOf {
    white-space: nowrap;
}

/* button#kapAiBtn::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 31px;
    width: 84px;
    height: 21px;
    background-image: url(https://www.kapitales.com.au/assets/img/star.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    transform: rotate(90deg);
} */

button#kapAiBtn::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 31px;
    width: 84px;
    height: 21px;
    background-image: url(https://www.kapitales.com.au/assets/img/star.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    
    /* Smooth continuous animation */
    animation: aiSparkle 2s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes aiSparkle {
    0%, 100% {
        transform: rotate(90deg) scale(1);
        opacity: 0.85;
        filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4));
    }
    50% {
        transform: rotate(90deg) scale(1.15);
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
    }
}

body {
    font-family: "Inter", sans-serif !important;
}

button,
input,
select,
textarea, button.nav-link {
    font-family: "Inter", sans-serif;
}

.login-popup .login-left-section, .login-popup .login-right-section{
  background: unset !important;
  border: 0 !important;
}
.login-popup .swiper-slide{
  color: #2c3e50 !important;
      justify-content: center;
}
.login-popup .login-header{
  text-align: left !important;
}

.login-popup .form-group{
  margin-inline: 0;
}


/* --- assets/website/css/customTicket.css --- */
/* index page start */
    :root {
    --primary-bg: #f9fafb;
    --white: #ffffff;
    --text-main: #111827;
    --text-muted: #6b7280;
    --accent: #007bff;
    --border-color: #e5e7eb;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.ticket-sec { background-color: var(--primary-bg); padding: 2rem; color: var(--text-main); }

.ticket-container { max-width: 1200px; margin: 0 auto; }

/* --- Ticket-Header Section --- */
.ticket-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.ticket-header h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.ticket-header p { color: var(--text-muted); font-size: 0.875rem; }
.btn-create { background: var(--accent); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.3s; }
.btn-create:hover { background: #574feb; }

/* --- Stats Grid --- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background: var(--white); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border-color); position: relative; overflow: hidden; }
.stat-card p { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; }
.stat-card h2 { font-size: 2rem; font-weight: 700; margin-top: 5px; }
.stat-icon { position: absolute; right: 20px; bottom: 10px; opacity: 0.05; font-size: 3rem; }

/* --- Filters --- */
.filters { background: var(--white); padding: 1rem; border-radius: 12px; border: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem; }
.filter-group { flex: 1; min-width: 150px; }
.filter-group label { display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; margin-bottom: 5px; }
.filter-group select { w-width: 100%; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px; background: #fefefe; font-size: 0.85rem; outline: none; }
.btn-reset { background: #efeffd; color: var(--accent); border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; cursor: pointer; }

/* --- Table Styling --- */
.table-container { background: var(--white); position: relative; z-index: 1; border-radius: 12px; border: 1px solid var(--border-color); overflow-x: auto; box-shadow: var(--shadow); }

/* `min-width` MUST NOT live on the bare `table` selector.
 *
 * This stylesheet is loaded on EVERY page of the site (top-section.php), so a
 * bare `table { min-width: 900px }` put a 900px floor under every table
 * everywhere — which meant guaranteed horizontal scrolling on every phone, and
 * on desktop too wherever a table sits in a column narrower than 900px.
 *
 * Measured on /commodities/gold before this change: the "ASX companies exposed
 * to Gold" table had 687px of room on a 1280px desktop and was pinned to 900px,
 * overflowing by 213px. It could not shrink at ANY viewport width. That is the
 * left/right scrolling the client reported (20 Aug 2026).
 *
 * The floor is intentional for the wide data tables that opt into a scroll
 * container, so it moves onto `.table-container` — the support ticket list, the
 * home dividend calendar and the company-profile table, which are the three
 * places that use it. Every other table on the site now sizes to its content.
 *
 * The bare `th`/`td` rules below are deliberately LEFT bare for now: several
 * unclassed tables (the journey pages, the ASX code-change table) have no cell
 * styling of their own and rely on them. Scoping those is a separate,
 * appearance-affecting change — do it with screenshots, not in a bug fix.
 */
table { width: 100%; border-collapse: collapse; }
/* Descendant, not child: the home dividend calendar nests as
   .table-container > .table-wrapper > table, so a `>` here would silently drop
   the floor for the very table that wants it. */
.table-container table { min-width: 900px; }
th { background: #fafafa; padding: 15px; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
td { padding: 15px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }

.user-info { display: flex; align-items: center; gap: 12px; }
.user-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ticket-title { font-weight: 600; font-size: 0.95rem; }
.ticket-id { color: var(--text-muted); font-weight: 400; }
.sub-text { font-size: 0.8rem; color: var(--accent); display: block; margin-top: 2px; }

.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; }
.badge-waiting { background: #fffbeb; color: #92400e; }
.badge-closed { background: #f0fdf4; color: #166534; }

.inline-select { border: none; background: #f3f4f6; font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; color: var(--text-muted); }

/* --- Modal Popup --- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: 0.3s; z-index: 1000; }
.modal.active { visibility: visible; opacity: 1; }
.modal-content { background: white; width: 90%; max-width: 500px; padding: 2rem; border-radius: 16px; position: relative; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.close-modal { cursor: pointer; font-size: 2rem; color: var(--text-muted); }

.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; }
.form-control { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; outline-color: var(--accent); }
textarea.form-control { resize: none; min-height: 100px; }

@media (max-width: 768px) {
    .ticket-sec { padding: 1rem; }
    .filters { flex-direction: column; align-items: stretch; }
}
.avatar-circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #6366f1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
}

.ticket-card{
    max-width:500px;
    margin:60px auto;
    background:#fff;
    padding:25px;
    border-radius:10px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.ticket-card label{
    display:block;
    margin-top:15px;
    font-size:14px;
    font-weight:500;
}

.ticket-card select,
.ticket-card textarea{
    width:100%;
    padding:10px;
    border:1px solid #ddd;
    border-radius:6px;
    margin-top:5px;
}

.ticket-card button{
    width:100%;
    margin-top:20px;
    padding:10px;
    border:none;
    background:#4f46e5;
    color:#fff;
    border-radius:6px;
    cursor:pointer;
}

/* Ticket Details  */
.ticket-dashboard{
     background-color: #f4f7f6;
    padding: 20px;
}
.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid #eee;
    gap: 5px;
}

.ticket-header h1 {
    font-size: 1.4rem;
    color: #333;
}

.ticket-header h1 span {
    font-weight: normal;
    color: #666;
}


/* Main Content Layout */
.ticket-main-content {
    display: flex;
    flex-wrap: wrap; /* Responsive fix */
}

.titcket-sidebar {
    flex: 1;
    min-width: 250px;
    padding: 20px;
    border-right: 1px solid #eee;
}

.ticket-dashboard .info-box {
    border: 1px solid #ddd;
}

.ticket-dashboard .info-header {
    background: #56a8fe;
    color: white;
    padding: 10px;
    font-weight: bold;
}

.ticket-dashboard .info-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

.ticket-dashboard .info-item label {
    display: block;
    font-weight: bold;
    color: #555;
}

.ticket-dashboard .email { color: #2980b9; }

.ticket-dashboard .chat-section {
    flex: 3;
    min-width: 300px;
    padding: 20px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ticket-dashboard .chat-history {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.ticket-dashboard .message {
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 8px;
    max-width: 85%;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.ticket-dashboard .msg-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 5px;
}

.ticket-dashboard .time { color: #888; }

.ticket-dashboard .customer {
    background: #ffffff;
    align-self: flex-start;
    border-left: 5px solid #f39c12;
}

.ticket-dashboard .owner {
    background: #e1f5fe;
    align-self: flex-end;
    margin-left: auto;
    border-right: 5px solid #3498db;
}

.ticket-dashboard .reply-input textarea {
    width: 100%;
    height: 80px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: none;
}

.ticket-dashboard .send-btn {
    margin-top: 10px;
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

.ticket-dashboard .actions{
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ticket-main-content {
        flex-direction: column;
    }
    .titcket-sidebar {
        border-right: none;
        border-bottom: 1px solid #eee;
    }
}

/* Responsive Design */


/* --- assets/website/css/kap-menu.css --- */
/* =====================================================================
   kap-menu.css — the "Our Product" mega-menu and the product-page left rail.

   Loaded LAST from the $site_css array in top-section.php. It has to be last
   because the three stylesheets it overlaps with (App.css, inner.css,
   CommonServices.css) are minified single-line files with no source map and
   are off-limits for editing, so source order is the only way to win a
   specificity tie against them.

   Readable on purpose — not minified. Everything here is a positioning
   workaround for a documented constraint, and a minified version of that is
   unreviewable.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Desktop panel geometry.

   Scoped to min-width:992px so the mobile off-canvas drawer is untouched:
   below 992px App.css turns .nav-menu into a fixed drawer and .dropdown into
   a static display:none block, and that behaviour is correct as-is.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {

    /* The panel is full-navbar-width, so it must resolve against the nav row
       rather than against its own <li>. .nav-container is the 1200px row.

       position:fixed would be the obvious alternative and is WRONG here:
       App.css gives .navbar backdrop-filter:blur(10px), which makes .navbar a
       containing block, so a fixed child resolves against the navbar and not
       against the viewport. */
    .nav-container {
        position: relative;
    }

    /* The panel anchors to its OWN <li>, like every other dropdown in this bar.
       It was briefly stretched across the whole 1200px nav row, which looked
       like a site-wide takeover: it covered the page behind it and buried the
       twelve items anyone actually wanted behind a wall of tiles. A compact
       panel under the trigger is both easier to scan and less startling. */
    .nav-item.has-megamenu {
        position: relative;
    }

    .kap-mega {
        left: auto;
        right: 0;
        /* Four columns of ~92px plus padding and the scrollbar gutter. Fixed
           rather than fluid: the tile is a fixed size, so a fluid panel would
           just add whitespace between columns at wide viewports. */
        width: 420px;
        min-width: 420px;
        /* Roughly seven rows before it scrolls, which keeps the panel well
           short of the fold on a 768px-tall laptop. */
        max-height: min(70vh, 560px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px 14px 0;
    }

    /* Make the button actually work on desktop.

       script.js toggles .active on the panel, but App.css only defines
       .dropdown.active{display:block} inside @media (max-width:991px) — so
       until now the button was inoperable by click and by keyboard on
       desktop, and the menu opened on hover only.

       Deliberately NOT a blanket `.dropdown.active` desktop rule: that would
       change the behaviour of five other menus in one release. */
    .kap-mega.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* .is-closed is set by kap-menu.js ONLY on a deliberate close (click the
       button again, Escape, focus leaves the menu) and removed on mouseleave.
       Without it, clicking to close does nothing visible while the pointer is
       still over the item, because App.css's :hover rule immediately reopens
       the panel. Because it is JS-set, the no-JS hover fallback is untouched. */
    .nav-item.has-megamenu.is-closed:hover .kap-mega {
        opacity: 0;
        visibility: hidden;
    }
}


/* ---------------------------------------------------------------------
   2. Group headings and the tile grid.
   --------------------------------------------------------------------- */
.kap-mega-sec {
    padding: 0 0 12px;
}

.kap-mega-h {
    margin: 0 0 10px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8892a4;
}

.kap-mega-grid {
    display: grid;
    /* Four across, matching the reference. Six was only possible because the
       panel spanned the whole nav row. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kap-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #2c3e50;
    transition: background .2s ease, transform .2s ease;
}

.kap-tile:hover,
.kap-tile:focus-visible {
    background: #f4f6fb;
    transform: translateY(-2px);
    color: #1e90ff;
}

.kap-tile:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.kap-tile-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 15px;
}

.kap-tile-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
    /* The tile is ~92px wide now and the full product name lives in title= and
       aria-label=, so a long label clamps rather than stretching the column. */
    max-height: 2.6em;
}

/* Market chip. AU products get no chip at all — see kap_menu_market(). */
.kap-tile-chip {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #eef1f7;
    color: #55607a;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.5;
}

/* A SEPARATE badge class, not the existing .new-tag from top-section.php.
   .new-tag carries animation:blinker, and a grid of up to 22 tiles could put
   several blinking badges on screen at once, which is a vestibular trigger.
   Static here. */
.kap-badge-new {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #ff3b30;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1.6;
}


/* ---------------------------------------------------------------------
   3. Footer bar — always visible, never staff-gated.
   --------------------------------------------------------------------- */
.kap-mega-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    /* Bleeds to the panel edge, so this MUST track .kap-mega's padding. It was
       -16px against 14px of padding, which pushed the bar 4px past the panel
       and gave the whole menu a horizontal scrollbar. */
    margin: 0 -14px;
    padding: 11px 14px;
    border-top: 1px solid #edf0f5;
    background: #fafbfd;
    border-radius: 0 0 8px 8px;
}

.kap-mega-foot-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #2c3e50;
    font-size: 13.5px;
    font-weight: 700;
}

.kap-mega-foot-link i {
    color: #1b9e5a;
}

.kap-mega-foot-txt small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #7d8798;
}

.kap-mega-foot-all {
    text-decoration: none;
    color: #1e90ff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.kap-mega-foot-link:hover,
.kap-mega-foot-all:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------------------
   4. Mobile drawer. At <=991px .nav-menu is a fixed off-canvas panel and
      .dropdown is a static block, so the grid has to become a plain stacked
      list or the tiles end up 40px wide.

      Paddings match App.css's mobile .dropdown-link{padding:10px 30px} so the
      product rows line up with the About/Research/Sectors rows in the same
      drawer.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .kap-mega {
        padding: 0;
    }

    .kap-mega-sec {
        padding: 0;
    }

    .kap-mega-h {
        padding: 10px 30px 4px;
    }

    .kap-mega-grid {
        display: block;
    }

    .kap-tile {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 30px;
        border-radius: 0;
    }

    .kap-tile:hover,
    .kap-tile:focus-visible {
        transform: none;
    }

    .kap-tile-disc {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .kap-tile-label {
        -webkit-line-clamp: 2;
        text-align: left;
        font-size: 14px;
        max-height: none;
    }

    /* Absolute corners make no sense on a full-width row. */
    .kap-tile-chip,
    .kap-badge-new {
        position: static;
        margin-left: auto;
    }

    .kap-mega-foot {
        margin: 0;
        padding: 12px 30px;
        border-radius: 0;
    }
}


/* ---------------------------------------------------------------------
   5. Product page left rail.

   The wrapper carries BOTH .companies-code-sec (the shipped flex rail from
   inner.css: sidebar width, tab styling, and a complete <=768px horizontal
   scroller) and .kap-product-shell (the handful of things that rail needs in
   order to be sticky and to hold 22 items). inner.css is minified and must
   not be edited, so everything below is additive.

   The markup deliberately sits OUTSIDE every .container and outside
   #productReport, which dissolves two blockers at once:
     - .container{overflow:hidden} (App.css) kills position:sticky outright;
     - CommonServices.css forces #productReport.article-con to
       grid-template-columns:47fr 0fr!important, so a column added inside it
       collapses to zero width.
   --------------------------------------------------------------------- */
.kap-product-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
    /* LOAD-BEARING. The flex default is align-items:stretch, which makes the
       aside exactly as tall as the article column — at which point the sticky
       element has zero travel inside its own parent and silently never
       sticks. This one line is the difference between a working rail and a
       rail that "just doesn't work" with no error anywhere. */
    align-items: flex-start;
}

.kap-product-shell .companies-code-sidebar {
    position: sticky;
    top: 100px;
    flex: 0 0 220px;
    width: 220px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    border-radius: 12px;
}

.kap-product-main {
    /* min-width:0 or the long CKEditor paragraphs and the article grid push
       the flex item wider than its track and the rail gets squeezed off. */
    flex: 1;
    min-width: 0;
}

.kap-product-rail-h {
    margin: 0 0 6px;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8892a4;
}

/* inner.css sizes .tab for three year buttons (18px/700, 15px 30px padding).
   This rail carries 22 products plus two footer links, so it needs to be
   denser or it is 900px tall before anything is selected. */
.kap-product-rail .tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #556070;
}

.kap-product-rail .tab i {
    flex: 0 0 16px;
    font-size: 13px;
    text-align: center;
}

.kap-product-rail .tab-sep {
    margin: 8px 16px;
    border: 0;
    border-top: 1px solid #eceff4;
}

@media screen and (max-width: 768px) {
    /* Hand the rail back to inner.css's horizontal scroller. position:sticky
       has to be cleared explicitly: the rules above are more specific than
       inner.css's mobile block, so they would otherwise keep winning. */
    .kap-product-shell .companies-code-sidebar {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        max-height: none;
        overflow-y: visible;
        overflow-x: auto;
        display: flex;
        border-radius: 0;
    }

    .kap-product-rail-h,
    .kap-product-rail .tab-sep {
        display: none;
    }

    .kap-product-rail .tab {
        white-space: nowrap;
        border-left: none;
        border-bottom: 4px solid transparent;
        padding: 10px 16px;
    }

    .kap-product-rail .tab.active {
        border-left: none;
        border-bottom: 4px solid #1e90ff;
    }
}


/* ---------------------------------------------------------------------
   6. /our-products cards.

   Hero artwork exists for nine of the twenty-two products. The other thirteen
   get the derived icon on a tinted panel of the same height, so the grid still
   reads as one set instead of as "nine real products and thirteen broken
   images".
   --------------------------------------------------------------------- */
.kap-card-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    /* CommonServices.css sets .serviceImg{height:200px} and then relaxes it to
       height:auto further down the file; an explicit min-height keeps the
       fallback the same size as a real hero either way. */
    min-height: 200px;
    font-size: 56px;
}

/* .kap-tile-chip is absolutely positioned for the menu tiles; on a card it
   sits inline after the product name. */
.kap-card-chip {
    position: static;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}


/* ---------------------------------------------------------------------
   7. Reduced motion. The tile lift and the panel slide are decoration.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .kap-mega,
    .kap-tile {
        transition: none;
    }

    .kap-tile:hover,
    .kap-tile:focus-visible {
        transform: none;
    }
}


/* =====================================================================
   5. The 19 Aug 2026 bar — AI Hub / Research / Screeners / More.

   Everything here is ADDITIVE. No rule above is edited, and no rule below
   changes how the existing "Our Product" panel renders: that panel keeps
   the compact four-across grid because it carries 22 products, and a
   sentence under 22 tiles is a wall of text. The three new panels carry
   four to nine items each, so they get the descriptive row treatment from
   the reference design.

   Two densities, one tile. Same disc, same hover, same badge colours —
   only the direction of the flex and the presence of .kap-tile-desc
   differ.
   ===================================================================== */

@media (min-width: 992px) {

    /* Panel widths per density. The base .kap-mega is 420px (four ~92px
       columns); a two-column row layout with descriptions needs more. */
    .kap-mega--rich {
        width: 640px;
        min-width: 640px;
    }

    /* With the spotlight rail alongside. */
    .kap-mega--rich.kap-mega--spot {
        width: 880px;
        min-width: 880px;
    }

    /* Single-column rows (Screeners) stay narrow — two columns of four
       items would leave a half-empty second row. */
    .kap-mega--slim {
        width: 380px;
        min-width: 380px;
    }

    /* Wide panels resolve against the NAV ROW, not their own <li>.

       Every panel used to be right-anchored to its trigger, which is right for
       a compact one: 420px hanging under "Research" sits neatly below it. It
       breaks for the two wide panels. "AI Hub" is the FIRST item in the bar and
       carries the widest panel (880px with the spotlight rail), so right:0 on a
       left-positioned <li> puts the panel's left edge at a negative x and the
       whole first tile column lands off-screen — reported 19 Aug 2026.

       max-width alone does not fix that: clamping the WIDTH of a box whose
       right edge is pinned just moves the left edge, it never brings it back
       on screen. The containing block has to change.

       position:static on the <li> hands that job to .nav-container, which is
       position:relative, max-width:1200px and centred — so a panel anchored to
       it cannot leave the viewport at any width. Narrow panels keep the <li>
       anchoring and the under-the-trigger feel. */
    .nav-item.has-megamenu.is-wide {
        position: static;
    }

    /* Safety net for the <li>-anchored narrow panels at small desktop widths.
       Declared BEFORE the --rich rules below so their own max-width wins:
       same specificity means source order decides, and a later generic rule
       quietly overriding a more specific-looking one is how the Market
       Snapshot header bug happened. */
    .kap-mega {
        max-width: calc(100vw - 32px);
    }

    .kap-mega--rich {
        left: 0;
        right: auto;
        /* 100% of .nav-container now, not of the viewport — the panel is
           anchored to the row, so it can never be wider than the row. */
        max-width: 100%;
    }

    /* "More" is the last item in the bar, so its panel reads correctly flush
       to the right edge of the row rather than the left. */
    .kap-mega--rich.kap-mega--right {
        left: auto;
        right: 0;
    }

    /* Make click and keyboard work for EVERY menu, not just the mega panel.

       The note at section 1 says a blanket rule was avoided because it
       would change five other menus in one release. That is no longer a
       risk: this release rebuilds the bar, and the only plain dropdown
       left is Learn. Without this, script.js toggles .active on desktop
       and nothing happens — the menus open on hover only and are
       unreachable by keyboard, which is a WCAG 2.1.1 failure. */
    .nav-item.has-dropdown > .dropdown.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Same .is-closed guard section 1 documents, widened to match: without
       it, clicking a menu shut does nothing visible while the pointer is
       still over the item, because App.css's :hover rule reopens it. */
    .nav-item.has-dropdown.is-closed:hover > .dropdown {
        opacity: 0;
        visibility: hidden;
    }
}

/* --- two-column layout inside a rich panel ------------------------- */

.kap-mega-cols {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.kap-mega-main {
    flex: 1 1 auto;
    min-width: 0;
}

.kap-mega-spot {
    flex: 0 0 250px;
    border-left: 1px solid #eceff5;
    padding-left: 14px;
}

/* --- the descriptive tile ------------------------------------------ */

/* Two across for four-plus items; .kap-mega-grid--single for short lists. */
.kap-mega-grid--rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kap-mega-grid--single {
    grid-template-columns: 1fr;
}

.kap-tile--row {
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    padding: 10px;
    text-align: left;
}

/* The label is centred and 11px in the compact grid because the tile is
   only ~92px wide. In a row it has the whole column, so it reads as a
   heading instead. */
.kap-tile--row .kap-tile-label {
    font-size: 13px;
    text-align: left;
    max-height: none;
    -webkit-line-clamp: 2;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kap-tile-txt {
    min-width: 0;
}

.kap-tile-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 400;
    color: #6b7688;
}

/* The tile's :hover turns the label #1e90ff. The description must NOT
   follow it there — two blues at different weights on the same tile reads
   as a broken link state. It darkens instead. */
.kap-tile:hover .kap-tile-desc,
.kap-tile:focus-visible .kap-tile-desc {
    color: #55607a;
}

/* In a row layout the top-left absolute badge would sit on the disc, so
   the badge moves inline beside the label. Same red as .kap-badge-new,
   same static-not-blinking rule for the same vestibular reason. */
.kap-tile-badge {
    padding: 1px 5px;
    border-radius: 4px;
    background: #ff3b30;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1.7;
}

/* --- spotlight rail ------------------------------------------------- */

.kap-spot-card {
    border: 1px solid #eceff5;
    border-radius: 10px;
    padding: 11px 12px;
    margin-bottom: 9px;
    background: #fbfcfe;
}

.kap-spot-card:last-child {
    margin-bottom: 0;
}

.kap-spot-badge {
    display: inline-block;
    margin-bottom: 7px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.kap-spot-t {
    margin: 0 0 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: #2c3e50;
}

.kap-spot-d {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #6b7688;
}

/* --- mobile: fold the two columns into one -------------------------- */

@media (max-width: 991px) {

    .kap-mega--rich,
    .kap-mega--rich.kap-mega--spot,
    .kap-mega--slim {
        width: auto;
        min-width: 0;
    }

    .kap-mega-cols {
        display: block;
    }

    /* The spotlight is a desktop affordance: it repeats links that are
       already in the panel, and on a phone that is three extra screens of
       scrolling between the reader and what they came for. */
    .kap-mega-spot {
        display: none;
    }

    .kap-mega-grid--rows,
    .kap-mega-grid--single {
        display: block;
    }

    .kap-tile--row {
        padding: 10px 30px;
        border-radius: 0;
    }

    /* The description survives on mobile — the row is full width, so it
       costs one line and it is the only thing distinguishing nine
       near-identical "More" entries from each other. */
    .kap-tile--row .kap-tile-label {
        font-size: 14px;
    }
}

/* Source tag on the header news strip. The marquee mixes our own editorial
   headlines with the automated EODHD wire; without a tag the two are
   indistinguishable, which matters on a financial-services site where one
   is our opinion and the other is not. */
.news-src {
    display: inline-block;
    margin-right: 7px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .18);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* =====================================================================
   8. ACCOUNT RAIL  (member dashboard + member-area pages)
   ---------------------------------------------------------------------
   Additive only. Everything structural — sticky positioning, hover, the
   .tab.active treatment and the ENTIRE <=768px horizontal-scroller
   fallback — is inherited from the product rail above and from inner.css
   by doubling the classes on the markup. This block only widens the rail
   for longer labels, re-densifies it for ~40 rows instead of 22, and
   styles the collapsible groups.

   Rendered by application/views/website/includes/account_rail.php, which
   documents the two ways this silently breaks (a .container ancestor, and
   losing align-items:flex-start).
   ===================================================================== */
.kap-account-shell .companies-code-sidebar { flex: 0 0 240px; width: 240px; }

/* ~40 rows where the shipped sizing was tuned for 22. */
.kap-account-rail .tab { padding: 8px 16px; font-size: 13px; }

.kap-account-rail .kap-product-rail-h { margin-top: 14px; }
.kap-account-rail .kap-product-rail-h:first-child { margin-top: 2px; }

/* Collapsible groups via <details>, so no JavaScript is involved and the
   open/closed state survives with the markup. The default disclosure
   triangle is removed in favour of the chevron the summary already
   carries, which matches the header menu's affordance. */
.kap-account-rail details.kap-rail-grp > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
}
.kap-account-rail details.kap-rail-grp > summary::-webkit-details-marker { display: none; }
.kap-account-rail details.kap-rail-grp > summary i {
    font-size: 9px;
    color: #b3bbc7;
    transition: transform .15s ease;
}
.kap-account-rail details.kap-rail-grp[open] > summary i { transform: rotate(180deg); }
.kap-account-rail details.kap-rail-grp > summary:hover { color: #1565c0; }

.kap-account-rail .kap-rail-badge {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e8f1fd;
    color: #1565c0;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    /* The inherited fallback turns the rail into a horizontal scroller and
       hides the group headings — correct for 22 same-shaped products, but
       40 mixed links need their grouping. Bring the headings back as inline
       divider chips, and flatten <details> so a collapsed group cannot hide
       its links in a strip that has no room to expand. */
    .kap-account-rail .kap-product-rail-h {
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 0 12px;
        white-space: nowrap;
        border-left: 1px solid #eceff4;
    }
    .kap-account-rail .kap-product-rail-h i { display: none; }
    .kap-account-rail details.kap-rail-grp { display: contents; }
    .kap-account-rail .kap-rail-badge { display: none; }
}

/* =====================================================================
   9. MEMBER DASHBOARD  (/welcome)
   ---------------------------------------------------------------------
   Card, header and body geometry mirror the .kco-* system already shipped
   in company.bundle.js, so the dashboard and the company page read as one
   product. Values are re-declared rather than imported because that
   system is injected from JS and scoped to #kap-root, which this page's
   server-rendered half is not inside.
   ===================================================================== */
.kdash { max-width: 100%; padding: 22px 0 40px; }

/* Cards — same numbers as .kco-card. */
.kdash .kco-card {
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 39, 71, .05);
    margin-bottom: 16px;
    overflow: hidden;
}
.kdash .kco-ch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f7;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #0f2747;
}
.kdash .kco-ch i { color: #1565c0; }
.kdash .kco-cb { padding: 16px 18px; }

/* "Open this section" button at the foot of a card.
 *
 * dashboard.bundle.js emits the same markup for the island cards, but its CSS is
 * scoped to .kdash-island and cannot reach the PHP-rendered ones — these rules
 * are the server-side half. Keep the two in step, or the buttons will look
 * different on the two halves of the same page. */
.kdash .kd-cta {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #eef2f7;
    text-align: right;
}
.kdash .kd-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #cddcf0;
    border-radius: 10px;
    padding: 8px 14px;
    background: #fff;
    color: #1565c0;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}
.kdash .kd-btn:hover { background: #f4f7fb; border-color: #1565c0; }
.kdash .kd-btn i { font-size: 10px; transition: transform .12s; }
.kdash .kd-btn:hover i { transform: translateX(2px); }

/* Full width on a phone, where a right-aligned button is an awkward reach. */
@media (max-width: 560px) {
    .kdash .kd-cta { text-align: stretch; }
    .kdash .kd-btn { display: flex; justify-content: center; width: 100%; }
}
.kdash .kco-btn {
    display: inline-block;
    border: 1px solid #cddcf0;
    border-radius: 10px;
    padding: 9px 14px;
    background: #fff;
    color: #1565c0;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.kdash .kco-btn:hover { background: #f4f7fb; }

/* Greeting */
.kdash-greet {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.kdash-greet h1 { margin: 0 0 5px; font-size: 26px; font-weight: 800; color: #0f2747; letter-spacing: -.01em; }
.kdash-sub { margin: 0; font-size: 13.5px; color: #5a6577; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kdash-sub .sep { color: #c3ccd8; }
.kdash-mkt { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.kdash-mkt.on { color: #1d8a4e; }
.kdash-mkt.off { color: #8795a7; }
.kdash-mkt .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kdash-mkt.on .dot { animation: kdashPulse 1.9s infinite; }
@keyframes kdashPulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.kdash-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 11px;
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(21, 101, 192, .28);
}
.kdash-cta:hover { filter: brightness(1.07); color: #fff; }

/* Grid — the same 1.6/1 split and 900px collapse as .kco-grid. */
.kdash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .kdash-grid { grid-template-columns: minmax(0, 1fr); } }
.kdash-col { min-width: 0; }

/* Plan card */
.kdash-plan { font-size: 19px; font-weight: 800; color: #0f2747; }
.kdash-planstatus { display: inline-flex; align-items: center; gap: 6px; margin: 5px 0 10px; font-size: 12px; font-weight: 700; }
.kdash-planstatus.on { color: #1d8a4e; }
.kdash-planstatus.off { color: #8795a7; }
.kdash-planstatus .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kdash-planmeta { margin: 0 0 13px; font-size: 12.5px; color: #5a6577; }
.kdash-planbtns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Research list */
.kdash-cat { margin: 14px 0 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a98ab; }
.kdash-cat:first-child { margin-top: 0; }
.kdash-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.kdash-prod {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px;
    border: 1px solid #eef2f7; border-radius: 10px;
    background: #fbfdff;
    color: #0f2747; font-size: 13px; font-weight: 600;
    text-decoration: none;
    min-width: 0;
}
.kdash-prod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdash-prod i { color: #1565c0; flex: 0 0 auto; }
.kdash-prod:hover { border-color: #cddcf0; background: #f4f7fb; color: #0f2747; }
.kdash-prod.is-premium i { color: #b45309; }

/* Ex-dividend table. No min-width: this sits in the narrow column, and a
   floor here is exactly the bug that made every table on the site scroll. */
.kdash-cal { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kdash-cal th { padding: 0 6px 8px; border-bottom: 1px solid #eef2f7; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #98a3b2; }
.kdash-cal td { padding: 9px 6px; border-bottom: 1px solid #f4f7fb; }
.kdash-cal tr:last-child td { border-bottom: 0; }
.kdash-cal .r, .kdash-cal th.r { text-align: right; }
.kdash-cal .d { color: #5a6577; white-space: nowrap; }
.kdash-tk { font-family: "Cascadia Code", Consolas, monospace; font-weight: 800; font-size: 12px; color: #1565c0; text-decoration: none; }
.kdash-tk:hover { text-decoration: underline; }
.kdash-note { margin: 11px 0 0; font-size: 11px; color: #9aa4b1; line-height: 1.5; }
.kdash-foot { margin: 6px 2px 0; font-size: 11.5px; color: #9aa4b1; line-height: 1.6; }

/* Quick-action tiles reuse the header mega-menu tile. */
.kdash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }

/* An island mount is invisible until its bundle fills it, so it must not
   reserve space — otherwise a JS failure leaves a hole. */
.kdash-island:empty { display: none; }

/* ---------------------------------------------------------------------
   Neutralise the PRODUCTS-page table styling inside the account shell.

   The shell reuses .companies-code-sec to inherit the rail's layout and
   its <=768px fallback. That class also carries, from inner.css:

       .companies-code-sec th,
       .companies-code-sec td { border: 2px solid #1e90ff; padding: 12px 15px }

   which is right for the product comparison tables and wrong for every
   table on a member page — it wrapped the dashboard's ex-dividend list in
   heavy blue boxes. A component rule setting only `border-bottom` does
   NOT undo it: the other three sides keep coming from inner.css, which is
   minified and never edited. Reset here, then let each component style
   its own table.
   --------------------------------------------------------------------- */
.kap-account-shell th,
.kap-account-shell td {
    border: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    white-space: normal;
    font-size: inherit;
    font-weight: inherit;
}

/* Re-apply the dashboard calendar's own cell rules AFTER the reset. */
.kap-account-shell .kdash-cal th {
    padding: 0 6px 8px;
    border-bottom: 1px solid #eef2f7;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #98a3b2;
}
.kap-account-shell .kdash-cal td { padding: 9px 6px; border-bottom: 1px solid #f4f7fb; }
.kap-account-shell .kdash-cal tr:last-child td { border-bottom: 0; }
.kap-account-shell .kdash-cal .r,
.kap-account-shell .kdash-cal th.r { text-align: right; }
.kap-account-shell .kdash-cal .d { color: #5a6577; white-space: nowrap; }