@keyframes pop {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-20%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
.tools-section
{
    margin: 18px;
    padding: 16px;
    background-color: transparent;
    border-radius: 36px;
}
.tools-megamenu:not( > div > div > ul > li[data-tools-key="audio-dubber"].active) {
    max-height: 520px;
}
header .tools-megamenu
{
    --selected-line: 0;
    --container-color: white;
    --main-color: rgb(0, 136, 255);
    --main-color-with-opacity: color-mix(in srgb, var(--main-color) 62%, transparent);
    --main-text-color: white;
    --small-font-size: var(--font-md);
    --font-size: var(--font-ml);
    --big-font-size: var(--font-xl);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    max-height: 620px;

    .dark-mode &
    {
        --container-color: #071d23;
    }
}
.tools-megamenu[data-tools-type="transcription"]
{
    --main-color: var(--primary-light);
    --main-text-color: white;
}
.tools-megamenu[data-tools-type="subtitle"]
{
    --main-color: var(--secondary-light);
    --main-text-color: var(--text);
}
.tools-megamenu[data-tools-type="voiceover"]
{
    --main-color: var(--tertiary-light);
    --main-text-color: black;
}
.tools-megamenu[data-tools-type="realtime"]
{
    --main-color: var(--maestra-purple);
    --main-text-color: white;
}
.tools-links
{
    /* height: 475px; */
    border-radius: 18px;
    padding: 20px;
    background-color: var(--container-color);
    flex: 1;
    box-shadow: 0px 8px 16px color-mix(in srgb, black 25%, transparent);
}
.tools-selection-description
{
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: max-content;
    max-width: calc(var(--big-font-size) * 13.5);
    height: fit-content;
}
.tools-description
{
    animation: pop 0.2s;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    position: relative;
    height: auto;
    justify-content: center;
}
.tools-description > *
{
    display: block;
    font-size: var(--font-md);
    font-weight: normal;
    text-align: left;
    background-color: var(--main-color);
    padding: 16px;
    border-radius: 18px;
    color: var(--main-text-color);
    opacity: 0;
    grid-column: 1;
    grid-row: 1;
    height: fit-content;
}
.tools-description > span {
    border: 2px solid color-mix(in srgb, var(--text) 15%, transparent);
}
.tools-description > .active
{
    opacity: 1;
}
.tools-selection
{
    --tools-clip-top: 100%;
    --tools-clip-low: 100%;
    --border-thickness: 6px;
    background-color: var(--container-color);
    border: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 18px;
    padding: 16px 8px;
    box-shadow: 0px 0px 38.5px var(--main-color-with-opacity);
    position: relative;
    transition: all 0.2s;
}
.tools-selection-border
{
    position: absolute;
    width: calc(100% + var(--border-thickness));
    height: calc(100% + var(--border-thickness));
    top: calc(var(--border-thickness) * -0.5);
    left: calc(var(--border-thickness) * -0.5);
    pointer-events: none;
    transition: 0.1s;
}
.tools-selection-border.upper
{
    border-radius: inherit;
    border: var(--border-thickness) solid;
    border-color: var(--main-color);
    clip-path: inset(0px 0px var(--tools-clip-top) 0px);
}
.tools-selection-border.lower
{
    border-radius: inherit;
    border: var(--border-thickness) solid var(--main-color);
    clip-path: inset(var(--tools-clip-low) 0px 0px 0px);
}
.tools-selection-border.roundness
{
    --half-thickness: calc(var(--border-thickness) / 2);
    --neg-half-thickness: calc(var(--half-thickness) * -1);
    --top-pos: var(--tools-clip-top);
    --bottom-pos: var(--tools-clip-low);
    background:
    radial-gradient(circle var(--half-thickness) at left var(--half-thickness) bottom var(--top-pos), var(--main-color) 100%, transparent 100%),
    radial-gradient(circle var(--half-thickness) at right var(--half-thickness) bottom var(--top-pos), var(--main-color) 100%, transparent 100%),
    radial-gradient(circle var(--half-thickness) at left var(--half-thickness) top var(--bottom-pos), var(--main-color) 100%, transparent 100%),
    radial-gradient(circle var(--half-thickness) at right var(--half-thickness) top var(--bottom-pos), var(--main-color) 100%, transparent 100%);
}
.tools-selection > ul
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tools-selection > ul > li
{
    list-style-type: none;
    padding: 13px;
    font-size: var(--font-size);
    text-align: start;
    cursor: pointer;
}
.tools-selection > ul > li:hover .tools-item a {
    font-size: var(--big-font-size);
    font-weight: 800;
}
#ms-nav .tools-selection > ul > li
{
    &:has(.tools-item > a[href="#"]) {
        cursor: default;
    }
    .tools-item > a
    {
        color: color-mix(in srgb, var(--text) 62%, transparent);
        font-weight: 600;
        font-size: var(--small-font-size);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: var(--big-font-size);
        max-height: var(--big-font-size);
        transition: 0.1s;
    }

    .tools-item > a[href="#"]
    {
        cursor: default;
    }

    &.active .tools-item > a
    {
        font-size: var(--small-font-size);
        color: var(--main-color);
        font-weight: 800;
    }
}
.tools-selection .icon
{
    width: var(--big-font-size);
    height: var(--big-font-size);
    background-color: color-mix(in srgb, var(--text) 62%, transparent);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.tools-links {
  padding: 16px;
  overflow-y: scroll;
  max-height: 442px;
  
  border: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
}

@layer scroll {
    .tools-links {

    @-moz-document url-prefix() {
        scrollbar-gutter: stable;
        scrollbar-color: color-mix(in srgb, var(--text) 35%, transparent) transparent;
        scrollbar-width: thin;
    }

    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    &::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text) 35%, transparent);
        border-radius: 8px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-button {
        display: none;
        }
    }
}
  
