@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #705D97;
    --primary_0: rgba(112, 93, 151, 0);
    --primary_20: rgba(112, 93, 151, 0.2);
    --primary_50: rgba(112, 93, 151, 0.5);
    --text: #FFF;
    --text_60: #FFF;
    --light1: #362F4A;
    --dark1: #292438;
    --dark2: #242031;
    --dark2_50: rgba(36, 32, 49, 0.5);
    --dark2_80: rgba(36, 32, 49, 0.8);
    --font_primary: 'Montserrat', sans-serif;
    --font_secondary: 'Space Grotesk', sans-serif;
    --page_bg: #2D283E;
    --header_bg: url(https://static.matternode.com/img/header_bg.png);
    --linear_grad: linear-gradient(to bottom, rgba(45, 40, 62, 0), rgba(45, 40, 62, 1));
    --container: 1200px;
    --border-radius-lg: 20px;
    --border-radius-md: 10px;
}

* {
    box-sizing: border-box;
}

body.light {
    --text: #242031;
    --text_60: rgba(36, 32, 49, 0.6);

    --light1: #b3a2cd;
    --dark1: #d3c8ea;
    --dark2: #d7d0e6;
    --dark2_50: rgba(216, 209, 230, 0.5);
    --dark2_80: rgba(216, 209, 230, 0.8);
    --font_primary: 'Montserrat', sans-serif;
    --font_secondary: 'Space Grotesk', sans-serif;

    --page_bg: #F5F2FD;
    --header_bg: url(https://static.matternode.com/img/header_bg_light.png);
    --linear_grad: linear-gradient(to bottom, rgba(245, 242, 253, 0), rgba(245, 242, 253, 1));
}

body.light .hide_light {
    display: none;
}

.show_light {
    display: none;
}

body.light .show_light {
    display: block;
}

html,
body {
    scroll-behavior: smooth;
    margin: 0;
    max-width: 100%;
    font-family: var(--font_primary);
    color: var(--text);
    font-size: 16px;
}

body {
    background: var(--page_bg);
    overflow-x: hidden;
    position: relative;
}

a {
    text-decoration: none;
}

.ft-pri {
    font-family: var(--font_secondary)
}

.col-pri {
    color: var(--primary);
}

ul {
    list-style-type: none;
}

.hidden {
    display: none !important;
}

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

.container {
    position: relative;
    overflow: hidden;
    display: flex;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding: 25px;
    gap: 25px;
}

.container.overflow_allow {
    overflow: inherit;
}

.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.btn {
    padding: 5px 20px;
    border-radius: 5rem;
    transition: all 0.25s;
}

.btn:hover {
    transform: scale(1.03);
    box-shadow: 0px 3px 15px var(--primary_20);
    transition: all 0.25s;
}

.btn-primary {
    background-color: var(--primary);
    color: #FFF;
    text-transform: capitalize;
    font-family: var(--font_secondary);

    font-weight: 500;
    display: inline-block;
    color: var(--dark2);
    border-radius: var(--border-radius-md);
}

.btn-secondary {
    background-color: #5A6268;
    color: #FFF;
    text-transform: capitalize;
    font-family: var(--font_secondary);

    font-weight: 500;
    display: inline-block;
    color: var(--dark2);
    border-radius: var(--border-radius-md);
}


/* HEADER */
header {
    background-image: var(--linear_grad), var(--header_bg);
    background-size: 100% 50%, cover;
    background-position: bottom left, center;
    background-repeat: repeat-x, no-repeat;
    padding-bottom: 100px;
    position: relative;
}

/* header .headspin {
    position: absolute;
    width: 500px;
    top: -100px;
    left: -100px;
} */

nav {
    position: fixed;
    width: 100%;
    top: 0;
    background-size: cover;
    background-position: top right;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10;
}

nav.is-scrolled {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.navbar {
    justify-content: space-between;
    align-items: center;
    overflow: visible;
}

.navbar .logobrand {
    display: flex;
}

.navbar .logobrand a {
    display: flex;
    align-items: center;
    color: var(--text);
}

.navbar .logobrand img {
    height: 30px;
}

.navbar .logobrand p {
    line-height: 30px;
    margin: 0;
    margin-left: 20px;
    font-size: 17px;
    font-weight: 200;
    text-transform: uppercase;
}

.navbar .logobrand p span {
    font-weight: 600;
}

.navbar .nav {
    display: flex;
    gap: 5px;
    align-items: center;
}

.navbar .nav>div {
    padding: 5px 20px;
    position: relative;
    cursor: pointer;
    color: var(--text_60);
    font-weight: 300;
    font-size: 0.8rem;
    text-transform: uppercase;
    box-shadow: none;
}

.navbar .nav>.btn {
    color: var(--dark2_80);
}

.navbar .nav a {
    color: var(--text_60);
    font-weight: 300;
    font-size: 0.8rem;
    padding: 5px 20px;
    text-transform: uppercase;
}

.navbar .nav>div .navdropdown {
    position: absolute;
    display: none;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    top: -20px;
    right: -35px;
    left: -35px;
    padding-top: 50px;
}

.navbar .nav>div:hover .navdropdown {
    display: flex;
}

.navbar .nav>div .navdropdown .dropdownmenu {
    box-shadow: 0px 0px 15px rgba(2, 5, 18, 0.1);
    position: relative;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 5px;
    padding: 30px 8px;
    border-radius: 8px;
    background-color: var(--dark2);
}

.navbar .nav .navdropdown a {
    opacity: 0.8;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    /* margin-bottom: 10px; */
    padding: 5px;
    border-radius: 5px;
    text-transform: capitalize;
    margin-bottom: 15px;
    transition: all 0.25s;
}

.navbar .nav .navdropdown a>div {
    margin: 10px;
}

.navbar .nav .navdropdown a:last-of-type {
    margin-bottom: 0;
}

.navbar .nav .navdropdown a:hover {
    opacity: 0.5;
    transition: all 0.25s;
}

.navbar .nav .navdropdown a p {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
    font-size: 0.6rem;
    width: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

/* MOBILE NAV */
.mobile_nav_toggle {
    font-size: 1.5rem;
    color: var(--text);
    opacity: 0.6;
    display: none;
}

/* MOBILE NAV */

.mttrnode-mobNav-overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    background-color: var(--dark2_80);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    overflow-x: hidden;
    transition: 0.35s;
}

.mttrnode-mobNav-overlay-content {
    display: flex;
    position: relative;
    width: 100%;
    text-align: center;
    /* margin-top: 50px; */
    padding: 40px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: space-around;
}

.mttrnode-mobNav-overlay a {
    opacity: 0.4;
    display: block;
    border-radius: 5rem;
    padding: 10px 20px;
    color: var(--text);
    font-weight: 200;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all .25s;
}

.mttrnode-mobNav-overlay a.submenu {
    opacity: 0.3;
    font-size: 0.8rem;
}

.mttrnode-mobNav-overlay a.btn {
    font-size: 1.5rem;
    padding: 10px 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.mttrnode-mobNav-overlay a:hover,
.mttrnode-mobNav-overlay a:focus {
    opacity: 0.8;
    transition: all .25s;
}

.mttrnode-mobNav-overlay .close-mobNav {
    margin-bottom: 50px;
    font-size: 5rem;
    opacity: 0.4;
}

@media only screen and (max-width: 750px) {
    .navbar.container {
        flex-direction: column;
    }

    .herocont {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 600px) {
    .navbar.container {
        flex-direction: row;
    }

    .navbar .nav {
        display: none;
    }

    .mobile_nav_toggle {
        display: block;
    }
}

/* HEADER CONTENT */
header .hero {
    padding-top: 250px;
    padding-bottom: 70px;
    gap: 60px;
    justify-content: left;
    align-items: center;
    text-align: center;
}

header .hero .herocont {
    text-align: left;
    flex: 1;
}

header .hero h1 {
    font-weight: 800;
    font-size: 2.6rem;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    margin-top: 0px;
    margin-bottom: 50px;
    letter-spacing: 2px;
}

header .hero h2 {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
}

header .hero .explore_plans {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
}

header .hero .explore_plans img {
    height: 0.5rem;
    margin-top: 2px;
    margin-left: 5px;
    transition: all 0.25s;
}

header .hero .explore_plans:hover img {
    opacity: 0.8;
    margin-left: 10px;
    transition: all 0.25s;
}

header .hero .vid_embed {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    min-height: 300px;
    border-radius: 20px;
    background-color: var(--page_bg);
    height: 250px;
    overflow: auto;
    /* let it overflow and then control that via the img tag */
}

header .hero .vid_embed img {
    max-width: 100%;
    /* limit width but not height */
    max-height: 100%;
    /* limit height but not width */
    display: block;
    /* necessary for centering images in some situations */
    margin: auto;
    /* center image in div */
    object-fit: contain;
    /* ensure aspect ratio is maintained */
}


@media only screen and (max-width: 750px) {
    header .hero {
        flex-direction: column;
        padding-top: 150px;
        padding-bottom: 80px;
    }
}

header.page-header {
    background-position: bottom left, top center;
    background-size: 100% 30%, cover;
    padding-bottom: 0;
}

header.page-header .hero {
    padding-top: 150px;
    padding-bottom: 160px;
}

header.page-header .hero h1 {
    margin-bottom: 0;
}

header.page-header .hero p {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.3;
    font-size: 0.9rem;
    margin-top: 30px;
    margin-bottom: 0px;
}

/* STATS */
.stats {
    justify-content: space-around;
}

.stats .stat_item {
    text-align: center;
}

.stats .stat_item p {
    margin: 0;
    font-weight: 700;
}

.stats .stat_item p:first-of-type {
    font-size: 2.2rem;
    opacity: 0.8;
}

.stats .stat_item p:last-of-type {
    font-size: 1rem;
    opacity: 0.3;
    font-weight: 500;
}

@media only screen and (max-width: 520px) {
    .stats {
        flex-direction: column;
        gap: 50px;
    }
}

/* SECTION */
section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.section_title {
    max-width: 450px;
    position: relative;
}

.section_title .sect_heading {
    font-family: var(--font_secondary);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-transform: uppercase;
}

.section_title .sect_sub_heading {
    text-transform: capitalize;
    font-weight: 800;
    font-size: 2.2rem;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    margin-top: 0px;
    margin-bottom: 50px;
    letter-spacing: 1px;
}

/* PANEL */
.panel {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background-color: var(--dark2);
    border-radius: var(--border-radius-lg);
    padding: 25px;
}

/* FEATURES */

.features {
    padding-top: 0px;
    gap: 40px;
}

.features .features_quote {
    border-radius: var(--border-radius-lg);
    padding: 30px;
    width: 50%;
    background-color: var(--primary);
    color: #FFF;
    font-family: var(--font_secondary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 40px;
}

.features .features_quote h5 {
    font-size: 2.5rem;
    margin-top: 0px;
    margin-bottom: 20px;
}

.features .features_quote p {
    opacity: 0.9;
    font-size: 1.1rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

.features .features_list {
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: auto auto;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
}


.features .features_list .feature_item i {
    height: 50px;
    color: #705d97;
}

.features .features_list .feature_item p:first-of-type {
    font-family: var(--font_secondary);
    opacity: 0.8;
    font-size: 1.3rem;
    margin-top: 5px;
    margin-bottom: 5px;
}

.features .features_list .feature_item p:last-of-type {
    opacity: 0.3;
    font-size: 0.9rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

.features .features_carousel {
    width: 50%;

}

.owl-dots {
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    margin-bottom: 40px;
    order: 1;
    flex: 1;
    display: flex;
    justify-content: center;
}

.owl-dot {
    width: 40px;
    height: 4px;
    border-radius: 5rem;
    background: rgba(255, 255, 255, 0.1) !important;
    margin-left: 5px;
    margin-right: 5px;
    transition: all 0.25s;
}

.owl-dot.active,
.owl-dot.active {
    background: var(--primary) !important;
    transition: all 0.25s;
}

.owl-nav {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    bottom: 0px;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
    background-color: var(--primary);
    width: 70px;
    border-radius: 10px;
    transition: all 0.25s;

}

.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel button.owl-dot:hover {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.25s;

}

.owl-carousel .owl-nav button span {
    margin-bottom: 4px;
    display: inline-block;
}

.carousel_item {
    text-align: center;
    padding: 25px;
}



/* SERVICES */

#services>.container.service_bg:first-of-type:before {
    content: "";
    background-image: url(https://static.matternode.com/img/home/services_bg.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    /* background: rgba(255, 0, 0, 0.207); */
    position: absolute;
    width: 1000px;
    height: 700px;
    left: -150px;
    top: -150px;
    z-index: -1;
}

#services,
.container.overflow_allow.flex-col {
    padding-top: 0px;
}

body.light #services>.container.service_bg:first-of-type:before {
    background-image: url(https://static.matternode.com/img/home/services_bg_light.svg);
}

#services .services_items {
    margin-top: 80px;
    justify-content: space-between;
    gap: 40px;
}

#services .services_items .services_item {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background-color: var(--dark2);
    border-radius: var(--border-radius-lg);
    padding: 25px;
    text-align: center;
    width: 100%;
}

#services .services_items .services_item:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

#services .services_items .services_item.highlight {
    box-shadow: inset 0 0 0px 5px var(--primary)
}

#services .services_items .services_item.highlight .head {
    box-shadow: inset 0 0 0px 5px var(--primary)
}

#services .services_items .services_item.highlight .head::before {
    box-shadow: inset 0 0 0px 5px var(--primary)
}

#services .services_items .services_item .head {
    color: #FFF;
    position: relative;
    margin-top: -25px;
    margin-left: -25px;
    margin-right: -25px;
    padding: 40px;
    border-radius: var(--border-radius-lg);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-image: url(https://static.matternode.com/img/home/service_item.png);
    background-size: cover;
}

#services .services_items .services_item .head::before {
    position: relative;
    border-radius: var(--border-radius-lg);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    content: "";
    background: var(--dark2_50);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    transition: all 0.25s;

}

#services .services_items .services_item:hover .head::before {
    opacity: 0;
    transition: all 0.25s;
}

