.search-sticky,
.related-glossaries-sticky {
    position: sticky;
    top: calc(var(--padding-top, 80px) + 20px);
    background-color: #fff;
    padding: 1.5rem 0;
    z-index: 2;
}

.search {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background-color: #fff;
    border: 2px solid var(--button-bg-clr);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
}

.search input {
    width: 100%;
    border: none;
    outline: none;
}

.link {
    font-size: 1.25rem;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    transition: .3s ease-in-out;
}

.link:hover {
    color: var(--dark-clr);
}

.glossary-container {
    scroll-margin-top: 240px;
}

.alphabet-hover-effect {
    font-family: Arial, sans-serif;
    /* force normal font */
    font-weight: 700;

    color: transparent;
    -webkit-text-stroke: 2px black;

    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    transition: .3s ease-in-out;
}

.glossary-item a {
    display: block;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: #000;
    text-decoration: none;
    transition: .3s ease-in-out;
}

.glossary-item a:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dark-clr);
    background-color: var(--card-clr);
}

.glossary-item a h2 {
    font-size: 1.5rem;
    color: var(--dark-clr);
}

.glossary-container:hover .alphabet-hover-effect {
    color: black;
}


.alphabet-sticky {
    margin-top: 0;
    position: sticky;
    top: 32.5%;
    text-align: center;
}

.glossary-detail-content h2,
h3 {
    margin-top: 1.4rem;
    margin-bottom: 1rem;
    color: var(--dark-clr);
}

.glossary-level {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .90rem;
    font-weight: 500;
    padding: .5rem 1.5rem;
    border-radius: .5rem;
}

.gl-green {
    color: var(--green-clr-v2);
    background-color: var(--green-clr-lig-v2);
}

.gl-green::before {
    content: '';
    padding: .30rem;
    background-color: var(--green-clr-v2);
    border-radius: 1rem;
}

.gl-blue {
    color: var(--blue-clr-v1);
    background-color: var(--blue-clr-lig-v1);
}

.gl-blue::before {
    content: '';
    padding: .30rem;
    background-color: var(--blue-clr-v1);
    border-radius: 1rem;
}

.glossary-highlight {
    border-left: 2px solid var(--dark-clr);
    padding: 1.5rem;
    margin: 1.5rem 0;
    background-color: var(--card-clr);
}

.gl-d-text-1 {
    font-size: 1rem;
    font-weight: 600;
}

.gl-d-text-2 {
    font-size: 1.15rem;
    font-weight: 600;
}

.gl-d-text-3 {
    font-size: 1rem;
    font-weight: 400;
}

.gl-d-text-4 {
    font-size: 1rem;
    font-weight: 600;
}

.gl-d-text-3 span,
.gl-d-text-4 span {
    color: var(--dark-clr);
    font-weight: 600;
}

.gl-postive-card,
.gl-negative-card {
    padding: 1rem;
    border-radius: .5rem;
    margin-bottom: 1.5rem;
}

.gl-postive-card {
    background-color: var(--green-clr-lig-v3);
    border: 1px solid var(--green-clr-v3);
}

.gl-negative-card {
    background-color: var(--lig-red-v1);
    border: 1px solid var(--red-clr-v1);
}

.gl-pc-head,
.gl-nc-head {
    text-transform: uppercase;
    font-size: 1.10rem;
    font-weight: 600;
}

.gl-pc-head {
    color: var(--green-clr-v3);
}

.gl-nc-head {
    color: var(--red-clr-v1);
}

.thunder-bullet-points,
.number-points {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--card-clr);
    border-radius: .5rem;
    margin: .5rem 0;
}

.thunder-bullet-points p {
    margin-bottom: 0;
}

.np-num {
    background-color: var(--card-clr);
    padding: .15rem .5rem;
    margin-bottom: 0;
    font-size: .85rem;
    border-radius: .15rem;
    font-weight: 600;
}

.warning-points {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--red-clr-v1);
    border-radius: .5rem;
    background-color: var(--lig-red-v2);
    margin: .5rem 0;
}

.glossary-highlight-v1 {
    background-color: var(--card-clr);
    padding: 1rem;
    border-radius: .5rem;
    margin-bottom: .5rem;
}

