/* Topnav */

nav.topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform .3s;
    z-index: 95;
    border-bottom: 1px solid transparent;
}

nav.topnav .topnav-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav.topnav .logo {
    display: flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1;
}

nav.topnav .logo:hover {
    opacity: .75;
}

nav.topnav .logo img {
    display: block;
    height: 3.5rem;
    width: auto;
    margin: 0 .625rem 0 0;
}

nav.topnav .logo h5 {
    font-size: 1.625rem;
    font-weight: 500;
    white-space: nowrap;
}

nav.topnav .logo p {
    white-space: nowrap;
}

nav.topnav .top-container {
    display: flex;
    justify-content: flex-end;
}

nav.topnav .top-container>.wrapper {
    position: relative;
    padding: .25rem 0;
}

nav.topnav .top-container>.wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12rem;
    width: calc(50vw + 12rem);
}

nav.topnav .top-container .items {
    position: relative;
    display: flex;
    align-items: center;
}

nav.topnav .top-container .item {
    display: flex;
    align-items: center;
    margin: 0 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 200;
}

nav.topnav .top-container .item i,
nav.topnav .top-container .item em {
    font-size: 1.1875rem;
    margin: 0 .125rem 0 0;
}

nav.topnav .top-container .item a:hover {
    opacity: .75;
}

nav.topnav .top-container .item a.btn-icon:hover {
    opacity: 1;
}

nav.topnav .bottom-container {
    display: flex;
    justify-content: flex-end;
}

nav.topnav .bottom-container>.wrapper {
    position: relative;
}

nav.topnav .bottom-container>.wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5rem;
    width: calc(70vw + 5rem);
}

nav.topnav .menu-container {
    display: flex;
    align-items: center;
}

nav.topnav .menu {
    position: relative;
}

nav.topnav .menu::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity .25s;
}

nav.topnav .menu:hover::before,
nav.topnav .menu.active::before {
    opacity: 1;
}

nav.topnav .menu.menu-icon:last-child::before {
    display: none;
}

nav.topnav .menu>a {
    display: block;
    position: relative;
    font-size: 1.3125rem;
    font-weight: 300;
    padding: .92rem 0.5rem;
}

nav.topnav .menu.menu-icon>a {
    width: 3.25rem;
    height: 3.25rem;
    line-height: 3.5rem;
    text-align: center;
    padding: 0;
    font-size: 1.5rem;
}

nav.topnav .menu.menu-icon:last-child>a {
    width: auto;
    padding-left: .75rem;
}

nav.topnav .menu.menu-icon:last-child>a:hover {
    opacity: .75;
}

nav.topnav .pc-container {
    display: block;
}

nav.topnav .mobile-container {
    display: none;
}

nav.topnav .mobile-container .menu::before {
    display: none;
}

nav.topnav .mobile-container .menu:hover {
    opacity: .75;
}

nav.topnav .mobile-container .menu.menu-icon>a {
    width: auto;
    height: 4.125rem;
    padding: 0 .6875rem;
    display: flex;
    align-items: center;
}

nav.topnav .mobile-container .menu.menu-icon:last-child>a {
    padding: 0 0 0 .6875rem;
}

nav.topnav+.topnav-spacer {
    display: block;
    width: 100%;
    height: 5.5rem;
}

.topnav-dropdown {
    display: none;
    position: relative;
    position: fixed;
    height: auto !important;
    top: 5.5rem;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 94;
}

.topnav-dropdown>.close-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    cursor: pointer;
}

.topnav-dropdown>.container {
    position: relative;
}

.topnav-dropdown .dropdown-wrapper {
    display: none;
    position: relative;
    width: 100%;
    /* height: calc(100vh - 5.5rem); */
    height: auto;
    background-position: bottom center;
    padding: 0 1.5rem 1.5rem 1.5rem;
    background-size: cover;
   
}

.topnav-dropdown .dropdown-wrapper.active {
    display: block;
}

.topnav-dropdown-toggle:hover>.dropdown-wrapper {
    display: block;
}

.topnav-dropdown h5 {
    font-size: 3.5rem;
    font-weight: 600;
}

.topnav-dropdown img.hero {
    display: block;
    width: 10rem;
    height: auto;
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
}