#services .services_items .services_item .head>* {
    z-index: 1;
    position: relative;
}

#services .services_items .services_item .head .recommended {
    display: none;
    position: absolute;
    top: 15px;
    left: 15%;
    text-transform: uppercase;
    color: var(--dark2);
    background-color: var(--primary);
    padding: 3px 6px;
    width: 70%;
    border-radius: 3px;
    font-family: var(--font_secondary);
    font-weight: 400;
    font-size: 0.6rem;
    letter-spacing: 1px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#services .services_items .services_item.highlight .recommended {
    display: block;
}

#services .services_items .services_item .head .service_name {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    margin-top: 0px;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

#services .services_items .services_item .head p {
    font-family: var(--font_secondary);
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#services .services_items .services_item .head p:first-of-type {
    text-transform: uppercase;
    opacity: 0.4;
    font-size: 0.6rem;
    margin-bottom: 3px;
}

#services .services_items .services_item .head p:last-of-type {
    font-size: 0.9rem;
    opacity: 0.7;
}

#services .services_items .services_item .body {
    padding: 15px;
    padding-top: 25px;
    padding-bottom: 25px;
}

#services .services_items .services_item .body>div {
    color: var(--text_60);
    font-family: var(--font_secondary);
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-top: 0px;
    margin-bottom: 10px;
}

