/* =========================================================
   SEARCHDOTCOM CLUB — MODERN DARK WHMCS
========================================================= */

/* =========================================================
   GLOBAL
========================================================= */

html,
body,
#wrapper,
#main-body,
.main-content,
section#main-body {
    background: #020617 !important;
    color: #e5e7eb;
}

body {
    font-family: Inter, sans-serif;
}

/* LINKS */

a {
    color: #7dd3fc;
    transition: all .2s ease;
}

a:hover {
    color: #38bdf8;
    text-decoration: none;
}

/* TITLES */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff;
}

/* =========================================================
   HEADER
========================================================= */

.top-nav,
.header-lined,
.navbar-main,
.header {
    background: #020617 !important;
}

.navbar-main {
    border-bottom: 1px solid rgba(255,255,255,.05);

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);
}

.navbar {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* LOGO */

.logo-img {

    max-height: 46px;

    width: auto;

    filter:
        drop-shadow(
            0 0 12px rgba(56,189,248,.15)
        );
}

/* =========================================================
   MENU
========================================================= */

.main-navbar-wrapper .navbar-nav > li > a {

    color: #cbd5e1 !important;

    font-size: 14px;

    font-weight: 500;

    padding: 10px 14px !important;

    border-radius: 10px;

    transition: all .2s ease;
}

.main-navbar-wrapper .navbar-nav > li > a:hover {

    color: #ffffff !important;

    background:
        rgba(255,255,255,.05);
}

/* ACTIVE */

.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li.current > a {

    background:
        rgba(56,189,248,.12);

    color: #7dd3fc !important;
}

/* =========================================================
   SEARCH
========================================================= */

.search input.form-control {

    background:
        rgba(15,23,42,.9) !important;

    border:
        1px solid rgba(255,255,255,.06) !important;

    border-radius: 14px !important;

    color: #fff !important;

    height: 44px;
}

/* =========================================================
   CART BUTTON
========================================================= */

.navbar-cart a,
.cart-btn {

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 12px;

    padding: 10px 14px !important;
}

/* =========================================================
   DROPDOWN
========================================================= */

.dropdown-menu {

    background: #111827 !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    border-radius: 16px !important;

    overflow: hidden;
}

.dropdown-menu .dropdown-item {

    color: #e5e7eb !important;

    padding: 10px 18px !important;
}

.dropdown-menu .dropdown-item:hover {

    background:
        rgba(255,255,255,.05) !important;

    color: #38bdf8 !important;
}

/* =========================================================
   BREADCRUMB
========================================================= */

.master-breadcrumb {

    background: transparent !important;

    padding: 14px 0 !important;
}

.breadcrumb {

    background: #0f172a !important;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 14px !important;

    padding: 12px 18px !important;
}

.breadcrumb-item,
.breadcrumb-item.active,
.breadcrumb-item a {

    color: #cbd5e1 !important;

    font-size: 14px;
}

/* =========================================================
   DOMAIN SEARCH
========================================================= */

.home-domain-search.bg-white {

    background: #020617 !important;
}

.home-domain-search .container {

    max-width: 1100px;
}

.home-domain-search .p-5 {

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.96),
            rgba(7,12,30,.98)
        );

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 28px;

    padding: 60px !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);
}

.home-domain-search h2 {

    color: #ffffff !important;

    font-size: 44px;

    font-weight: 800;

    letter-spacing: -1px;

    margin-bottom: 28px;
}

/* INPUT GROUP */

.home-domain-search .input-group {

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 20px;

    padding: 10px;

    gap: 12px;
}

/* INPUT */

.home-domain-search input.form-control {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    color: #ffffff !important;

    font-size: 18px;

    height: 58px;

    padding-left: 20px;
}

.home-domain-search input.form-control::placeholder {

    color: #94a3b8 !important;
}

/* BUTTONS */

.home-domain-search .btn {

    height: 52px;

    border-radius: 14px !important;

    border: none !important;

    padding: 0 24px;

    font-weight: 700;

    transition: all .2s ease;
}

.home-domain-search .btn-primary {

    background:
        linear-gradient(
            135deg,
            #06b6d4,
            #2563eb
        ) !important;
}

.home-domain-search .btn-success {

    background: #1e293b !important;
}

.home-domain-search .btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(37,99,235,.25);
}

/* =========================================================
   SECTION TITLES
========================================================= */

