/* Set Global variables */
:root {
    --white: #fff;
    --white-50: #FFFFFF80;
    --black: #000;
    --pink1: #B958A6;
    --blue1: #031029;
    --blue2: #0A1C41;
    --blue3: #1f376c;
    --blue4: #274a9b;
    --blue5: #4D74B2;
    --blue6: #659EFB;
    --link-light-blue: #63A4FF;
    --light-grey-blue: #A5C1F0;
    --extra-light-grey-blue: #C7D5EE;
    --light-pink: #CC90D1;
    --extra-light-pink: #EBD5F2;
    --lavender-purple: #C689CC; 
    --lavender-mist: #EED0F8;

    --rgb-blue1: 3, 16, 41;     /* #031029 */
    --rgb-blue2: 10, 28, 65;    /* #0A1C41 */
    --rgb-blue3: 31, 55, 108;   /* #1f376c */
    --rgb-blue4: 39, 74, 155;   /* #274a9b */
    --rgb-blue5: 77, 116, 178;  /* #4D74B2 */
    --rgb-blue6: 101, 158, 251; /* #659EFB */
    --subheading-clr: #6D8BBF;
    --bg-color: #101c34;
    --pad-20: 20px;
}

/* Helpers */
.text-blue-1 {color:var(--blue1);}
.text-blue-2 {color:var(--blue2);}
.text-blue-3 {color:var(--blue3);}
.text-blue-4 {color:var(--blue4);}
.text-blue-5 {color:var(--blue5);}
.text-blue-6 {color:var(--blue6);}
.link-light-blue {color:var(--link-light-blue) !important;}
.light-grey-blue {color:var(--light-grey-blue) !important;}
.medium-grey-blue {color: var(--subheading-clr);}
.extra-light-grey-blue {color:var(--extra-light-grey-blue) !important;}
.extra-light-pink {color:var(--extra-light-pink);}
.light-pink {color:var(--light-pink);}
.lavendar-purple{color: var(--lavender-purple);}
.lavendar-mist{color: var(--lavender-mist);}
.bg-white-10 {background: rgba(255, 255, 255, 0.10) !important;}
.bg-white-25 {background: rgba(255, 255, 255, 0.25) !important;}
.bg-white-50 {background: rgba(255, 255, 255, 0.50) !important;}
.bg-white-75 {background: rgba(255, 255, 255, 0.75) !important;}
.bg-black-10 {background: rgba(0, 0, 0, 0.10) !important;}
.bg-black-25 {background: rgba(0, 0, 0, 0.25) !important;}
.bg-black-50 {background: rgba(0, 0, 0, 0.50) !important;}
.bg-black-75 {background: rgba(0, 0, 0, 0.75) !important;}
.bg-blue-alt {background: rgba(var(--rgb-blue1), 0.75);}
.bg-live{border: 2px solid rgba(80, 233, 131, 1);background: rgba(80, 233, 131, 0.2);border-radius: 50px;top:-7px;}
.border-white-10 {border: 1px solid rgba(255, 255, 255, 0.10) !important;}
.border-black-10 {border: 1px solid rgba(0, 0, 0, 0.10) !important;}
.fs-6pt5 {font-size: 18px;}
.fs-7 {font-size: 12px;}
.fs-7pt5 {font-size: 14px;}
.info-text {color: var(--blue6);line-height: 1.2;}

