/* *****************************************************

    ** Custom Stylesheet for TridentNodes Nexus Editing Theme **

    SSDNodes-inspired styles

***************************************************** */

/* ====================================================
   CSS CUSTOM PROPERTIES - TridentNodes Theme Colors
==================================================== */

:root {
    /* TridentNodes Brand Colors - SSDNodes Style */
    --tn-primary: #0066b2;
    --tn-primary-dark: #004a8a;
    --tn-primary-light: #00aeef;
    --tn-secondary: #273240;
    --tn-accent: #00aeef;
    --tn-accent-hover: #0066b2;
    --tn-white: #ffffff;
    --tn-black: #15162b;
    --tn-text: #525656;
    --tn-text-light: #fff;
    --tn-border: #ececec;
    --tn-border-light: #dad9dc;
    --tn-bg-light: #faf9ff;
    --tn-bg-dark: #273240;
    --tn-success: #34c759;
    --tn-warning: #fc0;
    --tn-error: #ff3b30;
    
    /* Gradients */
    --tn-gradient-primary: linear-gradient(96.18deg, #0066b2 0.44%, #00aeef 100.05%);
    --tn-gradient-primary-reverse: linear-gradient(96.18deg, #00aeef 0.44%, #0066b2 100.05%);
    --tn-gradient-save: linear-gradient(96.18deg, rgba(0, 102, 178, 0.16) 0.44%, rgba(0, 174, 239, 0.16) 100.05%);
    --tn-gradient-save-text: linear-gradient(96.18deg, #0066b2 0.44%, #00aeef 100.05%);
    --tn-gradient-bubble: rgba(0, 102, 178, 0.4);
    
    /* Shadows */
    --tn-shadow-card: 0px 0px 20px 0px rgba(0,0,0,0.12);
    --tn-shadow-hover: 0px 0px 20px 0px rgba(0,0,0,0.15);
    --tn-shadow-btn: 2px 5px 4px rgba(0,134,91,0.2);
    --tn-shadow-btn-hover: 5px 5px 4px rgba(0,134,91,0.1);
    
    /* Transitions */
    --tn-transition: all 0.3s ease;
    --tn-transition-fast: all 0.2s ease;
    
    /* Border Radius */
    --tn-radius-sm: 8px;
    --tn-radius-md: 10px;
    --tn-radius-lg: 15px;
    --tn-radius-xl: 20px;
    --tn-radius-pill: 50px;
    --tn-radius-circle: 50%;
    
    /* Font Families */
    --tn-font-primary: "Urbanist", sans-serif;
    --tn-font-secondary: "DM Sans", sans-serif;
    
    /* Spacing */
    --tn-container-max: 1272px;
    --tn-container-padding: 1rem;

    --grayscale-lifted: #e2e6ea;
}

/* ====================================================
   BASE RESET & TYPOGRAPHY
==================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--tn-font-secondary);
    color: var(--tn-text);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tn-font-primary);
    font-weight: 700;
    color: var(--tn-black);
    margin: 0;
}

/* ====================================================
   CART / CHECKOUT PAGE FIXES
   Prevent heading overflow on mobile/small screens
==================================================== */

#order-standard_cart .font-size-36 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

@media (max-width: 991px) {
    #order-standard_cart .font-size-36 {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    #order-standard_cart .font-size-36 {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    #order-standard_cart .font-size-36 {
        font-size: 20px;
    }
}

/* Also fix font-size-30 in order summary */
#order-standard_cart .font-size-30 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

@media (max-width: 767px) {
    #order-standard_cart .font-size-30 {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    #order-standard_cart .font-size-30 {
        font-size: 20px;
    }
}

/* Fix header-lined h1 being cut off on left side */
body #order-standard_cart .cart-body .header-lined {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 16px;
}

body #order-standard_cart .cart-body .header-lined h1 {
    margin-bottom: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fix view-cart-items-header text overflow (Product/Options, Price/Cycle) */
body #order-standard_cart .cart-body .view-cart-items-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* CRITICAL: Override theme's padding: 0 !important on cart-body */
body #order-standard_cart .cart-body {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

body #order-standard_cart .cart-body .secondary-cart-body {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Prevent column content from overflowing */
body #order-standard_cart .cart-body .view-cart-items-header > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure view-cart-items items don't overflow */
body #order-standard_cart .cart-body .view-cart-items {
    overflow: hidden;
}

body #order-standard_cart .cart-body .view-cart-items .item {
    max-width: 100%;
    overflow: hidden;
}

a {
    text-decoration: none;
    transition: var(--tn-transition-fast);
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.container {
    max-width: var(--tn-container-max);
    padding-inline: var(--tn-container-padding);
    margin-inline: auto;
}

/* ====================================================
   COUNTDOWN BAR
==================================================== */

.count {
    background: var(--tn-bg-dark);
    font-family: var(--tn-font-secondary);
    padding: 0 30px;
}

.count__sec {
    width: 100%;
    height: 100%;
    max-height: 62px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    color: var(--tn-white);
    padding: 10px 0;
    max-width: 1240px;
    margin: auto;
}

.count__sec a {
    color: var(--tn-white);
    transition: var(--tn-transition-fast);
}

.count__sec a:hover {
    text-decoration: underline;
}

.count__desc {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: .02em;
    font-weight: 400;
}

.count__span {
    color: var(--tn-primary-light);
}

.count__right {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 28px;
}

.count__timer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

.count__num {
    font-size: 18px;
    line-height: 23px;
    color: var(--tn-primary-light);
}

.count__time {
    font-size: 16px;
    line-height: 18px;
}

@media (max-width: 1199px) {
    .count__sec {
        flex-direction: column;
        gap: 1rem;
        max-height: 100%;
    }
}

@media (max-width: 767px) {
    .count__desc {
        font-size: 15px;
        line-height: 25px;
    }
    .count__sec {
        text-align: center;
        gap: .5rem;
    }
}

@media (max-width: 576px) {
    .count__desc {
        font-size: 13px;
        line-height: 23px;
    }
    .count__right {
        gap: 22px;
    }
    .count__num,
    .count__time {
        font-size: 13px;
    }
}

/* ====================================================
   HERO BANNER
==================================================== */

.banner {
    position: relative;
    width: 100%;
    max-width: 2560px;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.banner__cont {
    max-width: 1272px;
    z-index: 1;
    margin-inline: auto;
    height: 100%;
    width: 100%;
    padding: 2rem 1rem 3.5rem;
}

.banner__textCont {
    height: 100%;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    overflow: hidden;
}

.banner__textCont .swiper-pager {
    bottom: 20px;
}

.banner__textCont .swiper-pager .swiper-pagination-bullet {
    background: hsla(0,0%,100%,.426) !important;
}

.banner__textCont .swiper-pager .swiper-pagination-bullet-active {
    background-color: var(--tn-white) !important;
}

.banner__content {
    width: 100%;
    max-width: 695px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: flex-start;
    gap: 1rem;
    color: var(--tn-white);
}

.banner__title {
    font-size: 52px;
    line-height: 120%;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--tn-font-primary);
}

.banner__desc {
    font-size: 18px;
    line-height: 140%;
    font-family: var(--tn-font-secondary);
}

/* Make main-body container full-width so banner fills edge-to-edge */
#main-body > .container {
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
}

/* Hide breadcrumb bar on homepage - it only shows "Portal Home" */
.master-breadcrumb {
    display: none !important;
}

.banner--home {
    background: var(--tn-gradient-primary);
    /* Full-bleed: break out of the max-width container so the blue box
       spans the entire viewport with no white gaps on the sides. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.banner--home .banner__cont {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: nowrap;
}

.banner--home .banner__textCont {
    max-width: 695px;
}

.banner--home .banner__inner {
    width: 100%;
    max-width: 695px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: flex-start;
    gap: 1rem;
    color: var(--tn-white);
}

.banner--home .banner__left {
    width: 53%;
    color: var(--tn-white);
}

.banner--home .banner__right {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 47%;
    max-width: 550px;
}

.banner--home .banner__logo {
    display: block;
    width: 100%;
    aspect-ratio: 550/477;
}

.banner--home .banner__logo--mob {
    display: block;
    width: 100%;
    display: none;
    aspect-ratio: 327/283;
}

.deal-btn {
    display: inline-block;
    width: 100%;
    background: var(--tn-white);
    color: var(--tn-primary);
    text-align: center;
    max-width: 14rem;
    padding: 1.05rem 1.1rem;
    border-radius: 8px;
    font-size: 18px;
    line-height: 120%;
    font-weight: 700;
    font-family: var(--tn-font-secondary);
    transition: var(--tn-transition);
    box-shadow: var(--tn-shadow-btn);
    position: relative;
    margin-top: 1rem;
}

.deal-btn:hover {
    color: var(--tn-white);
    background-color: var(--tn-bg-dark);
    box-shadow: var(--tn-shadow-btn-hover);
}

/* Mobile Hero */
@media (max-width: 991px) {
    .banner__cont {
        padding: 2rem 5% 3.5rem;
    }
    .banner__content {
        max-width: 550px;
    }
    .banner__title {
        font-size: 38px;
    }
    .banner__desc {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .banner {
        min-height: 400px;
    }
    .banner__title {
        font-size: 25px;
        line-height: 130%;
    }
    .banner__feedback {
        top: auto;
        bottom: 13%;
        left: 5%;
        transform: rotate(0deg);
    }
    .banner--home .banner__cont {
        flex-direction: column-reverse;
    }
    .banner--home .banner__left,
    .banner--home .banner__right {
        width: 100%;
    }
    .banner--home {
        background: linear-gradient(140.92deg, var(--tn-primary) 22.47%, var(--tn-primary-light) 77.65%);
    }
    .banner--home .banner__logo {
        display: none;
    }
    .banner--home .banner__logo--mob {
        display: block;
    }
}

@media (max-width: 576px) {
    .banner {
        min-height: 350px;
    }
    .banner__cont {
        padding: 2.5rem 1rem 3.5rem;
    }
    .banner__content {
        max-width: 100%;
        text-align: center;
        align-items: center;
        gap: 16px;
    }
    .banner__feedback {
        display: none;
    }
}

/* ====================================================
   TESTIMONIAL / REVIEWS SECTION
==================================================== */

.tmonial {
    padding: 0 1rem;
    font-family: var(--tn-font-secondary);
}

.tmonial__cont {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

.tmonial__title {
    font-family: var(--tn-font-primary);
    font-size: 42px;
    line-height: 110%;
    font-weight: 700;
    color: var(--tn-black);
    text-align: center;
    margin-bottom: 50px;
}

.tmonial__menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--tn-text);
    gap: 35px;
    margin-bottom: 50px;
}

.tmonial__menuItems {
    font-size: 20px;
    line-height: 23px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--tn-primary);
    transition: var(--tn-transition-fast);
    position: relative;
    padding-bottom: 10px;
}

.tmonial__menuItems::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--tn-gradient-primary);
    transition: var(--tn-transition);
}

.tmonial__menuItems.active::after,
.tmonial__menuItems:hover::after {
    width: 100%;
}

.tmonial__menuItems:hover {
    color: var(--tn-primary-light);
}

.tmonial__menuItems.active {
    color: var(--tn-primary);
    font-weight: 700;
}

.review__cont,
.slider__cont {
    display: none;
}

.review__cont.active,
.slider__cont.active {
    display: block;
}

.review__items {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
}

.review__items__none {
    width: 100%;
    max-width: 540px;
    border: 1px solid var(--tn-border);
    border-radius: 10px;
    transition: var(--tn-transition);
    background: var(--tn-white);
}

.review__items__none:hover {
    border-color: var(--tn-primary);
    box-shadow: var(--tn-shadow-card);
}

.review__inner {
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.review__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.review__img {
    object-fit: contain;
    max-width: 90px;
    width: auto;
    height: auto;
}

.review__heading {
    font-family: var(--tn-font-primary);
    font-size: 24px;
    line-height: 120%;
    font-weight: 700;
    color: var(--tn-black);
    text-align: center;
    margin-bottom: 15px;
}

.review__desc {
    text-align: center;
    color: var(--tn-text);
    font-size: 16px;
    line-height: 150%;
}

.review__desc--show {
    display: none;
}

.review__readmore {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tn-primary);
    font-weight: 600;
    margin: 10px auto 0;
    display: block;
}