.topnav-dropdown .scroll-wrapper {
    width: 100%;
    /* height:calc(100vh - 15rem);  */
    height: auto;
    max-height: calc(100vh - 15rem);
    overflow-x: hidden;
    overflow-y: auto;
}

.topnav-dropdown+.topnav-dropdown-filter {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 93;
    background: rgb(57, 57, 57);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    
}



.topnav-dropdown.active+.topnav-dropdown-filter {
    opacity: .4;
    pointer-events: all;
}

@media screen and (max-width:1199.98px) {
    nav.topnav .logo img {
        height: 3rem;
        margin: 0 .5rem 0 0;
    }
    nav.topnav .logo h5 {
        font-size: 1.5625rem;
    }
    nav.topnav .pc-container {
        display: none;
    }
    nav.topnav .mobile-container {
        display: flex;
    }
    nav.topnav+.topnav-spacer {
        height: 4.125rem;
    }
    .topnav-dropdown {
        top: 4.125rem;
    }
    .topnav-dropdown .dropdown-wrapper {
        height: calc(100vh - 4.125rem);
    }
    .topnav-dropdown .scroll-wrapper {
        height: calc(100vh - 20rem);
        max-height: calc(100vh - 20rem);
    }
    .topnav-dropdown img.hero {
        width: 7.5rem;
        top: 1.5rem;
        bottom: auto;
        left: auto;
        right: 1.5rem;
    }
}

@media screen and (max-width:991.98px) {
    .topnav-dropdown h5 {
        font-size: 3rem;
    }
}

@media screen and (max-width:767.98px) {
    .topnav-dropdown h5 {
        font-size: 2.75rem;
    }
    .topnav-dropdown img.hero {
        width: 7rem;
    }
    .topnav-dropdown .scroll-wrapper {
        height: calc(100vh - 24.5rem);
        max-height: calc(100vh - 24.5rem);
    }
}

@media screen and (max-width:575.98px) {
    nav.topnav .logo .text-wrapper h5, nav.topnav .logo .text-wrapper p {
        font-size: 1.25rem;
    }
    .topnav-dropdown .scroll-wrapper {
        height: calc(100vh - 27.5rem);
        max-height: calc(100vh - 27.5rem);
    }
    .topnav-dropdown img.hero {
        display: none;
    }
}


/* Sidenav */

nav.sidenav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    height: 100vh;
    z-index: 98;
    transform: translateX(340px);
    transition: transform .5s;
}

nav.sidenav>.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

nav.sidenav .sidenav-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.75rem;
    height: 3.75rem;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid transparent;
}

nav.sidenav .scroll-wrapper {
    width: 100%;
    height: calc(100% - 11.5rem);
    max-height: calc(100% - 11.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 3.75rem 0 0 0;
    border-top: 1px solid transparent;
}

nav.sidenav .item {
    display: flex;
    align-items: center;
}

nav.sidenav .menu>a {
    display: block;
}

nav.sidenav .menu>a,
nav.sidenav .item {
    position: relative;
    width: 100%;
    height: auto;
    text-decoration: none;
    padding: 1rem 2rem 1rem 1rem;
    margin: 0;
    font-size: 1.375rem;
    border-bottom: 1px solid transparent;
    min-height: 3.3125rem;
    transition: color .25s, background .25s;
}

nav.sidenav .item>a:not(.btn-icon) {
    width: 100%;
}

nav.sidenav+.sidenav-filter {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 97;
    background: #000;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity .5s;
}

nav.sidenav .menu {
    position: relative;
}

nav.sidenav .menu>em {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.25rem;
    height: 3.5rem;
    cursor: pointer;
    text-align: center;
    line-height: 3.5rem;
    font-size: 1.25rem;
    transition: color .25s;
}

nav.sidenav .menu ul.ss-list {
    display: none;
    margin: 0;
}

nav.sidenav .menu ul.ss-list>li {
    position: relative;
    margin: 0;
    padding: 0;
}

nav.sidenav .menu ul.ss-list>li::before {
    display: none;
}

nav.sidenav .menu ul.ss-list>li>a {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    text-decoration: none;
    padding: .75rem 2rem .75rem 1.75rem;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 300;
    border-bottom: 1px solid transparent;
    transition: color .25s, background .25s;
}

nav.sidenav .menu ul.ss-list ul.ss-list>li>a {
    padding-left: 2.5rem;
}

nav.sidenav .menu ul.ss-list>li>a+.btn-icon {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    width: 2.25rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    background: transparent;
}

@media screen and (max-width:1199.98px) {
    nav.sidenav {
        display: block;
    }
    nav.sidenav.active {
        transform: translateX(0);
    }
    nav.sidenav+.sidenav-filter {
        display: block;
    }
    nav.sidenav.active+.sidenav-filter {
        opacity: .65;
        pointer-events: all;
    }
}


/* Global Search */

.global-search-container {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
}

.global-search-container:not(.use-gsap) {
    transition: opacity .45s;
}

.global-search-container.active {
    opacity: 1;
    pointer-events: all;
}

.global-search-container>.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1.5rem 1.5rem 6rem 1.5rem;
    ;
}