.glossary-cta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: center;
    color: white;
    text-align: center;
    padding: 2.75rem 1rem;
    border-radius: .5rem;
    background-image: url('/img/v2/homeWeb/gls-bg-img-lg.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

.glossary-cta strong {
    font-size: 1.5rem;
    padding-bottom: .76rem;
    max-width: 600px;
}

.glossary-cta p {
    font-size: 1.05rem;
    width: 100%;
    margin-bottom: 0;
}

.glossary-cta button {
    background-color: black;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: .5rem;
    transform: scale(1);
    transition: .2s ease-in-out;
}

.glossary-cta button:hover {
    transform: scale(1.05);
    box-shadow: white 3px 3px 1px 0px;
}

.glossary-faqs .accordion-header {
    margin: 0 0;
}

.glossary-faqs .accordion .accordion-item .accordion-button:not(.collapsed) {
    color: var(--dark-clr);
    background-color: transparent;
}

.glossary-faqs .accordion .accordion-item .accordion-button {
    font-size: 1.15rem;
}


.glossary-faqs .accordion .accordion-item .accordion-button,
.glossary-faqs .accordion .accordion-item .accordion-collapse .accordion-body {
    padding-left: 0;
    padding-right: 0;
}

.glossary-faqs .accordion .accordion-item .accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}

.glossary-faqs .accordion .accordion-item {
    border: none;
}

.latestgls-card {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: start;
    border-radius: 0.5rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: 0.4s ease-in-out;
    background-color: #fff;
    transform: translateY(0%);
    border: 2px solid transparent;
}

.lastgls-img img {
    box-shadow: 0rem 0.05875rem 0.175625rem 0rem rgba(102, 102, 102, 0.1),
        0rem 0.35125rem 0.35125rem 0rem rgba(102, 102, 102, 0.09),
        0rem 0.7025rem 0.41rem 0rem rgba(102, 102, 102, 0.05),
        0rem 1.288125rem 0.526875rem 0rem rgba(102, 102, 102, 0.01),
        0rem 1.990625rem 0.585625rem 0rem rgba(102, 102, 102, 0);
    border-radius: 0.5rem;
}

.tags {
    color: var(--dark-clr);
    border: 1px solid var(--dark-clr);
    background: linear-gradient(65.52deg,
            rgba(0, 104, 199, 0.1) 0%,
            rgba(43, 161, 227, 0.1) 100%);
    padding: 0.25rem 0.75rem;
    text-align: center;
    color: var(--dark-clr);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 2rem;
}

.latestgls-card:hover {
    transform: translateY(-3%);
}

.gl-social-icons {
    display: flex;
    justify-content: space-between;
    padding: .5rem 1rem;
    border: 1px solid var(--gray-clr-1);
    border-radius: .5rem;
    margin-bottom: .75rem;
}

.gls-f-social-icon,
.gls-x-social-icon,
.gls-l-social-icon,
.gls-s-social-icon{
    color: #606060;
    transition: .4s ease-in-out;
}

.gls-f-social-icon:hover {
  color: #4267B2;
}

.gls-x-social-icon:hover{
    color: black;
}

.gls-l-social-icon:hover{
    color: #0077B5;
}

.gls-s-social-icon:hover{
    color: var(--dark-clr);
}

.related-glossaries-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--gray-clr-1);
    padding: 1rem;
    border-radius: .5rem;
    margin-top: .75rem;
    transition: .3s ease-in-out;
}

.rlg-head {
    display: inline-block;
    font-size: 1.15rem;
    margin-bottom: .15rem;
}

.rlg-body {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .95rem;
    font-weight: 500;
    margin-bottom: 0;
}

.related-glossaries-card:hover {
    border: 1px solid transparent;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.rlg-link {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: var(--dark-clr);
}

@media (width >=320px) and (width <=992px) {
    .search-sticky {
        top: calc(var(--padding-top, 80px) + 0px);
    }

    .alphabet-sticky {
        position: sticky;
        top: 52%;
        margin-top: 1rem;
    }
}

/* @media (width >= 993px) and (width <= ) */