h2.text-center.m-4 {

    font-size: 34px !important;

    font-weight: 800 !important;

    letter-spacing: -.8px;

    color: #ffffff !important;

    margin-top: 50px !important;

    margin-bottom: 34px !important;
}

/* =========================================================
   PRODUCT CARDS
========================================================= */

.card-columns.home {

    display: grid !important;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 28px;

    column-count: unset !important;
}

/* CARD */

.card-columns.home .card {

    background:
        linear-gradient(
            145deg,
            rgba(16,25,52,.96),
            rgba(7,12,30,.98)
        ) !important;

    border:
        1px solid rgba(255,255,255,.06) !important;

    border-radius: 28px !important;

    overflow: hidden;

    margin-bottom: 0 !important;

    box-shadow:
        0 10px 40px rgba(0,0,0,.35);

    transition: all .25s ease;
}

/* HOVER */

.card-columns.home .card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(56,189,248,.25) !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 30px rgba(56,189,248,.12);
}

/* BODY */

.card-columns.home .card-body {

    padding: 40px 34px !important;
}

/* TITLE */

.card-columns.home .card-title {

    color: #ffffff !important;

    font-size: 24px !important;

    font-weight: 800 !important;

    margin-bottom: 18px !important;
}

/* DESCRIPTION */

.card-columns.home p {

    color: #94a3b8 !important;

    font-size: 15px;

    line-height: 1.7;

    min-height: 55px;
}

/* BUTTON */

.card-columns.home .btn {

    width: 100%;

    height: 50px;

    border-radius: 14px !important;

    border: none !important;

    background:
        linear-gradient(
            135deg,
            #06b6d4,
            #2563eb
        ) !important;

    color: #ffffff !important;

    font-weight: 700;

    transition: all .2s ease;
}

.card-columns.home .btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(37,99,235,.25);
}

/* =========================================================
   ACTION ICON CARDS
========================================================= */

.action-icon-btns {

    margin-top: 50px !important;

    margin-bottom: 90px !important;

    row-gap: 24px;
}

/* CARD */

.action-icon-btns a {

    background:
        linear-gradient(
            145deg,
            rgba(16,25,52,.96),
            rgba(7,12,30,.98)
        ) !important;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 24px;

    min-height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #ffffff !important;

    text-decoration: none !important;

    position: relative;

    overflow: hidden;

    transition: all .25s ease;

    box-shadow:
        0 10px 40px rgba(0,0,0,.35);
}

/* GLOW */

.action-icon-btns a::before {

    content: "";

    position: absolute;

    top: 0;

    left: 20%;

    width: 60%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #38bdf8,
            transparent
        );
}

/* HOVER */

.action-icon-btns a:hover {

    transform: translateY(-6px);

    border-color:
        rgba(56,189,248,.25);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 30px rgba(56,189,248,.12);
}

/* ICON */

.action-icon-btns .ico-container {

    margin-bottom: 18px;
}

.action-icon-btns .ico-container i {

    font-size: 40px !important;

    color: #38bdf8 !important;
}

/* TEXT */

.action-icon-btns a {

    font-size: 16px;

    font-weight: 700;

    letter-spacing: -.2px;
}

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

footer.footer {

    background: #020617 !important;

    border-top:
        1px solid rgba(255,255,255,.06);
}

footer.footer,
footer.footer a,
footer.footer p,
footer.footer span {

    color: #cbd5e1 !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .home-domain-search .p-5 {

        padding: 30px !important;
    }

    .home-domain-search h2 {

        font-size: 34px;
    }

    .home-domain-search .input-group {

        flex-direction: column;
    }

    .home-domain-search .input-group-append {

        width: 100%;

        display: flex;

        gap: 10px;
    }

    .home-domain-search .btn {

        width: 100%;
    }

    h2.text-center.m-4 {

        font-size: 28px !important;
    }

}

/* =========================================================
   HOSTING HERO
========================================================= */

.hosting-hero {

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.96),
            rgba(7,12,30,.98)
        );

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 32px;

    padding: 60px;

    margin-bottom: 45px;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);
}

/* TOP GLOW */

.hosting-hero::before {

    content: "";

    position: absolute;

    top: 0;
    left: 20%;

    width: 60%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #38bdf8,
            transparent
        );
}

/* BADGE */