.global-search-container .container {
    position: relative;
    height: 100%;
    ;
    display: flex;
    align-items: center;
}

.global-search-container .hamburger {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.global-search-container form {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    position: relative;
}

.global-search-container .input-container {
    position: relative;
}

.global-search-container input[type=text] {
    width: 100%;
    border: 1.5px solid transparent;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    transition: border-color .25s;
}

.global-search-container button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 3.5rem;
    background: transparent;
    box-shadow: none;
    outline: none;
    border: 0;
    font-size: 1.75rem;
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: color .3s;
}


/* Quick Tab */

.quick-tab {
    position: absolute;
    top: 10rem;
    right: 1rem;
    z-index: 90;
}

.quick-tab {
    position: fixed;
}

.quick-tab img {
    display: block;
    width: 100%;
    height: auto;
}

.quick-tab .btn-hover {
    transition: opacity .25s;
}

.quick-tab .btn-hover:hover {
    opacity: .8;
}

.quick-tab>.wrapper {
    position: relative;
}

.quick-tab .tabs {
    transition: opacity .25s;
}

.quick-tab .tabs.inactive {
    opacity: 0;
    pointer-events: none;
}

.quick-tab .tab {
    display: block;
    position: relative;
    width: 4.5rem;
    margin: .125rem 0;
}

.quick-tab .tab>.wrapper {
    position: absolute;
    top: .375rem;
    bottom: .375rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.quick-tab .tab .inner-wrapper {
    width: 100%;
    text-align: center;
    color: #fff;
}

.quick-tab .tab .tab-icon {
    display: block;
    height: 1.5rem;
    width: auto;
    margin: 0 auto .25rem auto;
}

.quick-tab .tab .p {
    font-size: .8125rem;
    font-weight: 300;
    line-height: .9;
}

.quick-tab .tab-bar {
    display: none;
    position: absolute;
    top: 1rem;
    right: 0;
}

.quick-tab .tab-bar.show,
.quick-tab .tab-bar.active {
    display: block;
}

.quick-tab .tab-bar>.wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.quick-tab .tab-bar .icon {
    display: block;
    width: 3.5rem;
    transform: translateX(.1875rem);
}

.quick-tab .tab-bar .btn-close {
    display: block;
    width: 1.75rem;
}

.quick-tab .tab-bar .bar {
    display: flex;
}

.quick-tab .panel {
    transform: translateX(1.3125rem);
}

.quick-tab .top-panel,
.quick-tab .bottom-panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 1.125rem;
    font-weight: 100;
    padding: .5rem 1.75rem .5rem .875rem;
}

.quick-tab .top-panel {
    background: #803f97;
    color: #fff;
}

.quick-tab .bottom-panel {
    background: #5c2576;
    color: #fff;
}

.quick-tab .btn-font-size,
.quick-tab .btn-theme {
    display: block;
    position: relative;
    width: 1.5625rem;
    margin: 0 0 0 .1875rem;
}

.quick-tab .btn-font-size:nth-child(1),
.quick-tab .btn-theme:nth-child(1) {
    margin-left: .75rem;
}

