/* ═══════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght,YOPQ@100..900,300&display=swap');

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #111;
    background: #fff;
}

/* Prevent scroll when drawer is open */
body.drawer-lock { overflow: hidden; }

a { text-decoration: none; }
button { cursor: pointer; background: none; border: none; font-family: inherit; }

h1, h2, h3, h4, h5{font-family: "Kumbh Sans", sans-serif; font-weight: 600;}
/* ═══════════════════════════════════════════
   HEADER SHELL
════════════════════════════════════════════ */
.header-top {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 9000;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.header-top .container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    /*height: 76px;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.btn-primary, .list-group-item.active, .btn-outline-primary:hover{
    background-color: #2440a5;
    border-color: #2440a5;
}
.btn-outline-primary{
    color: #2440a5;
    border-color: #2440a5;
}
.btn-link {
    font-weight: 400;
    color: #2440a5;
    text-decoration: none;
}
.btn-success, .badge-success, .badge-info, a.badge-success:focus, a.badge-success:hover, 
.btn-success.disabled, .btn-success:disabled,
.page-item.active .page-link, .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, 
.pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover,
.sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover,
.btn-info{
        background: #ff416d;
        border-color: #ff416d;
}
.btn-success:hover,.badge-success:hover{
     background: #4f578d;
    border-color: #4f578d;
}
#order-standard_cart .sub-heading span, #order-standard_cart .sub-heading-borderless span{color:#ff416d !important;}
#order-standard_cart .view-cart-items{ border-bottom: 2px solid #ff416d; }
#order-standard_cart .view-cart-items-header,
#order-standard_cart .empty-cart .btn,
a.badge-secondary:focus, a.badge-secondary:hover{background-color: #ff416d;}
#order-standard_cart .products .product header{    background: #f4f5fa;}
.card-header{ background-color:#3d436d; color: #fff;}
.card-accent-midnight-blue{border-top: 3px solid #ff416d;}

#order-standard_cart .order-summary, .btn-success.focus, .btn-success:focus,
.suggested-domains .btn:not(.domain-contact-support){
     background: #ff416d !important;
    border-color: #ff416d !important;
}
#order-standard_cart .view-cart-items-header{
     background: #4f578d !important;
    border-color: #4f578d !important;
}
#order-standard_cart .view-cart-items{border-color: #4f578d !important;}
#order-standard_cart .empty-cart .btn{ background: #4f578d !important;}

header.header .dropdown-item.active, header.header .dropdown-item:active,
.dropdown-item:focus, .dropdown-item:hover{background-color: #ffd5df !important;}
.domain-pricing .tld-pricing-header div:nth-child(odd){background: #ffd5df !important;border-color: #ff416d !important;}
.domain-pricing .tld-pricing-header .col-sm-2, .domain-pricing .tld-pricing-header .col-sm-4, .domain-pricing .tld-pricing-header .col-xs-2, .domain-pricing .tld-pricing-header .col-xs-4{border-color: #ffd5df !important }
.domain-checker-container{    background: -webkit-linear-gradient(top, #2440a5, #3d436d) !important;}
#order-standard_cart .panel-addon .panel-add{ background: #ff416d !important;}
.drawer-item.drawer-open > .drawer-toggle-btn {outline: none;}

/* ═══════════════════════════════════════════
   LOGO
════════════════════════════════════════════ */
.logo a { display: flex; align-items: center; }

.logo img {
    height: 38px;
    width: auto;
    display: block;
}


/* ═══════════════════════════════════════════
   NAVIGATION BASE
════════════════════════════════════════════ */
.nav { flex: 1; }

.nav > ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0;
    justify-content: center;
}

.nav > ul > li { position: relative; }

.nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #222;
    font-size: 13px;
    font-weight: 700;
    padding: 26px 14px;
    white-space: nowrap;
    transition: color .2s;
    letter-spacing: .01em;
}