.card-with-bluebg-border{
    border-image: linear-gradient(180deg, #172F60 1.37%, #284175 100%);
    background: radial-gradient(146.42% 100% at 53.67% 0%, #0D214A 4.51%, #11254F 62.55%, #182E5C 100%);
}
.gradient-border{
    position:relative;
    overflow:hidden;
}
.gradient-border:after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:12px; 
    padding:2px; 
    background:radial-gradient(63.05% 202.87% at 7.8% 6.98%, rgba(249, 168, 72, 0.7) 0%, rgba(240, 139, 93, 0.686) 10.31%, rgba(219, 90, 121, 0.595) 35.58%, rgba(212, 78, 165, 0.56) 56.27%, rgba(147, 55, 173, 0.56) 83.12%, rgba(115, 59, 212, 0.525) 100%);;
    mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    mask-composite:exclude; 
    pointer-events: none;
}
.gradient-border:has(.less-padding):after,.gradient-border.less-padding::after,.large-subtle-btn.less-padding,
.large-featured-btn.less-padding{
    border-radius: 8px;
}
.gradient-icon .gear-icon-stack .fa-circle{
    font-size: 2.25rem;
}
.card-gradient-border{
    position:relative;
    background: radial-gradient(45.32% 71.18% at 13.22% 21.01%, rgba(148, 87, 80, 0.2) 1.79%, rgba(142, 58, 104, 0.2) 35.58%, rgba(116, 44, 121, 0.2) 56.27%, rgba(69, 38, 120, 0.2) 83.12%, rgba(53, 42, 125, 0.2) 100%);
    overflow:hidden;
    border-radius:20px; 
}
.card-gradient-border:after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px; 
    padding:2px; 
    background:radial-gradient(63.05% 202.87% at 7.8% 6.98%, rgba(249, 168, 72, 0.7) 0%, rgba(240, 139, 93, 0.686) 10.31%, rgba(219, 90, 121, 0.595) 35.58%, rgba(212, 78, 165, 0.56) 56.27%, rgba(147, 55, 173, 0.56) 83.12%, rgba(115, 59, 212, 0.525) 100%);
    mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    mask-composite:exclude; 
    pointer-events: none;
}
.card-gradient-bg{
    background: radial-gradient(65.28% 124.24% at 14.17% 5.06%, #4F435D 1.79%, #4D3965 35.58%, #42336B 56.27%, #2E316B 83.12%, #2A326C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
.card-gradient-bg-1{
    background: radial-gradient(45.32% 71.18% at 13.22% 21.01%, #292C4A 1.79%, #27284E 35.58%, #222550 56.27%, #192450 83.12%, #162451 100%);
}
.large-subtle-btn,
.large-featured-btn {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  line-height: 1.2;
  transition: box-shadow 300ms ease-out;

  &.less-padding{
    padding: 10px 20px;
  }

  a {
    position: relative;
    z-index: 1;
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    opacity: 0;
    transition: opacity 300ms ease-out;
    pointer-events: none;
    z-index: 0;
  }

  &:hover {
    box-shadow: 0px 0px 5px 0px #F9A84880;

    span{
        position: relative;
        z-index: 99999;
    }

    a {
      color: #fff;
    }

    &::before {
      opacity: 1;
    }
  }
}

.large-subtle-btn {
    background: radial-gradient(45.93% 175.7% at 4.34% 0%,#3D3144 2.46%,#3B264C 39.48%,#322251 74.23%,#292052 100%);

    &.with-opacity{
        background: radial-gradient(45.93% 175.7% at 4.34% 0%, rgba(61, 49, 68, 0.75) 2.46%, rgba(59, 38, 76, 0.75) 39.48%, rgba(50, 34, 81, 0.75) 74.23%, rgba(41, 32, 82, 0.75) 100%);
    }
    &::before {
        background: radial-gradient(
        92.02% 213.26% at 4.92% 0%,
        #EF8364 0.87%,
        #E15C7C 22.51%,
        #CF4CA1 45.22%,
        #A240BE 67.63%,
        #6C3CD6 93.44%,
        #5A32D0 99.52%
        );
    }
}

.large-featured-btn {
  background: radial-gradient(
    92.02% 213.26% at 4.92% 0%,
    rgba(239, 131, 100, 0.88) 0.87%,
    rgba(225, 92, 124, 0.88) 22.51%,
    rgba(207, 76, 161, 0.88) 45.22%,
    rgba(162, 64, 190, 0.88) 67.63%,
    rgba(108, 60, 214, 0.88) 93.44%,
    rgba(90, 50, 208, 0.88) 99.52%
  );

    &::before {
        background: radial-gradient(
        92.02% 213.26% at 4.92% 0%,
        #F3957E 0.87%,
        #EB7294 22.51%,
        #DD60B8 45.22%,
        #B751D0 67.63%,
        #8F4EE0 93.44%,
        #743AD1 100%
        );
    }
}


/* Bootstrap Variable css override */
.card {
    --bs-card-spacer-y: 20px;
    --bs-card-spacer-x: 20px;
    --bs-card-color: rgba(101, 158, 251, 1);
}

.nav-link {
    --bs-nav-link-font-size: 20px;
    --bs-navbar-nav-link-padding-x: 20px;
}

.row {
    --bs-gutter-x: 2.5rem;
}

/* Global CSS */
html,
body {
    height: 100%;
}

body {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    background-color: var(--blue1);
    display: flex;
    flex-direction: column;

    main {
        flex: 1 0 auto;
    }

    footer {
        flex-shrink: 0;
        background: #0A1C41BF;
    }
}

a {
    transition: all linear 100ms;
    text-decoration: none;
}

/* Header + Footer */
main,
footer {
    z-index: 1;
}

header,
footer {
    display: flex;
    align-items: center;
    padding: 20px;
    color: var(--blue5);
    backdrop-filter: blur(2px);

    .line {
        display: inline-block;
        margin: 0 20px;
        background: rgba(255, 255, 255, 0.25);
        height: 100%;

        &::before {
            content: '';
            display: inline-block;
            width: 2px;
        }
    }
}

/* Header */
header {
    z-index: 2;

    .logo {
        max-height: 45px;
        object-fit: contain;
    }

    .navbar {
        padding: 3px 0;

        .navbar-nav {
            gap: 50px;

            .dropdown {
                position: relative;

                &:hover>.dropdown-menu {
                    display: block;
                    margin-top: 0;
                    background: rgba(26, 49, 101, 0.75);
                    border-radius: 0;
                    padding: 0;

                    .dropdown-submenu {
                        .dropdown-menu {
                            background: rgba(26, 49, 101, 0.75);
                            border-radius: 0;
                            padding: 0;
                            margin-top: 5px;
                        }
                    }
                }

                .dropdown-menu {
                    li {
                        border: 1px solid #101c34;
                    }

                    .dropdown-item {
                        color: #fff;

                        &:focus,
                        &:hover {
                            background: rgba(26, 49, 101, 0.75);
                            color: #fff;
                        }
                    }
                }

                .dropdown-submenu {
                    position: relative;

                    >.dropdown-menu {
                        top: 0;
                        left: 100%;
                        margin-top: -1px;
                        display: none;
                    }

                    &:hover>.dropdown-menu {
                        display: block;
                    }

                    .dropdown-toggle {
                        display: inline-flex;
                        align-items: center;
                        padding: 10px 20px;
                        margin-right: 20px;
                        line-height: 1.1;
                        position: relative;

                        &::after {
                            position: absolute;
                            pointer-events: none;
                            content: "\203A";
                            border: 0;
                            font-size: 25px;
                            color: rgba(255, 255, 255, 0.5);
                            right: 10px;
                        }
                    }
                }
            }

            .nav-item {
                border: 1px solid transparent;

                a:hover {
                    color: #fff !important;
                }

                .dropdown-toggle {
                    position: relative;

                    &::after {
                        display: block;
                        margin: 0 auto;
                        width: 10px;
                        margin-top: -2px;
                        color: rgba(255, 255, 255, 0.24);
                    }
                }

                .dropdown-menu {
                    .dropdown-submenu {
                        .dropdown-toggle {
                            &::after {
                                margin-top: 0;
                            }
                        }
                    }
                }
            }
        }

        .navbar-toggler {
            border: 0;

            .navbar-toggler-icon {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
            }
        }

        &-expand-lg {
            .navbar-nav {
                .nav-link {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 10px 20px;
                    line-height: 1.2;
                }
            }
        }

        @media (min-width: 992px) {
            .dropdown:hover>.dropdown-menu {
                display: block;
            }
        }

        @media (max-width: 991.98px) {
            .dropdown-submenu>.dropdown-menu {
                position: static;
                margin-left: 1rem;
            }
        }
    }
}

/* Footer */
footer {
    a {
        &:hover {
            color: var(--blue6);
        }
    }
}

/* Body BG 
#background-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;

    canvas {
        opacity: 0.50;
    }
}
*/
/* Home page hero section */
/*.home-hero-wrapper {
    background: linear-gradient(105.48deg, rgba(3, 16, 41, 0.2) 0%, rgba(55, 114, 249, 0.2) 100%),
        linear-gradient(0deg, rgba(3, 16, 41, 0.75), rgba(3, 16, 41, 0.75));
    backdrop-filter: blur(2px);

    .home-hero-bg{
        opacity: 75%;
        background-image: url(../img/home-hero-bg.png);
    }
}*/
.hero {
    display: flex;
    align-items: stretch;
    position: relative;

    .hero-content {
        display: flex;
        flex-direction: column;
        gap: 50px;
        position: relative;
        z-index: 2;
        width: 100%;

        .cards-row {
            display: flex;
            gap: 20px;

            .card {
                flex: 1 1 0;
                border: 1px solid rgba(55, 114, 249, 0.25);
                backdrop-filter: blur(5px);
                border-radius: 20px;
                background:
                    linear-gradient(180deg, rgba(26, 49, 101, 0) 50%, rgba(255, 255, 255, 0.15) 100%),
                    linear-gradient(0deg, rgba(26, 49, 101, 0.60), rgba(26, 49, 101, 0.60));

                .card-body {
                    padding: 25px 30px;

                    .card-title{
                        letter-spacing: 0.9px;
                    }
                    div {
                        font-size: 20px;
                    }
                }
            }

            .icon-wrap {
                i {
                    display: inline-block;
                    line-height: 48px;
                    background: linear-gradient(272.01deg, rgba(115, 59, 212, 1) -20.97%, rgba(158, 60, 186, 1) 2%, rgba(209, 77, 163, 1) 34.33%, rgba(219, 90, 121, 1) 65.02%, rgba(240, 139, 93, 1) 101.05%, rgba(249, 168, 72, 1) 115.08%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }

        .scroll-down {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 30px;
            font-weight: bold;
            padding-top: 12rem;
            color: rgba(255, 255, 255, 1);

            i {
                animation: MoveUpDown 3s linear infinite;
            }
        }
    }
}
.hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 990px;
    height: 840px;
    z-index: 1;
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}
/* Main */
main.home-panel section, main.home-panel .agents-wrapper {
    padding: 50px 0 0;
}
main.home-panel .home-hero-wrapper section {
    padding: 100px 0 0 0;
}
body.section-engines section,
body.section-agents section,
body.section-supervisors section {
    padding: 50px 0;
}
body#page-library section{
    padding: 60px 0;
}
.content-block{
    .top-badge{
        font-size: 12px;
        color: var(--blue2);
        border-radius: 50px;
        margin-left: 10px;
        vertical-align: middle;
        padding: 4px 16px;
    }
}
/* Cards */
.card {
    background: var(--blue2);
    color: var(--blue6);
    border: 2px solid #3772F940;
    justify-content: space-between;

    .card-title {
        color: var(--white);
    }

    .card-footer {
        background: var(--blue1);
        text-align: right;
        font-size: 12px;
        color: var(--white);

        a {
            color: var(--white);
            font-size: 12px;
            text-decoration: none;
        }
    }

    &.card-disabled {
        position:relative;
        cursor:default;

        >* {
            opacity: 0.25;
        }

        &:before,
        &:after {
            opacity: 0;
        }

        &:before {
            content: 'Coming soon';
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            padding: 15px 25px;
            color: #fff;
            font-weight: bold;
            background: rgba(156, 186, 235, 0.40);
            /*border:1px solid rgba(55, 114, 249, 0.25);*/
            border-radius: 10px;
            transition: opacity 200ms linear;
            backdrop-filter: blur(3px);
            text-align: center;
        }

        /*&::after {
            content: '';
            position: absolute;
            border-radius: 5px;
            width: 100%;
            height: 100%;
            margin: auto;
            background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
            animation: static 5s linear infinite;
            backdrop-filter: blur(20px);
            transition: opacity 200ms linear;
        }*/

        &:hover {
            &::before {
                opacity: 1;
            }

            /*&::after {
                /*opacity: 0.50;
            }*/
        }
    }
}

.agent-card .card-footer {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
    padding: 7px 10px;
    line-height: 1;
}

/* .hero-content .card-body div,
.use-cases-wrapper .card-body div,
.agents-wrapper .card-body div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    -webkit-line-clamp: 4;
    line-clamp: 4;
} */

/* Super Agents Block */
.super-agents-wrapper {
    .card-wrapper {
        display: flex;
        gap: 20px;
        flex-wrap: nowrap;
    }

    .super-agents {
        padding: 20px 0 50px 0;
    }
}

/* Agents Block */
.agents-wrapper {
    .bg-custom-gradient {
        height: 100px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        .icon-container {
            width: 52px;
            height: 58px;
            display: flex;
            justify-content: center;
            align-items: center;
            filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 1));

            i {
                width: 100%;
                height: 100%;
                font-size: 52px;
                background: linear-gradient(141.22deg, #3169D5 0%, #6BB1FF 100.01%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }

    .card-body {
        div {
            -webkit-line-clamp: 5;
            line-clamp: 5;
        }
    }

    >.agents {
        &:nth-of-type(1) .bg-custom-gradient {
            background:
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.1875) 0%, rgba(151, 98, 180, 0.075) 50%, rgba(172, 146, 235, 0.75) 100%),
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.25) 0%, rgba(151, 98, 180, 0.1) 50%, rgba(175, 112, 121, 0.5) 100%),
                linear-gradient(263.66deg, rgba(10, 28, 65, 0.75) 0%, rgba(55, 114, 249, 0.25) 100%),
                linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        }

        &:nth-of-type(2) .bg-custom-gradient {
            background:
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.1875) 0%, rgba(151, 98, 180, 0.075) 50%, rgba(80, 193, 233, 0.75) 100%),
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.25) 0%, rgba(151, 98, 180, 0.1) 50%, rgba(175, 112, 121, 0.5) 100%),
                linear-gradient(263.66deg, rgba(10, 28, 65, 0.75) 0%, rgba(55, 114, 249, 0.25) 100%),
                linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        }

        &:nth-of-type(3) .bg-custom-gradient {
            background:
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.1875) 0%, rgba(151, 98, 180, 0.075) 50%, rgba(80, 233, 131, 0.75) 100%),
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.25) 0%, rgba(151, 98, 180, 0.1) 50%, rgba(175, 112, 121, 0.5) 100%),
                linear-gradient(263.66deg, rgba(10, 28, 65, 0.75) 0%, rgba(55, 114, 249, 0.25) 100%),
                linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        }

        &:nth-of-type(4) .bg-custom-gradient {
            background:
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.1875) 0%, rgba(151, 98, 180, 0.075) 50%, rgba(255, 207, 83, 0.75) 100%),
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.25) 0%, rgba(151, 98, 180, 0.1) 50%, rgba(175, 112, 121, 0.5) 100%),
                linear-gradient(263.66deg, rgba(10, 28, 65, 0.75) 0%, rgba(55, 114, 249, 0.25) 100%),
                linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        }

        &:nth-of-type(5) .bg-custom-gradient {
            background:
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.1875) 0%, rgba(151, 98, 180, 0.075) 50%, rgba(237, 85, 100, 0.75) 100%),
                linear-gradient(96.34deg, rgba(149, 167, 225, 0.25) 0%, rgba(151, 98, 180, 0.1) 50%, rgba(175, 112, 121, 0.5) 100%),
                linear-gradient(263.66deg, rgba(10, 28, 65, 0.75) 0%, rgba(55, 114, 249, 0.25) 100%),
                linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        }
    }
}