.quick-tab .btn-font-size>.wrapper,
.quick-tab .btn-theme>.wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    font-weight: 300;
    color: #6ff5fb;
}

.quick-tab .bubbles {
    position: relative;
    transform: translate(-7.4375rem, 2.4375rem);
}

.quick-tab .bubble {
    position: relative;
    display: block;
    width: 5.5rem;
}

.quick-tab .bubble.pos {
    position: absolute;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transition: all .25s;
}

.quick-tab .tab-bar .bubble.pos-0 {
    bottom: 0;
    transition-delay: 0;
}

.quick-tab .tab-bar.active .bubble.pos-0 {
    bottom: calc(100% + 2px);
}

.quick-tab .tab-bar .bubble.pos-1 {
    bottom: 0;
    left: 0;
    transition-delay: .1s;
}

.quick-tab .tab-bar.active .bubble.pos-1 {
    bottom: calc(50% + 1px);
    left: calc(77% + 2px);
}

.quick-tab .tab-bar .bubble.pos-2 {
    top: 0;
    left: 0;
    transition-delay: .2s;
}

.quick-tab .tab-bar.active .bubble.pos-2 {
    top: calc(50% + 1px);
    left: calc(77% + 2px);
}

.quick-tab .tab-bar .bubble.pos-3 {
    top: 0;
    transition-delay: .3s;
}

.quick-tab .tab-bar.active .bubble.pos-3 {
    top: calc(100% + 2px);
}

.quick-tab .tab-bar .bubble.pos-4 {
    top: 0;
    right: 0;
    transition-delay: .4s;
}

.quick-tab .tab-bar.active .bubble.pos-4 {
    top: calc(50% + 1px);
    right: calc(77% + 2px);
}

.quick-tab .tab-bar .bubble.pos-5 {
    bottom: 0;
    right: 0;
    transition-delay: .5s;
}

.quick-tab .tab-bar.active .bubble.pos-5 {
    bottom: calc(50% + 1px);
    right: calc(77% + 2px);
}

.quick-tab .tab-bar .bubble.pos-6 {
    opacity: 0;
    transition-delay: .6s;
}

.quick-tab .tab-bar.active .bubble.pos-6 {
    top: 0;
    left: calc(154% + 4px);
    opacity: 1;
}

.quick-tab .bubble>.wrapper {
    position: absolute;
    top: .5rem;
    bottom: .5rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}

.quick-tab .bubble .inner-wrapper {
    width: 100%;
    color: #fff;
    text-align: center;
}

.quick-tab .bubble .bubble-icon {
    display: block;
    height: 1.625rem;
    width: auto;
    margin: 0 auto .25rem auto;
}

.quick-tab .bubble .h6 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: .8;
}

.quick-tab .bubble .p {
    font-size: .8125rem;
    font-weight: 100;
    line-height: .8;
}

@media screen and (max-width:1199.98px) {
    .quick-tab {
        top: 9rem;
    }
    .quick-tab .tab {
        width: 4.375rem;
    }
}

@media screen and (max-width:991.98px) {
    .quick-tab {
        top: 8.25rem;
    }
    .quick-tab .tab {
        width: 4.25rem;
    }
}

@media screen and (max-width:767.98px) {
    .quick-tab {
        top: 7rem;
    }
    .quick-tab .tab {
        width: 4.125rem;
    }
}

@media screen and (max-width:575.98px) {
    .quick-tab {
        top: 6rem;
    }
}


/* Chatbot */

.chatbot {
    display: block;
    text-decoration: none;
    width: 2.625rem;
    border-radius: 0;
    z-index: 90;
    position: fixed;
    bottom: 11rem;
    right: 1rem;
    transition: opacity .3s;
}

.chatbot:hover {
    opacity: .85;
}

.chatbot img {
    display: block;
    width: 100%;
    height: auto;
}


/* Back to Top */

.back-to-top {
    display: block;
    text-decoration: none;
    width: 2.625rem;
    opacity: 0;
    z-index: 90;
    position: fixed;
    bottom: 7.75rem;
    right: 1rem;
    pointer-events: none;
    transition: opacity .3s;
}

.back-to-top.active {
    opacity: 1;
    pointer-events: all;
}