.hosting-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 18px;

    border-radius: 999px;

    background:
        rgba(56,189,248,.08);

    border:
        1px solid rgba(56,189,248,.15);

    color: #7dd3fc;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .4px;

    margin-bottom: 24px;
}

/* TITLE */

.hosting-hero-title {

    font-size: 58px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;

    color: #ffffff;

    margin-bottom: 22px;

    max-width: 820px;
}

/* SUBTITLE */

.hosting-hero-subtitle {

    max-width: 760px;

    color: #94a3b8;

    font-size: 19px;

    line-height: 1.8;
}

/* MOBILE */

@media (max-width: 768px) {

    .hosting-hero {

        padding: 35px;
    }

    .hosting-hero-title {

        font-size: 38px;

        line-height: 1.1;
    }

    .hosting-hero-subtitle {

        font-size: 16px;
    }

}

/* =========================================================
   SEARCHDOT HOSTING CARDS
========================================================= */

.products .row {

    row-gap: 28px;
}

/* GRID */

.products .col-lg-4 {

    max-width: 50% !important;

    flex: 0 0 50% !important;
}

/* CARD */

.sd-hosting-card {

    background:
        linear-gradient(
            145deg,
            rgba(16,25,52,.96),
            rgba(7,12,30,.98)
        );

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 28px;

    padding: 28px;

    min-height: 580px;

    height: 100%;

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;

    transition: all .25s ease;

    box-shadow:
        0 10px 40px rgba(0,0,0,.35);
}

/* TOP GLOW */

.sd-hosting-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 20%;

    width: 60%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #38bdf8,
            transparent
        );
}

/* HOVER */

.sd-hosting-card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(56,189,248,.22);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 30px rgba(56,189,248,.10);
}

/* TITLE */

.sd-title {

    color: #ffffff;

    font-size: 24px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 18px;
}

/* DESCRIPTION */

.sd-description {

    color: #94a3b8;

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 20px;
}

/* FEATURES */

.sd-features {

    list-style: none;

    padding: 0;

    margin: 0 0 28px 0;

    flex: 1;
}

.sd-features li {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 10px;

    color: #cbd5e1;

    font-size: 15px;

    line-height: 1.5;
}

/* CHECK */

.sd-check {

    color: #38bdf8;

    font-weight: 700;

    margin-top: 1px;

    flex-shrink: 0;
}

/* PRICE AREA */

.sd-card-bottom {

    margin-top: auto;

    padding-top: 10px;
}

/* PRICE */

.sd-price {

    font-size: 42px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -1px;

    color: #ffffff;

    margin-bottom: 6px;
}

/* BILLING */

.sd-cycle {

    color: #94a3b8;

    font-size: 14px;

    margin-bottom: 20px;
}

/* BUTTON */

.sd-order-btn {

    width: 100%;

    height: 52px;

    border-radius: 16px !important;

    border: none !important;

    background:
        linear-gradient(
            135deg,
            #06b6d4,
            #2563eb
        ) !important;

    color: #ffffff !important;

    font-size: 15px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    transition: all .2s ease;
}

/* BUTTON HOVER */

.sd-order-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(37,99,235,.22);
}

/* SIDEBAR */

.cart-sidebar .panel-sidebar,
.cart-sidebar .card,
.cart-sidebar .panel {

    background:
        linear-gradient(
            145deg,
            rgba(16,25,52,.96),
            rgba(7,12,30,.98)
        ) !important;

    border:
        1px solid rgba(255,255,255,.06) !important;

    border-radius: 22px !important;

    overflow: hidden;
}

/* SIDEBAR HEADER */

.cart-sidebar .panel-heading,
.cart-sidebar .card-header {

    background:
        rgba(255,255,255,.03) !important;

    border-bottom:
        1px solid rgba(255,255,255,.06) !important;

    color: #ffffff !important;

    font-weight: 700 !important;
}

/* SIDEBAR LINKS */

.cart-sidebar a {

    color: #cbd5e1 !important;
}

.cart-sidebar a:hover {

    color: #38bdf8 !important;
}

/* MOBILE */

@media (max-width: 991px) {

    .products .col-lg-4 {

        max-width: 100% !important;

        flex: 0 0 100% !important;
    }

    .sd-hosting-card {

        min-height: auto;

        padding: 24px;
    }

    .sd-title {

        font-size: 22px;
    }

    .sd-price {

        font-size: 36px;
    }

}