.tools-links-container
{
    display: none;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 12px;
}
.tools-links-container li {
    margin: 0!important;
}
.tools-links-container li a:hover {
    border-color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 5%, transparent);
}
.tools-links-container li a
{
    animation: slide-down 0.1s;
    animation-fill-mode: forwards;
    border: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 12px;
    padding: 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: var(--text)!important;
    text-transform: capitalize;
    font-size: calc(var(--font-size) * 0.9)!important;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease;
}
.tools-links-container li a .title {
    font-weight: 600;
    font-size: calc(var(--font-size) * 0.8)!important;
    line-height: 1.4;
    margin-bottom: 4px;
}
.tools-links-container li a .description {
    font-size: calc(var(--font-size) * 0.7)!important;
    color: color-mix(in srgb, var(--text) 70%, transparent);
    line-height: 1.4;
}
.tools-links-container li a:hover .title {
    color: var(--main-color);
}

.tools-links-container li a:hover .title {
    text-decoration: underline;
}

.tools-links-container li .description {
    text-transform: none;
}
.tools-links-container.active
{
    display: grid;
}
.icon.att
{
    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-att.svg");
}
.icon.vtt
{
    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-vtt.svg");
}
.icon.vd
{
    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-vd.svg");

}
.icon.ad
{
    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-ad.svg");

}
.icon.vt
{
    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-vt.svg");

}
.icon.tts
{

    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-tts.svg");
}
.icon.se
{

    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-se.svg");
}
.icon.st
{

    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-st.svg");
}
.icon.sg
{

    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-sg.svg");
}
.icon.rt
{

    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-rt.svg");
}
.icon.ft
{

    mask-image: url("https://cdn.maestra.ai/assets/images/icons/icon-ft.svg");
}

.tools-megamenu li.active .icon
{
    background-color: var(--main-color);
}

.tools-selection .tools-fold
{
    display: none;
}

.tools-item {
    display: flex;
    justify-content: space-between;
}

.tools-selection .tools-item-links
{
    display: none;
    font-weight: normal;
}

.tools-item-links li a
{
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: var(--big-font-size);
}
.tools-item-links li:first-child a
{
    padding-top: 16px;
}

@media(max-width:1155) {

    .tools-megamenu
    {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .tools-selection-border
    {
        transition: none;
    }
    .tools-selection-description
    {
        min-width: none;
        max-width: none;
        flex-direction: column-reverse;
        width: 100%;
        justify-content: center;
    }
    .tools-description
    {
        display: none;
    }
    .tools-links
    {
        display: none;
    }
    .tools-selection li 
    {
        display: flex;
        flex-direction: column;
    }
    .tools-selection li .icon.tools-fold
    {
        display: inline-block;
        width: var(--big-font-size);
        height: var(--big-font-size);
        background: none;
        color: var(--text);
        transition: 0.1s;
        font-size: var(--big-font-size);
        font-style: normal;
        transform: rotate(0);
        transform-origin: center;
        position: relative;
    }
    .tools-selection li .icon.tools-fold::before
    {
        position: absolute;
        top: 0px;
        font-family: maestra;
        content: '\e901';
    }
    .tools-selection li.active .icon.tools-fold
    {
        color: var(--main-color);
    }
    .tools-selection li.unfold .icon.tools-fold
    {
        transform: rotate(180deg);
    }
    .tools-selection li.unfold .tools-item-links
    {
        display: block;
    }
}

.nav .tools-links-container li[data-is-category="true"] {
    grid-column: 1 / -1;
    background-color: color-mix(in srgb, var(--main-color) 5%, transparent);
}

.nav .tools-links-container li[data-is-category="true"]:hover {
    background-color: color-mix(in srgb, var(--main-color) 10%, transparent);
}

.nav .tools-links-container .category-link {
    grid-column: span 2;
}

.nav .tools-links-container .category-link a {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: var(--main-text-color) !important;
}

.nav .tools-links-container .category-link a .title {
    color: color-mix(in srgb, var(--main-text-color) 90%, transparent) !important;
    font-size: var(--font-size)!important;
    font-weight: 700;
}

.nav .tools-links-container .category-link a[href="#"] {
    pointer-events: none;
    cursor: default;
}

.nav .tools-links-container .category-link a .description {
    color: color-mix(in srgb, var(--main-text-color) 90%, transparent) !important;
    font-size: calc(var(--font-size) * 0.8) !important;
}

.nav .tools-links-container .category-link a:hover {
    color: var(--main-text-color) !important;
    background-color: color-mix(in srgb, var(--main-color) 90%, black);
    border-color: var(--main-color);
}

.nav .tools-links-container .category-link:hover a .title {
    text-decoration: underline;
}