#services .services_items .services_item .body>div i {
    margin-right: 10px;
    font-size: 18px;
}

#services .services_items .services_item .body>div.inactive {
    opacity: 0.4;
}

#services .services_items .services_item .btn {
    font-weight: 500;
    display: inline-block;
    color: var(--dark2);
    width: 100%;
    border-radius: var(--border-radius-md);
}

#services .other_services .section_title .sect_sub_heading {
    margin-bottom: 0px;
    margin-top: 30px;
}

#services .other_services .services_items {
    margin-top: 50px;
}

#services .other_services .services_items .services_item {
    padding: 0;
}

#services .other_services .services_items .services_item .head {
    padding: 20px;
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
    margin: 0;
}

#services .other_services .services_items .services_item .head::before {
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
}

#services .other_services .services_items .services_item.game .head {
    background-image: url(https://static.matternode.com/img/home/game.png);
}

#services .other_services .services_items .services_item.website .head {
    background-image: url(https://static.matternode.com/img/home/website.png);
}

#services .other_services .services_items .services_item.vps .head {
    background-image: url(https://static.matternode.com/img/home/vps.png);
}

#services .other_services .services_items .services_item.dedicatedservers .head {
    background-image: url(https://static.matternode.com/img/home/dedi.jpg);
}

#services .other_services .services_items .services_item.nodejs .head {
    background-image: url(https://static.matternode.com/img/home/nodejs.png);
}

