/*KEYFRAMES*/

:root {
    --bg-green: #4A6E88;
    --c-green: #32556F;
    --yellow: #fdd700;
    --white: #ffffff;
    --dark-gray: #15212a;
    --gray-body: #212529;
    --light-gray: #bcbcbc;
    --blue-link: #007bff;
    --link-gray: #808080;
}

@font-face {
    font-family: "Open Sans";
    src: url("Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf");
}

@-webkit-keyframes sk-bounce {
    0%,
    100% {
        -webkit-transform: scale(0)
    }
    50% {
        -webkit-transform: scale(1)
    }
}

@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0)
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

@keyframes PTSodEhH_draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes PTSodEhH_fade {
    0%,
    93.75% {
        stroke-opacity: 1;
    }
    to {
        stroke-opacity: 0;
    }
}


/*END KEYFRAMES*/


/*SETUP*/

html {
    font-family: "Open Sans", sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-body);
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f6f6f6;
    font-family: "Open Sans", sans-serif;
    overflow-x: hidden;
}


/*END SETUP*/


/*LOADER*/

#loader-area {
    background-color: #000;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0px;
    right: 0;
    margin: auto;
    opacity: 0.9;
}

.loader {
    position: fixed;
    height: 3em;
    width: 3em;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.bounce1,
.bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--yellow);
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.loader-text {
    color: #414142;
    left: -9px;
    margin-top: 50px;
    position: absolute;
    width: 150px;
}


/*END LOADER*/


/*HEADER*/