/* Detailed Overview Page CSS */
/* DP - Breadcrumbs */
.breadcrumbs-block {

    .breadcrumb-item {
        &+.breadcrumb-item {
            padding-left: 0;

            &::before {
                content: "\f054";
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                font-style: normal;
                display: inline-block;
                margin: 0 0.6rem;
                color: rgba(255, 255, 255, 0.5);
                font-size: 0.7rem;
                vertical-align: baseline;
                position: relative;
                top: 0.4em;
                padding: 0;
            }
        }

        a,
        &:not(.active) {
            text-decoration-line: underline;
            text-decoration-style: dotted;
            text-decoration-thickness: 0%;
            text-decoration-color: rgba(255, 255, 255, 0.25);
            text-underline-offset: 3px;
        }
        a:hover,
        &:not(.active){
            color: #fff !important;
        }
    }
}

/* Key Content */
.description-wrap{
    margin-right: 30%;
}
/* DP - Jump To Section */
.jumpto-section {
    .list-group {
        a {
            background: rgba(77, 116, 178, 0.5);
            color: #fff;
            border: 1px solid var(--bg-color);

            &:first-child {
                background: rgba(55, 114, 249, 0.5);
                font-weight: 700;
            }
        }

        .list-group-item:first-child {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
    }
}

/* DP - Agent Information Tags */
.agent-information-tags {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(55, 114, 249, 0.25);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    width: 86%;

    .bottom_context {
        display: flex;
        flex-direction: column;
        gap: 3px;

        .tags {
            span {
                color: #9cbaeb;
            }
        }
    }

    .rows-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 12px;

        .col-left, .text-blk {
            flex: 0 0 12.4%;
            line-height: 1.2;

            span {
                margin: 0;
                color: #9cbaeb;
            }
        }

        .col-right, .tags {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            .dropdown-menu.show {
                background: #352A7D;
                box-shadow: 2px 2px 12px 0px #00000066;
                padding: 0;
                border-radius: 8px;

                .dropdown-item{
                    padding: 12px;
                    line-height: 1;

                    &:hover{
                        background: none;
                    }
                }
            }
        }

        .bg-custom {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: normal;
            font-size: 14px;
            padding: 5px 10px;

            .count-badge {
                background-color: var(--white);
                color: #B958A6;
                border-radius: 50%;
                font-size: 0.75rem;
                display: inline-block;
                min-width: 18px;
                min-height: 18px;
                padding: 4px;
                text-align: center;
                font-weight: bold;
            }
            .polygon-icon {
                width: 10px;      
                height: 6px;      
                opacity: 1;       
                display: inline-block;
                vertical-align: middle; 
            }
        }

        &:nth-child(1) .bg-custom {
            background-color: #773BD0;
        }
        &:nth-child(2) .bg-custom {
            background-color: #C348A5;
        }
        &:nth-child(3) .bg-custom {
            background-color: #E07055;
        }
        &:nth-child(4) .bg-custom {
            background-color: #5288EB;
        }
        &:nth-child(5) .bg-custom {
            background-color: #0F9BAB;
        }
    }
}