#services .other_services .services_items .services_item .head .service_name {
    font-family: var(--font_secondary);
}

#services .other_services .services_items .services_item .btn {
    margin-top: 20px;
}

/* LOCATIONS */
#locations>.container {
    justify-content: center;
    align-items: center;
}

#locations .section_title {
    max-width: 550px;
    text-align: center;
}

#locations img {
    width: 900px;
    max-width: 100%;
}

/* REVIEWS */
#reviews .review_cont {
    background-image: url(https://static.matternode.com/img/1star.svg);
    background-size: auto 140%;
    background-repeat: no-repeat;
    background-position: bottom 30px right -200px;
    background-color: var(--light1);
    border-radius: var(--border-radius-lg);
    border: 3px solid var(--primary);
    padding: 50px;
}

#reviews .review_cont .review_head {
    justify-content: space-between;
    align-items: start;
}

#reviews .review_cont .section_title .sect_heading {
    color: var(--text);
    opacity: 0.5;
}

#reviews .review_cont .section_title .sect_sub_heading {
    font-size: 2rem;
}

#reviews .review_cont .review_head img {
    height: 40px;
    max-width: 100%;
}

#reviews .review_cont .review_items {
    justify-content: space-around;
    gap: 50px;
    text-align: center;
}

#reviews .review_cont .review_items .review_item p:first-of-type {
    opacity: 0.3;
    font-size: 0.9rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