.upper-header {
    background-color: var(--dark-gray);
    padding: 5px 15px;
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

a {
    color: var(--blue-link);
    text-decoration: none;
    background-color: transparent;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.bg-green {
    background-color: var(--bg-green);
    color: var(--white);
}

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

small {
    font-size: 80%;
    font-weight: 400;
    color: var(--light-gray);
}

.yellow {
    color: var(--yellow) !important;
}

.color-green {
    color: var(--c-green) !important;
}

opa-8 {
    opacity: 0.8;
}

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

.space-between {
    justify-content: space-between;
}

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

.link ul {
    margin: 0;
    padding: 0;
}

.infonews-nav {
    display: inline-block;
}

.infonews-nav a {
    color: var(--light-gray) !important;
    font-size: 12px;
    margin-left: 20px;
    cursor: pointer;
    vertical-align: text-top;
}


/*MAIN NAV*/

.menu-wrap {
    position: absolute;
    width: 100%;
    padding: 25px 0px 0px 0px;
    background-color: transparent;
    z-index: 9;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.nav-menu {
    position: relative;
    width: 100%;
    z-index: 9;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

img {
    width: 100%;
}

.logo {
    max-height: 48px;
    width: 340px;
}

.logo img {
    width: 40%;
}

.nav-menu .navigation {
    padding-top: 5px;
}

.menu-toggle {
    position: relative;
    cursor: pointer;
    padding: 17px 37px 20px 2px;
}

.nav-menu .menu-toggle .icon {
    color: var(--white);
    font-size: 16px;
}

.nav-menu .menu-toggle {
    background-color: transparent;
    border: none;
    outline: none;
    display: none;
}

.nav {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar-nav {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-menu .main-menu .nav-item {
    list-style-type: none;
}

.nav-menu .main-menu a {
    font: 15px "Open Sans";
    margin-right: 35px;
    color: var(--white);
    position: relative;
    padding: 25px 0px 15px 0px;
    cursor: pointer;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.nav-menu .main-menu a.v-stroke {
    padding: 25px 0px 30px 0px;
}

.nav-menu .main-menu a.v-stroke:before {
    content: '';
    position: absolute;
    top: 55px;
    left: 50%;
    width: 2px;
    height: 0px;
    background: var(--white);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.nav-menu .main-menu>.menu-item:hover>.sub-menu {
    top: 55px;
    opacity: 1;
    visibility: visible;
}

.nav-menu .main-menu>.menu-item>.sub-menu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 9;
    padding: 10px 30px;
    border-radius: 12px;
    background-color: var(--white);
    top: 100%;
    margin-top: 0px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.nav-menu .main-menu .menu-item .sub-menu .service-list .service {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.nav-menu .main-menu .menu-item .sub-menu .media-body {
    display: table-cell;
    vertical-align: top;
}

.nav-menu .main-menu .menu-item .sub-menu .service-list .service .svg {
    display: table;
    height: 44px;
    width: 44px;
    margin: 10px 15px 0px 0px;
}

.small-svg {
    height: 44px;
    width: 44px;
}

.menu-item {
    list-style-type: none;
}

.nav-menu .main-menu .menu-item .sub-menu .service-list .service .media-body a {
    padding: 0;
    line-height: 34px;
    color: #313131;
    display: inline-block;
}

.nav-menu .main-menu .menu-item .sub-menu .service-list .service .media-body p {
    color: var(--link-gray);
    font-size: 12px;
}

.menu-item a:hover,
.nav-menu .main-menu .menu-item .sub-menu .service-list .service .media-body a:hover {
    color: #919AA8;
}

.menu-scroll {
    position: fixed;
    top: 0%;
    background-color: var(--bg-green);
    padding: 15px 0px 20px 0px;
}

.big-menu {
    padding: 0px !important;
    width: auto;
    right: 100px;
}

.top-head {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.big-menu .service .top-head div {
    padding: 12px 0px 0px 12px;
}

.big-menu .service,
.big-menu .service-list {
    padding: 10px 30px;
}

.col-lg-4,
.col-md-12,
.col-md-4,
.col-md-9,
.col-md-6,
.col-md-3 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
	margin-top: 10px;
}

.start-offer {
    padding: 0;
    -ms-flex: 0 0 25%;
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
}

.inner-div {
    height: 100%;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    padding: 30px;
    text-align: left;
    background-color: var(--yellow);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inner-div .title {
    color: #181b22;
    font-size: 22px;
}

.inner-div .inner-content {
    font-size: 14px;
    line-height: 26px;
    color: var(--link-gray);
}

.media-left {
    padding: 10px 15px 15px 0px;
    color: #9e9e9e;
}

#loadingIndicator, #results{
    display: none;
}
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}


/*BUTTON*/

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer !important;
    border: none;
    border-radius: 50px;
    color: var(--white);
    font-size: 14px;
    line-height: 1;
    margin: auto 0 0 0;
    padding: 17px 26px !important;
    position: relative;
    background-color: transparent;
    letter-spacing: 0.02em;
    font-family: "Open Sans";
    -webkit-box-shadow: 0 2px 8px 0 rgba(62, 62, 79, 0.23);
    box-shadow: 0 2px 8px 0 rgba(62, 62, 79, 0.23);
    -webkit-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms;
}

.btn-yellow-fill {
    background-color: var(--yellow) !important;
    color: #000 !important;
    border: none;
}

.btn.question {
    top: -2px;
    text-transform: uppercase;
    font-family: "Open Sans";
    padding: 8px 12px !important;
    font-size: 10px;
}

.btn:hover {
    -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background-color: var(--link-gray) !important;
    color: var(--white) !important;
}

.btn-yellow-fill:hover {
    background-color: var(--link-gray) !important;
    color: var(--white) !important;
    border: none;
}


/*CONTAINER SETUPS*/


/*SECTION SETUP*/

.height-100 {
    height: 90vh;
}

.dark-background {
    background-color: #1d262f;
}

#home {
    display: flex;
    align-items: center;
}


/*SVG SETUP*/

svg #svg-concept {
    stroke: var(--c-green);
}

#svg-ico {
    fill: var(--c-green);
}

.vps0,
.vps1,
.vps2,
.vps3,
.vps4 {
    fill: none;
    stroke: var(--white);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.vps1,
.vps2,
.vps3,
.vps4 {
    stroke: var(--c-green);
}

.vps2,
.vps3,
.vps4 {
    stroke: gray;
}

.vps3,
.vps4 {
    stroke: var(--white);
    stroke-width: 3;
}

.vps4 {
    stroke: var(--c-green);
}


/*rack svg*/

.rack0 {
    fill: none;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.rack0,
.rack1 {
    stroke: var(--white);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rack1,
.rack2,
.rack3,
.rack4 {
    fill: none;
    stroke-miterlimit: 10;
    animation: PTSodEhH_draw 0ms linear 1158ms forwards;
}

.rack2 {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--c-green);
}

.rack3,
.rack4 {
    stroke: gray;
}

.rack4 {
    stroke: var(--c-green);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/*balancing svg*/

.bal0,
.bal1 {
    stroke-miterlimit: 10;
}

.bal0 {
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: gray;
}

.bal1 {
    fill: var(--white);
    stroke: var(--c-green);
    stroke-width: 2;
}

.bal1,
.bal2 {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bal2,
.bal3,
.bal4 {
    fill: none;
    stroke: gray;
    stroke-miterlimit: 10;
}

.bal4 {
    stroke: var(--c-green);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bal5 {
    fill: var(--c-green);
}


/*api*/

.api0,
.api1 {
    fill: none;
    stroke: gray;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.api2,
.api4 {
    stroke: var(--c-green);
}

.api2 {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    fill: var(--white);
}

.api4 {
    fill: none;
}

.api4,
.api5,
.api8 {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.api5 {
    stroke: gray;
    stroke-width: 2;
    fill: none;
}

.api8 {
    fill: var(--white);
}


/*backups*/

.ba0,
.ba1 {
    fill: var(--white);
    stroke: gray;
    stroke-miterlimit: 10;
}

.ba1 {
    fill: none;
    stroke: #d8d8d8;
}

.ba2,
.ba3,
.ba4,
.ba5,
.ba6,
.ba7 {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.ba2 {
    stroke: var(--c-green);
    stroke-width: 2;
    fill: var(--white);
}

.ba3,
.ba4,
.ba5,
.ba6,
.ba7 {
    fill: none;
}

.ba3 {
    stroke-width: 3;
    stroke: var(--c-green);
}

.ba4,
.ba5,
.ba6,
.ba7 {
    stroke: gray;
}

.ba5,
.ba6,
.ba7 {
    stroke: var(--c-green);
}

.ba6,
.ba7 {
    fill: var(--white);
    stroke: gray;
}

.ba7 {
    stroke: var(--c-green);
    stroke-width: 1;
}


/*cpanel*/

.panel2,
.panel3,
.panel4,
.panel5,
.panel6 {
    fill: var(--white);
    stroke: var(--c-green);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.panel3,
.panel4,
.panel5,
.panel6 {
    fill: none;
    stroke: #d8d8d8;
}

.panel4,
.panel5,
.panel6 {
    stroke: var(--c-green);
}

.panel5,
.panel6 {
    stroke: gray;
}

.panel6 {
    stroke: var(--white);
}

.panel7 {
    fill: gray;
}


/*dns*/

.dns0,
.dns1 {
    stroke-miterlimit: 10;
}

.dns0 {
    stroke: gray;
    fill: none;
}

.dns1 {
    fill: var(--white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dns4,
.dns5,
.dns6 {
    fill: none;
    stroke-miterlimit: 10;
}

.dns4 {
    stroke: #d7d7d7
}

.dns5,
.dns6 {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dns6 {
    stroke: gray;
}

.dns7,
.dns8 {
    fill: var(--white);
}

.dns8 {
    stroke: gray;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}


/*domains*/

.install0,
.install2,
.install4 {
    fill: none;
    stroke: var(--c-green);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.install2,
.install4 {
    stroke: gray;
}

.install4 {
    fill: var(--white);
}

.install6 {
    fill: var(--c-green);
}

.install10 {
    fill: none;
    stroke: gray;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.install11 {
    fill: var(--white)
}

.install12 {
    fill: none;
    stroke: var(--c-green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}


/**/

.st1 {
    fill-rule: evenodd;
    clip-rule: evenodd;
}

.st2 {
    fill: none;
    stroke: gray;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}


/*monitoring*/

.mo0,
.mo1 {
    stroke-miterlimit: 10;
}

.mo0 {
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: var(--white);
    stroke: var(--c-green);
}

.mo1 {
    fill: none;
    stroke: #d8d8d8;
}

.mo2 {
    stroke: gray;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mo2,
.mo3,
.mo4,
.mo5 {
    fill: none;
    stroke-miterlimit: 10;
}

.mo3 {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--c-green);
}

.mo4,
.mo5 {
    stroke: gray
}

.mo5 {
    stroke: #d8d8d8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mo6 {
    stroke: #efefef;
}

.mo6,
.mo7,
.mo8 {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mo7 {
    stroke-dasharray: 2.9819, 2.9819;
    stroke: #efefef;
}

.mo8 {
    stroke: var(--c-green);
    stroke-width: 3;
    stroke-miterlimit: 10;
}


/*motpath*/

.st0 {
    opacity: .5 !important;
    fill: none !important;
    stroke: gray !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-miterlimit: 10 !important;
    stroke-opacity: .5 !important;
    enable-background: new !important;
}

.mot-bg-pattern {
    background-image: url('../images/motpath.svg');
    background-repeat: repeat;
}


/*os*/

.os0 {
    fill: var(--white);
}

.os1 {
    fill: var(--c-green);
}

.os2,
.os3 {
    fill: gray
}

.os3 {
    fill-rule: evenodd;
    clip-rule: evenodd;
}

.os4 {
    fill: var(--white);
    stroke: gray;
    stroke-miterlimit: 10;
}

.os4,
.os5 {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.os5,
.os6,
.os7 {
    fill: none;
    stroke: gray;
    stroke-miterlimit: 10;
}

.os7 {
    fill: var(--white);
    stroke: var(--c-green);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.os8 {
    fill: var(--c-green);
}

.os9 {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}


/*ssd*/

.ssd1 {
    fill: none;
    stroke: gray
}

.ssd1,
.ssd2,
.ssd3 {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.ssd2 {
    fill: none;
    stroke: #efefef
}

.ssd3 {
    stroke: gray
}

.ssd3,
.ssd4 {
    fill: var(--white)
}

.ssd4,
.ssd5 {
    stroke: var(--c-green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.ssd5,
.ssd7 {
    fill: none
}

.ssd8 {
    fill: var(--c-green);
}

.ssd9 {
    font-family: "Open Sans";
}

.ssd10 {
    font-size: 36px;
}


/*scalable*/

.scalable1,
.scalable2 {
    fill: var(--white);
    stroke: var(--c-green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.scalable2 {
    fill: none;
}

.scalable3 {
    fill: var(--white);
    stroke-miterlimit: 10;
}

.scalable3,
.scalable4 {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scalable4,
.scalable5,
.scalable6 {
    fill: none;
    stroke-miterlimit: 10;
}

.scalable5 {
    stroke-linecap: square;
    stroke: #d8d8d8;
    stroke-width: 2;
}

.scalable6 {
    stroke: var(--white);
    stroke-width: 3;
}

.scalable7 {
    fill: var(--c-green);
}

.scalable8 {
    stroke: gray;
}


/*performance*/

.perf0 {
    fill: var(--white);
}

.perf1,
.perf2 {
    fill: none;
    stroke: var(--c-green);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.perf2 {
    stroke: gray;
}

.perf3 {
    fill: var(--c-green);
}

.perf4 {
    fill: var(--white);
    stroke: gray;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}


/*provisioning*/

.prov0,
.prov1 {
    fill: none;
    stroke: gray;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.prov1 {
    stroke: var(--c-green);
}

.prov1,
.prov2 {
    stroke-width: 2;
}

.prov2,
.prov3,
.prov4 {
    fill: var(--white);
    stroke: gray;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.prov4 {
    stroke: var(--c-green);
}

.prov5,
.prov6,
.prov7 {
    fill: none;
    stroke: #d7d7d7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.prov6 {
    stroke-dasharray: 3.0246, 3.0246;
}

.prov7 {
    stroke-miterlimit: 10;
}


/*lost*/

.nfound0 {
    fill: none;
    stroke: gray;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.nfound1 {
    stroke: var(--c-green);
    stroke-width: 2;
}

.nfound1,
.nfound2,
.nfound3 {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.nfound2 {
    stroke-width: 2;
    stroke: gray;
}

.nfound3 {
    stroke: var(--c-green);
}


/*homepage svg*/

.custom-element-right {
    position: absolute;
    width: 100%;
    max-height: 500px;
    right: -200px;
    overflow: auto;
    margin: auto;
    top: 0;
    bottom: 0;
}


/*HEADINGS*/

.top-banner {
    position: relative;
    top: 20%;
}

.top-banner .heading {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    color: var(--white);
    display: inline-block;
    font-family: "Open Sans";
    font-weight: bold;
    line-height: 58px;
    font-size: 52px;
}

.top-banner .subheading {
    font-family: "Open Sans";
    color: var(--white);
    position: relative;
    line-height: 32px;
    font-size: 18px;
    margin-bottom: 50px;
    font-weight: 200;
}

.top-banner .subheading i {
    color: var(--c-green);
}


/*typing cursor*/

.typing-txt>.txt {
    border-right: 0.2rem solid var(--white);
}


/*BACK TO TOP BUTTON*/

.top-btn {
    display: inline-block;
    height: 42px;
    width: 42px;
    position: fixed;
    z-index: 99;
    bottom: 100px;
    right: 30px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    border-radius: 15px;
    background: var(--yellow);
    visibility: hidden;
    opacity: 0;
    -webkit-box-shadow: 0 2px 8px 0 rgb(62 62 79 / 15%);
    box-shadow: 0 2px 8px 0 rgb(62 62 79 / 15%);
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}

.top-btn i {
    top: 5px;
    color: var(--white);
    font-size: 31px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: absolute;
    right: 35px;
}

.visible-btn {
    visibility: visible;
    opacity: 1;
    z-index: 99;
}


/*SECTION 2 - PRICING*/

.margin-up120 {
    margin: -120px 0px 80px;
    position: relative;
    z-index: 1;
}


.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border-radius: 15px;
    margin-top: 50px;
    color: #181b22;
    font-family: "Open Sans";
    font-size: 28px;
}

.top-content {
    flex-grow: 1;
    
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
}


.italic-small {
    font-style: italic;
    font-size: 14px;
    color: var(--link-gray);
}

.price {
    color: #181b22;
    font-family: "Open Sans";
    font-size: 28px;
}

.pricing .wrapper i {
    font-size: 38px;
    color: #121e25;
    margin: 0px 15px 0px 0px;
}

.pricing .list-info i {
    color: var(--white) !important;
    float: left;
    padding: 5px 0px;
}

.pricing .list-info {
    padding: 20px 60px 40px 60px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    margin: 0px;
    list-style-type: none;
}

.pricing .list-info li {
    padding: 10px 0;
    font-size: 16px;
    font-family: "Open Sans";
    color: var(--white);
}

.darkgreen-color {
    color: var(--c-green) !important;
}

.bg-darkgreen {
    background-color: var(--c-green);
}

.list-info li>span {
    color: var(--white)!important;
}


/*CLOUD LOAD BALANCING - SECTION 3*/

.section-title {
    font-family: "Open Sans";
    font-size: 32px;
    margin-top: 0px;
    margin-bottom: 10px;
    text-transform: capitalize;
    position: relative;
    display: inline-block;
    color: #181b22;
    line-height: 34px;
}

.section-subtext {
    font-family: "Open Sans";
    color: var(--link-gray);
    font-size: 16px;
    margin-bottom: 0;
    line-height: 34px;
}

.info {
    font-size: 15px;
    line-height: 30px;
    color: var(--link-gray);
}

.normal-section {
    padding: 80px 0px;
    position: relative;
    z-index: 0;
}


/*SERVICES SECTION*/

.bg-yellow {
    background-color: var(--yellow);
}


/*svg bg*/

.margin-top30 {
    margin-top: 30px;
}


/*MAP SECTION*/

.bg-gray {
    background: linear-gradient(-60deg, #3a6173 0%, #16222a 100%) !important;
}

.color-white {
    color: var(--white);
}

.datacenters {
    border: solid 2px var(--white);
    width: 10px;
    height: 10px;
    border-radius: 15px;
    cursor: pointer;
    position: absolute;
    background: var(--c-green);
}


/*mobile positions*/

.sarajevo {
    top: 69%;
    left: 53%;
}

.zagreb {
    top: 68%;
    left: 52.5%;
}

.belgrade {
    top: 68.5%;
    left: 53.8%;
}

.kragujevac {
    top: 69.5%;
    left: 53.8%;
}

.new-york {
    top: 68.5%;
    left: 27.2%;
}

.fort-worth {
    top: 71%;
    left: 20%;
}

.los-angeles {
    top: 71%;
    left: 14%;
}

.stockholm {
    top: 61%;
    left: 51%;
}

.munich {
    top: 65%;
    left: 50.5%;
}

.graz {
    top: 66%;
    left: 51.5%;
}

.tokyo {
    top: 66%;
    left: 87.5%;
}

.popover-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: -165px;
    top: 50px;
    transform: translate(0, 10px);
    background-color: var(--white);
    padding: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    width: 350px;
    border-radius: 10px;
}

.popover-content:before {
    position: absolute;
    z-index: -1;
    content: "";
    right: calc(50% - 10px);
    top: -8px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent var(--white) transparent;
    transition-duration: 0.3s;
    transition-property: transform;
}

.datacenters:hover .popover-content {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    transform: translate(0, -20px);
    transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.popover-title {
    font-size: 15px;
    padding: 10px 20px;
    margin: 0;
}

.popover-message {
    text-align: center;
    font-size: 12px;
    padding: 10px 20px;
}


/*CASESTUDY SECTION*/

.margin-up80 {
    margin: -80px 0px 80px;
    position: relative;
    z-index: 1;
}

.sec-pad80 {
    padding: 80px;
}

.casestudy img {
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.border-r15 {
    border-radius: 15px;
}


/*HELP SECTION*/

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

.help-container {
    position: relative;
    height: 145px;
    margin-top: 50px;
    border-radius: 15px;
    background-color: var(--white);
    -webkit-box-shadow: 0 5px 15px 0 rgba(110, 110, 110, 0.1);
    box-shadow: 0 5px 15px 0 rgba(110, 110, 110, 0.1);
    padding: 0px 30px;
    margin: 0px auto;
}


/*FOOTER*/

footer {
    padding: 80px 0px;
    position: relative;
    z-index: 0;
    background-color: var(--dark-gray);
    background-position: center;
    border: none;
}

.footer-top {
    padding: 80px 0px 20px 0px;
}

.heading {
    font-size: 18px;
    font-family: "Open Sans";
    color: var(--white);
    margin-bottom: 10px;
    display: inline-block;
}

.footer-menu {
    padding: 0;
    margin: 0;
}

footer .footer-menu .menu-item a {
    color: var(--link-gray);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.copyright {
    font-family: "Open Sans";
    font-size: 13.5px;
    color: var(--link-gray);
    padding-top: 10px;
    padding-bottom: 30px;
}

.social-media a {
    display: inline-block;
    margin: 0px 10px 20px 0px;
}

.social-media i {
    color: var(--bg-green);
}

.subscribe-box {
    margin: 40px 0px;
}

.width-100 {
    width: 100%;
}

.general-input {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.fill-input {
    width: 100%;
    font-size: 15px;
    font-family: "Open Sans";
    color: #000;
    border: solid 1px #efefef;
    border-radius: 50px;
    padding: 15px 20px 12px 30px;
    background-color: var(--white);
    outline: 0;
    -webkit-box-shadow: 0 2px 8px 0 rgba(62, 62, 79, 0.23);
    box-shadow: 0 2px 8px 0 rgba(62, 62, 79, 0.23);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.general-input input.btn {
    border: none;
    right: 0px;
    position: absolute;
}

.margin-left25 {
    margin-left: 25%;
}

.contact-form {
    border-radius: 15px;
    width: 100%;
    position: relative;
    padding: 80px;
    display: inline-block;
}

.bg-white {
    background-color: var(--white);
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.contact-form label i {
    color: #d8d8d8;
    top: 42px;
    right: 40px;
    position: absolute;
    display: inline-block;
}

.contact-form input,
.contact-form select {
    width: 100%;
    padding: 15px 60px 15px 30px;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    background-color: var(--white) !important;
    border: solid 1px #d8d8d8 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    box-shadow: none;
}

.form-control {
    height: auto;
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.form-control {
    padding: 10px 15px;
    outline: 0;
    border-radius: 10px;
    font-size: 15px;
    font-family: "Open Sans";
    color: var(--link-gray);
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    resize: vertical;
    min-height: 150px;
}

.margin-select {
    margin-top: 1.5rem;
}


/*SHARED HOSTING PAGE*/

.run-switch {
    position: relative;
    cursor: pointer;
    margin-bottom: 10px;
    z-index: 3;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.run-switch div {
    display: inline-block;
}

.run-switch .switch:after {
    position: absolute;
    margin-top: -11px;
    left: 37.5px;
    background-color: var(--white);
    border-radius: 50%;
    content: "";
    width: 22px;
    height: 22px;
    top: 50%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.run-switch .monthly,
.run-switch .annually {
    font-size: 12px;
    color: var(--link-gray);
    font-family: "Open sans Semibold" !important;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.run-switch .switch {
    position: relative;
    -webkit-box-shadow: 0 2px 8px 0 rgba(62, 62, 79, 0.23);
    box-shadow: 0 2px 8px 0 rgba(62, 62, 79, 0.23);
    vertical-align: middle;
    width: 65px;
    height: 30px;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 15px;
    background-color: var(--yellow);
    z-index: 3;
}

.run-switch .switch.on:after {
    left: 5px;
}

.active {
    color: var(--white) !important;
}

.period {
    font-family: "Open Sans";
    font-size: 16px;
}

.justify-content-end {
    -ms-flex-pack: end !important;
    -webkit-box-pack: end !important;
    justify-content: flex-end !important;
}

.margin-up200 {
    margin-top: -200px;
    position: relative;
    z-index: 1;
}

.sec-main {
    -webkit-box-shadow: 0 5px 15px 0 rgba(110, 110, 110, 0.1);
    box-shadow: 0 5px 15px 0 rgba(110, 110, 110, 0.1);
    border-radius: 15px;
    position: relative;
    padding: 80px 80px;
}

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

.sec-main .row {
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 80px;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.row-reverse {
    flex-direction: row-reverse;
}

table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--gray-body);
    border-collapse: collapse;
}

table td {
    font-family: "Open Sans";
    color: var(--link-gray);
    border-top: none;
    border-bottom: solid 1px #d8d8d8;
    padding: 20px 20px;
}

table td:first-child {
    padding-left: 0px;
    min-width: 200px;
    text-align: left;
    border-left: none;
    color: #212122;
}

.border-bottom-none {
    border-bottom: none;
}

/* Basic table styling */
.header-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
}

.header-table th,
.header-table td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

.header-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* Responsive table styles */
@media (max-width: 768px) {
	.height-100{height:100vh;}
	.top-banner{top: 8%;} 
    .header-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .header-table thead,
    .header-table tbody,
    .header-table tr,
    .header-table th,
    .header-table td {
        display: block;
    }

    .header-table thead {
        display: none; /* Hide thead on small screens */
    }

    .header-table tr {
        margin-bottom: 10px;
        border: 1px solid #ddd;
    }

    .header-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid #ddd;
    }

    .header-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 50%;
        padding-right: 10px;
        text-align: left;
        font-weight: bold;
    }
}

/*color buttons*/

.color-buttons {
    position: fixed;
    top: 40%;
    right: 50px;
}

.color-btn-green,
.color-btn-yellow,
.color-btn-gray {
    display: block;
    width: 15px;
    height: 15px;
    margin-top: 10px;
}

.color-btn-green {
    background-color: #4A6E88 !important;
}

.color-btn-yellow {
    background-color: #EB6440 !important;
}

.color-btn-gray {
    background-color: #495057 !important;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    .sarajevo {
        top: 49%;
        left: 53%;
    }
    .zagreb {
        top: 48%;
        left: 52.5%;
    }
    .belgrade {
        top: 48.5%;
        left: 53.8%;
    }
    .kragujevac {
        top: 49.5%;
        left: 53.8%;
    }
    .new-york {
        top: 48.5%;
        left: 27.2%;
    }
    .fort-worth {
        top: 53.5%;
        left: 20%;
    }
    .los-angeles {
        top: 52.5%;
        left: 14%;
    }
    .stockholm {
        top: 41%;
        left: 51%;
    }
    .munich {
        top: 45%;
        left: 50.5%;
    }
    .graz {
        top: 46%;
        left: 51.5%;
    }
    .tokyo {
        top: 52%;
        left: 85.5%;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    .col-md-12 {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .col-md-9 {
        -ms-flex: 0 0 75%;
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-md-6 {
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-md-3 {
        -ms-flex: 0 0 25%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-md-4 {
        -ms-flex: 0 0 33.333%;
        -webkit-box-flex: 0;
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        padding: 0px 15px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (max-width: 767px) {
    .upper-header {
        display: none;
    }
    .logo {
        padding-left: 50px;
    }
    .nav-menu .menu-toggle {
        padding: 7px 6px 4px 6px;
        display: block;
        right: 50px;
        top: -5px;
        z-index: 1000;
    }
    .nav-menu .main-menu {
        display: block;
        text-align: center;
        position: fixed;
        height: 100%;
        width: 100%;
        background: var(--dark-gray);
        top: 50px;
        left: 0;
        z-index: 999;
        overflow-y: auto;
        padding: 0px 0 30px;
        -webkit-transform: translate3d(0, 200%, 0);
        transform: translate3d(0, 200%, 0);
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }
    .show-menu {
        -webkit-transform: translateX(0) !important;
        transform: translateX(0) !important;
        padding: 80px 20px 80px !important;
        list-style-type: none !important;
    }
    .nav-menu .main-menu>.menu-item {
        width: 100%;
        float: none;
        margin-left: 0;
        padding: 15px 0px;
        cursor: pointer;
    }
    .nav-menu .main-menu .menu-item .sub-menu .service-list .service .svg,
    .sub-menu .service-list .service .media-body p,
    .top-head,
    hr,
    .start-offer {
        display: none;
    }
    .sub-menu-mob {
        display: block;
        width: 100% !important;
        border: 0 none !important;
        text-align: center !important;
        color: var(--white) !important;
        background-color: transparent !important;
        -webkit-transform: initial !important;
        transform: initial !important;
        position: static !important;
        padding-inline-start: 0px;
    }
    .nav-menu .main-menu .menu-item .sub-menu .service-list .service .media-body a {
        color: var(--white);
        text-align: center;
    }
    .nav-menu .main-menu .menu-item .sub-menu .media-body {
        width: 100%;
    }
    .nav-menu .main-menu .menu-item .sub-menu .service-list .service {
        width: 100%;
    }
}