.review__rate {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.review__num {
    font-family: var(--tn-font-primary);
    font-size: 32px;
    line-height: 120%;
    font-weight: 700;
    color: var(--tn-black);
    margin-bottom: 8px;
}

.review__rslt {
    color: var(--tn-primary);
}

.review__stars {
    display: flex;
    gap: 2px;
    margin-bottom: 15px;
}

.review__stars i {
    font-size: 20px;
    color: #f3ae3d;
}

.review__count {
    text-align: center;
}

.review__nmbrs {
    font-family: var(--tn-font-primary);
    font-size: 24px;
    line-height: 120%;
    font-weight: 700;
    color: var(--tn-black);
}

.review__label {
    font-size: 16px;
    line-height: 140%;
    color: var(--tn-text);
}

/* Reviews Slider */
.rev {
    width: 100%;
}

.rev__cont {
    padding-bottom: 50px;
}

.rev__wrap {
    display: flex;
}

.rev__cards {
    background: var(--tn-white);
    border: 1px solid var(--tn-border);
    border-radius: 10px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--tn-transition);
}

.rev__cards:hover {
    border-color: var(--tn-primary);
    box-shadow: var(--tn-shadow-card);
}

.rev__content {
    margin-bottom: 20px;
}

.rev__img {
    margin-bottom: 15px;
}

.rev__img img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.rev__heading {
    font-family: var(--tn-font-primary);
    font-size: 20px;
    line-height: 120%;
    font-weight: 700;
    color: var(--tn-black);
    margin-bottom: 12px;
}

.rev__desCont {
    margin-bottom: 20px;
}

.rev__desc {
    color: var(--tn-text);
    font-size: 16px;
    line-height: 150%;
}

.rev__viewMode {
    display: inline-block;
    color: var(--tn-primary);
    font-weight: 600;
    margin-top: 8px;
    cursor: pointer;
}

.rev__name {
    font-weight: 700;
    color: var(--tn-black);
    margin-bottom: 4px;
}

.rev__desig {
    color: var(--tn-text);
    font-size: 14px;
    line-height: 140%;
    margin-bottom: 15px;
}

.rev__link {
    color: var(--tn-primary);
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    transition: var(--tn-transition-fast);
}

.rev__link:hover {
    color: var(--tn-primary-dark);
    text-decoration: underline;
}

.swiper-pageRev {
    position: relative;
    margin-top: 30px;
}

.swiper-pageRev .swiper-pagination-bullet {
    background: var(--tn-border-light);
    width: 10px;
    height: 10px;
    opacity: 1;
}

.swiper-pageRev .swiper-pagination-bullet-active {
    background: var(--tn-primary);
}

/* ====================================================
   PRICING PLANS
==================================================== */

.plans {
    padding: 67px 1rem;
    font-family: var(--tn-font-secondary);
    position: relative;
    overflow: hidden;
}

.plans::before,
.plans::after {
    content: "";
    position: absolute;
    z-index: -1;
}