.nav > ul > li > a:hover,
.nav > ul > li:hover > a { color: #ff355d; }

.nav > ul > li > a.active { color: #ff355d; }

.arrow {
    font-size: 10px;
    opacity: .7;
    display: inline-block;
    transition: transform .25s;
}

.nav > ul > li:hover > a .arrow { transform: rotate(180deg); }


/* ═══════════════════════════════════════════
   SMALL DROPDOWN SUBMENU
════════════════════════════════════════════ */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 245px;
    background: #50578d;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s, visibility .25s;
    z-index: 8999;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.dropdown-small:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li { border-bottom: 1px solid rgba(255,255,255,.12); }
.submenu li:last-child { border-bottom: none; }

.submenu li a {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 14px 18px;
    transition: background .2s;
}

.submenu li a:hover { background: #ff3c69; color: #fff; }

.submenu li a.highlight { background: #ff3c69; color: #fff; }
.submenu li a.highlight:hover { background: #e02558; }


/* ═══════════════════════════════════════════
   MEGA MENU
════════════════════════════════════════════ */
.mega-dropdown { position: static; }

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 820px;
    display: flex;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, transform .3s, visibility .3s;
    box-shadow: 0 16px 40px rgba(0,0,0,.16);
    border-radius: 0 0 6px 6px;
    z-index: 8999;
    overflow: hidden;
}

.mega-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-left {
    width: 55%;
    background: #50578d;
    padding: 28px 28px 24px;
    flex-shrink: 0;
}

.mega-left h3 {
    color: rgba(255,255,255,.6);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 6px;
}

.mega-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    transition: background .2s;
}

.mega-item:first-of-type { border-top: none; }

.mega-item h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    transition: color .2s;
}

.mega-item p {
    color: rgba(255,255,255,.65);
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 0;
}

.mega-item:hover h4 { color: #ff4670; text-decoration: underline; }
.active-item h4 { color: #ff4670; text-decoration: underline; }

.mega-right {
    width: 45%;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
}

.mega-right h3 {
    font-size: 26px;
    font-weight: 800;
    color: #111;
    margin-bottom: 16px;
    line-height: 1.2;
}

.mega-right img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
}

.mega-right h4 {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin-top: 14px;
}

.more-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    color: #ff4670;
    font-size: 13px;
    font-weight: 700;
    transition: gap .2s;
}
.more-link:hover { gap: 8px; }


/* ═══════════════════════════════════════════
   HEADER ACTIONS (buttons + hamburger)
════════════════════════════════════════════ */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-login {
    background: #2440a5;
    color: #fff;
    padding: 11px 20px;
    border-radius: 40px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s, transform .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-login:hover { background: #1a328a; transform: translateY(-1px); color: #fff; }

.btn-call {
    background: #ff416d;
    color: #fff;
    padding: 11px 20px;
    border-radius: 40px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s, transform .15s;
}
.btn-call:hover { background: #e02558; transform: translateY(-1px); }

/* ── Hamburger button — always visible at far right ── */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background .2s;
}

.hamburger-btn:hover { background: rgba(0,0,0,.06); }

.hb-line {
    display: block;
    width: 22px;
    height: 2px;
    background: #222;
    border-radius: 2px;
    transition: background .2s;
}

.hamburger-btn:hover .hb-line { background: #ff355d; }


/* ═══════════════════════════════════════════
   FULLSCREEN DRAWER — OVERLAY
════════════════════════════════════════════ */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 30, .65);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.drawer-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}


/* ═══════════════════════════════════════════
   FULLSCREEN DRAWER — PANEL
   Slides in from right, slides out to right
════════════════════════════════════════════ */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #1e2244;
    z-index: 9999;

    /* hidden state — off-screen to the right */
    transform: translateX(100%);
    visibility: hidden;
    transition: none;
}

/* Slide IN animation */
@keyframes drawerSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Slide OUT animation */
@keyframes drawerSlideOut {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

.drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    animation: drawerSlideIn .4s cubic-bezier(.25,.46,.45,.94) forwards;
}

.drawer.is-closing {
    animation: drawerSlideOut .35s cubic-bezier(.55,.055,.675,.19) forwards;
}


/* ── Close button (top-right ✕) ── */
.drawer-close {
    position: absolute;
    top: 20px;
    right: 28px;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .2s, transform .2s;
    z-index: 1;
}

.drawer-close:hover {
    background: rgba(255,255,255,.12);
    transform: rotate(90deg);
}


/* ── Inner layout: left nav + right contact ── */
.drawer-inner {
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 72px;      /* room for close button */
}

.drawer-nav {
    width: 50%;
    padding: 32px 48px 32px 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
}

.drawer-contact {
    width: 50%;
    padding: 60px 60px 32px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-left: 1px solid rgba(255,255,255,.08);
}


/* ── Drawer menu list ── */
.drawer-menu {
    list-style: none;
}

.drawer-item {
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.drawer-item:first-child {
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Both <a> and <button> .drawer-link share same look */
.drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 18px 0;
    background: none;
    border: none;
    text-align: left;
    letter-spacing: .01em;
    transition: color .2s;
    text-decoration: none;
}

a.drawer-link:hover,
button.drawer-link:hover { color: #ff4670; }

/* Active / open state for parent with sub */
.drawer-item.drawer-open > .drawer-toggle-btn { color: #ff4670; }

/* Down-chevron arrow */
.drawer-arrow {
    font-size: 20px;
    line-height: 1;
    transition: transform .3s;
    opacity: .7;
    font-style: normal;
}

.drawer-item.drawer-open .drawer-arrow {
    transform: rotate(180deg);
    opacity: 1;
}


/* ── Drawer sub-items (accordion) ── */
.drawer-sub {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.drawer-item.drawer-open .drawer-sub {
    max-height: 400px;   /* large enough for any sub-list */
}

.drawer-sub li {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-left: 12px;
    position: relative;
}

/* Left accent line */
.drawer-sub li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 60%;
    background: rgba(255,255,255,.2);
    border-radius: 1px;
}

.drawer-sub li a {
    display: block;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 0 12px 12px;
    transition: color .2s;
}

.drawer-sub li a:hover { color: #fff; }


/* ── Right panel: contact info ── */
.drawer-contact-label {
    color: rgba(255,255,255,.55);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
    line-height: 1.5;
}

.drawer-phone {
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 20px;
    display: block;
    transition: color .2s;
}

.drawer-phone:hover { color: #ff4670; }

.drawer-contact-sep {
    width: 60px;
    height: 2px;
    background: rgba(255,255,255,.15);
    border-radius: 1px;
    margin-bottom: 20px;
}

.drawer-contact-pill {
    display: block;
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 40px;
    padding: 12px 20px;
    color: rgba(255,255,255,.8);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
    transition: border-color .2s, background .2s, color .2s;
}

.drawer-contact-pill:hover {
    border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.06);
    color: #fff;
}


/* ═══════════════════════════════════════════
   PLACEHOLDER CONTENT
════════════════════════════════════════════ */
.page-body {
    min-height: 280px;
    background: #f8f9fb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 14px;
}


/* ═══════════════════════════════════════════
   NEWSLETTER STRIP
════════════════════════════════════════════ */
.newsletter-strip {
    background: #2b2f5e;
    padding: 0 24px 0;
    display: flex;
    justify-content: center;
}

.newsletter-box {
    background: #fff;
    border-radius: 10px;
    padding: 42px 48px 38px;
    max-width: 780px;
    width: 100%;
    text-align: center;
    position: relative;
    top: -60px;
    box-shadow: 0 8px 40px rgba(0,0,0,.12);
}

.newsletter-box h2 {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin-bottom: 10px;
    line-height: 1.3;
}

.newsletter-box p {
    font-size: 13px;
    color: #50578d;
    margin-bottom: 24px;
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    align-items: center;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    max-width: 520px;
    margin: 0 auto;
}

.newsletter-form input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 18px;
    font-size: 13px;
    color: #333;
    font-family: inherit;
    background: #fff;
}

.newsletter-form input::placeholder { color: #aaa; }

.newsletter-form button {
    border: none;
    background: #ff416d;
    color: #fff;
    padding: 14px 28px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}

.newsletter-form button:hover { background: #e02558; }


/* ═══════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.footer {
    background: rgba(34, 37, 61, 1.0) !important;
    color: #fff;
    position: relative;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
}

.footer-logo img {
    height: 56px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.footer-pill {
    display: inline-block;
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 40px;
    padding: 10px 22px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .2s, background .2s;
}

.footer-pill:hover {
    border-color: rgba(255,255,255,.7);
    background: #3d436d;
    color: #fff;
}

.footer-phone {
    font-size: 52px;
    font-weight: 800;
    color: rgba(255,255,255,.18);
    letter-spacing: -.02em;
    line-height: 1;
    user-select: all;
}

.footer-social { display: flex; gap: 10px; }

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: rgba(255,255,255,.12);
    color: #fff;
    transition: background .2s;
}

.social-icon:hover { background: rgba(255,255,255,.25); }

.footer-copy {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    line-height: 1.8;
    max-width: 820px;
}

.footer-copy a { color: #ff4670; font-weight: 600; }
.footer-copy a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════
   SCROLL-TO-TOP
════════════════════════════════════════════ */
.scroll-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 42px;
    height: 42px;
    background: #ff416d;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .3s, transform .3s;
    z-index: 8888;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top:hover { background: #e02558; }


/* ═══════════════════════════════════════════
   RESPONSIVE — hide desktop nav on mobile
════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .nav { display: none; }   /* hide desktop nav; drawer handles mobile nav */
}

@media (max-width: 640px) {
    .btn-login,
    .btn-call { display: none; }   /* hide pill buttons on very small screens */

    .drawer-inner { flex-direction: column; }
    .drawer-nav { width: 100%; padding: 24px 28px; }
    .drawer-contact { width: 100%; padding: 24px 28px; border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
    .drawer-phone { font-size: 26px; }
    .drawer-link { font-size: 16px; padding: 14px 0; }

    .newsletter-box { padding: 28px 18px 24px; top: -30px; }
    .newsletter-box h2 { font-size: 16px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form button { width: 100%; }

    .footer-phone { font-size: 28px; }
    .footer-info { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
}