#reviews .review_cont .review_items .review_item p:last-of-type {
    font-family: var(--font_secondary);
    opacity: 0.8;
    font-size: 1.1rem;
    margin-top: 10px;
    margin-bottom: 0px;
}

/* FOOTER */
footer {
    background-color: var(--dark1);
    margin-top: 100px;
}

footer .footermain {
    padding-top: 80px;
    padding-bottom: 80px;
    justify-content: space-between;
    align-items: start;
}

footer .footermain h3 {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0px;
    color: var(--primary);
    font-family: var(--font_secondary);
}

footer .footermain a {
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.7rem;
    color: var(--text_60)
}

footer .footermain .social {
    justify-content: flex-end;
    align-items: flex-end;
}

footer .footermain .social .socialLinks a {
    display: flex;
    font-size: 17px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background-color: var(--primary);
    color: var(--dark1);
    padding: 2px;
    align-items: center;
    text-align: center;
    justify-content: center;
    transition: all 0.25s;
    overflow: hidden;
    margin: 5px;
}

footer .footermain .social .socialLinks a:last-of-type {
    margin-right: 0px;
}

footer .footermain .social .socialLinks a:hover {
    font-size: 80px;
    color: var(--primary);
    transition: all 0.25s;
}

footer .footermain .soon {
    background-color: #3ba735;
    padding: 3px 6px;
    border-radius: 8px;
    color: #333333;
    font-size: 12px;
    font-weight: bold;
}

footer .copyright {
    border-top: 2px solid rgba(255, 255, 255, 0.03);
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    gap: 0px;
}

footer .copyright img {
    opacity: 0.3;
    height: 30px;
    margin-bottom: 25px;
}

footer .copyright p {
    opacity: 0.5;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text_60);
    margin-bottom: 0px;
    margin-top: 0px;
}




/*  */
/* ABOUT PAGE */
/*  */
#about {
    margin-top: -100px;
}

#about .flex>div {
    width: 50%;
    padding: 0;
}

#about .flex {
    align-items: center;
}

#about .about_cont h3 {
    font-family: var(--font_secondary);
    color: var(--text);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-top: 0px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

#about .about_cont p {
    opacity: 0.3;
    font-size: 0.9rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

#about .stats .stat_item p:first-of-type {
    font-size: 2rem;
}

#about .stats .stat_item p:last-of-type {
    font-size: 0.8rem;
}

#team .team_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
    align-items: start;
    grid-row: auto auto;
    grid-column-gap: 40px;
    grid-row-gap: 80px;
}

#team .team_grid .team_item {
    text-align: center;
    width: 100%;
}

#team .team_grid .team_item img {
    width: 50px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

#team .team_grid .team_item .name {
    font-family: var(--font_secondary);
    opacity: 0.8;
    font-size: 1.3rem;
    margin-top: 5px;
    margin-bottom: 0px;
}