.plans::before {
    width: 466px;
    height: 246px;
    background: url("../images/bubble-top.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    top: 0;
    right: 0;
}

.plans::after {
    width: 515px;
    height: 275px;
    background: url("../images/bubble-top.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
}

.plans__cont {
    width: 100%;
    max-width: 1240px;
    margin: auto;
}

.plans__note {
    width: fit-content;
    text-align: end;
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    margin-top: .5rem;
}

.plans__heading {
    font-family: var(--tn-font-primary);
    font-size: 42px;
    line-height: 110%;
    margin-bottom: 50px;
    text-align: center;
}

.plans__tab {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 744px;
    margin: auto;
    background-color: var(--tn-bg-dark);
    border-radius: var(--tn-radius-pill);
    padding: 12px;
}

.plans__tabItems {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: var(--tn-white);
    max-width: 340px;
    padding: 22px;
    border-radius: var(--tn-radius-pill);
    font-size: 20px;
    line-height: 150%;
    cursor: pointer;
    transition: var(--tn-transition);
}

.plans__tabItems:active,
.plans__tabItems:hover {
    background-color: var(--tn-white);
    color: var(--tn-bg-dark);
}

.plans__tabItems.active {
    background-color: var(--tn-white);
    color: var(--tn-bg-dark);
}

.plans__wrap {
    width: 100%;
    max-width: 1240px;
    margin: auto;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 20px;
    row-gap: 60px;
    align-items: flex-end;
    display: none;
}

.plans__wrap.active {
    display: flex;
}

.plans__card {
    height: 100%;
    width: 295px;
    border: 1px solid var(--tn-border-light);
    border-radius: 25px;
}

.plans__card--active {
    margin-top: 35px;
    position: relative;
    border: 1px solid var(--tn-primary);
    box-shadow: var(--tn-shadow-card);
}

.plans__cardHead {
    width: 100%;
    background-color: var(--tn-primary);
    height: 100vh;
    max-height: 150px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 25px 25px 0 0;
}

.plans__cardHead--active {
    border-radius: 0;
}

.plans__recommend {
    font-size: 20px;
    line-height: 30px;
    padding: 11px 0;
    font-weight: 700;
    border-bottom: 2px solid var(--tn-white);
    width: 100%;
    color: var(--tn-white);
    text-align: center;
    background-color: var(--tn-primary);
    position: absolute;
    top: -36px;
    border-radius: 25px 25px 0 0;
    text-transform: uppercase;
}

.plans__title {
    font-size: 20px;
    line-height: 30px;
    color: var(--tn-white);
    font-weight: 700;
}

.plans__cardBody {
    background: var(--tn-white);
    width: 100%;
    padding: 40px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 0 0 25px 25px;
}

.plans__cardBodyInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.plans__prevPrice {
    font-size: 32px;
    line-height: 42px;
    color: #acacac;
    font-family: var(--tn-font-primary);
    font-weight: 700;
}

.plans__prevPrice sup,
.plans__prevPrice sub {
    font-size: 26px;
    line-height: 120%;
}

.plans__price {
    font-family: var(--tn-font-primary);
    font-size: 56px;
    line-height: 1;
    color: var(--tn-black);
    font-weight: 700;
}

.plans__offerPrice.rw {
    margin-top: .75rem;
}

.plans__saveCont {
    padding: 8px 1.5rem;
    border-radius: var(--tn-radius-pill);
    background: var(--tn-gradient-save);
}

.plans__savePrice {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    background: var(--tn-gradient-save-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plans__desc {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
}

.plans__hr {
    width: 100%;
    max-width: 117px;
    border: none;
    border-top: 1px solid var(--tn-border);
    margin: 15px auto;
}

.plans .config__planList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 0 20px;
}

.plans .config__planList li {
    font-size: 16px;
    line-height: 150%;
    color: var(--tn-text);
    text-align: center;
    width: 100%;
}

.plans .config__planList li span {
    font-weight: 700;
}

.plans__btn {
    width: 100%;
    max-width: 170px;
    padding: 15px;
    margin-top: 4px;
    border: 1px solid var(--tn-primary);
    border-radius: 10px;
    font-size: 20px;
    line-height: 120%;
    font-weight: 700;
    background-color: transparent;
    cursor: pointer;
    transition: var(--tn-transition);
    text-align: center;
    color: var(--tn-primary);
}

.plans__btn:focus {
    outline: inherit;
}

.plans__btn:active,
.plans__btn:hover,
.plans__btn--recomnd {
    background-color: var(--tn-primary);
    outline: none;
    color: var(--tn-white);
    border: 1px solid var(--tn-primary);
}

.plans__btn--recomnd:hover {
    background-color: var(--tn-primary-dark);
    border-color: var(--tn-primary-dark);
}

/* Responsive Plans */
@media (max-width: 1199px) {
    .plans--layout2 {
        margin-block: 100px;
    }
    .plans__note {
        max-width: 750px;
        margin-inline: auto;
    }
}

@media (max-width: 991px) {
    .plans__heading {
        font-size: 35px;
    }
    .plans__wrap.active {
        max-width: 680px;
        gap: 50px;
    }
    .plans__note {
        max-width: 680px;
    }
    .plans--cnda,
    .plans--layout2 {
        margin-block: 80px;
    }
}

@media (max-width: 767px) {
    .plans {
        padding: 80px 1rem;
    }
    .plans::after {
        background-position: top;
    }
    .plans__tabItems {
        padding: 15px;
    }
    .plans__wrap {
        row-gap: 60px;
    }
    .plans__wrap.active {
        justify-content: center;
    }
    .plans__note {
        text-align: center;
    }
    .plans__offerPrice.rw {
        margin-top: .5rem;
    }
    .plans--cnda,
    .plans--layout2 {
        padding-block: 0;
        margin-block: 50px;
    }
}

@media (max-width: 576px) {
    .plans {
        padding: 50px 1rem;
    }
    .plans::before,
    .plans::after {
        width: 190px;
    }
    .plans__heading {
        font-size: 25px;
        margin-bottom: 24px;
    }
    .plans__cardHead {
        display: flex;
        flex-direction: column;
        max-height: unset;
        height: unset;
        border-radius: 24px 24px 0 0;
    }
    .plans__title {
        padding-block: 2.5rem;
    }
    .plans__recommend {
        position: static;
    }
    .plans__card--active {
        margin-top: 0;
    }
    .plans__card--active .plans__title {
        padding-block: 1.75rem 2.5rem;
    }
    .plans__cardBody {
        padding: 17px 10px;
    }
    .plans__cardBodyInner {
        gap: 11px;
    }
    .plans__price {
        font-size: 50px;
        line-height: 60px;
    }
    .plans__desc {
        font-size: 19px;
    }
    .plans .config__planList {
        gap: 10px;
    }
    .plans .config__planList li {
        font-size: 15px;
    }
    .plans__tab {
        flex-direction: column;
        gap: .8rem;
        border-radius: 27px;
        padding: 20px;
    }
    .plans__wrap {
        margin-top: 32px;
        row-gap: 32px;
    }
    .plans__btn {
        padding: 16px;
        margin: .5rem auto;
        font-size: 18px;
    }
    .plans--cnda,
    .plans--layout2 {
        padding-block: 0;
    }
}

/* Dark Mode Plans */
.darkMode {
    background-color: var(--tn-black);
}

.darkMode .plans {
    background-color: var(--tn-black);
}

.darkMode .plans__heading {
    color: var(--tn-white);
}

.darkMode .plans__heading p {
    background-color: var(--tn-white);
    padding: 4px 12px;
    width: 100%;
    max-width: max-content;
    border-radius: 77px;
    display: inline-block;
}

.darkMode .plans__heading p span {
    line-height: 130%;
    font-weight: 700;
    background: var(--tn-gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.darkMode .plans__heading .note {
    background-color: var(--tn-black);
    color: var(--tn-white);
    font-size: 20px;
    padding: 0;
}

.darkMode .plans__tab {
    background: var(--tn-gradient-primary);
}

.darkMode .plans__card {
    border-color: gray;
}

.darkMode .plans__cardBody {
    background-color: var(--tn-black);
}

.darkMode .plans__card--active {
    border-color: var(--tn-primary);
}

.darkMode .plans__price,
.darkMode .plans__desc,
.darkMode .plans__note {
    color: var(--tn-white);
}

.darkMode .plans .config__planList li {
    color: hsla(0,0%,100%,.7);
}

.darkMode .plans__btn {
    border-color: var(--tn-white);
    color: var(--tn-white);
}

.darkMode .plans__btn:hover,
.darkMode .plans__btn--recomnd {
    border-color: transparent;
}

/* ====================================================
   NEWSLETTER / INBOX
==================================================== */

.inbox {
    width: 100%;
    margin: 100px auto 100px auto;
    padding-inline: 1rem;
    max-width: 1272px;
}

.inbox__cont {
    width: 100%;
    border-radius: 20px;
    box-shadow: var(--tn-shadow-card);
    padding: 51px 12px;
    gap: 60px;
    row-gap: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.inbox__cont .errorMessage,
.inbox__cont .successMessage {
    color: red !important;
}

.inbox__text {
    font-family: var(--tn-font-primary);
    font-size: 26px;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
    color: var(--tn-primary);
}

.inbox .ftr__email {
    border: .5px solid rgba(212, 213, 234, 1);
    border-right: none;
    height: 57px;
    border-radius: 10px 0 0 10px;
    padding: 15px 1rem;
    width: 400px;
    font-family: var(--tn-font-secondary);
    font-size: 18px;
    line-height: 140%;
}

.inbox .ftr__email::placeholder {
    color: rgba(21, 22, 43, 0.4);
}

.inbox .ftr__emailSec {
    max-width: 510px;
    display: flex;
}

.inbox .ftr__sbs {
    border: .5px solid var(--tn-primary);
    border-left: none;
    height: 57px;
    border-radius: 0 10px 10px 0;
    background: var(--tn-primary);
    font-size: 18px;
    line-height: 120%;
    max-height: 57.19px;
    font-weight: 700;
    color: var(--tn-white);
    padding: 17px 1rem;
    width: 100%;
    max-width: 188px;
    transition: var(--tn-transition);
    font-family: var(--tn-font-secondary);
    cursor: pointer;
}

.inbox .ftr__sbs:focus {
    outline: none;
}

.inbox .ftr__sbs:hover {
    border-color: var(--tn-primary-light);
    background: var(--tn-primary-light);
}

@media (max-width: 991px) {
    .inbox {
        margin: 80px auto 80px auto;
    }
    .inbox__cont {
        gap: 30px;
    }
    .inbox__text {
        font-size: 23px;
    }
}

@media (max-width: 767px) {
    .inbox {
        margin: 50px auto 50px auto;
    }
}

@media (max-width: 576px) {
    .inbox__cont {
        padding-inline: .5rem;
        gap: 20px;
    }
    .inbox__text {
        font-size: 22px;
    }
    .inbox .ftr__emailSec {
        max-width: 100%;
    }
    .inbox .ftr__email {
        height: 42px;
        border: .5px solid rgba(21, 22, 43, 0.165);
        border-right: none;
        border-radius: 10px 0 0 10px;
    }
    .inbox .ftr__sbs {
        height: 42px;
        border-radius: 0 10px 10px 0;
    }
}

/* ====================================================
   FEATURES TABS (Data Centers)
==================================================== */

.feature__dataCenters {
    padding: 0 1rem;
}

.feature__dataCenters__cont {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

.feature__dataCenters__tabs {
    margin-bottom: 50px;
}

.feature__dataCenters__tabs__cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.feature__dataCenter__tabs__items {
    font-family: var(--tn-font-secondary);
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--tn-text);
    cursor: pointer;
    padding: 15px 30px;
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-pill);
    transition: var(--tn-transition);
    background: var(--tn-white);
}

.feature__dataCenter__tabs__items:hover,
.feature__dataCenter__tabs__items.show {
    background: var(--tn-gradient-primary);
    border-color: transparent;
    color: var(--tn-white);
}

.feature__dataCenters__wrapper {
    display: flex;
    flex-wrap: wrap;
}

.feature__dataCenters__card {
    display: none;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
    padding: 50px 0;
}

.feature__dataCenters__card.show {
    display: flex;
}

.feature__dataCenters__card__left {
    flex: 1;
    max-width: 500px;
}

.feature__dataCenter__card__img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.feature__dataCenters__card__right {
    flex: 1;
    max-width: 600px;
}

.feature__dataCenters__card__title {
    font-family: var(--tn-font-primary);
    font-size: 32px;
    line-height: 120%;
    font-weight: 700;
    color: var(--tn-black);
    margin-bottom: 20px;
}

.feature__dataCenters__card__right p {
    color: var(--tn-text);
    font-size: 18px;
    line-height: 175%;
    margin-bottom: 15px;
    text-align: justify;
}

.feature__dataCenters__card__right a {
    color: var(--tn-primary);
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    transition: var(--tn-transition-fast);
}

.feature__dataCenters__card__right a:hover {
    color: var(--tn-primary-dark);
    text-decoration: underline;
}

/* ====================================================
   ACCORDION / HOSTING SECTION
==================================================== */

.vps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 100px 1rem;
    max-width: 1272px;
    margin: 0 auto;
}

.vps__title {
    font-family: var(--tn-font-primary);
    font-size: 42px;
    line-height: 110%;
    font-weight: 700;
    color: var(--tn-black);
    text-align: center;
    margin-bottom: .6rem;
}

.vps__desc {
    font-size: 20px;
    line-height: 120%;
    color: var(--tn-text);
    font-family: var(--tn-font-secondary);
    text-align: center;
}

.host {
    width: 100%;
    max-width: 1272px;
    padding-inline: 1rem;
    margin: 50px auto 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

.host__left {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 30px;
    width: 100%;
    max-width: 1027px;
}

.host__head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 25px 27px;
    border: 1px solid var(--tn-primary);
    border-radius: 10px;
    transition: var(--tn-transition);
}

.host__head:hover {
    background: rgba(0, 174, 239, 0.05);
}

.host__headwrap {
    display: flex;
    gap: 20px;
}

.host__cont {
    border: 1px solid var(--tn-primary);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0px;
    transition: var(--tn-transition);
}

.host__cont:hover .host__title {
    padding-left: .4rem;
}

.host__icons {
    object-fit: contain;
    max-width: 34px;
    width: auto;
    height: auto;
}

.host__title {
    font-family: var(--tn-font-primary);
    font-size: 26px;
    line-height: 120%;
    font-weight: 700;
    color: var(--tn-black);
    transition: var(--tn-transition);
}

.host__arrow {
    object-fit: contain;
    transition: var(--tn-transition);
    width: auto;
}

.host__arrow.active {
    transform: rotate(180deg);
}

.host__desc {
    font-size: 18px;
    line-height: 140%;
    font-family: var(--tn-font-secondary);
    color: var(--tn-text);
    transition: var(--tn-transition);
    padding: 0 27px 0px;
    height: 0px;
    overflow: hidden;
}

.host__desc.active {
    padding: 0 27px 25px;
    height: unset;
}

.host__desc a {
    color: var(--tn-primary);
    transition: var(--tn-transition-fast);
    font-weight: 500;
}

.host__desc a:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    .host {
        flex-direction: column;
        gap: 60px;
        margin: 24px auto 80px;
    }
    .host__cont {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .host {
        margin: 24px auto 50px;
    }
    .host__cont {
        gap: 1px;
    }
    .host__head {
        padding: 18px 16px;
        flex-wrap: nowrap;
    }
    .host__icons {
        max-width: 24px;
    }
    .host__title {
        font-size: 20px;
    }
    .host__headwrap {
        gap: 16px;
    }
    .host__desc {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .vps {
        gap: 6px;
    }
    .vps__title {
        font-size: 25px;
        margin-bottom: .25rem;
    }
    .vps__desc {
        font-size: 17px;
    }
}

/* ====================================================
   COMPARISON TABLE / OFFER SECTION
==================================================== */

.offer {
    width: 100%;
    padding: 100px 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.offer::before,
.offer::after {
    content: "";
    position: absolute;
    z-index: -1;
}

.offer::before {
    width: 466px;
    height: 246px;
    background: url("../images/bubble-top.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    top: 0;
    right: 0;
}

.offer::after {
    width: 515px;
    height: 275px;
    background: url("../images/bubble-top.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
}

.offer__year {
    font-family: var(--tn-font-secondary);
    color: var(--tn-black);
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    padding-block: 55px 1.5rem;
    order: 1;
}

.offer__year a {
    color: var(--tn-primary);
    font-weight: 500;
    transition: var(--tn-transition-fast);
}

.offer__year a:hover {
    text-decoration: underline;
}

.offer__cont {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.offer__title {
    font-family: var(--tn-font-primary);
    font-weight: 700;
    font-size: 42px;
    line-height: 110%;
    text-align: center;
    color: var(--tn-black);
    margin-bottom: 50px;
}

.offer__tabs {
    padding: 45px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    box-shadow: var(--tn-shadow-card);
    border-radius: 20px;
    flex-wrap: nowrap;
    gap: 35px;
    margin-bottom: 2rem;
}

.offer__tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(21, 22, 43, .5);
    border-radius: 10px;
    width: 100%;
    max-width: 251px;
    padding: 22px;
    cursor: pointer;
    color: var(--tn-black);
    transition: var(--tn-transition);
}

.offer__tab:hover,
.offer__tab.active {
    background-color: var(--tn-primary);
    border-color: transparent;
    color: var(--tn-white);
}

.offer__tabTitle {
    font-family: var(--tn-font-secondary);
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}

.offer__tabDesc {
    font-family: var(--tn-font-secondary);
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    white-space: nowrap;
}

.offer__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}

.offer__item {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    flex-wrap: nowrap;
    align-self: normal;
    width: 100%;
    height: 100%;
    padding: 5px 0;
    gap: 20px;
    border-top: none;
    border-bottom: none;
    height: 100vh;
    max-height: 130px;
}

.offer__item:not(:last-child) {
    border-right: 1px solid var(--tn-black);
}

.offer__logos {
    object-fit: contain;
    margin-top: .35rem;
    height: 35px;
    width: 69px;
    max-height: 69px;
    padding: 19px 0px;
    height: 100%;
    border-radius: 44px;
    background: var(--tn-white);
}

.offer__item--ssd .offer__logos {
    width: 75px;
    height: 75px;
    max-height: 75px;
}

.offer__details {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: start;
    flex-wrap: nowrap;
    gap: 10px;
    height: 100%;
}

.offer__details h3 {
    font-family: var(--tn-font-primary);
    font-weight: 700;
    font-size: 26px;
    line-height: 120%;
    text-align: center;
    color: var(--tn-black);
}

.offer__details p {
    font-family: var(--tn-font-secondary);
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: var(--tn-black);
}

.offer__details span {
    font-family: var(--tn-font-secondary);
    font-size: 18px;
    line-height: 140%;
    color: var(--tn-primary);
    transition: var(--tn-transition);
}

[data-tab-info] {
    display: none;
}

.active[data-tab-info] {
    display: flex;
}

@media (max-width: 1199px) {
    .offer__year {
        right: 1rem;
    }
    .offer__tabs {
        flex-wrap: wrap;
    }
    .offer__tab {
        flex: 1 1 45%;
        max-width: calc(50% - 18px);
    }
    .offer__content {
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 40px;
    }
    .offer__item {
        flex-basis: 50%;
        padding-left: 12%;
        justify-content: left;
    }
    .offer__item:not(:nth-child(1)) {
        border-right: 1px solid var(--tn-text);
    }
    .offer__item:not(:nth-child(4),:nth-child(2)) {
        border-left: 1px solid var(--tn-text);
    }
}

@media (max-width: 991px) {
    .offer {
        padding: 80px 1rem;
    }
    .offer__title {
        font-size: 35px;
    }
    .offer__tabs {
        padding: 30px 20px;
    }
    .offer__item {
        padding-left: 6%;
    }
}

@media (max-width: 767px) {
    .offer {
        padding: 50px 1rem;
    }
    .offer::before,
    .offer::after {
        width: 190px;
    }
    .offer__year {
        padding-block: 24px 0rem;
        font-size: 14px;
    }
    .offer__title {
        font-size: 25px;
        margin-bottom: 24px;
    }
    .offer__tabs {
        width: 100%;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
    }
    .offer__tab {
        max-width: 100%;
        padding-block: 18px;
    }
    .offer__content {
        justify-content: center;
        row-gap: 8px;
    }
    .offer__details {
        padding-inline: 0;
        flex: 1;
    }
    .offer__details>h3 {
        font-size: 25px;
    }
    .offer__item {
        padding-inline: 0;
        max-width: 275px;
    }
    .offer__item:nth-child(odd),.offer__item:nth-child(even) {
        border-inline: none;
        border-bottom: 1px solid rgba(0,0,0,.12);
    }
    .offer__item:last-child {
        border-bottom: none;
    }
}

/* ====================================================
   BLOG CARDS
==================================================== */

.cloud {
    padding-inline: 1rem;
    width: 100%;
    max-width: 1272px;
    margin: 100px auto;
}

.cloud__heading {
    font-family: var(--tn-font-primary);
    font-size: 37px;
    line-height: 120%;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

.cloud__sec {
    border-radius: 15px;
    min-height: 340px;
    display: grid;
    grid-template-columns: auto auto;
    align-items: stretch;
    justify-content: stretch;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--tn-primary);
    color: var(--tn-black);
    transition: var(--tn-transition);
}

.cloud__sec:hover {
    filter: opacity(0.9);
}

.cloud__sec:hover .cloud__img {
    transform: scale(1.1);
}

.cloud .blog-img {
    overflow: hidden;
}

.cloud__left {
    width: fit-content;
    overflow: hidden;
}

.cloud__img {
    flex: 1;
    max-height: 347px;
    aspect-ratio: 2/1;
    height: 100%;
    width: 100%;
    max-width: 588px;
    cursor: pointer;
    transition: var(--tn-transition);
    display: flex;
}

.cloud__content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    max-width: 702px;
    width: 100%;
    height: 100%;
    flex: 1;
    padding: 36px 24px;
    border-left: none;
}

.cloud__title {
    font-family: var(--tn-font-primary);
    font-size: 37px;
    line-height: 120%;
    font-weight: 700;
    margin-bottom: 18px;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.cloud__info {
    font-size: 18px;
    line-height: 140%;
    font-weight: 500;
    font-family: var(--tn-font-secondary);
    margin-bottom: 14px;
}

.cloud__info .text-blue {
    color: var(--tn-primary);
}

.cloud__desc {
    color: var(--tn-text);
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 18px;
    line-height: 140%;
    font-weight: 500;
    font-family: var(--tn-font-secondary);
}

@media (max-width: 1199px) {
    .cloud__sec {
        max-width: 1024px;
        min-height: 290px;
    }
    .cloud__title {
        font-size: 25px;
    }
    .cloud__info,
    .cloud__desc {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .cloud {
        margin: 80px auto;
    }
    .cloud__heading {
        font-size: 35px;
    }
    .cloud__sec {
        max-width: 794px;
        min-height: 245px;
    }
    .cloud__img {
        width: 100%;
    }
    .cloud__content {
        width: 100%;
        max-width: 572px;
        padding: 1rem;
    }
}

@media (max-width: 767px) {
    .cloud {
        margin: 50px auto;
    }
    .cloud__sec {
        grid-template-columns: repeat(1, 1fr);
        max-width: 560px;
    }
}

@media (max-width: 576px) {
    .cloud__sec {
        max-width: 450px;
    }
    .cloud__title {
        font-size: 27px;
        line-clamp: unset;
        -webkit-line-clamp: unset;
    }
    .cloud__info,
    .cloud__desc {
        font-size: 16px;
    }
    .cloud__desc {
        line-clamp: 5;
        -webkit-line-clamp: 5;
        display: -webkit-box;
    }
}

/* ====================================================
   MAP / WORLD LOCATIONS
==================================================== */

.map {
    width: 100%;
    max-width: 1240px;
    margin: 100px auto;
}

.map__heading {
    font-size: 42px;
    line-height: 110%;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
}

.map__inner {
    position: relative;
    overflow: hidden;
}

.map__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
}

.map__animation {
    position: absolute;
    top: 0;
    right: 10px;
    overflow: hidden;
}

.map__locSvg {
    display: inline-block;
    animation: rotate 10s linear infinite;
    position: relative;
    width: 9rem;
    height: auto;
    object-fit: contain;
}

@keyframes rotate {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}

.map__gradText {
    font-family: var(--tn-font-primary);
    font-weight: 800;
    font-size: 60px;
    line-height: 60px;
    background: linear-gradient(180deg, var(--tn-primary) 0%, var(--tn-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.map__cont {
    display: flex;
}

.map__cont:hover .map__locInfo {
    transform: scale(1);
}

.map__loc {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--tn-primary);
    border-radius: 50px;
    cursor: pointer;
    transition: var(--tn-transition);
}

.map__loc:hover {
    transform: scale(1.4);
}

.map__locInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width: 100%;
    width: 160px;
    background-color: var(--tn-white);
    font-family: var(--tn-font-primary);
    position: absolute;
    left: -77px;
    top: 20px;
    z-index: 9;
    border: 1px solid rgba(0, 102, 178, 0.31);
    padding: 10px;
    border-radius: 5px;
    transition: var(--tn-transition);
    transform: scale(0);
}

.map__locInfo h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
}

.map__locIcon {
    object-fit: contain;
    width: 100%;
    max-width: 3rem;
    margin: 0 auto;
}

.map__dot {
    position: absolute;
    top: 33rem;
    left: 51rem;
    transition: var(--tn-transition);
}

.map__dot::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    background-color: var(--tn-black);
    border-radius: 50px;
    cursor: pointer;
}

/* Location positions - these will need to be adjusted */
.map .dalhas { position: absolute; top: 55%; left: 22%; }
.map .losAngeles { position: absolute; top: 54%; left: 15.5%; }
.map .newYork { position: absolute; top: 55%; left: 27%; }
.map .seattle { position: absolute; top: 49.5%; left: 15%; }
.map .atlanta { position: absolute; top: 56%; left: 25%; }
.map .chicago { position: absolute; left: 25%; top: 51%; }
.map .frankfurt { position: absolute; top: 46%; left: 52%; }
.map .amsterdam { position: absolute; left: 47%; top: 49%; }
.map .singapore { position: absolute; left: 73%; top: 71%; }
.map .london { position: absolute; left: 46.6%; top: 46%; }
.map .tokyo { position: absolute; top: 55.5%; left: 82%; }
.map .sydney { position: absolute; top: 82%; left: 84%; }
.map .mumbai { position: absolute; left: 65.7%; top: 64%; }
.map .toronto { position: absolute; left: 27.5%; top: 48%; }

/* Mobile Maps Cards */
.maps {
    display: none;
    margin-block: 50px;
    padding-inline: 1rem;
}

.maps__wrapper {
    margin-inline: auto;
}

.maps__card {
    width: 33%;
    padding: 16px 16px 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(21, 22, 43, .2);
    flex: 1 1 32%;
    max-width: 251px;
}

.maps__img {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}

.maps__logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.maps__text {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
}

.maps__title {
    font-family: var(--tn-font-primary);
    font-size: 28px;
    line-height: 130%;
}

.maps__loc {
    font-family: var(--tn-font-primary);
    font-size: 27px;
    line-height: 120%;
    opacity: .5;
}

.maps--desktop {
    display: block;
    margin-block: 100px;
}

.maps--desktop .maps__heading {
    margin-bottom: 5.5rem;
}

.maps--desktop .maps__wrapper {
    max-width: 1240px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 1.5rem;
}

.maps--desktop .maps__card {
    width: 100%;
    max-width: 397px;
}

/* All 14 locations visible on desktop */

.maps--desktop .maps__btnCont {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maps--desktop .maps__btnCont>button {
    margin-top: 60px;
    outline: none;
    cursor: pointer;
}

@media (max-width: 991px) {
    .map {
        display: none;
    }
    .maps {
        display: block;
    }
    .maps__heading {
        font-size: 36px;
        line-height: 60px;
        text-align: center;
        margin-bottom: 2rem;
    }
    .maps__wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
        max-width: 794px;
    }
    .maps__title {
        font-size: 20px;
    }
    .maps__loc {
        font-size: 16px;
    }
    .maps--desktop {
        margin-block: 80px;
    }
    .maps--desktop .maps__heading {
        margin-bottom: 2.5rem;
    }
    .maps--desktop .maps__wrapper {
        max-width: 720px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .maps__wrapper {
        max-width: 560px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .maps__card {
        width: 100%;
        max-width: unset;
    }
    .maps--desktop {
        margin-block: 50px;
    }
    .maps--desktop .maps__heading {
        margin-bottom: 2.5rem;
    }
    .maps--desktop .maps__wrapper {
        max-width: 720px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .maps__heading {
        font-size: 25px;
        line-height: 32px;
        margin-bottom: 1.25rem;
    }
    .maps__wrapper {
        max-width: 450px;
        gap: 1rem .5rem;
    }
    .maps__card {
        padding: .5rem;
    }
    .maps__img {
        margin-bottom: .5rem;
    }
    .maps__title {
        font-size: 14px;
        line-height: 17px;
    }
    .maps__loc {
        font-size: 12px;
        line-height: 15px;
        opacity: .6;
    }
    .maps--desktop .maps__wrapper {
        max-width: 450px;
        gap: 1rem .5rem;
    }
}

/* ====================================================
   FOOTER
==================================================== */

.ftr {
    background: var(--tn-bg-dark);
    color: var(--tn-white);
    padding: 68px 0;
    padding-bottom: 0;
    font-family: var(--tn-font-primary);
}

.ftr__sec {
    width: 100%;
    margin: auto;
    padding: 0 1rem;
}

.ftr__topSec {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 28px;
    margin-bottom: 53px;
}

.ftr__text {
    font-family: var(--tn-font-primary);
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 28px;
    line-height: 45px;
    color: var(--tn-white);
}

.ftr__emailSec {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 545px;
    border-radius: 10px;
    font-family: var(--tn-font-secondary);
}

.ftr__email {
    padding: 15px 1rem;
    width: 400px;
    border: none;
    border-radius: 10px 0px 0px 10px;
    font-family: var(--tn-font-secondary);
    font-size: 18px;
    line-height: 140%;
}

.ftr__email::placeholder {
    color: var(--tn-text);
    padding-left: 10px;
}

.ftr__sbs {
    padding: 17px 1rem;
    width: 100%;
    max-width: 188px;
    background: var(--tn-primary);
    border-radius: 0px 10px 10px 0px;
    font-size: 18px;
    line-height: 120%;
    max-height: 57.19px;
    font-weight: 700;
    color: var(--tn-white);
    border: none;
    transition: var(--tn-transition);
    font-family: var(--tn-font-secondary);
    cursor: pointer;
}

.ftr__sbs:focus {
    outline: none;
}

.ftr__sbs:hover {
    background-color: var(--tn-primary-light);
}

.ftr__sbs:disabled {
    opacity: .7;
}

.ftr__badges {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    gap: 2.5rem;
}

.ftr__badgecont {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.ftr__badge {
    max-height: 88px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
}

.ftr .score {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.ftr .score__card {
    width: 100%;
    max-width: 277px;
    background-color: var(--tn-white);
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 1.25rem;
    overflow: hidden;
    border-radius: 10px;
}

.ftr .score__logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 87/25;
}

.ftr .score__stars {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1px;
}

.ftr .score__star {
    min-width: 24px;
    height: 24px;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ftr .score__star::after {
    content: "";
    width: 1px;
    height: 100%;
    right: 0;
    top: 0;
    background-color: var(--tn-white);
    position: absolute;
}

.ftr .score__star:last-child::after {
    content: none;
}

.ftr .score__starImg {
    display: block;
    width: 16px;
    height: 16px;
}

.ftr .score__count {
    font-family: var(--tn-font-secondary);
    font-size: 12px;
    line-height: 140%;
    margin-top: 4px;
    color: rgba(0,0,0,.5);
}

.ftr .score__wrap [data-star] {
    font-size: 24px;
    line-height: 1;
    text-align: left;
    font-style: normal;
    display: inline-block;
    position: relative;
    unicode-bidi: bidi-override;
    width: fit-content;
}

.ftr .score__wrap [data-star]::before {
    display: block;
    content: "★★★★★";
    color: #eee;
}

.ftr .score__wrap [data-star]::after {
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    content: "★★★★★";
    width: 0;
    color: #f3ae3d;
    overflow: hidden;
    height: 100%;
}

.ftr .score__wrap [data-star-tp] {
    font-size: 24px;
    line-height: 1;
    text-align: left;
    font-style: normal;
    display: inline-block;
    position: relative;
    unicode-bidi: bidi-override;
}

.ftr .score__wrap [data-star-tp]::before {
    display: block;
    content: "★★★★★";
    color: #eee;
}

.ftr .score__wrap [data-star-tp]::after {
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    content: "★★★★★";
    width: 50%;
    color: #ff492c;
    overflow: hidden;
    height: 100%;
}

/* Star rating percentage widths */
.ftr .score__wrap [data-star^="0.1"]::after,
.ftr .score__wrap [data-star^="0.2"]::after,
.ftr .score__wrap [data-star^="0.3"]::after,
.ftr .score__wrap [data-star^="0.4"]::after,
.ftr .score__wrap [data-star^="0.5"]::after,
.ftr .score__wrap [data-star-tp^="0.1"]::after,
.ftr .score__wrap [data-star-tp^="0.2"]::after,
.ftr .score__wrap [data-star-tp^="0.3"]::after,
.ftr .score__wrap [data-star-tp^="0.4"]::after,
.ftr .score__wrap [data-star-tp^="0.5"]::after { width: 10%; }

.ftr .score__wrap [data-star^="0.6"]::after,
.ftr .score__wrap [data-star^="0.7"]::after,
.ftr .score__wrap [data-star^="0.8"]::after,
.ftr .score__wrap [data-star^="0.9"]::after,
.ftr .score__wrap [data-star^="1"]::after,
.ftr .score__wrap [data-star-tp^="0.6"]::after,
.ftr .score__wrap [data-star-tp^="0.7"]::after,
.ftr .score__wrap [data-star-tp^="0.8"]::after,
.ftr .score__wrap [data-star-tp^="0.9"]::after,
.ftr .score__wrap [data-star-tp^="1"]::after { width: 20%; }

.ftr .score__wrap [data-star^="1.1"]::after,
.ftr .score__wrap [data-star^="1.2"]::after,
.ftr .score__wrap [data-star^="1.3"]::after,
.ftr .score__wrap [data-star^="1.4"]::after,
.ftr .score__wrap [data-star^="1.5"]::after,
.ftr .score__wrap [data-star-tp^="1.1"]::after,
.ftr .score__wrap [data-star-tp^="1.2"]::after,
.ftr .score__wrap [data-star-tp^="1.3"]::after,
.ftr .score__wrap [data-star-tp^="1.4"]::after,
.ftr .score__wrap [data-star-tp^="1.5"]::after { width: 30%; }

.ftr .score__wrap [data-star^="1.6"]::after,
.ftr .score__wrap [data-star^="1.7"]::after,
.ftr .score__wrap [data-star^="1.8"]::after,
.ftr .score__wrap [data-star^="1.9"]::after,
.ftr .score__wrap [data-star^="2"]::after,
.ftr .score__wrap [data-star-tp^="1.6"]::after,
.ftr .score__wrap [data-star-tp^="1.7"]::after,
.ftr .score__wrap [data-star-tp^="1.8"]::after,
.ftr .score__wrap [data-star-tp^="1.9"]::after,
.ftr .score__wrap [data-star-tp^="2"]::after { width: 40%; }

.ftr .score__wrap [data-star^="2.1"]::after,
.ftr .score__wrap [data-star^="2.2"]::after,
.ftr .score__wrap [data-star^="2.3"]::after,
.ftr .score__wrap [data-star^="2.4"]::after,
.ftr .score__wrap [data-star^="2.5"]::after,
.ftr .score__wrap [data-star-tp^="2.1"]::after,
.ftr .score__wrap [data-star-tp^="2.2"]::after,
.ftr .score__wrap [data-star-tp^="2.3"]::after,
.ftr .score__wrap [data-star-tp^="2.4"]::after,
.ftr .score__wrap [data-star-tp^="2.5"]::after { width: 50%; }

.ftr .score__wrap [data-star^="2.6"]::after,
.ftr .score__wrap [data-star^="2.7"]::after,
.ftr .score__wrap [data-star^="2.8"]::after,
.ftr .score__wrap [data-star^="2.9"]::after,
.ftr .score__wrap [data-star^="3"]::after,
.ftr .score__wrap [data-star-tp^="2.6"]::after,
.ftr .score__wrap [data-star-tp^="2.7"]::after,
.ftr .score__wrap [data-star-tp^="2.8"]::after,
.ftr .score__wrap [data-star-tp^="2.9"]::after,
.ftr .score__wrap [data-star-tp^="3"]::after { width: 60%; }

.ftr .score__wrap [data-star^="3.1"]::after,
.ftr .score__wrap [data-star^="3.2"]::after,
.ftr .score__wrap [data-star^="3.3"]::after,
.ftr .score__wrap [data-star^="3.4"]::after,
.ftr .score__wrap [data-star^="3.5"]::after,
.ftr .score__wrap [data-star-tp^="3.1"]::after,
.ftr .score__wrap [data-star-tp^="3.2"]::after,
.ftr .score__wrap [data-star-tp^="3.3"]::after,
.ftr .score__wrap [data-star-tp^="3.4"]::after,
.ftr .score__wrap [data-star-tp^="3.5"]::after { width: 70%; }

.ftr .score__wrap [data-star^="3.6"]::after,
.ftr .score__wrap [data-star^="3.7"]::after,
.ftr .score__wrap [data-star^="3.8"]::after,
.ftr .score__wrap [data-star^="3.9"]::after,
.ftr .score__wrap [data-star^="4"]::after,
.ftr .score__wrap [data-star-tp^="3.6"]::after,
.ftr .score__wrap [data-star-tp^="3.7"]::after,
.ftr .score__wrap [data-star-tp^="3.8"]::after,
.ftr .score__wrap [data-star-tp^="3.9"]::after,
.ftr .score__wrap [data-star-tp^="4"]::after { width: 80%; }

.ftr .score__wrap [data-star^="4.1"]::after,
.ftr .score__wrap [data-star^="4.2"]::after,
.ftr .score__wrap [data-star^="4.3"]::after,
.ftr .score__wrap [data-star^="4.4"]::after,
.ftr .score__wrap [data-star^="4.5"]::after,
.ftr .score__wrap [data-star-tp^="4.1"]::after,
.ftr .score__wrap [data-star-tp^="4.2"]::after,
.ftr .score__wrap [data-star-tp^="4.3"]::after,
.ftr .score__wrap [data-star-tp^="4.4"]::after,
.ftr .score__wrap [data-star-tp^="4.5"]::after { width: 90%; }

.ftr .score__wrap [data-star^="4.6"]::after,
.ftr .score__wrap [data-star^="4.7"]::after,
.ftr .score__wrap [data-star^="4.8"]::after,
.ftr .score__wrap [data-star^="4.9"]::after,
.ftr .score__wrap [data-star^="5"]::after,
.ftr .score__wrap [data-star-tp^="4.6"]::after,
.ftr .score__wrap [data-star-tp^="4.7"]::after,
.ftr .score__wrap [data-star-tp^="4.8"]::after,
.ftr .score__wrap [data-star-tp^="4.9"]::after,
.ftr .score__wrap [data-star-tp^="5"]::after { width: 100%; }

.ftr__hr {
    display: inline-block;
    border: 1px solid #cfcfcf;
    opacity: .1;
    width: 100%;
}

.ftr__btmSec {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 100px;
    margin: 1.5rem 0;
}

.ftr__logoSec {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 36px;
}

.ftr__link {
    display: flex;
    align-items: center;
    justify-content: start;
}

.ftr__logo {
    width: 100%;
    height: auto;
    max-width: 105px;
    object-fit: contain;
    cursor: pointer;
}

.ftr__socials {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 16px;
}

.ftr__logoBg {
    background-color: var(--tn-white);
    width: 38px;
    height: 38px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--tn-transition);
}

.ftr__logoBg:hover {
    background-color: var(--tn-primary);
}

.ftr__logoBg:hover img {
    filter: invert(0) grayscale(134) brightness(4.5);
}

.ftr__socialLogo {
    object-fit: contain;
    width: min(20px, 100%);
    height: min(20px, 100%);
}

.ftr__menuSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 100px;
    margin-top: 50px;
}

.ftr__menu {
    display: flex;
    flex-direction: column;
    font-family: var(--tn-font-secondary);
}

.ftr__menuItems {
    cursor: pointer;
    font-size: 16px;
    line-height: 35px;
    color: var(--tn-white);
    color: rgba(236, 236, 236, .6);
    transition: var(--tn-transition-fast);
}

.ftr__menuItems:hover {
    color: var(--tn-white);
}

.ftr__menuItems a {
    color: var(--tn-white);
}

.ftr__menuItems a:hover {
    color: rgba(236, 236, 236, .6);
    text-decoration: none;
}

.ftr__menu--adrs .ftr__menuItems {
    color: var(--tn-white);
    cursor: default;
    line-height: 24px;
}

.ftr__crSec {
    background-color: var(--tn-bg-dark);
}

.ftr__crContent {
    font-family: var(--tn-font-secondary);
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    padding: 19px 20px;
}

.ftr__home {
    color: var(--tn-white);
    transition: var(--tn-transition-fast);
}

.ftr__home:hover {
    text-decoration: underline;
}

@media (max-width: 1199px) {
    .ftr__sec { padding: 0 20px; }
    .ftr__topSec { gap: 53px; }
    .ftr__text { font-size: 28px; line-height: 38px; }
    .ftr__btmSec { gap: 80px; }
    .ftr__menuSec { gap: 75px; }
}

@media (max-width: 991px) {
    .ftr__topSec { flex-wrap: wrap; justify-content: center; gap: 35px; }
    .ftr__sbs { max-width: 160px; }
    .ftr__text { text-align: center; }
    .ftr__badges { gap: 10px; justify-content: space-between; }
    .ftr__btmSec { gap: 2.5rem; }
    .ftr .score__card { gap: .5rem; padding-inline: .5rem; }
    .ftr__menuSec { gap: 60px; }
}

@media (max-width: 767px) {
    .ftr__btmSec {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 50px;
        flex-wrap: wrap;
    }
    .ftr__link { justify-content: center; }
    .ftr__menu { width: 38%; }
    .ftr__menuSec { justify-content: center; row-gap: 40px; }
}

@media (max-width: 576px) {
    .ftr { padding: 40px .5rem 0; }
    .ftr__sec { padding: 0 1.5rem; }
    .ftr__topSec { margin-bottom: 16px; gap: 20px; }
    .ftr__menuSec {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: left;
        gap: 20px;
        row-gap: 30px;
        margin-top: 25px;
    }
    .ftr__menu { width: unset; }
    .ftr__hr { margin: 16px 0 0; }
    .ftr__text { font-size: 22px; line-height: 32px; }
    .ftr__email { padding: .6rem; font-size: 16px; width: 100%; height: 41px; }
    .ftr__email::placeholder { padding-left: 5px; }
    .ftr__emailSec { max-width: 100%; }
    .ftr .score { grid-template-columns: repeat(1, 1fr); justify-items: center; margin-bottom: 1.5rem; }
    .ftr .score__card { gap: .8rem; padding: .5rem .725rem; }
    .ftr .score__star { min-width: 20px; height: 20px; }
    .ftr .score__logo { max-width: 110px; }
    .ftr__badge { max-width: 62px; height: auto; width: 100%; }
    .ftr__logoBg { width: 38px; height: 38px; }
    .ftr__menuItems { font-size: 14px; line-height: 30px; }
    .ftr__sbs { padding: .6rem; max-width: 132px; height: 41px; font-size: 16px; }
    .ftr__socials { justify-content: center; }
    .ftr__socialLogo { width: 16px; height: 16px; }
    .ftr__logoSec { gap: 25px; }
    .ftr__btmSec { margin: 32px 0 0; gap: 25px; }
    .ftr__crContent { font-size: 14px; line-height: 18px; padding: 5px 10px 14px; }
}

/* Sale email form */
.sale_email_form {
    position: relative;
}

.errorMessage,
.successMessage {
    color: var(--tn-white) !important;
    margin-bottom: 6px;
    font-size: 15px;
    position: absolute;
    top: -21px;
    left: 5px;
}

@media (max-width: 576px) {
    .errorMessage,
    .successMessage {
        font-size: 13px;
    }
    .errorMessage,
    .successMessage {
        bottom: -47px;
        height: 34px;
        top: unset;
        left: 5px;
    }
    .sale_email_form {
        width: 100%;
    }
}

.grecaptcha-badge {
    display: none;
}

/* ====================================================
   UTILITY CLASSES
==================================================== */

.text-blue {
    color: var(--tn-primary) !important;
}

.text-center {
    text-align: center !important;
}

.d-none {
    display: none !important;
}

.d-flex {
    display: flex !important;
}

.justify-content-center {
    justify-content: center !important;
}

.align-items-center {
    align-items: center !important;
}

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 2rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 2rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 2rem !important; }

/* ====================================================
   WHMCS OVERRIDES
==================================================== */

.navbar-light {
    background: var(--tn-white) !important;
    box-shadow: 1px 1px 15px -12px var(--tn-bg-dark) !important;
}

.nav-link {
    color: var(--tn-primary) !important;
    font-family: var(--tn-font-secondary) !important;
    font-size: 18px !important;
    line-height: 23px !important;
    font-weight: 700 !important;
}

.nav-link:hover {
    color: var(--tn-primary-light) !important;
}

.btn-primary {
    background: var(--tn-gradient-primary) !important;
    border: none !important;
    color: var(--tn-white) !important;
    font-family: var(--tn-font-secondary) !important;
    font-weight: 800 !important;
    border-radius: var(--tn-radius-md) !important;
    padding: 15px 2.5rem !important;
    transition: var(--tn-transition) !important;
}

.btn-primary:hover {
    background: var(--tn-white) !important;
    color: var(--tn-primary) !important;
    border: 1px solid var(--tn-primary) !important;
}

.card {
    border: 1px solid var(--tn-border-light) !important;
    border-radius: 25px !important;
    box-shadow: none !important;
    overflow: hidden !important; /* clip header/footer to rounded corners */
}

/* FIX: style.css sets a global `.card{align-items:center}` for homepage
   pricing cards, which also hits WHMCS Bootstrap cards and shrinks the
   blue header to content width (floating narrow bar). Force clientarea
   card children back to full-width, top-aligned. */
.client-home-cards .card,
.card[id$="Panel"],
.card[menuitemname] {
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}
.client-home-cards .card > *,
.card[menuitemname] > * {
    width: 100% !important;
}

.card-header {
    background: var(--tn-primary) !important;
    color: var(--tn-white) !important;
    border-radius: 0 !important; /* card clips the top corners now */
    border: none !important;
    padding: 1rem 1.25rem !important;
}

/* Header title + icon: white text. Keep the h3 as block so the
   button's float-right stays on the right side of the title. */
.card-header .card-title {
    color: var(--tn-white) !important;
}
.card-header .card-title i {
    color: var(--tn-white) !important;
}

/* Header action button (e.g. "My Services"): white pill on blue */
.card-header .btn.bg-color-gold,
.card-header .card-title .btn {
    background: var(--tn-white) !important;
    color: var(--tn-primary) !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    box-shadow: none !important;
}

.card-header .btn.bg-color-gold:hover,
.card-header .card-title .btn:hover {
    background: var(--tn-primary-light) !important;
    color: var(--tn-white) !important;
}
/* Footer: flush, light, matches card rounding via card overflow */
.card-footer {
    background: var(--tn-white) !important;
    border-top: 1px solid var(--tn-border-light) !important;
    border-radius: 0 !important;
    padding: 0.75rem 1.25rem !important;
}

.form-control {
    border: .5px solid var(--tn-border-light) !important;
    border-radius: 10px !important;
    font-family: var(--tn-font-secondary) !important;
}

.form-control:focus {
    border-color: var(--tn-primary) !important;
    box-shadow: none !important;
}

.badge {
    background: var(--tn-gradient-save) !important;
    color: var(--tn-primary) !important;
    font-weight: 500 !important;
    border-radius: var(--tn-radius-pill) !important;
    padding: 8px 1.5rem !important;
}

.text-muted {
    color: var(--tn-text) !important;
}

.text-primary {
    color: var(--tn-primary) !important;
}

.bg-primary {
    background: var(--tn-gradient-primary) !important;
}

/* ====================================================
   FIXES - Issue Resolution
   ==================================================== */

/* FIX 1: G2 Logo - use correct webp logo in reviews */
.review__logo .review__img[src*="g2"] {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: #fff !important;
    padding: 10px !important;
}

/* FIX 2: Footer PERMANENT DARK - never white */
.ftr,
.footer.ftr {
    background: #273240 !important;
    color: #fff !important;
}

.ftr__crSec {
    background-color: #273240 !important;
}

.ftr__text,
.ftr__menuItems,
.ftr__menuItems a,
.ftr__crContent,
.ftr__home {
    color: #fff !important;
}

.ftr__menuItems,
.ftr__menuItems a {
    color: rgba(236, 236, 236, 0.6) !important;
    transition: color 0.2s ease !important;
}

.ftr__menuItems:hover,
.ftr__menuItems:hover a {
    color: #fff !important;
}

/* FIX 3: Footer Subscribe - put button on the SIDE (horizontal) */
.ftr__topSec {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
    margin-bottom: 53px !important;
}

.ftr__text {
    flex: 1;
    min-width: 300px;
    text-align: left !important;
    margin: 0 !important;
}

.ftr__topSec .sale_email_form {
    flex-shrink: 0;
}

.ftr__emailSec {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    max-width: 500px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.ftr__email {
    border: none !important;
    border-radius: 10px 0 0 10px !important;
    width: 320px !important;
    max-width: 320px !important;
    height: 50px !important;
    padding: 0 1rem !important;
    font-size: 16px !important;
}

.ftr__sbs {
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    height: 50px !important;
    width: 140px !important;
    max-width: 140px !important;
    padding: 0 1rem !important;
    background: #0066b2 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.ftr__sbs:hover {
    background: #00aeef !important;
}

@media (max-width: 768px) {
    .ftr__topSec {
        flex-direction: column !important;
        text-align: center !important;
    }
    .ftr__text {
        text-align: center !important;
    }
    .ftr__emailSec {
        width: 100% !important;
        max-width: 100% !important;
    }
    .ftr__email {
        width: 100% !important;
        flex: 1 !important;
    }
}

/* FIX 4: Desktop Dropdown Menu - prevent vanishing on hover */
.nav__subMenus {
    position: relative !important;
}

.nav__subMenu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 280px !important;
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    z-index: 1000 !important;
    padding: 8px 0 !important;
    margin-top: 10px !important;
}

.nav__subMenu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

/* Show on hover with bridge */
.nav__subMenus:hover .nav__subMenu,
.nav__subMenu:hover {
    display: block !important;
}

.nav__subItems {
    width: 100% !important;
    border-bottom: none !important;
}

.nav__subItems:not(:last-child) {
    border-bottom: 1px solid #f0f0f0 !important;
}

.nav__subItem {
    color: #0066b2 !important;
    font-size: 16px !important;
    line-height: 23px !important;
    padding: 12px 20px !important;
    display: block !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
}

.nav__subItem:hover {
    background: rgba(0, 174, 239, 0.08) !important;
    color: #00aeef !important;
    padding-left: 26px !important;
}

/* FIX 5: Remove dropdown arrow rotation animation issues */
.nav__dropDown {
    transition: transform 0.3s ease !important;
    margin-left: 6px !important;
}

.nav__subMenus:hover .nav__dropDown {
    transform: rotate(180deg);
}

/* FIX 6: Mobile Hamburger Menu */
.nav__icons {
    display: none !important;
    cursor: pointer;
}

@media (max-width: 991px) {
    .nav__icons {
        display: flex !important;
        align-items: center;
    }
    
    .nav__close {
        display: none !important;
    }
    
    .nav__icons.active .nav__hamBurger {
        display: none !important;
    }
    
    .nav__icons.active .nav__close {
        display: block !important;
    }
    
    .nav__menu {
        display: none !important;
    }
    
    .nav__btns {
        display: none !important;
    }
    
    .mNav {
        display: block;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        background: #fff;
        z-index: 999;
        transition: height 0.3s ease;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .mNav.mNav--active {
        height: calc(100vh - 80px);
        overflow-y: auto;
    }
    
    .mNav__wrap {
        padding: 20px;
    }
    
    .mNav__menu {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .mNav__menuItems {
        padding: 15px 0 !important;
        border-bottom: 1px solid #ececec !important;
        color: #0066b2 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }
    
    .mNav__menuItems a {
        color: inherit !important;
    }
    
    .mNav__submenus {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .mNav__submenus.mNav__submenus--active {
        max-height: 500px;
    }
    
    .mNav__submenu {
        padding: 10px 20px !important;
    }
    
    .mNav__slink {
        color: #0066b2 !important;
        font-size: 16px !important;
    }
    
    .mNav__btns {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 20px !important;
    }
    
    .mNav__btn {
        text-align: center !important;
        padding: 14px !important;
        border-radius: 10px !important;
        background: #e9e9ed !important;
        color: #525656 !important;
        font-weight: 700 !important;
    }
    
    .nav__btn--solid.mNav__btn,
    .client_dashboard_btn.mNav__btn {
        background: #0066b2 !important;
        color: #fff !important;
    }
    
    .nav__btn--solid.mNav__btn a,
    .client_dashboard_btn.mNav__btn a {
        color: #fff !important;
    }
}

@media (min-width: 992px) {
    .mNav {
        display: none !important;
    }
    
    /* Desktop: ensure nav__right is visible */
    .nav__right {
        display: flex !important;
    }
}

/* FIX 7: Our Scores - underline ONLY on hover, not when active */
.tmonial__menuItems::after {
    width: 0 !important;
    transition: width 0.3s ease !important;
}

.tmonial__menuItems:hover::after {
    width: 100% !important;
}

/* Active should NOT have underline - only bold color */
.tmonial__menuItems.active {
    color: #0066b2 !important;
    font-weight: 700 !important;
}

.tmonial__menuItems.active::after {
    width: 0 !important;
}

/* FIX 8: Plans tab switching - proper show/hide */
.plans__wrap {
    display: none !important;
}

.plans__wrap.active {
    display: flex !important;
}

/* FIX 9: Hide domain search section completely */
.home-domain-search,
#frmDomainHomepage {
    display: none !important;
}

/* FIX 10: Feature tabs - proper switching */
.feature__dataCenters__card {
    display: none !important;
}

.feature__dataCenters__card.show {
    display: flex !important;
}

/* FIX 11: Accordion (host section) */
.host__desc {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 27px !important;
    transition: max-height 0.4s ease, padding 0.4s ease !important;
}

.host__desc.active {
    max-height: 500px !important;
    padding: 0 27px 25px !important;
}

.host__arrow {
    transition: transform 0.3s ease !important;
}

.host__arrow.active {
    transform: rotate(180deg) !important;
}

/* FIX 12: Pricing cards - better spacing for new plans */
.plans__card {
    width: 320px !important;
    max-width: 320px !important;
}

.plans .config__planList {
    text-align: left !important;
    padding: 0 15px !important;
    min-height: 280px !important;
}

.plans .config__planList li {
    text-align: left !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.plans .config__planList li:last-child {
    border-bottom: none !important;
}

.plans__btn {
    max-width: 200px !important;
    margin-top: 20px !important;
}

/* FIX 13: Offer/comparison tabs switching */
.offer__content {
    display: none !important;
}

.offer__content.active {
    display: flex !important;
}

/* FIX 14: Sticky nav scroll effect */
.sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* FIX 15: Nav styling */
.nav {
    background: #fff !important;
    box-shadow: none !important;
}

.nav__sec {
    padding: 1rem !important;
    background: #fff !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1272px !important;
    margin: auto !important;
}

.nav__left {
    display: flex !important;
    align-items: center !important;
    gap: 35px !important;
}

.nav__logo {
    max-width: 140px !important;
    height: auto !important;
    object-fit: contain !important;
    cursor: pointer !important;
}

.nav__menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 35px !important;
    list-style: none !important;
}

.nav__menuItems {
    font-size: 18px !important;
    line-height: 23px !important;
    cursor: pointer !important;
    color: #0066b2 !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.nav__menuItems:hover {
    color: #00aeef !important;
}

.nav__right {
    display: flex;
    align-items: center;
}

.nav__btns {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    list-style: none !important;
}

.nav__btn {
    display: inline-flex !important;
    align-items: center !important;
    height: 43px !important;
    border-radius: 10px !important;
    background-color: #e9e9ed !important;
    border: 1px solid #e9e9ed !important;
    transition: all 0.3s ease !important;
}

.nav__btn a {
    color: #525656 !important;
    padding: 0 1.4rem !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.nav__btn:hover {
    border-color: #0066b2 !important;
    background-color: #0066b2 !important;
}

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

.nav__btn--solid {
    background-color: #0066b2 !important;
    border: 1px solid #0066b2 !important;
}

.nav__btn--solid a {
    color: #fff !important;
}

.nav__btn--solid:hover {
    background-color: #fff !important;
    border-color: #0066b2 !important;
}

.nav__btn--solid:hover a {
    color: #0066b2 !important;
}

/* FIX 16: Logo sizing in header */
.header .nav__logo {
    width: 160px !important;
    height: 45px !important;
}

/* FIX 17: Hide recaptcha badge */
.grecaptcha-badge {
    display: none !important;
}

/* FIX 18: Newsletter inbox subscribe button side-by-side */
.inbox .ftr__emailSec {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.inbox .ftr__email {
    width: 320px !important;
    height: 50px !important;
    border: 1px solid #dad9dc !important;
    border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    padding: 0 1rem !important;
}

.inbox .ftr__sbs {
    height: 50px !important;
    width: 140px !important;
    border: 1px solid #0066b2 !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
}

@media (max-width: 576px) {
    .inbox .ftr__emailSec {
        width: 100% !important;
        flex-direction: column !important;
    }
    .inbox .ftr__email {
        width: 100% !important;
        border-radius: 10px !important;
        border-right: 1px solid #dad9dc !important;
        margin-bottom: 10px !important;
    }
    .inbox .ftr__sbs {
        width: 100% !important;
        border-radius: 10px !important;
        border-left: 1px solid #0066b2 !important;
    }
}

/* FIX 19: Footer badges and scores - keep dark */
.ftr__logoSec {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

.ftr__link {
    display: flex !important;
}

.ftr__logo {
    max-width: 140px !important;
    height: auto !important;
    filter: brightness(0) invert(1) !important;
}

.ftr__socials {
    display: flex !important;
    gap: 12px !important;
}

.ftr__logoBg {
    background-color: #fff !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background 0.3s ease !important;
}

.ftr__logoBg:hover {
    background-color: #0066b2 !important;
}

.ftr__socialLogo {
    width: 18px !important;
    height: 18px !important;
}

.ftr__btmSec {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 50px !important;
    margin-top: 30px !important;
    padding-top: 30px !important;
}

.ftr__review {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.ftr .score {
    display: flex !important;
    gap: 15px !important;
    margin: 0 !important;
}

.ftr .score__card {
    background-color: #fff !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 200px !important;
}

.ftr .score__logo {
    max-width: 80px !important;
    height: auto !important;
}

.ftr .score__count {
    color: rgba(0, 0, 0, 0.5) !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.ftr__badges {
    display: flex !important;
    gap: 15px !important;
}

.ftr__badge {
    max-width: 70px !important;
    height: auto !important;
}

@media (max-width: 991px) {
    .ftr__btmSec {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .ftr__logoSec {
        align-items: center !important;
    }
    .ftr .score {
        justify-content: center !important;
    }
}

@media (max-width: 576px) {
    .ftr__menuSec {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        text-align: left !important;
    }
    .ftr__menu {
        width: 100% !important;
    }
    .ftr__menuItems {
        font-size: 14px !important;
        line-height: 30px !important;
    }
    .ftr .score {
        flex-direction: column !important;
    }
    .ftr__badges {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    .ftr__badge {
        max-width: 55px !important;
    }
}

/* FIX 20: Footer menu - single column layout */
.ftr__menuSec {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    margin-top: 40px !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ftr__menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex: 1;
    min-width: 200px;
}

/* FIX 21: Section spacing fixes */
.tmonial {
    padding: 80px 1rem !important;
}

.feature__dataCenters {
    padding: 80px 1rem !important;
}

.vps {
    padding: 60px 1rem 30px !important;
}

.host {
    margin: 30px auto 80px !important;
}

/* FIX 22: CTA section */
.nLetter__btn:hover {
    background-color: transparent !important;
    color: #fff !important;
}

/* FIX 23: Ensure body has white background (light theme) */
body {
    background: #fff !important;
    color: #525656 !important;
}

#main-body {
    background: #fff !important;
}

/* FIX 24: Plans price styling */
.plans__price {
    font-size: 48px !important;
}

.plans__saveCont {
    margin: 10px 0 !important;
}

/* FIX 25: Map cards responsive */
@media (max-width: 991px) {
    .maps--desktop {
        display: block !important;
    }
    .maps--desktop .maps__wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        max-width: 700px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 576px) {
    .maps--desktop .maps__wrapper {
        grid-template-columns: 1fr !important;
        max-width: 400px !important;
    }
}

/* ====================================================
   COMPREHENSIVE FIXES - All Issues
   ==================================================== */

/* FIX A: Hamburger Menu - MUST SHOW ON MOBILE */
@media (max-width: 991px) {
    .nav__icons {
        display: flex !important;
        align-items: center !important;
        z-index: 1001 !important;
    }
    .nav__hamBurger {
        display: block !important;
        width: 34px !important;
        height: 34px !important;
        cursor: pointer !important;
    }
    .nav__close {
        display: none !important;
        width: 34px !important;
        height: 34px !important;
        cursor: pointer !important;
    }
    .nav__icons.active .nav__hamBurger {
        display: none !important;
    }
    .nav__icons.active .nav__close {
        display: block !important;
    }
    .mNav {
        display: block !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        width: 100% !important;
        height: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        z-index: 999 !important;
        transition: height 0.3s ease !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    }
    .mNav.mNav--active {
        height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
    }
    .mNav__wrap {
        padding: 20px !important;
    }
    .mNav__menu {
        display: flex !important;
        flex-direction: column !important;
    }
    .mNav__menuItems {
        padding: 15px 0 !important;
        border-bottom: 1px solid #ececec !important;
        color: #0066b2 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }
    .mNav__menuItems a {
        color: inherit !important;
    }
    .mNav__submenus {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    .mNav__submenus.mNav__submenus--active {
        max-height: 500px !important;
    }
    .mNav__submenu {
        padding: 10px 20px !important;
    }
    .mNav__slink {
        color: #0066b2 !important;
        font-size: 16px !important;
    }
    .mNav__btns {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 20px !important;
    }
    .mNav__btn {
        text-align: center !important;
        padding: 14px !important;
        border-radius: 10px !important;
        background: #e9e9ed !important;
        color: #525656 !important;
        font-weight: 700 !important;
    }
    .nav__btn--solid.mNav__btn,
    .client_dashboard_btn.mNav__btn {
        background: #0066b2 !important;
        color: #fff !important;
    }
    .nav__btn--solid.mNav__btn a,
    .client_dashboard_btn.mNav__btn a {
        color: #fff !important;
    }
}

@media (min-width: 992px) {
    .mNav {
        display: none !important;
    }
}

/* FIX B: Text color - prevent white becoming blue on hover */
.nav__menuItems,
.nav__menuItems a {
    color: #0066b2 !important;
    text-decoration: none !important;
}
.nav__menuItems:hover,
.nav__menuItems:hover a {
    color: #00aeef !important;
}

/* Ensure buttons maintain proper colors */
.nav__btn a {
    color: #525656 !important;
}
.nav__btn:hover a {
    color: #fff !important;
}
.nav__btn--solid a {
    color: #fff !important;
}
.nav__btn--solid:hover a {
    color: #0066b2 !important;
}

/* FIX C: Clientarea Update button - make visible */
.card-sidebar .card-footer .btn-success {
    background: #0066b2 !important;
    border: none !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.card-sidebar .card-footer .btn-success:hover {
    background: #00aeef !important;
    color: #fff !important;
}
.card-sidebar .card-footer .btn-success i {
    margin-right: 8px !important;
}

/* Also fix WHMCS default buttons in client area */
.btn-success,
.btn-primary {
    background: #0066b2 !important;
    border-color: #0066b2 !important;
    color: #fff !important;
    border-radius: 8px !important;
}
.btn-success:hover,
.btn-primary:hover {
    background: #00aeef !important;
    border-color: #00aeef !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* FIX D: Dropdown - click specifically on arrow to open */
.nav__subMenus {
    position: relative !important;
}
.nav__subMenus > .nav__menuItems {
    pointer-events: none !important; /* Main text doesn't trigger */
}
.nav__subMenus .nav__dropDown {
    pointer-events: auto !important;
    cursor: pointer !important;
    display: inline-block !important;
    vertical-align: middle !important;
    padding: 8px !important;
    margin-left: 6px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}
.nav__subMenus .nav__dropDown:hover {
    background: rgba(0, 102, 178, 0.1) !important;
}

/* Show dropdown when arrow is clicked */
.nav__subMenu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 280px !important;
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    z-index: 1000 !important;
    padding: 8px 0 !important;
    margin-top: 10px !important;
}
.nav__subMenu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

/* Show on hover of the whole dropdown container */
.nav__subMenus:hover .nav__subMenu,
.nav__subMenu:hover {
    display: block !important;
}
.nav__subMenu--active {
    display: block !important;
}

.nav__subItems {
    width: 100% !important;
    border-bottom: none !important;
}
.nav__subItems:not(:last-child) {
    border-bottom: 1px solid #f0f0f0 !important;
}
.nav__subItem {
    color: #0066b2 !important;
    font-size: 16px !important;
    line-height: 23px !important;
    padding: 12px 20px !important;
    display: block !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
}
.nav__subItem:hover {
    background: rgba(0, 174, 239, 0.08) !important;
    color: #00aeef !important;
    padding-left: 26px !important;
}

/* FIX E: Add Singapore, India, Japan locations to maps */
.maps__wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
}

/* FIX F: Prevent text color issues globally */
body {
    background: #fff !important;
    color: #525656 !important;
}

/* Ensure all nav text stays visible */
.nav__menuItems,
.nav__menuItems * {
    color: #0066b2 !important;
}
.nav__menuItems:hover,
.nav__menuItems:hover * {
    color: #00aeef !important;
}

/* Button text colors */
.nav__btn a {
    color: #525656 !important;
}
.nav__btn:hover a {
    color: #fff !important;
}
.nav__btn--solid a {
    color: #fff !important;
}
.nav__btn--solid:hover a {
    color: #0066b2 !important;
}

/* FIX G: Make sure footer stays dark permanently */
.ftr,
.footer.ftr {
    background: #273240 !important;
    color: #fff !important;
}
.ftr__crSec {
    background-color: #273240 !important;
}
.ftr__text,
.ftr__menuItems,
.ftr__menuItems a,
.ftr__crContent,
.ftr__home {
    color: #fff !important;
}
.ftr__menuItems,
.ftr__menuItems a {
    color: rgba(236, 236, 236, 0.6) !important;
    transition: color 0.2s ease !important;
}
.ftr__menuItems:hover,
.ftr__menuItems:hover a {
    color: #fff !important;
}

/* FIX H: Fix any link color issues */
a {
    color: #0066b2 !important;
}
a:hover {
    color: #00aeef !important;
}

/* FIX I: Section backgrounds */
#main-body {
    background: #fff !important;
}
.primary-content {
    background: #fff !important;
}

/* ====================================================
   NEW FIXES
   ==================================================== */

/* FIX J: Feature tabs - dark text normally, blue on hover */
.feature__dataCenters__tabs__cont {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
}

.feature__dataCenter__tabs__items {
    font-family: var(--tn-font-secondary) !important;
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    color: #15162b !important;  /* Dark text normally */
    cursor: pointer !important;
    padding: 15px 30px !important;
    border: 1px solid #dad9dc !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    background: #fff !important;
    white-space: nowrap !important;
}

.feature__dataCenter__tabs__items:hover {
    background: linear-gradient(96.18deg, #0066b2 0.44%, #00aeef 100.05%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.feature__dataCenter__tabs__items.show {
    background: linear-gradient(96.18deg, #0066b2 0.44%, #00aeef 100.05%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* FIX K: G2/HostAdvice logos - move up so text is visible */
.review__logo {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    margin-top: -20px !important; /* Move logo up */
}

.review__img {
    object-fit: contain !important;
    max-width: 90px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
    background: #fff !important;
    padding: 10px !important;
}

/* Ensure review heading is visible below logo */
.review__heading {
    font-family: var(--tn-font-primary) !important;
    font-size: 24px !important;
    line-height: 120% !important;
    font-weight: 700 !important;
    color: var(--tn-black) !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
}

/* Also fix the score section logos */
.ftr .score__card {
    background-color: #fff !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 200px !important;
}

.ftr .score__logo {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 87/25 !important;
    max-width: 80px !important;
}

/* FIX L: Fix mobile hamburger button visible on mobile */
@media (max-width: 991px) {
    .nav__icons {
        display: flex !important;
        align-items: center !important;
        z-index: 1001 !important;
    }
    .nav__hamBurger {
        display: block !important;
        width: 34px !important;
        height: 34px !important;
        cursor: pointer !important;
    }
    .nav__close {
        display: none !important;
        width: 34px !important;
        height: 34px !important;
        cursor: pointer !important;
    }
    .nav__icons.active .nav__hamBurger {
        display: none !important;
    }
    .nav__icons.active .nav__close {
        display: block !important;
    }
}

/* FIX M: Ensure nav__right is hidden on mobile (done in header.tpl with d-none d-lg-flex) */
/* Footer Logo Text - Override main-header-footer.css */
.ftr__link .ftr__logo-text,
.ftr__link .ftr__logo-text:hover,
.ftr__logoSec .ftr__logo-text,
.ftr__logoSec .ftr__logo-text:hover {
    font-family: var(--tn-font-primary) !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.5px !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

.ftr__logo-text:hover {
    color: var(--tn-primary-light) !important;
    text-decoration: none !important;
}

/* FIX N: Hide desktop nav menu and buttons on mobile/tablet (<=991px) */
@media (max-width: 991px) {
    .nav__menu {
        display: none !important;
    }
    .nav__btns {
        display: none !important;
    }
    .nav__right {
        display: none !important;
    }
}

/* FIX O: Ensure mobile nav is properly shown on mobile/tablet */
@media (max-width: 991px) {
    .mNav {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .mNav {
        display: none !important;
    }
}

/* FIX N: Hide desktop nav menu and buttons on mobile/tablet (<=991px) */
@media (max-width: 991px) {
    .nav__menu {
        display: none !important;
    }
    .nav__btns {
        display: none !important;
    }
    .nav__right {
        display: none !important;
    }
}

/* FIX O: Ensure mobile nav is properly shown on mobile/tablet */
@media (max-width: 991px) {
    .mNav {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .mNav {
        display: none !important;
    }
}

/* FIX N: Hide desktop nav menu and buttons on mobile/tablet (<=991px) */
@media (max-width: 991px) {
    .nav__menu {
        display: none !important;
    }
    .nav__btns {
        display: none !important;
    }
    .nav__right {
        display: none !important;
    }
}

/* FIX O: Ensure mobile nav is properly shown on mobile/tablet */
@media (max-width: 991px) {
    .mNav {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .mNav {
        display: none !important;
    }
}
@media (min-width: 992px) {
    .mNav {
        display: none !important;
    }
}

/* ====================================================
   PRODUCT CARDS GAP - Add gap between product cards in standard cart
==================================================== */

body #order-standard_cart .products .row.row-eq-height {
    row-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
}

/* Ensure columns don't have negative margins that would break the gap */
body #order-standard_cart .products .col-md-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Product card styling to fill column height */
body #order-standard_cart .products .product {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body #order-standard_cart .products .product .product-desc {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Responsive adjustments for mobile - single column with gap */
@media (max-width: 767px) {
    body #order-standard_cart .products .row.row-eq-height {
        row-gap: 1rem !important;
    }
    body #order-standard_cart .products .col-md-6 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Hero Banner Background Full Width - Fill entire viewport */
.banner--home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: var(--tn-gradient-primary);
    z-index: -1;
    pointer-events: none;
}

/* Hero Banner Logo Rounded Corners */
.banner__logo,
.banner__logo--rounded {
    border-radius: 24px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 767px) {
    .banner__logo,
    .banner__logo--rounded {
        border-radius: 16px !important;
    }
}

#order-modern {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

@media (max-width: 767px) {
    #order-modern {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

.btn-default:hover {
    color: #212529 !important;
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
}

/* ====================================================
   LOGIN FORM - INPUT GROUP MERGE FIX
   Make the email/password icon boxes blend seamlessly
   with the input bar instead of looking like a detached
   grey Bootstrap default box.
==================================================== */
.login-form .input-group-merge {
    align-items: stretch;
}

.login-form .input-group-merge .input-group-prepend {
    margin-right: 0 !important;
}

.login-form .input-group-merge .input-group-append {
    margin-left: 0 !important;
}

/* Leading icon box: same bg/border as the input, rounded on the left only */
.login-form .input-group-merge .input-group-text {
    background-color: var(--tn-white) !important;
    border: .5px solid var(--tn-border-light) !important;
    border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    color: var(--tn-text) !important;
    padding: 0.375rem 0.9rem !important;
}

/* Middle/adjacent input: drop the left border + left rounding so it merges */
.login-form .input-group-merge .form-control {
    border-left: none !important;
    border-radius: 0 !important;
}

/* When the input is the last element (email field), round its right side */
.login-form .input-group-merge > .form-control:last-child {
    border-right: .5px solid var(--tn-border-light) !important;
    border-radius: 0 10px 10px 0 !important;
}

/* Trailing reveal-password button: match the input, rounded on the right only */
.login-form .input-group-merge .input-group-append .btn {
    background-color: var(--tn-white) !important;
    border: .5px solid var(--tn-border-light) !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
    color: var(--tn-text) !important;
    box-shadow: none !important;
}

.login-form .input-group-merge .input-group-append .btn:hover {
    color: var(--tn-primary) !important;
    background-color: var(--tn-white) !important;
}

/* Highlight the whole field as one unit on focus */
.login-form .input-group-merge:focus-within .input-group-text,
.login-form .input-group-merge:focus-within .form-control,
.login-form .input-group-merge:focus-within .input-group-append .btn {
    border-color: var(--tn-primary) !important;
}

/* ====================================================
   DESKTOP NAV DROPDOWN ARROW FIX
   style.css applies a brightness/invert filter globally
   that turns the black arrow nearly white, making it
   invisible on the white navbar. Override for light mode.
==================================================== */

/* Desktop light navbar: render arrow in brand blue */
@media (min-width: 992px) {
    body:not(.darkMode) .nav__dropDown {
        filter: invert(27%) sepia(98%) saturate(1538%) hue-rotate(188deg) brightness(94%) contrast(101%) !important;
    }
    
    /* Dark mode keeps its own white arrow via .darkMode specificity */
}

/* ====================================================
   CLIENT AREA STAT TILES - Restyled to match reference
   White rounded cards with colored icon, big number,
   and accent bar. Replaces default flat tiles.
==================================================== */

.tiles .row.no-gutters {
    margin: 0 -8px;
}

.tiles .row.no-gutters > div {
    padding: 8px;
}

.tiles .tile {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 160px !important;
    padding: 22px 24px !important;
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    border-right: 1px solid #ececec !important;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    overflow: hidden;
    position: relative;
    will-change: transform;
}

/* Drive the hover from the stable parent column instead of the tile itself.
   The column never transforms, so it always contains the cursor; the inner
   tile can lift with translateY without the pointer ever leaving the hover
   target. This removes the edge flicker/jitter completely. */
.tiles .row > div:hover .tile,
.tiles .tile:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 102, 178, 0.3) !important;
    background-color: #ffffff !important;
    cursor: pointer;
}

.tiles .row > div:hover .tile i {
    color: var(--tn-primary-light, #00aeef) !important;
    transform: scale(1.1);
}

/* Colored icon - top, in normal flow */
.tiles .tile i {
    position: static !important;
    display: block !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: var(--tn-primary, #0066b2) !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
    margin-bottom: 4px !important;
}

.tiles .tile:hover i {
    font-size: 30px !important;
    color: var(--tn-primary-light, #00aeef) !important;
    transform: scale(1.1);
}

/* Big stat number - below icon */
.tiles .tile .stat {
    margin-top: auto !important;
    margin-bottom: 2px !important;
    font-family: var(--tn-font-primary, "Urbanist", sans-serif) !important;
    font-size: 40px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #15162b !important;
    text-align: left !important;
}

/* Title label under number */
.tiles .tile .title {
    font-family: var(--tn-font-secondary, "DM Sans", sans-serif) !important;
    font-weight: 700 !important;
    color: #525656 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
}

/* Accent highlight bar at bottom */
.tiles .tile .highlight {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    height: 4px !important;
    border-radius: 0 0 16px 16px !important;
    opacity: 0.9;
    transition: height 0.25s ease !important;
}

.tiles .tile:hover .highlight {
    height: 6px !important;
}

/* Accent colors per tile (from WHMCS bg-color-* classes) */
.tiles .tile .highlight.bg-color-blue {
    background-color: #0066b2 !important;
}
.tiles .tile .highlight.bg-color-green {
    background-color: #34c759 !important;
}
.tiles .tile .highlight.bg-color-red {
    background-color: #ff3b30 !important;
}
.tiles .tile .tile .highlight.bg-color-gold {
    background-color: #f5a623 !important;
}

/* Mobile/tablet: 2 columns still look clean */
@media (max-width: 1199.98px) {
    .tiles .row.no-gutters > div {
        padding: 6px;
    }
    .tiles .tile {
        height: 130px !important;
        padding: 18px 20px !important;
        border-bottom: 1px solid #ececec !important;
    }
    .tiles .tile i {
        top: 18px !important;
        left: 20px !important;
        font-size: 26px !important;
    }
    .tiles .tile .stat {
        font-size: 36px !important;
    }
}

@media (max-width: 575px) {
    .tiles .tile {
        height: 120px !important;
        padding: 16px 18px !important;
    }
    .tiles .tile .stat {
        font-size: 32px !important;
    }
    .tiles .tile i {
        font-size: 24px !important;
    }
}

/* Dark mode support */
body.darkMode .tiles .tile {
    background: #1e2034 !important;
    border-color: #2d2f45 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
body.darkMode .tiles .tile:hover {
    background: #1e2034 !important;
    border-color: var(--tn-primary, #0066b2) !important;
}
body.darkMode .tiles .tile .stat {
    color: #ffffff !important;
}
body.darkMode .tiles .tile .title {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ====================================================
   SERVICES TABLE - Fix overflow/cut-off & SSL icon size
   The full-width container (padding-inline:0) causes
   table columns to overflow and hide Status/Next Due.
   Also the SSL lock icon is too small.
==================================================== */

/* Allow table wrapper to scroll horizontally when needed */
.dataTables_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Make table cells not shrink below content */
table.table-list {
    width: 100% !important;
    min-width: 600px;
    table-layout: auto !important;
}

table.table-list thead th {
    white-space: nowrap;
}

table.table-list tbody td {
    white-space: nowrap;
}

/* Fix SSL lock icon - too small (4x4) despite width="25" */
.ssl-state {
    width: 22px !important;
    height: 22px !important;
    display: inline-block !important;
    object-fit: contain !important;
}

/* Invoice table same overflow fix */
body #order-standard_cart .cart-body,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    overflow-x: visible !important;
}

/* Invoice statuses: keep every tag readable, including unpaid labels whose
   inner .textred color can otherwise inherit a white theme color. */
body .label.status,
body .label.status > span {
    border-radius: 6px !important;
    font-weight: 600 !important;
}

body .label.status-unpaid {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #b91c1c !important;
}

body .label.status-unpaid .textred {
    color: #ffffff !important;
}

body .label.status-paid {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

body .label.status-cancelled,
body .label.status-collections,
body .label.status-payment-pending,
body .label.status-refunded,
body .label.status-accepted,
body .label.status-active,
body .label.status-closed,
body .label.status-terminated,
body .label.status-suspended {
    border-radius: 6px !important;
}

/* Account notifications popover: themed surface, soft corners and open motion */
@keyframes tnNotificationOpen {
    from {
        opacity: 0;
        filter: blur(2px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

body .popover.popover-user-notifications {
    min-width: 320px !important;
    max-width: 380px !important;
    padding: 8px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 102, 178, 0.16) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(18, 43, 70, 0.18) !important;
    overflow: visible !important;
    animation: tnNotificationOpen 180ms ease-out both;
    transform-origin: top left;
}

body .popover-user-notifications .popover-inner,
body .popover-user-notifications .popover-body {
    background: #ffffff !important;
    border-radius: 9px !important;
}

body .popover-user-notifications .popover-body {
    padding: 0 !important;
    overflow: hidden !important;
}

body .popover-user-notifications .popover-header:empty {
    display: none !important;
}

body .popover-user-notifications .client-alerts {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body .popover-user-notifications .client-alerts li {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e8eef4 !important;
}

body .popover-user-notifications .client-alerts li:last-child {
    border-bottom: 0 !important;
}

body .popover-user-notifications .client-alerts li a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px !important;
    color: #172033 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    transition: background-color 150ms ease, color 150ms ease !important;
}

body .popover-user-notifications .client-alerts li a:hover {
    background: #eef7fd !important;
    color: #0066b2 !important;
}

body .popover-user-notifications .client-alerts li i.fas,
body .popover-user-notifications .client-alerts li i.far {
    float: none !important;
    flex: 0 0 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    color: #0066b2 !important;
    background: #e5f4fc !important;
    border-radius: 8px !important;
    font-size: 16px !important;
}

body .popover-user-notifications .client-alerts li i.fa-check-circle {
    color: #15803d !important;
    background: #dcfce7 !important;
}

body .popover-user-notifications .client-alerts li i.fa-warning,
body .popover-user-notifications .client-alerts li i.fa-exclamation-circle {
    color: #b91c1c !important;
    background: #fee2e2 !important;
}

body .popover-user-notifications .client-alerts .message {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding-top: 2px !important;
}

body .popover-user-notifications.bs-popover-bottom > .arrow::after,
body .popover-user-notifications.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
    border-bottom-color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
    body .popover.popover-user-notifications {
        animation: none !important;
    }
}

@media (max-width: 420px) {
    body .popover.popover-user-notifications {
        min-width: min(320px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* MarketConnect FAQ accordions: global card/header styles otherwise make
   NordVPN and XoviNow questions square and shrink them to their content. */
#nordvpnFaq,
#xovinowFAQ {
    width: 100% !important;
}

#nordvpnFaq > .card,
#xovinowFAQ > .card {
    display: block !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #dce6ef !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 16px rgba(18, 43, 70, 0.06) !important;
    overflow: hidden !important;
}

#nordvpnFaq > .card > .card-header,
#xovinowFAQ > .card > .card-header {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0066b2 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

#nordvpnFaq .card-header h2,
#xovinowFAQ .card-header h2 {
    width: 100% !important;
    margin: 0 !important;
}

#nordvpnFaq .card-header .btn,
#xovinowFAQ .card-header .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
    text-decoration: none !important;
}

#nordvpnFaq .card-header .btn:hover,
#nordvpnFaq .card-header .btn:focus,
#xovinowFAQ .card-header .btn:hover,
#xovinowFAQ .card-header .btn:focus {
    color: #ffffff !important;
    background: #005692 !important;
    text-decoration: none !important;
}

#nordvpnFaq .card-header .btn i,
#xovinowFAQ .card-header .btn i {
    flex: 0 0 auto !important;
    color: #ffffff !important;
}

#nordvpnFaq .collapse,
#nordvpnFaq .collapsing,
#xovinowFAQ .collapse,
#xovinowFAQ .collapsing {
    width: 100% !important;
}

#nordvpnFaq .card-body,
#xovinowFAQ .card-body {
    width: 100% !important;
    padding: 18px 20px !important;
    color: #425466 !important;
    background: #ffffff !important;
    border-top: 1px solid #e8eef4 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

@media (max-width: 767px) {
    #nordvpnFaq .card-header .btn,
    #xovinowFAQ .card-header .btn {
        min-height: 54px !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
    }

    #nordvpnFaq .card-body,
    #xovinowFAQ .card-body {
        padding: 16px !important;
    }
}

/* Footer bottom: review/badges block removed, so center the logo + socials */
.ftr__btmSec {
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
}

.ftr__logoSec {
    align-items: center !important;
    text-align: center !important;
}

.ftr__logoSec .ftr__link,
.ftr__logoSec .ftr__logo-text {
    justify-content: center !important;
}

.ftr__socials {
    justify-content: center !important;
}

/* Responsive: restore padding for inner pages (not homepage) */
body:not(.home) #main-body > .container {
    max-width: 1272px !important;
    padding-inline: 1rem !important;
    margin-inline: auto !important;
}

/* ====================================================
   DASHBOARD ONLY - Expand content, shrink sidebar
==================================================== */
body.page-dashboard .col-lg-4.col-xl-3 {
    display: none !important;
}
body.page-dashboard .col-lg-8.col-xl-9.primary-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}