/* --- Announcement Bar --- */
.announcement-item {
    display: flex !important;
    align-items: center;
    gap: 14px;
    justify-content: center;
}
.announcement-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    background: #F9F8FF;
    padding: 12px 0;
    position: relative;
    /* Add transition for background color for smooth hover */
    transition: background 0.3s ease;
}

.announcement-bar:before,
.announcement-bar:after {
    content: '';
    background: #F9F8FF;
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0; /* Ensure they are aligned with the bar */
    transition: background 0.3s ease; /* Transition for their background */
}
.announcement-bar:before {
    right: 100%;
}
.announcement-bar:after {
    left: 100%;
}

/* Announcement Bar Hover State */
.announcement-bar:hover,
.announcement-bar:hover:before,
.announcement-bar:hover:after {
    background: #281638; /* Dark background on hover */
}

.announcement-bar:hover .announcement-content {
    color: #F1F2F9; /* Change main content color on hover */
}
.announcement-bar:hover .announcement-content span {
    color: #fff; /* Bold text color change on hover */
}
.announcement-bar:hover a {
    color: #fff !important; /* Link text color change on hover */
}

/* Arrow Icon in Announcement Bar */
.announcement-bar .arrow-icon .stroke-gradient {
    display: none; /* Hide gradient by default */
}
.announcement-bar:hover .arrow-icon .stroke-black {
    display: none; /* Hide black stroke on hover */
}
.announcement-bar:hover .arrow-icon .stroke-gradient {
    display: inline; /* Show gradient on hover */
}

.announcement-content {
    font-size: 16px;
    color: #6F6C8F;
}
.announcement-content span {
    font-weight: 600;
    color: #170F49;
    margin-right: 6px;
}
.announcement-bar a {
    align-items: center;
    color: #170f49 !important;
    display: flex;
    font-family: Inter, sans-serif;
    font-size: 16px;
    gap: 4px;
    text-decoration: none;
}


/* --- Main Header --- */
.stackgen-new-header {
    padding: 14px 0;
    z-index: 9;
    position: relative;
    /* Add transition for when hs-elevate-header is applied */
    transition: background-color 0.3s ease, border-bottom 0.3s ease, box-shadow 0.3s ease;
}

.hs-elevate-header {
    backdrop-filter: blur(22.5px);
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
    /* Ensure no padding-top is needed if header is fixed */
}

main#main-content {
    /* Adjust this padding-top value if your fixed header height changes dynamically */
    /* If the header becomes fixed and takes up space, content below needs to be pushed down */
    padding-top: 148px; /* Assuming header height is around this value + announcement bar */
}

.stackgen-new-header .container {
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hamburger icon (default hidden) */
#hamburger {
    display: none; /* Hidden by default on desktop */
    cursor: pointer;
    /* Add styles for hamburger states if using SVG transformation */
}

/* Hamburger SVG path transitions (example for is-open state) */
#hamburger svg path {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform-origin: center;
}



.logo {
    display: flex;
}
.logo img {
    height: 35px; /* Set a default height for the logo */
    width: auto;
}

ul.nav-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex; /* Display as flex for desktop nav */
    align-items: center;
    gap: 40px;
}

.nav-link {
    color: #04010E99 !important; /* Semi-transparent black */
    line-height: 127%;
    padding: 5px 7px;
    text-decoration: none !important;
    transition: color 0.3s ease, background 0.3s ease; /* Smooth transition */
}