#team .team_grid .team_item .role {
    font-family: var(--font_secondary);
    opacity: 0.3;
    font-size: 1rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

#team .team_grid .team_item .socials {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#team .team_grid .team_item .socials a {
    color: var(--primary);
}

#team .team_grid .team_item p {
    opacity: 0.3;
    font-size: 0.9rem;
    margin-top: 0px;
    margin-bottom: 0px;
}


/*  */
/* GAMES PAGE */
/*  */
.games_page {
    margin-top: -150px;
}

.games_page .container {
    gap: 55px;
}

.games_page#services .services_items {
    margin-top: 0px;
}

.plan_slider {
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

.plan_slider .prompt {
    font-family: var(--font_secondary);
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    margin-top: 0px;
    margin-bottom: 0px;
}

.plan_slider .slider {
    flex: 1;
}

.plan_slider .slider input {
    width: 100%;
}

.plan_slider .slider .slider_nums {
    margin-top: 10px;
    margin-left: 5px;
    display: flex;
    justify-content: space-between;
    font-family: var(--font_secondary);
    color: var(--primary);
    opacity: 0.6;
    font-weight: 600;
    font-size: 1.3rem;
}

.plan_slider .slider_contact {
    text-align: center;
}

.plan_slider .slider_contact p {
    font-family: var(--font_secondary);
    color: var(--primary);
    opacity: 0.6;
    font-weight: 500;
    font-size: 0.9rem;
    margin-top: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.product_cta {
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

.product_cta .prompt {
    font-family: var(--font_secondary);
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    margin-top: 0px;
    margin-bottom: 0px;
}

.product_cta p {
    opacity: 0.3;
    font-size: 0.9rem;
    margin-top: 10px;
    margin-bottom: 0px;
}

.product_cta .stat {
    font-family: var(--font_secondary);
    color: var(--text);
    opacity: 0.3;
    font-weight: 200;
    font-size: 1.5rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

.product_cta .btn {
    padding: 12px 26px;
}


/*  */
/* GAME LIST PAGE */
/*  */
margin.game_list_page #services {
    -top: -100px;
    padding-bottom: 0px;
}

.game_list_page #services .services_items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* grid-column-gap: 60px; */
    /* grid-row-gap: 80px; */
}

.game_list_page #services .services_items .services_item .head .service_name {
    margin-bottom: 120px;
    margin-top: 20px;
}

.game_list_page #services .sect_sub_heading {
    font-family: var(--font_secondary);
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.8;
}

.game_list_page .features .features_list {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 60px;
    grid-row-gap: 80px;
}

/*  */
/* DEDICATED_SERVERS PAGE */
/*  */
.dedicated_servers_page {
    margin-top: -150px;
}

.dedicated_servers_page .container {
    gap: 55px;
}

.dedicated_servers_page#services .services_items {
    margin-top: 0px;
}


/* Add grid layout to services_items */
.dedicated_servers_page#services .services_items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns */
    gap: 30px;
    /* Adjust this gap as needed */
}

/* Adjust the number of columns for different screen sizes */
@media (max-width: 1200px) {
    .dedicated_servers_page#services .services_items {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns */
    }
}

@media (max-width: 768px) {
    .dedicated_servers_page#services .services_items {
        grid-template-columns: 1fr;
        /* 1 column */
    }
}


/*  */
/* SUPPORT PAGE */
/*  */
#support {
    margin-top: -100px;
}

#support .flex {
    gap: 60px;
}

#support .support_item {
    padding: 40px;
    text-align: center;
    flex: 1;
}

#support .support_item i {
    color: var(--primary);
    font-size: 5rem;
}

#support .support_item .support_title {
    font-family: var(--font_secondary);
    color: var(--text);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-top: 30px;
    margin-bottom: 3px;
}

#support .support_item .support_time {
    font-family: var(--font_secondary);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 200;
    opacity: 0.4;
    margin-bottom: 30px;
}

#support .support_item .support_time.active {
    color: #14c170;
    opacity: 1;
}

#support .support_item .support_time.inactive {
    color: #c11414;
    opacity: 1;
}

#support .support_item .btn {
    padding: 10px 20px;
}

/* FAQ */
#faq .features {
    align-items: flex-start;
}

#faq .sect_sub_heading {
    margin-bottom: 0px !important;
}