.back-to-top.active:hover {
    opacity: .85;
}

.back-to-top img {
    display: block;
    width: 100%;
    height: auto;
}

.back-to-top .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.back-to-top i,
.back-to-top em {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    transform: translateY(-.0625rem);
}


/* Footer */

nav.footer {
    width: 100%;
    overflow: hidden;
}

nav.footer .tag {
    position: relative;
    display: block;
    margin: 0 auto 1.1875rem auto;
    width: 100%;
    z-index: 1;
    border-top: 1px solid transparent;
    padding: .125rem 0 .5625rem 0;
    max-width: 7.5rem;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    cursor: pointer;
    text-align: center;
}

nav.footer .tag i,
nav.footer .tag em {
    font-size: 1.6875rem;
}

nav.footer .tag p {
    font-size: 1.1875rem;
}

nav.footer .tag-target {
    /* display: none; */
}

nav.footer .tag-target .grids-list {
    column-count: 4;
    column-gap: 10px;
}

nav.footer .tag-target .grids-list .grid-content {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
}

nav.footer h3.title {
    font-size: 1.9375rem;
    font-weight: 500;
    line-height: 1;
}

nav.footer h4.title {
    font-size: 1.75rem;
    margin: 1.5rem 0 .5rem 0;
}

nav.footer p.desc {
    font-size: 1.3125rem;
    font-weight: 100;
    line-height: 1;
    margin: 0 0 .5625rem 0;
}

nav.footer .footer-link {
    margin: .4375rem 0 0 0;
    font-size: 1.3125rem;
    font-weight: 200;
}

nav.footer .footer-link i,
nav.footer .footer-link em,
nav.footer .footer-link .icon {
    display: inline-block;
    width: 1.5rem;
    font-size: 1.125rem;
}

nav.footer .footer-link .icon img {
    height: 1rem;
    width: auto;
}

nav.footer .bottom-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 0 2.5rem 0;
    font-size: 1.0625rem;
    font-weight: 200;
}

nav.footer .bottom-container .content {
    margin: .5rem 0 0 0;
}

nav.footer .count-container {
    display: flex;
    align-items: center;
}

nav.footer .count-container>.count {
    margin: 0 0 0 .5rem;
    display: block;
    background-size: auto 100%;
    background-position: top left;
    padding: .3125rem .375rem .3125rem .625rem;
    font-size: 1.4375rem;
    letter-spacing: .3125rem;
    font-weight: 500;
}

nav.footer .btn-social {
    display: inline-block;
    width: 2.3125rem;
    transition: opacity .25s;
}

nav.footer .btn-social:hover {
    opacity: .75;
}

nav.footer .btn-social>img {
    display: block;
    width: 100%;
    height: auto;
}

nav.footer .inner-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 1.5rem 0;
}

nav.footer .inner-container>.content {
    min-width: 9rem;
    margin: 1.5rem 0 0 0;
}

nav.footer .inner-container img.hero {
    display: block;
    width: 8rem;
    height: auto;
}

nav.footer .inner-container p {
    font-size: 1.3125rem;
    font-weight: 300;
    line-height: 1.05;
}

nav.footer .inner-container .text-xs {
    font-weight: 200;
}

nav.footer .inner-container br.xs-sep {
    display: none;
}

nav.footer .inner-container .btns {
    text-align: right;
}

@media screen and (max-width:991.98px) {
    nav.footer .inner-container {
        padding: .5rem 0 2rem 0;
    }
    nav.footer .inner-container {
        flex-wrap: wrap;
        justify-content: center;
    }
    nav.footer .inner-container>.content {
        width: 100%;
    }
    nav.footer .inner-container>.content:last-child {
        width: auto;
    }
    nav.footer .inner-container img.hero {
        width: 6.5rem;
        margin: 0 auto;
    }
    nav.footer .inner-container .btns {
        text-align: center;
    }
    nav.footer .tag-target .grids-list {
        column-count: 2;
        column-gap: 10px;
    }
}

@media screen and (max-width:575.98px) {
    nav.footer .inner-container br.xs-sep {
        display: block;
    }
    nav.footer .tag-target .grids-list {
        column-count: 1;
        column-gap: 10px;
    }
}