/* Generic */
.gap-80{gap: 80px;}
.gap-60{gap: 60px;}
.gap-50{gap: 50px;}
.gap-40{gap: 40px;}
.gap-20{gap: 20px;}
.gap-10{gap: 10px;}
.pad-20{padding: var(--pad-20);}
.dots-grid-bg{
    background-color: #09152E;
    background-image: url('../img/bg-workflow-dots.png');
}
.icon-text-list{
    .col-md-6:nth-child(n+3) {
        margin-top: 50px;
    }
    .icon {
        i {
            background: linear-gradient(272.02deg, rgba(115, 59, 212, 0.8) 0%, rgba(147, 55, 173, 0.8) 16.88%, rgba(209, 77, 163, 0.8) 46%, rgba(219, 90, 121, 0.8) 66%, rgba(240, 139, 93, 0.8) 89.69%, rgba(249, 168, 72, 0.8) 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .item {
        display: flex;
        align-items: flex-start;
    }

    .text-content {
        margin-left: 1.2rem;

        div{
            color: #A5C1F0;
            line-height: 1.1;
        }
    }
}
.engine-icon{
    width: 48px;  
    height: 48px;
    display: inline-block;
    vertical-align: middle;
}
.start-quote{
    background: url(../img/start-quote.svg);
    background-repeat: no-repeat;
    width: 32px;
    height: 65px;
}
.end-quote{
    background: url(../img/end-quote.svg);
    background-repeat: no-repeat;
    width: 32px;
    height: 65px;
    align-self: end;
}
.text-gradient{
    background-blend-mode: screen;
    background: linear-gradient(268.62deg, #BA52D4 2.29%, #E56ABB 39.53%, #EB7A98 65.88%, #F5A57F 96.01%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.vertical-line-gradient{
    background: linear-gradient(360deg, rgba(115, 59, 212, 0.6) -18.82%, rgba(147, 55, 173, 0.6) 3.62%, rgba(212, 78, 165, 0.6) 39.31%, rgba(219, 90, 121, 0.6) 66.82%, rgba(240, 139, 93, 0.6) 100.41%, rgba(249, 168, 72, 0.6) 114.12%);
    width: 2px;
}
.bg-gradient-purple-yellow {
  background: linear-gradient(
    272.02deg,
    rgba(115, 59, 212, 1) 0%,
    rgba(147, 55, 173, 1) 16.88%,
    rgba(209, 77, 163, 1) 46%,
    rgba(219, 90, 121, 1) 66%,
    rgba(240, 139, 93, 1) 89.69%,
    rgba(249, 168, 72, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.radial-gradient-background{
    background: radial-gradient(49.9% 49.9% at 46.54% 50.1%, rgba(148, 87, 80, 0.252) 1.79%, rgba(142, 58, 104, 0.225) 35.58%, rgba(116, 44, 121, 0.195) 56.27%, rgba(69, 38, 120, 0.09) 86.24%, rgba(53, 42, 125, 0) 100%);
}
.default-pill{
    border: 2px solid #747474;
    background: #7676763d;
}
.app-pill{
    border: 2px solid #B958A6;
    background: #B958A63D;
}
.capability-pill{
    border: 2px solid #E07055;
    background: #E0705533;
}
.live-pill{
    border: 2px solid #4AC77A;
    background: #4AC77A33;
}
.inner-clickable{
    padding: 28px 32px;
    z-index:1; /* needed for the "Coming Soon" status cards where the anchor tag wrapper is missing */

    .program-logo,
    .text-description {
        z-index:1;
    }
}
/* DP - configuration Section */
.agent-configuration-block {
    display: flex;
    flex-direction: column;
    gap: 50px;

    .configuration-group{
        display: flex;
        gap: 40px;
        flex-wrap: nowrap;
        border: 1px solid transparent; 
        padding: 24px;
        border-radius: 10px;

        .description{
            line-height: 1.2;
        }
    }
}

/* DP - Workflow Section */
.workflow-block {
    .iframe {
        overflow: hidden;
        background: var(--blue1);
        border: 2px solid rgba(255, 255, 255, 0.25);
        border-radius: 10px;
    }

    .legend-wrapper {
        top: 0;
        left: 0;
        width: 100%;
        justify-content: space-between;
        margin: 0;
        box-sizing: border-box;
    }

    .legend-item {
        padding: 10px 20px;
        background: rgba(var(--rgb-blue3), 0.75);

        &:first-child {
            background: rgba(var(--rgb-blue2), 0.75);;
            border-top-left-radius: 8px;
        }

        .prompt-color {
            background: rgba(232, 117, 199, 1);
        }

        .agent-color {
            background: rgba(99, 164, 255, 1);
        }

        .supervisor-agent-color {
            background: rgba(108, 211, 227, 1);
        }

        .tools-color {
            background: rgba(184, 137, 255, 1);

        }

        .output-color {
            background: rgba(227, 131, 107, 1);
        }

        .engines-color {
            background: rgba(252, 198, 109, 1);

        }
    }

    .legend-color {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
}

/* DP - Use Cases Section */
.use-cases-block {
    .row.custom-gutters {
        --bs-gutter-x: 20px;
        --bs-gutter-y: 20px;
    }

    .card {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        border: 0;
        padding: 20px;

        .card-body {
            padding: 0;
        }
    }
}

/* DP - Call To Action Section */
.call-to-action-block {
    background-color: #03102980;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    button {
        background: linear-gradient(270deg, #192B78 0%, #1B4C8F 100%);
        color: #fff;
        padding: 9px 24px;
        border: 1px solid #FFFFFF40;
    }

    .subheading {
        padding-bottom: 20px;
    }
}

/* DP - Prompt Guide */
.prompt-guide-block{
    display: flex;
    flex-direction: column;
    gap: 16px;

    .example-prompt-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        border: 1px solid transparent;
        padding: 24px;
        border-radius: 10px;

        .list-item {
            flex: 1 1 calc(50% - 6px); /* 2 columns with gap compensation */
            box-sizing: border-box;
            position: relative;
            padding-left: 20px;

            &::before{
                content: "•";         
                position: absolute;
                left: 0;
                color: #C7D5EE;        
                font-size: 1.2em;   
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
}

/* generic CSS for prompt & I/O block */
.prompt-item-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    .prompt-item {
        flex: 0 1 calc(50% - 12px);
        box-sizing: border-box;
        padding: 20px;
        border-radius: 5px;          
        gap: 16px;
        box-shadow: 2px 2px 12px 0px #0000004D;

            .icon-angle-right {
                background: url(../img/angle-right-icon.svg);
                background-repeat: no-repeat;
                min-width: 25px;
            }

        .prompt-content {
            display: flex;
            gap: 12px;
            flex-direction: column;

            .prompt-col-wrap{
                display: flex;
                gap: 30px;

                .prompt-col {
                    flex: 1;
                }
            }
        }
    }
}

/* DP - I/O Guide */
.results-or-output .prompt-item{
    flex-basis: 100%;
}
/* External Resources Section */
.external-resources{
    .card-wrapper{
        display: flex;
        gap: 35px;
        flex-wrap: nowrap;

        .external-resource-card{
            display: flex;
            flex-basis: 37%;
            background: radial-gradient(70.16% 148.13% at 4.06% 0%, #282233 1.79%, #261B39 35.58%, #1F173D 56.27%, #14163D 83.12%, #10173F 100%);
            gap:32px;
            border: 2px solid;
            border-image-source: linear-gradient(225deg, rgba(10, 28, 65, 0.2) 0%, rgba(55, 114, 249, 0.2) 100%);
            border-radius: 22px;
            padding: 32px 40px 32px 24px;
            transition: background 300ms ease, border-color 300ms ease, transform 200ms linear, box-shadow 200ms linear;

            &:hover {
                transform: translateY(-10px);
                box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.30);
                cursor: pointer;
            }

            .icon-container{
                min-width: 128px;
                min-height: 165px;
                align-items: center;
                justify-content: center;
                border-radius: 10px 0 0 10px;
                border: 5px solid transparent;
                border-image-source: radial-gradient(62.81% 62.81% at 50% 47.19%, rgba(235, 213, 242, 0.18) 71.52%, rgba(235, 213, 242, 0) 100%);
                border-image-slice: 1;

                i{
                    font-size: 4rem;
                    background: linear-gradient(92.01deg, rgba(115, 59, 212, 0.6) -20.97%, rgba(158, 60, 186, 0.6) 2%, rgba(209, 77, 163, 0.6) 34.33%, rgba(219, 90, 121, 0.6) 65.02%, rgba(240, 139, 93, 0.6) 101.05%, rgba(249, 168, 72, 0.6) 115.08%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

            .text-description{
                gap: 16px;
                line-height: 22px;

                div{

                    line-height: 1.2;
                }
                .external-btn{
                    button{
                        border-radius: 8px;
                        padding: 10px 20px;
                    }
                }
            }
        }
    }
}


/* Media Queries */
@media (max-width: 600px) {
    .navbar-nav {
        gap: 25px;
    }

    header .navbar .nav-item .dropdown-toggle::after {
        margin-top: 10%;
    }

    main.home-panel .home-hero-wrapper section {
        padding: 0;
    }

    main.home-panel section,
    main.home-panel .agents-wrapper section {
        padding: 25px 0 0;
    }

    main.home-panel .jumpto-section {
        margin-top: 5%;
    }

    .dropdown-menu li {
        border: 0;
    }

    .bottom_context .row p {
        margin-bottom: 0;
    }
    .hero-content {
        .cards-row{
            flex-direction: column;

            .card{
                flex: none;
                width: 100%;
                min-width: auto;
            }
            .icon-wrap {
                display: block;
                margin: 0 auto;

                i {
                transform: rotate(90deg);
                }
            }
        }
        .scroll-down {
            padding-top: 6rem;
        }
    }

    .super-agents-wrapper .card-wrapper {
        flex-wrap: wrap;
    }

    .super-agents-wrapper .super-agent-card {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 992px) {
    .hero-content {
        width: 100%;
        padding: 2rem;
    }

    .hero-bg {
        display: none;
    }

    .cards-row {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1500px;
    }
}

/* Animations */
@keyframes MoveUpDown {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, 25px);
    }
}

/* TV Static */
@keyframes static {
    from {
        background-size: 100% 100%;
    }

    to {
        background-size: 200% 200%;
    }
}

/* Remove below CSS on MVP */
.use-cases .fa-bookmark {
    visibility: hidden;
}

.detail-card{
    box-sizing: border-box;
    flex: 0 0 calc((100% / 3) - (40px * 2 / 3));
    max-width: calc((100% / 3) - (40px * 2 / 3));
    background: radial-gradient(45.32% 71.18% at 13.22% 21.01%, #292C4A 1.79%, #27284E 35.58%, #222550 56.27%, #192450 83.12%, #162451 100%);
    border: 1px solid transparent;
    transition: background 300ms ease, border-color 300ms ease, transform 200ms linear, box-shadow 200ms linear;

    &.slick-slide{
        margin: 0 20px;
    }
}

.card-carousel .slick-prev,
.card-carousel .slick-next {
  position: absolute;
  top: 50%;           
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
}
.card-carousel .slick-prev {
  left: 22px; 
  /* background: linear-gradient(270deg, rgba(149, 168, 225, 0.05) 0%, rgba(150, 123, 196, 0.25) 34.13%, rgba(154, 96, 170, 0.5) 64.42%, rgba(172, 110, 126, 0.75) 95.19%);
  height: 90%; 
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px; */
}
.card-carousel .slick-next {
  right: 0;
  background: linear-gradient(90deg, rgba(149, 168, 225, 0.05) 0%, rgba(150, 123, 196, 0.25) 34.13%, rgba(154, 96, 170, 0.5) 64.42%, rgba(172, 110, 126, 0.75) 95.19%);
  height: 90%; 
}
.slick-arrow.slick-disabled {
    display: none !important;
}
.card-carousel .slick-list.draggable{
    padding: 10px 0;
}
.content-cards {
    transition:transform 200ms linear;
    background: radial-gradient(45.32% 71.18% at 13.22% 21.01%, #292C4A 1.79%, #27284E 35.58%, #222550 56.27%, #192450 83.12%, #162451 100%);
}

.detail-card,
.content-cards {
    a {
        position:relative;
    }

    &::before {
        content:'';
        position:absolute;
        inset:0;
        background: radial-gradient(65.28% 124.24% at 14.17% 5.06%, #4F435D 1.79%, #4D3965 35.58%, #42336B 56.27%, #2E316B 83.12%, #2A326C 100%);
        opacity:0;
        transition:opacity 200ms linear;
    }

    &:hover {
        transform: translateY(-10px);
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.30);

        .link-light-blue{
            background: linear-gradient(265.15deg, #F889DA -3.13%, #FA93C8 23.48%, #FDBCA9 62.64%, #FFD892 93.61%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        &::before {
            opacity:1;
        }
    }
}


/* Addign the below for login feature - Added by Sudhakar */

.user-avatar {
    width: 40px;
    height: 40px;
    background-color: #004080;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
}

.user-dropdown {
position: absolute;
top: 50px;
right: 0;
background: #fff;
border: 1px solid #ccc;
padding: 0.8rem;
display: none;
z-index: 100;
min-width: 200px;
border-radius: 6px;
box-shadow: 0 0 6px rgba(0,0,0,0.15);
}

.user-dropdown.show {
display: block;
}


/* library Page */
body#page-library {
    .library-hero-bg{
        background-image: url(../img/hero-library.png);
        position: absolute;
        top: 170px;
        right: 0;
        width: 950px;
        height: 555px;
        z-index: 0;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events:none;
    }
    .hero-title{
        font-size: 60px;
    }
    .hero-features{
        width: 63.33%;

        .features-list {
            list-style: none;
            padding: 0;
            margin: 0;
            gap: 36px;
        }
    }


    .features-list li {
        position: relative;
        padding-left: 50px;
    }

    .features-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        width: 16px;
        height: 16px;
        background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L7.70987%206.87114C8.39286%207.46875%208.39286%208.53125%207.70987%209.12886L1%2015%22%20stroke%3D%22url(%23paint0_radial_1940_27801)%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M1%201L7.70987%206.87114C8.39286%207.46875%208.39286%208.53125%207.70987%209.12886L1%2015%22%20stroke%3D%22url(%23paint1_radial_1940_27801)%22%20stroke-opacity%3D%220.2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20style%3D%22mix-blend-mode%3Ascreen%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22paint0_radial_1940_27801%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(0.111111%20-0.555556)%20rotate(67.3644)%20scale(31.1795%2022.2848)%22%3E%3Cstop%20stop-color%3D%22%23F9A848%22%2F%3E%3Cstop%20offset%3D%220.103122%22%20stop-color%3D%22%23F08B5D%22%20stop-opacity%3D%220.98%22%2F%3E%3Cstop%20offset%3D%220.355808%22%20stop-color%3D%22%23DB5A79%22%20stop-opacity%3D%220.85%22%2F%3E%3Cstop%20offset%3D%220.56273%22%20stop-color%3D%22%23D44EA5%22%20stop-opacity%3D%220.8%22%2F%3E%3Cstop%20offset%3D%220.831191%22%20stop-color%3D%22%239337AD%22%20stop-opacity%3D%220.8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23733BD4%22%20stop-opacity%3D%220.75%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22paint1_radial_1940_27801%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(0.111111%20-0.555556)%20rotate(67.3644)%20scale(31.1795%2022.2848)%22%3E%3Cstop%20stop-color%3D%22%23F9A848%22%2F%3E%3Cstop%20offset%3D%220.155469%22%20stop-color%3D%22%23F08B5D%22%20stop-opacity%3D%220.98%22%2F%3E%3Cstop%20offset%3D%220.355808%22%20stop-color%3D%22%23DB5A79%22%20stop-opacity%3D%220.85%22%2F%3E%3Cstop%20offset%3D%220.56273%22%20stop-color%3D%22%23D44EA5%22%20stop-opacity%3D%220.8%22%2F%3E%3Cstop%20offset%3D%220.831191%22%20stop-color%3D%22%239337AD%22%20stop-opacity%3D%220.8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23733BD4%22%20stop-opacity%3D%220.75%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
        background-size: contain;
        background-repeat: no-repeat;
    }
}
.engines-block{
    gap: 72px;
}
.super-agent-card {
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(55, 114, 249, 0.25);
    background: rgba(10, 28, 65, 0.75);

    .text-description {
        p {
            line-height: 1.2;
            color: rgba(101, 158, 251, 1);
        }
    }
}
.program-logo {
    min-width: 165px;
    padding: 20px;
    border-radius: 10px;
    background: rgba(3, 16, 41, 1);

    .agent-icon{
        width: 75px;
        height: 75px;;
    }
    img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}

/* Index Page */
body#page-home section{
    padding: 60px 0;
}
.home-hero-bg{
    background: url(../img/hero-home.png);
    background-repeat: no-repeat;
    width: 771px;
    height: 685px;
    background-position: center;
    position: absolute;
    background-size: cover;
    top: 0;
}
.highlight-container{
    width: 43.5%;
    gap:28px;

    .headline-split{
        line-height: 1;
    }

    .logo-text {
        height:80px;
    }

    .information{
        gap: 56px;

        .info-text{
            gap: 32px;

            .info-description{
                line-height: 32px;
            }
        }
        .buttons-container{
            gap: 24px;
        }
    }
}
.notes-container {
  bottom: 0;
  right: 0;
  padding: 20px 32px;
  width: 410px;
  z-index: 10;
  border-radius: 16px;
  position: relative;
  overflow: hidden; 
  float: right;
}

.notes-container::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px; /* border thickness */
  border-radius: 16px;
  background: radial-gradient(
    63.05% 202.87% at 7.8% 6.98%, 
    rgba(249, 168, 72, 0.2) 0%, 
    rgba(240, 139, 93, 0.196) 10.31%, 
    rgba(219, 90, 121, 0.17) 35.58%, 
    rgba(212, 78, 165, 0.16) 56.27%, 
    rgba(147, 55, 173, 0.16) 83.12%, 
    rgba(115, 59, 212, 0.15) 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    mask:     linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.section-title{
    font-size: 44px;
    padding: 0 16%;
    text-align: center;
    line-height: 1.25;
}
.teams-and-organizations{
    .project-benefits, .organization-benefits{
        gap: 35px;
        flex-basis: 50%;
    }
    .list-wrap{
        gap:32px;

        .single-card-list{
            padding: 32px 20px 24px;
            flex-basis: 50%;

            .card-inner{
                gap: 24px;
            }
            .card-icon{
                width: 75px;
                height: 75px;
                margin: 0 auto;
                border-radius: 60px;
                background: #EBD5F22E;

                .fa{
                    font-size: 36px;
                }
            }

            .card-title{
                letter-spacing: 1px;
            }
        }
    }
}
.start-explore {
    .container-xl{
        gap:64px;

        .content-wrap{
            gap: 24px;
        }
    }
}
.help-extend{
    .container-xl{
        padding: 64px 64px 48px 64px !important;
        gap: 72px;
    }
    .features-container{
        padding: 0 59px;

        .feature{
            gap: 52px;

            .step-container{
                gap: 24px;
                margin-left: 35px;
                margin-right: 45px;

                .step-title.flex-row{
                    gap: 28px;
                }

                .step-description{
                    line-height: 1.8;
                }
                .sub-feature{
                    gap:32px;
                }
                .reach-out{
                    gap: 16px;

                    span{
                        flex: 0 0 192px;
                        line-height: 1;
                    }
                }
            }
        }
    }
}
.tier-block{
    .card-type{
        letter-spacing: 1px;
    }
}

.contactus {
    background:
        radial-gradient(
            177.27% 110.04% at 4.34% 0%,
            #3D3144 2.46%,
            #3B264C 39.48%,
            #322251 74.23%,
            #292052 100%) padding-box,
        radial-gradient(
            205.26% 169.32% at 7.8% 6.98%,
            rgba(249, 168, 72, 1.00) 0%,
            rgba(240, 139, 93, 0.98) 10%,
            rgba(219, 90, 121, 0.85) 36%,
            rgba(212, 78, 165, 0.80) 56%,
            rgba(147, 55, 173, 0.80) 83%,
            rgba(115, 59, 212, 0.75) 100%) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 8px;

    .nav-link{
        color: var(--extra-light-pink) !important;
    }
}
.tooltip-box {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    gap: 12px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    line-height: 1;
    box-shadow: 2px 2px 12px 0px #00000080;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    border: 1px solid;
    border-image-source: radial-gradient(73.08% 233.39% at -2.23% -4.69%, rgba(249, 168, 72, 0.45) 0%, rgba(240, 139, 93, 0.441) 10.31%, rgba(219, 90, 121, 0.3825) 35.58%, rgba(212, 78, 165, 0.36) 56.27%, rgba(147, 55, 173, 0.36) 83.12%, rgba(115, 59, 212, 0.3375) 100%);
    border-image-slice: 1;
    left: 20px;
    width: 300px;
}
.icon-container{cursor: pointer;}
.icon-container:hover .tooltip-box {
    opacity: 1;
    visibility: visible;
}