.faqCont {
    width: 50%;
    justify-content: center;
}

.faqAccordian {
    width: 100%;
}

.faqQuestion {
    font-family: var(--font_secondary);
    width: 100%;
    background-color: var(--dark1);
    color: var(--text_60);
    letter-spacing: 0.8px;
    padding: 15px;
    cursor: pointer;
    margin-bottom: 15px;
    border-radius: var(--border-radius-md);
    transition: all 0.25s;
}

.faqQuestion:last-of-type {
    margin-bottom: 0px;
}

.faqQuestion:hover {
    opacity: 0.8;
    transition: all 0.25s;
}

.faqQuestion i {
    opacity: 0.2;
    color: var(--text);
    float: right;
    transition: all 0.25s;
}

.faqQuestion.active {
    background-color: var(--primary);
}

.faqQuestion.active i {
    transform: rotate(-90deg);
}

.faqAnswer {
    font-family: var(--font_secondary);
    font-weight: 300;
    font-size: 0.9rem;
    display: none;
    padding: 15px;
    padding-top: 0px;
    opacity: 0.5;
    color: var(--text);
    margin-bottom: 20px;
}




/* INPUT */
input[type="range"] {
    border-radius: 2rem;
    color: var(--primary);
    --thumb-height: 1em;
    --track-height: 1em;
    --track-color: rgba(0, 0, 0, 0.1);
    --brightness-hover: 100%;
    --brightness-down: 100%;
    /* --clip-edges: 0.125em; */
    --clip-edges: 5em;
}

input[type="range"].win10-thumb {
    --clip-edges: 0.0125em;
}

/* === range commons === */
input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
}

input[type="range"]:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

input[type="range"]:disabled {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: 0.3;
    cursor: not-allowed;
}

/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -webkit-transition: all ease 100ms;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    position: relative;

}

input[type="range"]::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;

    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    /* border-radius: var(--thumb-width, var(--thumb-height)); */
    border-radius: 0px 30px 30px 0px;
    border-left: 10px solid var(--primary);

    -webkit-filter: brightness(100%);

    filter: brightness(100%);
    -webkit-clip-path: polygon(100% -1px,
            var(--clip-edges) -1px,
            0 var(--clip-top),
            -100vmax var(--clip-top),
            -100vmax var(--clip-bottom),
            0 var(--clip-bottom),
            var(--clip-edges) 100%,
            var(--clip-further) var(--clip-further));
    clip-path: polygon(100% -1px,
            var(--clip-edges) -1px,
            0 var(--clip-top),
            -100vmax var(--clip-top),
            -100vmax var(--clip-bottom),
            0 var(--clip-bottom),
            var(--clip-edges) 100%,
            var(--clip-further) var(--clip-further));
}

input[type="range"]:hover::-webkit-slider-thumb {

    -webkit-filter: brightness(var(--brightness-hover));

    filter: brightness(var(--brightness-hover));
    cursor: -webkit-grab;
    cursor: grab;

}

input[type="range"]:active::-webkit-slider-thumb {
    -webkit-filter: brightness(var(--brightness-down));
    filter: brightness(var(--brightness-down));
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    -moz-transition: all ease 100ms;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    background: #fff0;
}

input[type="range"]::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
}

input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    background: var(--track-color);
}

input[type="range"]::-moz-range-progress {
    -moz-appearance: none;
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
}