.header-button a {
    background: linear-gradient(180deg, #1F1D20 0%, #373637 100%);
    border-radius: 28px;
    box-shadow: 0px 0px 0.75px 0.75px #04010E1A inset;
    padding: 15px 15px 15px 26px;
    color: #fff!important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex; /* Use inline-flex for button content alignment */
    align-items: center; /* Vertically align text and SVG */
    justify-content: center;
    gap: 4px; /* Space between text and SVG */
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}
.header-button a:hover {
    #background: #fff;
    color: #000;
}
.header-button a:hover svg path {
    stroke: #000;
}
.header-button svg {
    height: 12px;
    width: 12px; /* Set width to prevent distortion */
    /* margin-left: 4px; -- already handled by gap */
}

/* Nav Link Hover Effects */
a.nav-link svg {
    margin-left: 3px;
    transition: transform .3s ease; /* Smooth transition for arrow rotation */
}
.nav-item:hover .nav-link svg {
    transform: scaleY(-1); /* Flips vertically */
}
.nav-item:hover .nav-link {
    color: #000 !important;
    background: #F0EFF1;
    border-radius: 4px;
}
.nav-item:hover .nav-link svg path {
    stroke: #000 !important;
}

/* --- Base Dropdown (Level 2 - "Platform" Mega Menu) --- */
.nav-item.dropdown-level2 {
    position: relative; /* Essential for positioning .dropdown-content-level2 */
}
.dropdown-content-level2 {
    border-radius: 4px;
    color: #fff;
    display: none; /* Hidden by default for desktop (JS shows on hover) */
    flex-wrap: wrap; /* Allows columns to wrap */
    left: 0; /* Align left with parent nav-item */
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%; /* Position below the nav item */
    transition: opacity .3s ease, visibility .3s ease;
    visibility: hidden;
    z-index: 10;
    /* Add a background for the whole dropdown, if needed */
    /* background-color: #281638; /* Example */
}

/* Show the level2 dropdown when the main nav item is hovered (Desktop) */
.nav-item.dropdown-level2:hover .dropdown-content-level2 {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Styles for columns inside Level 2 dropdown */
.dropdown-content-level2 .dropdown-column {
    flex: 1;
    min-width: 250px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    background-color: #281638; /* Column specific background */
    border: 1px solid #BF89FD;
    padding: 15px 0px 33px 0px;
    margin-top: 35px; /* Pushes content down, adjust if needed */
}

.dropdown-content-level2 .dropdown-column label {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF6B;
    line-height: 127%;
    font-family: "Geist Mono", monospace;
    letter-spacing: 1.3px;
  padding:0 20px;
}

.dropdown-content-level2 .dropdown-column a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    line-height: 127%;
  padding:0 22px 0 18px;
      text-transform: capitalize;
}
.dropdown-column-level3>label {
    padding: 0 !important;
}
.dropdown-content-level2 .dropdown-column > a:hover {
    color: #fff; /* Revert to white on hover (already white, for emphasis) */
}

.dropdown-content-level2 .dropdown-column a p {
    font-size: 11px;
    color: #FFFFFF6B;
    margin-bottom: 0;
    line-height: 1.3;
}

.dropdown-column > a:hover span {
    border-bottom: 1px solid transparent;
    border-image-source: linear-gradient(90deg, #862DFD 0.86%, #F73DF1 100%);
    border-image-slice: 1;
    border-image-repeat: stretch;
}
/* Arrow icon within level 2 dropdown link (for level 3 trigger) */
.arrow-icon .icon-path {
    stroke: white; /* The path is white by default */
    stroke-width: 0.75px;
    transition: stroke 0.3s ease, stroke-width 0.3s ease;
}
.nested-dropdown-trigger svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.nested-dropdown-trigger:hover .icon-path {
    stroke: url(#iconGradient); /* Reference the gradient ID defined in SVG */
    stroke-width: 1px; /* Change to 1px on hover */
}


/* --- Nested Dropdown (Level 3 - "Agents" Flyout) --- */

/* Style for the 'Agents' link (or any link that triggers a level3 flyout) */
.dropdown-content-level2 .dropdown-column .nested-dropdown-trigger > .nav-link-level3 {
    display: block;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative; /* Essential for positioning its nested dropdown */
    padding-right: 20px; /* Space for the arrow */
}
.dropdown-content-level2 .dropdown-column .nested-dropdown-trigger > .nav-link-level3:hover {
    color: #fff;
}

/* The actual Level 3 content (Agents section flyout) */
.dropdown-content-level3 {
    border-radius: 0 4px 4px 4px;
    display: none; /* Hidden by default for desktop (JS shows on hover) */
    left: calc( 100% - 0px); /* Position next to the trigger */
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0; /* Align top with its trigger */
    min-width: 710px;
    transition: opacity .3s ease, visibility .3s ease;
    visibility: hidden;
    z-index: 11;
    margin-top: 35px; /* Pushes content down, adjust if needed */
}
.dropdown-column-level3 {
    background-color: #180d22;
    border: 1px solid #bf89fd;
    padding: 15px 31px 60px 18px;
}
.dropdown-content-level3 > p {
    color: #fff;
    font-size: 12px;
    width: 70%;
    line-height: 127%;
    margin-top: 4px;
    margin-bottom: 0;
}

/* Show Level 3 dropdown when its parent .nested-dropdown-trigger is hovered (Desktop) */
.dropdown-content-level2 .dropdown-column .nested-dropdown-trigger:hover .dropdown-content-level3 {
    display: block; /* Or flex, depending on internal layout */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Styles for Agent Sections within Level 3 */
.agent-sections {
    display: grid;
    gap: 23px;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 23px;
}
.agent-section {
    position: relative;
    color: #fff;
}
.agent-section label {
    color: #fff !important;
    margin-bottom: 4px;
    display: block;
    letter-spacing: 1px;
      padding: 0 !important;
}
.agent-section a {
    color: #fff;
    text-decoration: none;
    display: block;
    line-height: 1.3;
      padding: 0 !important;
}
.agent-section a:hover {
    color: #fff;
}
.agent-section a p {
    color: #6D6673 !important;
    font-size: .8em;
    margin-top: 2px;
    width: 100%;
}
.agent-section:hover p {
    color: #fff !important;
}
/* Coming soon tag */
.coming-soon-tag {
    background-color: #fff;
    color: #684E87;
    display: inline-block;
    font-size: 6px;
    font-weight: 500;
    line-height: 120%;
    margin-left: 3px;
    padding: 3px 4px;
    border-radius: 75px;
    position: relative;
    top: -4px;
}

/* Specific styling for sections with 'coming-soon' ID/class */
#coming-soon label,
#coming-soon a {
    color: #86739C !important; /* Muted color for coming soon sections */
}
/* Fix for multiple #coming-soon IDs:
   Change all <div id="coming-soon"> to <div class="coming-soon-item"> in HTML
   Then update this CSS to:
   .coming-soon-item label,
   .coming-soon-item a { color: #86739C !important; }
*/


/* Level 3 Hover Arrow */
svg.level3-hoverarrow {
    position: absolute; /* Changed from unset to absolute for positioning */
    right: -15px; /* Position to the right of the text */
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Hidden by default */
    width: 12px; /* Ensure consistent size */
    height: 12px;
}
.agent-section:hover svg.level3-hoverarrow {
    display: block; /* Show on hover */
    /* Adjust position if needed with left/right */
}
#coming-soon.agent-section:hover svg.level3-hoverarrow {
    display: none !important; /* Override: hide arrow for coming soon on hover */
}
/* Again, if #coming-soon becomes .coming-soon-item, this would be:
   .coming-soon-item.agent-section:hover svg.level3-hoverarrow { display: none !important; }
*/

/* Agent Section Hover Effect (Left border and padding) */
.agent-section:hover {
    padding-left: 6px;
    transition: all .5s ease;
}
.agent-section:hover:before {
    content: "";
    background: linear-gradient(180deg, #862DFD 0%, #F73DF1 49.52%, rgba(63, 217, 251, 0.973695) 100%);
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
}
.agent-section a span {
    position: relative; /* Ensure span can contain elements if needed */
}
.\33 -column-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}
.\33 -column-item label {
    display: block;
    margin-bottom: 10px;
}
.\33 -column-item a {
    display: block;
    margin-bottom: 10px;
}

.\33 -column-item a:hover span {
    border-bottom: 1px solid transparent;
    border-image-source: linear-gradient(90deg, #862DFD 0.86%, #F73DF1 100%);
    border-image-slice: 1;
    border-image-repeat: stretch;
}


/* --- Responsive Design --- */
@media (max-width: 1280px) {
    .dropdown-content-level3 {
        min-width: 560px;
    }
    .agent-sections {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    /* Hamburger Icon Mobile State */
    .hamburger {
        display: block !important;
    }
    .hamburger svg path {
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        transform-origin: center;
    }

    /* Main Navigation Mobile State */
    .stackgen-new-header .nav {
        height: calc( 100vh - 35px); /* Full viewport height */
        display: none; /* Hidden by default for mobile */
        flex-direction: column;
        width: 100%;
        position: fixed; /* Fixed position for mobile overlay */
        top: 150px; /* Adjust based on your actual header height */
        left: 0;
        background-color: #fff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 999;
        padding-bottom: 70px; /* Ensure content above bottom if fixed */
        overflow-y: auto; /* Allow scrolling for long menus */
    }
    .stackgen-new-header .nav.active {
        display: flex; /* Show when active */
    }
    ul.nav-list {
        flex-direction: column;
        width: 100%;
        gap: 0 !important;
        overflow-y: visible; /* Let inner content scroll if needed */
    }
    .nav-item {
        margin: 10px 0;
        text-align: left; /* Align to left for mobile list */
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        width: 100%;
    }
    .nav-item:last-child {
        border-bottom: none;
    }
    .nav-link {
        width: 100%;
        display: flex; /* Use flex for icon alignment */
        justify-content: space-between; /* Push arrow to right */
        align-items: center;
        padding: 10px 15px; /* Add internal padding */
    }
    .nav-item:hover .nav-link {
        background: transparent; /* No background on hover for mobile */
    }

    /* Adjust header button on mobile */
    .header-button {
        text-align: center;
        margin-left: auto; /* Push to right on header */
        margin-right: 15px;
        width: auto;
    }
    .header-button .btn {
        width: auto;
        margin: 0 auto;
        justify-content: center;
    }

    /* Level 2 Dropdown on Mobile (Platform Mega Menu) */
    .dropdown-content-level2 {
        position: static; /* Stack vertically */
        transform: none;
        width: 100%;
        min-width: auto;
        box-shadow: none;
        margin-top: 10px;
        flex-direction: column;
        gap: 10px;
        display: none; /* Hidden by default, JS toggles */
        opacity: 1; /* Override transition opacity for mobile */
        visibility: visible; /* Override transition visibility for mobile */
        pointer-events: auto;
        padding: 0; /* Adjust padding for mobile */
        background-color: transparent; /* Column background for mobile is inside column */
        border: none; /* No border for the main dropdown content */
    }
    .nav-item.dropdown-level2.active .dropdown-content-level2 {
        display: flex; /* Show the content */
    }
    .nav-item.dropdown-level2.active .nav-link svg {
        transform: rotate(180deg); /* Rotate main platform arrow down */
    }
    .nav-item.dropdown-level2:not(.active) .nav-link svg {
        transform: rotate(0deg); /* Reset arrow up when closed */
    }

    /* Level 3 Dropdown on Mobile (Agents Flyout) */
    .dropdown-content-level3 {
        position: static; /* Stack vertically */
        transform: none;
        width: 100%;
        min-width: auto;
        box-shadow: none;
        margin-top: 10px;
        background-color: #3b1c60; /* Adjusted background for nested level on mobile */
        border-radius: 0;
        padding: 0;
        display: none; /* Hidden by default, JS toggles */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .nested-dropdown-trigger.active .dropdown-content-level3 {
        display: block; /* Show the content */
    }

    /* Rotate Level 3 arrow for mobile */
    .nested-dropdown-trigger .nav-link-level3 svg.arrow-icon { /* Ensure selector is specific */
        transition: transform 0.3s ease; /* Add transition for smoothness */
        transform: rotate(0deg); /* Default state (points right) */
    }
    .nested-dropdown-trigger.active .nav-link-level3 svg.arrow-icon {
        transform: rotate(90deg); /* Rotate to point down when open */
    }

    /* Adjust layout for columns and sections on mobile */
    .dropdown-content-level2 .dropdown-column {
        min-width: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10px;
        margin-top: 0; /* Remove desktop margin-top */
    }
    .dropdown-content-level2 .dropdown-column:last-child {
        border-bottom: none;
    }

    .agent-sections {
        grid-template-columns: 1fr; /* Single column for agent sections on mobile */
    }

    /* Level 3 specific adjustments */
    .dropdown-column-level3 {
        padding: 15px;
    }
    .dropdown-column-level3 p br {
        display: none; /* Hide line breaks on mobile */
    }
    .dropdown-content-level2 .dropdown-column .nested-dropdown-trigger > .nav-link-level3 {
        padding-right: 15px; /* Adjust padding for arrow on right */
    }
    svg.level3-hoverarrow {
        position: static; /* Allow it to flow naturally */
        transform: none; /* Remove any desktop transforms */
        display: inline-block; /* Display inline with text */
        margin-left: auto; /* Push to the right */
    }
    .agent-section:hover svg.level3-hoverarrow {
        display: inline-block; /* Ensure it stays inline on hover */
    }
    /* Hide the level3-hoverarrow on mobile for "coming soon" sections */
    .coming-soon-item.agent-section:hover svg.level3-hoverarrow { /* Assuming you fixed #coming-soon to .coming-soon-item */
        display: none !important;
    }
    .agent-section:hover { /* Remove desktop hover effects for mobile */
        padding-left: 0;
        background: none; /* No background change */
        border-left: none; /* No border change */
    }
    .agent-section:hover:before {
        display: none; /* Hide the gradient bar */
    }
  .nav-item.dropdown-level2:hover .dropdown-content-level2,
  .nested-dropdown-trigger:hover .dropdown-content-level3 {
    display: none ;
  }
}

@media (max-width: 768px) {
    .agent-sections {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .stackgen-new-header .nav {
        top: 125px;
    }
  .\33 -column-inner {
    grid-template-columns: 1fr 1fr;
  }
    .agent-sections {
        grid-template-columns: 1fr;
    }
    .dropdown-column-level3 p br {
        display: none;
    }
    .dropdown-column-level3 {
        padding: 15px;
    }
    .dropdown-content-level2 .dropdown-column .nested-dropdown-trigger > .nav-link-level3 {
        padding-right: 15px;
    }
    .announcement-bar img {
        width: 40px;
    }
    .announcement-content {
        font-size: 9px;
    }
    .announcement-bar a {
        font-size: 9px;
    }
  
    .announcement-bar {
        gap: 7px;
        padding: 9px 0;
    }
}
@media (max-width: 480px) {
  .announcement-item {
    gap: 5px;
  }
  .announcement-bar a svg {
    width: 8px;
    height: 8px;
}
      .announcement-bar img {
        width: 35px;
    }
  .announcement-content span {
    margin-right: 0;
    font-size: 7px;
}
      .announcement-bar a {
        font-size: 6px;
    }
  .video-player-card-wrap {
    padding: 25px;
  }
      .stackgen-new-header .nav {
        top: 108px;
    }
  main#main-content {
    padding-top: 108px;
}
  .\33 -column-inner {
    grid-template-columns: 1fr;
  }
    .header-button a {
        font-size: 12px;
        padding: 10px 10px 10px 16px;
    }
    .stackgen-new-header .logo img {
        height: 25px;
    }
    a.logo img {
        width: 106px;
    }
}