/* RESPONSIVE */
@media only screen and (max-width: 1000px) {

    #services .services_items {
        flex-wrap: wrap !important;
    }

    #services .services_items .services_item {
        flex: 40%;
    }

    #support .flex {
        flex-wrap: wrap;
    }

    #support .support_item {
        flex: 33%
    }

    .game_list_page #services .services_items {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 750px) {
    .stats {
        flex-direction: column;
        gap: 50px;
    }

    #about .stats {
        flex-direction: row;
    }

    .features {
        flex-direction: column;
    }

    .features .features_list,
    .features .features_carousel,
    #about .flex>div {
        width: 100%;
    }

    #reviews .review_cont .review_head img {
        display: none;
    }

    footer .footermain {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    footer .footermain>div {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }

    footer .footermain .social {
        align-items: center;
    }

    #team .team_grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .faqCont,
    .features .features_quote {
        width: 100%;
    }

    .product_cta {
        text-align: center;
        flex-direction: column;
    }

    .product_cta>div {
        width: 100%;
    }

    .game_list_page #services .services_items {
        grid-template-columns: 1fr 1fr;
    }

    .game_list_page .features .features_list {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 650px) {
    #support .support_item {
        flex: 100%
    }

    .plan_slider {
        text-align: center;
        flex-direction: column;
    }

    .plan_slider>div {
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    #services .services_items .services_item {
        flex: 100%;
    }

    #reviews .review_cont .review_items {
        flex-wrap: wrap;
    }

    #team .team_grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 500px) {
    #about .stats {
        flex-direction: column;
    }

    #team .team_grid {
        grid-template-columns: 1fr;
    }

    .game_list_page #services .services_items {
        grid-template-columns: 1fr;
    }

    .game_list_page .features .features_list {
        grid-template-columns: 1fr;
    }
}



/* MAP TEST */

.locations_map {
    position: relative;
    font-size: 16px;
}

.locations_map img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.pin {
    cursor: pointer;
    background: var(--primary);
    position: absolute;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    -webkit-animation: pulse-animation 1.5s infinite;
    animation: pulse-animation 1.5s infinite;
}

.pin span.pin_label {
    font-family: var(--font_secondary);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translatey(-50%);
    /* background: var(--primary); */
    opacity: 0.6;
    border-radius: 2em;
    padding: 0.5em 1em;
    font-size: 0.8em;
}

.dallastx {
    top: 46%;
    left: 19%;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.losangelesca {
    top: 45%;
    left: 13%;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.miamifl {
    top: 47%;
    left: 22%;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.metrony {
    top: 43%;
    left: 25%;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

@-webkit-keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px var(--primary_20);
    }

    50% {
        box-shadow: 0 0 0 0.5em var(--primary_20);
    }

    100% {
        box-shadow: 0 0 0 0.5em var(--primary_0);
    }
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px var(--primary_20);
    }

    50% {
        box-shadow: 0 0 0 0.5em var(--primary_20);
    }

    100% {
        box-shadow: 0 0 0 0.5em var(--primary_0);
    }
}

@media only screen and (max-width: 650px) {
    .locations_map {
        font-size: 10px;
        margin-left: -25px;
        margin-right: -25px;
    }
}

/* MAP POPUP */
.pin:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transition: all .25s ease-in;
}

.tooltip {
    display: flex;
    flex-direction: column;
    background: var(--dark2);
    font-family: var(--font_secondary);
    color: white;
    padding: 1.5em;
    font-size: 0.7em;
    border-radius: 4px;
    position: absolute;
    width: 15em;
    max-width: 80vw;
    text-align: center;
    left: 50%;
    transform: translatex(-50%);
    top: 1.5em;
    visibility: hidden;
    opacity: 0;
    transition: all .25s ease-out;
}

.tooltip>div {
    width: 100%;
    text-align: left;
    text-transform: uppercase;
}

.tooltip .server_name {
    font-size: 1em;
    color: var(--primary);
    margin-top: 1.5em;
}

.tooltip .location_name {
    font-size: 1.125em;
    color: var(--primary);
    margin-top: -.25em;
}

.tooltip .server_name:first-of-type {
    margin-top: 0;
}

.tooltip .server_uptime,
.tooltip .server_type {
    font-size: 0.8em;
    color: var(--text_60);
    opacity: 0.6;
}

.tooltip .server_uptime span,
.tooltip .server_type span {
    color: var(--text);
    float: right;
}


.tooltip[data-show] {
    display: block;
}

.tooltip_arrow,
.tooltip_arrow::before {
    left: 50%;
    position: absolute;
    width: 8px;
    height: 8px;
    transform: translateX(-4px);
    background: inherit;
}

.tooltip_arrow {
    visibility: hidden;
    top: -4px;
    left: 0;
    width: 100%;
}

.tooltip_arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
}

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pulse 1.5s ease-in-out infinite;
}

.loader-circle:before {
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 8px solid var(--primary);
    border-color: var(--primary) transparent var(--primary) transparent;
    animation: loader 1.2s linear infinite;
}

.loader-text {
    color: var(--primary);
    font-size: 24px;
    font-weight: bold;
    margin-top: 16px;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}