@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    --primary-color: #fff;
    --secondary-color: #19202d;
    --accent: #76d978;
    --text-color: #686e78;
    --border-color: #e4e4e4;
    --yellow-color: #00c8ff;
    --orange-color: #f47474;
    --light-blue: #7690d9;
}
* {
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    word-break: break-word;
}
/* generics start */
h1 {
    font-size: 56px;
    line-height: 61px;
    font-weight: 700;
    color: var(--secondary-color);
}
h2 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--secondary-color);
}
h3 {
    font-size: 36px;
    line-height: 48px;
    font-weight: 700;
    color: #ffffff;
}
h4 {
    font-size: 26px;
    line-height: 34px;
    font-weight: 600;
    color: var(--secondary-color);
}
h5 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: var(--secondary-color);
}
h6 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    color: var(--secondary-color);
}
.padding-top {
    padding-top: 150px;
}
.padding-bottom {
    padding-bottom: 150px;
}
.p-100{
    padding-top: 100px;
    padding-bottom: 100px;
}
.pt-100{
    padding-top: 100px;
}
.pb-100{
    padding-bottom: 100px;
}
.pb-120{
    padding-bottom: 120px;
}
.pt-120{
    padding-top: 120px;
}
a:hover {
    text-decoration: none;
}
.light-bg{
    background: #f9f9f9;
}
.primary-btn a ,
.secondary-btn a,
.generic-btn a{
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    height: 50px;
    border-radius: 14px;
    background: var(--primary-color);
    color: var(--accent);
    padding: 8px 30px;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    transition: .2s ease-in-out;
    cursor: pointer;
    text-transform: uppercase;
    border: 1px solid var(--accent);
}
.secondary-btn a{
    color: var(--secondary-color);
    background: var(--yellow-color);
    border: 1px solid var(--yellow-color);
}
.generic-btn a{
    background: var(--accent);
    color: var(--yellow-color);
}
.generic-title {
    padding: 0 194px;
    margin-bottom: 71px;
}
.generic-title h2{
    margin-bottom: 13px;
}
.generic-title p{
    line-height: 28px;
    margin-bottom: 0;
}
.primary-btn a:hover{
    color: var(--primary-color);
    background: var(--accent);
}
a:hover{
    color: var(--yellow-color);
}
.secondary-btn a:hover{
    color: var(--primary-color);
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}
/* header section styling start here */
.header-main-con {
    position: absolute;
    top: 33px;
    z-index: 999;
}
.header-main-con .collapse.navbar-collapse {
    justify-content: end;
    margin-right: 35px;
}
.header-main-con .navbar .navbar-nav .nav-link {
    font-weight: 500;
    color: var(--primary-color);
    font-size: 16px;
    line-height: 18px;
    transition: .2s ease-in-out;
    text-transform: capitalize;
}
.header-main-con .navbar .navbar-nav .nav-link.active,
.header-main-con .navbar .navbar-nav .nav-link:hover{
    color: var(--yellow-color);
}
.header-main-con .navbar-light .navbar-brand {
    margin-right: 39px;
}
.header-main-con .navbar-brand figure img {
    height: 40px;
    width: auto;
}
.copyright-logo-con figure img {
    height: 35px;
    width: auto;
}
.header-main-con .navbar .navbar-nav {
    gap: 39px;
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    margin: 0;
    padding-top: 25px;
    background: transparent;
    border: 0;
    width: 240px;
    padding-bottom: 0;
    border-radius: 10px;
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul {
    padding: 10px;
    border-radius: 10px;
    background: var(--secondary-color);
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li a.dropdown-item{
    padding: 5px 16px;
    margin-bottom: 1px;
    color: var(--primary-color);
    background: transparent;
    border-radius: 10px;
}
.header-main-con .navbar-expand-lg .navbar-nav li ul li.dropdown-item a.dropdown-toggle{
    width: 100%;
    display: block;
    color: var(--primary-color);
}
.sub-menu-dropdown{
    padding: 5px 15px;
}
.header-main-con .navbar .navbar-nav .sub-menu-dropdown .nav-link{
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-color);
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu.sub-menu {
    position: absolute;
    margin: 0;
    padding: 10px;
    background: var(--secondary-color);
    border: 0;
    width: 230px;
    top: 0;
    left: -240px;
    border-radius: 10px;
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu.sub-menu ul {
    padding: 0 5px;
    border-top: 0;
}
.header-main-con ul li.nav-item.dropdown.show .dropdown-menu.sub-menu{
    display: none;
}
.header-main-con ul li.nav-item.dropdown.show .dropdown-item.dropdown.show .dropdown-menu.sub-menu{
    display: block;
} 
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li a:hover{
    color: var(--secondary-color) !important;
    background: var(--primary-color);
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li a.dropdown-item:active,
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li a.dropdown-item.active{
    color: var(--secondary-color);
    background-color: var(--yellow-color);
}
.dropdown-item.active, 
.dropdown-item:active{
    color: var(--button-color);
    background-color: var(--primary-color);
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li.dropdown-item{
    padding: 0;
    cursor: pointer;
    border-radius: 10px;
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li.dropdown-item:hover,
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li.dropdown-item:focus
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li.dropdown-item:active{
    background: transparent;
    color: var(--secondary-color);
}

.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li.dropdown-item a.dropdown-toggle{
    padding: 5px 16px;
    border-radius: 10px;
    margin-bottom: 1px;
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li.dropdown-item.active {
    border-radius: 10px;
}
.header-main-con .navbar-expand-lg .navbar-nav .dropdown-menu ul li.dropdown-item .dropdown-toggle.active{
    background: var(--yellow-color);
    color: var(--secondary-color);
    margin-bottom: 1px;
}
.header-main-con .navbar {
    max-width: 1850px;
    margin: 0 auto;
}
.header-main-con .collapse.navbar-collapse > a{
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
    color: var(--primary-color);
}
.header-main-con .collapse.navbar-collapse > a:hover{
    color: var(--yellow-color);
}
.login-btn a {
    gap: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    height: 48px;
    transition: .3s ease-in-out;
    color: var(--secondary-color);
    padding: 10px 26px;
    border-radius: 34px;
    background: var(--yellow-color);
}
.login-btn a:hover{
    background: var(--secondary-color);
    color: var(--primary-color);
}
.chat-btn a {
    height: 48px;
    width: 48px;
    padding: 6px 16px;
    display: flex;
    border-radius: 100%;
    align-items: center;
    transition: .3s ease-in-out;
    justify-content: center;
    background: var(--accent);
    color: var(--secondary-color);
}
.chat-btn a:hover{
    color: var(--primary-color);
    background: var(--secondary-color);
}
.nav-btns {
    gap: 10px;
}
/* header section styling end here */
.banner-main-con {
    background: none;
    background-color: #19202d;
    padding: 148px 0 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 797px;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
/* Video fills the banner exactly like the old background image */
.banner-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}
/* Subtle overlay — kept light so the video colours show through */
.banner-main-con::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, 0.25);
    z-index: 1;
}
/* White wave at the bottom of the banner */
.banner-bottom-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}
.banner-bottom-wave svg {
    display: block;
    width: 100%;
    height: 90px;
}
.banner-inner-con {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 0 170px;
    position: relative;
    z-index: 2;
}
.banner-inner-con span,
.banner-inner-con p,
.banner-inner-con h1{
    color: var(--primary-color);
}
.banner-inner-con h1 span{
    color: var(--yellow-color);
}
.banner-inner-con h1{
    margin-bottom: 16px;
}
.banner-inner-con p{
    margin-bottom: 25px;
}
.banner-inner-con > span,
.sub-banner-inner-con span {
    padding: 8px 17px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    height: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    border-radius: 20px;
    justify-content: center;
    background: var(--orange-color);
    color: var(--secondary-color);
}
.generic-btn a {
    height: 58px;
    font-size: 16px;
    line-height: 24px;
    border-radius: 30px;
    font-weight: 600;
    color: var(--secondary-color);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    padding: 10px 35px;
    transition: .3s ease-in-out;
    box-shadow: 20px 20px 10px 0 rgb(0 0 79 / 5%);
}
.generic-btn a:hover{
    color: var(--secondary-color);
    background: var(--yellow-color);
}
.generic-link a{
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 4px;
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}
.generic-link a:hover{
    color: var(--yellow-color);
    border-color: var(--yellow-color);
}
.search-domain-inner-con {
    max-width: 730px;
    margin: 0 auto 82px;
    text-align: center;
}
.search-domain-box p{
    font-size: 24px;
    line-height: 28px;
    font-weight: 300;
    margin-bottom: 34px;
    color: var(--primary-color);
}
.search-domain-outer-con {
    margin-top: -265px;
}
.domain-serach-con .search-btn {
    display: flex
;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 10px 13px;
    border-radius: 30px;
    background: var(--yellow-color);
    outline: 0;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease-in-out;
    border: 2px solid var(--yellow-color);
    width: 173px;
}
.domain-serach-con .search-btn:hover{
    color: var(--yellow-color);
    background: var(--secondary-color);
}
.domain-serach-con input{
    background: rgb(0 0 0 / 30%);
    color: var(--primary-color);
    padding: 10px 26px;
    border-radius: 30px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid var(--primary-color);
    width: 100%;
}
.domain-serach-con input:focus{
    outline: none;
    border-color: var(--yellow-color);
}
.domain-serach-con input::placeholder{
    color: var(--primary-color);
}
.domain-serach-con {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.domain-boxes-outer {
    display: grid;
    gap: 30px;
    grid-template-columns: 23% 23% 23% 23%;
    margin-bottom: 120px;
}
.domain-detail-top-con {
    text-align: center;
    border: 1px solid;
    padding: 12px 30px 14px;
    border-radius: 8px;
    background: var(--primary-color);
    height: 100%;
}
.domain-detail-con {
    display: flex;
    flex-direction: column;
}
.domain-detail-top-con figure{
    margin-bottom: 7px;
}
.domain-detail-top-con p{
    margin-bottom: 0;
    font-size: 12px;
    line-height: 18px;
}
.domain-detail-bottom-con {
    padding: 9px 12px 10px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    background: var(--light-blue);
    width: 88%;
    margin: 0 auto;
}
.domain-detail-bottom-con ul {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.domain-detail-bottom-con ul li{
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    color: var(--secondary-color);
}
.domain-detail-bottom-con ul li span,
.domain-detail-bottom-con ul li small{
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    color: var(--secondary-color);
}
.domain-detail-bottom-con ul li small{
    text-decoration: line-through;
}
.domain-boxes-outer .domain-detail-con:nth-child(2) .domain-detail-top-con{
    border-color: var(--yellow-color);
}
.domain-boxes-outer .domain-detail-con:nth-child(3) .domain-detail-top-con{
    border-color: var(--orange-color);
}
.domain-boxes-outer .domain-detail-con:nth-child(4) .domain-detail-top-con{
    border-color: var(--accent);
}
.domain-boxes-outer .domain-detail-con:nth-child(2) .domain-detail-bottom-con{
    background: var(--yellow-color);
}
.domain-boxes-outer .domain-detail-con:nth-child(3) .domain-detail-bottom-con{
    background: var(--orange-color);
}
.domain-boxes-outer .domain-detail-con:nth-child(4) .domain-detail-bottom-con{
    background: var(--accent);
}
.search-domain-con{
    position: relative;
}
.search-domain-con::before {
    content: "";
    background: url(../images/hosting-plan-bg-img.jpg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 108%;
    position: absolute;
    left: 0;
    top: -80px;
    z-index: -1;
}
/*  */
.hosting-types-inner-con {
    display: grid;
    gap: 30px;
    grid-template-columns: 31.5% 31.5% 31.5%;
}
.hosting-type-box {
    background: var(--primary-color);
    border-radius: 20px;
    overflow: hidden;
}
.hosting-type-content-con {
    padding: 32px 39px 51px;
    display: flex;
    height: 100%;
    flex-direction: column;
}
.hosting-type-content-con .primary-btn{
    margin-top: auto;
}
.hosting-price-box {
    display: flex;
    margin-bottom: 35px;
}
.hosting-price-box span.dollar {
    position: relative;
    top: 5px;
    font-size: 24px;
    line-height: 24px;
    color: var(--secondary-color);
    padding-right: 11px;
}
.hosting-price-box span.numeric1 {
    font-size: 56px;
    line-height: 48px;
    font-weight: 700;
    color: var(--secondary-color);
}
.hosting-price-box .month-title {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-left: 8px;
    gap: 2px;
    margin-top: -3px;
}
.hosting-price-box .numeric2 {
    font-size: 24px;
    color: var(--secondary-color);
}
.month-title small {
    font-size: 16px;
    line-height: 16px;
    display: block;
}
.hosting-type-box-heading {
    display: flex;
    margin-bottom: 31px;
    align-items: center;
    justify-content: space-between;
}
.hosting-type-box-heading h6{
    margin-bottom: 0;
}
span.save-amount {
    font-size: 14px;
    line-height: 16px;
    background: aqua;
    padding: 7px 20px;
    border-radius: 25px;
    margin-bottom: 24px;
    display: inline-block;
}
.hosting-type-content-con ul li span{
    font-weight: 600;
    color: #333333;
}
.hosting-type-content-con ul li {
    padding-left: 34px;
    margin-bottom: 7px;
}
.hosting-type-content-con ul li i{
    font-size: 14px;
    position: absolute;
    left: 0;
    top: 9px;
}
.hosting-type-content-con ul{
    margin-bottom: 34px;
}
.hosting-type-content-con .primary-btn a{
    border-radius: 30px;
    width: 100%;
}
.hosting-type-content-con.orange-plan{
    background: url(../images/shared-plan-bg-img.jpg) no-repeat center;
    background-size: cover;
}
.hosting-type-content-con.orange-plan .save-amount {
    color: var(--orange-color);
    background: rgb(244 116 116 / 15%);
}
.hosting-type-content-con.orange-plan ul li i{
    color: var(--orange-color);
}
.hosting-type-content-con.orange-plan .primary-btn a{
    color: var(--primary-color);
    background: var(--orange-color);
    border-color: var(--orange-color);
}
.hosting-type-content-con.blue-plan {
    background: url(../images/dedicated-plan-bg-img.jpg) no-repeat center;
    background-size: cover;
}
.hosting-type-content-con.blue-plan .save-amount {
    color: var(--light-blue);
    background: rgb(118 144 217 / 15%);
}
.hosting-type-content-con.blue-plan ul li i{
    color: var(--light-blue);
}
.hosting-type-content-con.blue-plan .primary-btn a{
    color: var(--primary-color);
    background: var(--light-blue);
    border-color: var(--light-blue);
}
.hosting-type-content-con.green-plan{
    background: url(../images/vps-plan-bg-img.jpg) no-repeat center;
    background-size: cover;
}
.hosting-type-content-con.green-plan .save-amount {
    color: var(--accent);
    background: rgb(118 217 120 / 15%);
}
.hosting-type-content-con.green-plan ul li i{
    color: var(--accent);
}
.hosting-type-content-con.green-plan .primary-btn a{
    color: var(--primary-color);
    background: var(--accent);
    border-color: var(--accent);
}
.hosting-type-content-con .primary-btn a:hover{
    color: var(--yellow-color);
    border-color: var(--yellow-color);
    background: var(--secondary-color);
}
/*  */
.why-choose-hostiko-inner-con,
.why-choose-peak99-inner-con {
    display: grid;
    gap: 112px;
    align-items: center;
    grid-template-columns: 41% 49%;
}
.why-choose-hostiko-content span,
.why-choose-peak99-content span {
    padding: 4px 35px;
    border-radius: 30px;
    background: var(--yellow-color);
    color: var(--secondary-color);
    margin-bottom: 55px;
}
.why-choose-hostiko-content h2,
.why-choose-peak99-content h2{
    margin-bottom: 25px;
}
.why-choose-hostiko-content p:last-child,
.why-choose-peak99-content p:last-child{
    margin-bottom: 0;
}
/*  */
.hosting-features-main-con {
    background: url(../images/hostiko-features-bg.png) no-repeat center;
    background-size: cover;
    padding-bottom: 290px;
}
.hosting-features-inner-con {
    display: grid;
    gap: 30px;
    grid-template-columns: 23% 23% 23% 23%;
}
.hosting-features-main-con .generic-title h2{
    color: var(--primary-color);
}
.hosting-features-main-con .generic-title p{
    color: var(--yellow-color);
}
.feature-main-box {
    padding: 46px 30px;
    text-align: center;
    background: var(--primary-color);
    border-radius: 20px;
    border: 1px solid transparent;
    transition: .3s ease-in-out;
}
.feature-main-box figure {
    width: 65px;
    height: 65px;
    border-radius: 100%;
    margin: 0 auto 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease-in-out;
}
.hosting-features-inner-con .feature-main-box:first-child figure{
    background: var(--yellow-color);
}
.hosting-features-inner-con .feature-main-box:first-child:hover{
    border-color: var(--yellow-color);
}
.hosting-features-inner-con .feature-main-box:nth-child(2) figure{
    background: var(--light-blue);
}
.hosting-features-inner-con .feature-main-box:nth-child(2):hover{
    border-color: var(--light-blue);
}
.hosting-features-inner-con .feature-main-box:nth-child(3) figure{
    background: var(--accent);
}
.hosting-features-inner-con .feature-main-box:nth-child(3):hover{
    border-color: var(--accent);
}
.hosting-features-inner-con .feature-main-box:nth-child(4) figure{
    background: var(--orange-color);
}
.hosting-features-inner-con .feature-main-box:nth-child(4):hover{
    border-color: var(--orange-color);
}
.hosting-features-inner-con .feature-main-box:hover figure{
    transform: translateY(-6px);
}
.feature-main-box p{
    font-size: 14px;
    line-height: 22px;
}
.feature-main-box p:last-child{
    margin-bottom: 0;
}
.hosting-features-main-con .generic-title h2{
    margin-bottom: 15px;
}
/*  */
.improvement-main-con .generic-title {
    padding: 0 160px;
    margin-bottom: 60px;
}
.improvement-inner-con {
    display: grid;
    gap: 28px;
    z-index: 1;
    position: relative;
    align-items: center;
    grid-template-columns: 49% 48.5%;
}
.improvement-box {
    padding: 32px 34px;
    display: grid;
    gap: 18px;
    grid-template-columns: 11% 85%;
    border: 1px solid transparent;
    border-radius: 20px;
    transition: .3s ease-in-out;
}
.improvement-box:hover {
    border-color: var(--accent);
    box-shadow: 10px 10px 30px rgb(155 224 157 / 20%);
}
.improvement-box p{
    font-size: 14px;
    line-height: 24px;
}
.improvement-box p:last-child{
    margin-bottom: 0;
}
.improvement-icon figure{
    width: 51px;
    height: 51px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.improvement-icon {
    padding-top: 7px;
}
.improvement-content-con .improvement-box:first-child:hover {
    border-color: var(--light-blue);
    box-shadow: 10px 10px 30px rgb(118 144 217 / 20%);
}
.improvement-content-con .improvement-box:nth-child(2):hover {
    border-color: var(--accent);
    box-shadow: 10px 10px 30px rgb(118 217 120 / 20%);
}
.improvement-content-con .improvement-box:nth-child(3):hover {
    border-color: var(--orange-color);
    box-shadow: 10px 10px 30px rgb(244 116 116 / 20%);
}
.improvement-content-con .improvement-box:nth-child(4):hover {
    border-color: var(--yellow-color);
    box-shadow: 10px 10px 30px rgb(244 228 116 / 20%);
}
.improvement-txt-con h6{
    margin-bottom: 9px;
}
/*  */
.advnace-features-main-con {
    position: relative;
    background: url(../images/advance-features-bg-img.png) no-repeat center;
    background-size: cover;
    margin-top: -240px;
    height: 961px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.advnace-features-main-con .container{
    position: relative;
}
.advnace-features-main-con .generic-title {
    margin-bottom: 70px;
}
.advnace-features-main-con .generic-title h2{
    color: var(--primary-color);
}
.advnace-features-inner-con {
    display: grid;
    gap: 30px;
    position: relative;
    grid-template-columns: 31.5% 31.5% 31.5%;
}
.advnace-feature-box{
    text-align: center;
}
.advnace-feature-box p{
    color: var(--primary-color);
}
.advnace-feature-box i{
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 22px;
}
.advnace-feature-box:first-child i{
    color: var(--yellow-color);
}
.advnace-feature-box:nth-child(2) i{
    color: var(--accent);
}
.advnace-feature-box:nth-child(3) i{
    color: var(--orange-color);
}
.advnace-feature-box p:last-child{
    margin-bottom: 0;
}
.advnace-feature-box:nth-child(2){
    padding: 0 30px;
}
/*  */
.hosting-solution-content-con p{
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 23px;
}
.hosting-solution-inner-con {
    display: grid;
    gap: 100px;
    grid-template-columns: 34% 57%;
    align-items: center;
    margin-top: -50px;
}
.hosting-solution-content-con ul li {
    padding-left: 33px;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 17px;
}
.hosting-solution-content-con ul li:last-child{
    margin-bottom: 0;
}
.hosting-solution-content-con ul li i {
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 20px;
    color: var(--accent);
}
.hosting-solution-content-con h2{
    margin-bottom: 15px;
}
/*  */
.client-review-slider .owl-nav,
.client-review-slider .owl-dots{
    display: none;
}
.client-review-outer-con .btn-wrap .prev-btn-client, .client-review-outer-con .btn-wrap .next-btn-client {
    border: 0;
    position: absolute;
    cursor: pointer;
    width: 65px;
    height: 65px;
    background: var(--yellow-color);
    border-radius: 100%;
    transition: .3s ease-in-out;
    outline: none;
}
.client-review-outer-con .btn-wrap .prev-btn-client:hover, .client-review-outer-con .btn-wrap .next-btn-client:hover{
    background: var(--orange-color);
}
.client-review-outer-con .btn-wrap .prev-btn-client i, .client-review-outer-con .btn-wrap .next-btn-client i {
    font-size: 26px;
    line-height: 34px;
}
.client-review-outer-con .btn-wrap .prev-btn-client i{
    margin-left: -3px;
}
.client-review-outer-con .btn-wrap .next-btn-client i{
    margin-right: -3px;
}
.client-review-outer-con .btn-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    top: 41%;
    z-index: 1;
    transform: translateY(-50%);
}
.client-review-outer-con {
    position: relative;
}
.client-review-outer-con .btn-wrap .next-btn-client {
    right: -94px;
}
.client-review-outer-con .btn-wrap .prev-btn-client {
    left: -94px;
}
.client-review-box {
    padding: 40px 49px 52px;
    border-radius: 20px;
    background: var(--primary-color);
    box-shadow: 0 0 50px rgb(118 144 217 / 10%);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.client-review-box p{
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 34px;
}
.client-review-slider .owl-carousel.owl-drag .owl-item .item{
    height: 100%;
}
.client-review-slider .owl-carousel .owl-stage{
    display: flex;
}
.client-review-box > span{
    font-size: 14px;
    line-height: 30px;
    color: var(--orange-color);
    text-transform: uppercase;
    margin-bottom: 19px;
}
.client-review-slider .owl-carousel.owl-drag .owl-item .item .client-review-box figure img{
    width: auto;
}
.reviewer-name {
    position: relative;
    padding-left: 44px;
    margin-top: auto;
}
.reviewer-name span{
    font-weight: 500;
    color: var(--secondary-color);
}
.reviewer-name::before{
    content: "";
    width: 30px;
    height: 1px;
    background: var(--orange-color);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.client-review-slider .owl-carousel .owl-stage-outer{
    box-shadow: 0 0 50px rgb(118 144 217 / 10%);
}
.client-review-slider{
    background: url(../images/client-review-bg-img.jpg) no-repeat center;
    background-size: cover;
}
.client-review-outer-con figure.quote-img {
    position: absolute;
    left: 116px;
    top: -87px;
}
.client-review-slider .generic-title {
    margin-bottom: 72px;
}
.client-review-box > figure{
    margin-bottom: 23px;
}
/*  */
.global-partners-inner-con ul {
    display: grid;
    gap: 10px;
    grid-template-columns: 24.325% 24.325% 24.325% 24.325%;
}
.global-partners-inner-con ul li {
    padding: 27px 30px;
    border-radius: 20px;
    transition: .3s ease-in-out;
    border: 1px solid var(--border-color);
}
.global-partners-inner-con ul li:hover{
    border-color: var(--orange-color);
}
/*  */
.footer-main-con {
    background: url(../images/footer-bg-img.png) no-repeat center;
    background-size: cover;
    height: 720px;
    display: flex;
    align-items: end;
}
.footer-inner-con {
    display: grid;
    gap: 30px;
    grid-template-columns: 23% 23% 23% 19%;
}
.footer-copyright-con {
    padding: 41px 114px 35px 0;
    display: grid;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: auto auto;
}
.copyright-logo-con a {
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid var(--border-color);
}
.copyright-logo-con {
    display: flex;
    align-items: center;
}
.social-links-con ul li a {
    width: 40px;
    height: 40px;
    background: transparent;
    color: var(--yellow-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    transition: .3s ease-in-out;
    border: 2px solid var(--yellow-color);
}
.social-links-con ul {
    display: flex;
    gap: 10px;
}
.footer-box h6 {
    font-weight: 600;
    margin-bottom: 34px;
    color: var(--yellow-color);
    font-size: 16px;
}
.footer-box ul li {
    padding-left: 2px;
    margin-bottom: 6px;
}
.footer-box ul li a {
    font-size: 14px;
    line-height: 24px;
    color: var(--primary-color);
    display: inline-block;
    font-weight: 300;
}
.footer-box ul li a:hover {
    color: var(--yellow-color);
}
.copyright-logo-con p {
    margin-bottom: 0;
    color: var(--primary-color);
    font-size: 14px;
}
.builder-main-con {
    display: grid;
    gap: 42px;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 86px;
}
.builder-content h2 {
    margin-bottom: 18px;
}
.builder-content h2, .builder-content p {
    color: var(--primary-color);
}
.builder-content p {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 300;
}
.footer-box ul li {
    padding-left: 2px;
    margin-bottom: 2px;
}
.footer-contact-info ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 8px;
}
.footer-contact-info ul li i {
    position: absolute;
    left: 0;
    top: 7px;
    color: var(--yellow-color);
}
.builder-main-con .generic-btn a{
    border-color: var(--yellow-color);
    background: var(--yellow-color);
}
.builder-main-con .generic-btn a:hover{
    background: var(--secondary-color);
    color: var(--yellow-color);
}
.social-links-con ul li a:hover{
    background: var(--yellow-color);
    color: var(--secondary-color);
}
/*  */
/* about page styling start here */
.about-global-partners-main-con {
    margin-top: -74px;
    position: relative;
    z-index: 1;
}
.sub-banner-main-con,
.sub-banner-main-con.contact-banner-main-con {
    background: url(../images/about-banner-bg-img.png) no-repeat center;
    background-size: cover !important;
    height: 350px;
    padding: 45px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sub-banner-main-con.contact-banner-main-con{
    background: url(../images/contact-banner-bg-img.png) no-repeat center;
}
.sub-banner-main-con:not(.contact-banner-main-con):not(.peak99-order-hero){
    height: 300px;
    padding: 28px 0 92px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-bottom: -72px;
    align-items: flex-end;
}
.sub-banner-main-con:not(.contact-banner-main-con):not(.peak99-order-hero)::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -86px;
    transform: translateX(-50%);
    width: 122%;
    height: 170px;
    background: #eef5fb;
    border-radius: 50%;
    z-index: 2;
}
.sub-banner-main-con:not(.contact-banner-main-con):not(.peak99-order-hero) .sub-banner-inner-con{
    padding: 0 250px;
    justify-content: flex-end;
}
.sub-banner-inner-con p,
.sub-banner-inner-con h1{
    color: var(--primary-color);
}
.sub-banner-inner-con p{
    display: none;
}
.sub-banner-inner-con {
    text-align: center;
    padding: 0 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.sub-banner-inner-con span{
    display: none;
}
.sub-banner-inner-con h1{
    font-size: 40px;
    line-height: 46px;
    margin-bottom: 16px;
}
.history-slider-main-con{
    background: url(../images/history-slider-bg-img.jpg) no-repeat center;
    background-size: cover;
}
.history-box {
    background: var(--primary-color);
    padding: 47px 30px 44px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 0 50px rgb(118 144 217 / 10%);
}
.history-box span{
    font-size: 64px;
    line-height: 54px;
    font-weight: 700;
    margin-bottom: 20px;
}
.history-box p{
    line-height: 24px;
    margin-bottom: 0;
}
.history-slider-inner-con {
    position: relative;
    box-shadow: 0 0 50px rgb(118 144 217 / 10%);
}
.history-slider-main-con .owl-carousel .owl-item:nth-child(3n + 1) .item .history-box span{
    color: var(--light-blue);
}
.history-slider-main-con .owl-carousel .owl-item:nth-child(3n + 2) .item .history-box span{
    color: var(--accent);
}
.history-slider-main-con .owl-carousel .owl-item:nth-child(3n) .item .history-box span{
    color: var(--orange-color);
}
.history-slider-inner-con .btn-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    top: 41%;
    z-index: 1;
    transform: translateY(-50%);
}
.history-slider-inner-con .btn-wrap .prev-btn-history, .history-slider-inner-con .btn-wrap .next-btn-history {
    border: 0;
    position: absolute;
    cursor: pointer;
    width: 65px;
    height: 65px;
    background: var(--yellow-color);
    border-radius: 100%;
    transition: .3s ease-in-out;
    outline: none;
}
.history-slider-inner-con .btn-wrap .prev-btn-history i, .history-slider-inner-con .btn-wrap .next-btn-history i {
    font-size: 26px;
    line-height: 34px;
}
.history-slider-inner-con .btn-wrap .prev-btn-history i {
    margin-left: -3px;
}
.history-slider-inner-con .btn-wrap .next-btn-history {
    right: -94px;
}
.history-slider-inner-con .btn-wrap .prev-btn-history {
    left: -94px;
}
.history-slider-inner-con .btn-wrap .next-btn-history i {
    margin-right: -3px;
}
.owl-nav,
.owl-dots {
    display: none;
}
.history-slider-inner-con .btn-wrap .prev-btn-history:hover,
.history-slider-inner-con .btn-wrap .next-btn-history:hover{
    background: var(--accent);
}
.team-member-details-con {
    text-align: center;
    padding: 35px 30px;
    background: var(--primary-color);
    border-radius: 20px;
    box-shadow: 0 0 50px rgb(118 144 217 / 10%);
    margin-top: -13px;
    position: relative;
    z-index: 1;
}
.team-member-img-con figure img {
    height: 212px;
    object-fit: contain;
}
.team-member-img-con figure {
    border-radius: 20px 20px 0 0;
    width: 270px;
    height: 210px;
}
.team-member-img-con {
    width: 270px;
    margin: 0 auto;
}
.team-member-details-con span {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 8px;
}
.team-member-details-con small{
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
}
.team-slider-inner-con .btn-wrap .prev-btn-team, .team-slider-inner-con .btn-wrap .next-btn-team {
    border: 0;
    position: absolute;
    cursor: pointer;
    width: 65px;
    height: 65px;
    background: var(--yellow-color);
    border-radius: 100%;
    transition: .3s ease-in-out;
    outline: none;
}
.team-slider-inner-con {
    position: relative;
}
.team-slider-inner-con .btn-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    top: 35%;
    z-index: 1;
    transform: translateY(-50%);
}
.team-slider-inner-con .btn-wrap .prev-btn-team{
    left: -94px;
}
.team-slider-inner-con .btn-wrap .next-btn-team{
    right: -94px;
}
.team-slider-inner-con .btn-wrap .prev-btn-team i, .team-slider-inner-con .btn-wrap .next-btn-team i {
    font-size: 26px;
    line-height: 34px;
}
.team-slider-inner-con .btn-wrap .prev-btn-team i {
    margin-left: -3px;
}
.team-slider-inner-con .btn-wrap .next-btn-team i {
    margin-right: -3px;
}
.team-slider-inner-con .btn-wrap button:hover{
    background: var(--accent);
}
.team-slider-inner-con .owl-carousel .owl-item:nth-child(3n) .item .team-member-img-con figure{
    background: var(--orange-color);
}
.team-slider-inner-con .owl-carousel .owl-item:nth-child(3n + 1) .item .team-member-img-con figure{
    background: var(--yellow-color);
}
.team-slider-inner-con .owl-carousel .owl-item:nth-child(3n + 2) .item .team-member-img-con figure{
    background: var(--accent);
}
/* about page styling end here */
/* contact page styling start here */
.contact-banner-main-con .sub-banner-inner-con {
    padding: 0 298px;
}
.contact-main-con {
    position: relative;
}
.contact-main-con::before {
    content: "";
    background: url(../images/contact-bg-img.jpg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 110%;
    position: absolute;
    left: 0;
    top: -80px;
    z-index: -1;
}
.report-inquiry-con {
    box-shadow: 0 0 50px rgb(118 144 217 / 10%);
    padding: 24px 38px 44px;
    border-radius: 20px;
    background: var(--primary-color);
}
.inquiry-main-con {
    display: grid;
    gap: 30px;
    grid-template-columns: 48.6% 48.6%;
    margin-top: -72px;
}
.report-inquiry-con h3{
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 0;
}
.report-inquiry-heading {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    justify-content: space-between;
}
.report-inquiry-con p{
    line-height: 24px;
}
.report-inquiry-con p:last-child{
    margin-bottom: 0;
}
.contact-boxes-inner-con {
    display: grid;
    gap: 30px;
    grid-template-columns: 23% 23% 23% 23%;
    text-align: center;
}
.contact-box {
    padding: 50px 24px 40px;
    border-radius: 24px;
    transition: .3s ease-in-out;
    background: var(--primary-color);
    border: 1px solid transparent;
    box-shadow: 0 0 50px rgb(118 144 217 / 10%);
}
.contact-box figure {
    height: 65px;
    width: 65px;
    border-radius: 100%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    transition: .3s ease-in-out;
}
.contact-box span {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    transition: .3s ease-in-out;
    color: var(--secondary-color);
    margin-bottom: 14px;
}
.contact-box p {
    line-height: 24px;
}
.contact-box a{
    line-height: 18px;
    display: inline-block;
}
.contact-box a, .contact-box p {
    transition: .3s ease-in-out;
    font-weight: 300;
    color: var(--text-color); 
}
.contact-box a:hover{
    color: var(--orange-color);
}
.contact-boxes-inner-con .contact-box:nth-child(4n + 1) figure{
    background: var(--yellow-color);
}
.contact-boxes-inner-con .contact-box:nth-child(4n + 1):hover{
    border-color: var(--yellow-color);
}
.contact-boxes-inner-con .contact-box:nth-child(4n + 2) figure{
    background: var(--light-blue);
}
.contact-boxes-inner-con .contact-box:nth-child(4n + 2):hover{
    border-color: var(--light-blue);
}
.contact-boxes-inner-con .contact-box:nth-child(4n + 3) figure{
    background: var(--accent);
}
.contact-boxes-inner-con .contact-box:nth-child(4n + 3):hover{
    border-color: var(--accent);
}
.contact-boxes-inner-con .contact-box:nth-child(4n) figure{
    background: var(--orange-color);
}
.contact-boxes-inner-con .contact-box:nth-child(4n):hover{
    border-color: var(--orange-color);
}
.contact-form-main-con .generic-title p{
    font-size: 18px;
    line-height: 28px;
}
.contact-form-main-con .generic-title {
    padding: 0 270px;
    margin-bottom: 72px;
}
.form-box ul li textarea, .form-box ul li input {
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    outline: 0;
    padding: 10px 26px;
    color: var(--text-color);
    background: var(--primary-color);
}
.form-box ul li textarea:focus, 
.form-box ul li input:focus{
    border-color: var(--orange-color);
}
.form-box ul li input {
    height: 50px;
}
.form-box ul li textarea {
    height: 150px;
    resize: none;
    padding: 10px 26px;
    display: block;
}
.form-box .submit-btn button{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 54px;
    font-weight: 500;
    color: var(--primary-color);
    border-radius: 30px;
    font-size: 14px;
    line-height: 18px;
    background: var(--orange-color);
    outline: 0;
    border: 1px solid var(--orange-color);
    transition: .3s ease-in-out;
    cursor: pointer;
}
.form-box .submit-btn button:hover{
    background: var(--yellow-color);
    border-color: var(--yellow-color);
    color: var(--secondary-color);
}
.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-box ul {
    display: grid;
    gap: 10px;
    grid-template-columns: 49.5% 49.5%;
    margin-bottom: 30px;
}
.form-box ul li:last-child{
    grid-column: 1/-1;
}
.contact-form-inner-con {
    max-width: 920px;
    margin: 0 auto;
}
.contact-form-inner-con ul li span.error {
    font-size: 14px;
    line-height: 18px;
    color: red;
    padding-left: 27px;
}
/* contact page styling end here */
/* dedicated page styling satrt here */
.dedicated-plan-title h5 {
    margin-bottom: 0;
    font-weight: 700;
    color: var(--primary-color);
}
.dedicated-plan-title {
    height: 100%;
    border-radius: 20px;
    padding: 19px 30px;
    text-align: center;
}
.dedicated-category small {
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 9px;
}
.dedicated-price-con .month-title {
    padding-left: 2px;
}
.dedicated-category span {
    font-size: 14px;
    line-height: 16px;
    color: var(--secondary-color);
}
.dedicated-category {
    text-align: right;
}
.dedicated-price-box {
    display: grid;
    gap: 0;
    margin-bottom: 5px;
    align-items: center;
    grid-template-columns: 21% 62% 17%;
    background: var(--primary-color);
    border-radius: 20px;
    overflow: hidden;
}
.dedicated-pricing-main-con .generic-title{
    margin-bottom: 71px;
}
.dedicated-price-box:last-child{
    margin-bottom: 0;
}
.dedicated-price-con {
    display: grid;
    gap: 34px;
    grid-template-columns: 15% 14% 13% 14% 23%;
    align-items: center;
    padding: 21px 0 20px 47px;
}
.dedicated-price-box .hosting-price-box {
    margin-bottom: 0;
    align-items: center;
    justify-content: end;
    margin-right: -4px;
}
.dedicated-price-box .primary-btn {
    padding: 22px 30px 22px 18px;
}
.dedicated-price-box .primary-btn a {
    height: 50px;
    padding: 8px 28px;
    border-radius: 25px;
    color: var(--primary-color);
}
.dedicated-price-box .primary-btn a:hover{
    background: var(--accent);
    color: var(--yellow-color);
}
.dedicated-price-box .hosting-price-box span.numeric1 {
    font-size: 48px;
    line-height: 54px;
}
.dedicated-price-box .hosting-price-box span.dollar {
    top: -7px;
    padding-right: 3px;
}
.dedicated-price-box .hosting-price-box .month-title small {
    font-size: 16px;
    margin-top: -4px;
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 1) .dedicated-plan-title{
    background: var(--orange-color) url(../images/dedicated-basic-bg-img.png) no-repeat bottom;
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 1) .hosting-price-box span.dollar,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 1) .hosting-price-box span.numeric1,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 1) .hosting-price-box .numeric2,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 1) .hosting-price-box .month-title small{
    color: var(--orange-color);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 1) .primary-btn a{
    background: var(--orange-color);
    border-color: var(--orange-color);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 2) .dedicated-plan-title{
    background: var(--light-blue) url(../images/dedicated-premium-bg-img.png) no-repeat bottom;
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 2) .hosting-price-box span.dollar,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 2) .hosting-price-box span.numeric1,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 2) .hosting-price-box .numeric2,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 2) .hosting-price-box .month-title small{
    color: var(--light-blue);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 2) .primary-btn a{
    background: var(--light-blue);
    border-color: var(--light-blue);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 3) .dedicated-plan-title{
    background: var(--accent) url(../images/dedicated-business-bg-img.png) no-repeat bottom;
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 3) .hosting-price-box span.dollar,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 3) .hosting-price-box span.numeric1,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 3) .hosting-price-box .numeric2,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 3) .hosting-price-box .month-title small{
    color: var(--accent);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 3) .primary-btn a{
    background: var(--accent);
    border-color: var(--accent);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 4) .dedicated-plan-title{
    background: var(--yellow-color) url(../images/dedicated-sublime-bg-img.png) no-repeat bottom;
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 4) .hosting-price-box span.dollar,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 4) .hosting-price-box span.numeric1,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 4) .hosting-price-box .numeric2,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 4) .hosting-price-box .month-title small{
    color: var(--yellow-color);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 4) .primary-btn a{
    background: var(--yellow-color);
    border-color: var(--yellow-color);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n) .dedicated-plan-title{
    background: #9a9a9a url(../images/dedicated-supreme-bg-img.png) no-repeat bottom;
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n) .hosting-price-box span.dollar,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n) .hosting-price-box span.numeric1,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n) .hosting-price-box .numeric2,
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n) .hosting-price-box .month-title small{
    color: #9a9a9a;
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n) .primary-btn a{
    background: #9a9a9a;
    border-color: #9a9a9a;
}
.dedicated-pricing-inner-con .dedicated-price-box .primary-btn a:hover{
    background: transparent;
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 1) .primary-btn a:hover{
    color: var(--orange-color);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 2) .primary-btn a:hover{
    color: var(--light-blue);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 3) .primary-btn a:hover{
    color: var(--accent);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n + 4) .primary-btn a:hover{
    color: var(--yellow-color);
}
.dedicated-pricing-inner-con .dedicated-price-box:nth-child(5n) .primary-btn a:hover{
    color: #9a9a9a;
}
.dedicated-hosting-features-main .generic-title p{
    font-size: 18px;
    line-height: 28px;
}
.dedicated-hosting-features-main .improvement-icon figure{
    width: 65px;
    height: 65px;
}
.dedicated-hosting-features-main .improvement-box {
    grid-template-columns: 14% 82%;
    padding: 17px 24px;
    gap: 27px;
}
.dedicated-hosting-features-main .improvement-img-con figure img{
    width: 100%;
}
.dedicated-hosting-features-main .improvement-box p {
    font-size: 16px;
}
.dedicated-hosting-features-main .improvement-content-con .improvement-box:nth-child(2):hover {
    border-color: var(--orange-color);
    box-shadow: 10px 10px 30px rgb(244 116 116 / 20%);
}
.dedicated-hosting-features-main .improvement-content-con .improvement-box:nth-child(3):hover{
    border-color: var(--accent);
    box-shadow: 10px 10px 30px rgb(118 217 120 / 20%);
}
.reseller-main-con {
    background: url(../images/dedicated-hosting-solutions-bg-img.png) no-repeat center;
    background-size: cover;
    height: 1256px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -102px;
}
/* DIRTY Responsive pricing table CSS */
.reseller-inner-con article {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.reseller-inner-con ul {
    display: flex;
    top: 0px;
    z-index: 10;
    padding-bottom: 14px;
}
.reseller-inner-con li {
    list-style: none;
    flex: 1;
}
.reseller-inner-con li:last-child {
    border-right: 1px solid var(--border-color);
}
.reseller-inner-con button {
    width: 100%;
    border: 1px solid var(--border-color);
    border-right: 0;
    border-top: 0;
    padding: 10px;
    background: var(--primary-color);
    font-size: 14px;
    font-weight: bold;
    height: 60px;
    color: var(--black-color)
}
.reseller-inner-con li.active button {
    color: #000;
    background: var(--accent);
    border-color: var(--accent);
}
.reseller-inner-con table {
    table-layout: fixed;
    width: 100%;
    border-spacing: 0 10px;
    border-collapse: separate;
}
.reseller-inner-con td {
    padding: 11px 25px;
    empty-cells: show;
}
.reseller-inner-con thead th {
    font-weight: 300;
    font-size: 18px;
    line-height: 28px;
    color: var(--primary-color);
}
.reseller-inner-con thead th .reseller-table-header {
    padding: 11px 30px;
    border-radius: 20px;
    margin: 0 15px;
}
.reseller-inner-con thead th:nth-child(2) .reseller-table-header{
    background: var(--orange-color);
}
.reseller-inner-con thead th:nth-child(3) .reseller-table-header {
    background: var(--accent);
    margin-right: 0px;
}
.reseller-inner-con td+td,
.reseller-inner-con th+th {
    text-align: center;
    display: none;
}
.reseller-inner-con td.default {
    display: table-cell;
}
.reseller-inner-con .sep {
    background: #F5F5F5;
    font-weight: bold;
}
.reseller-inner-con .hide {
    border: 0;
    background: none;
}
@media (min-width: 992px) {
    .reseller-inner-con ul {
        display: none;
    }
    .reseller-inner-con td,
    .reseller-inner-con th {
        display: table-cell !important;
    }
}
.reseller-inner-con tbody th {
    background: rgba(255, 255, 255, 0.42);
    border-left: 1px solid var(--border-color);
    font-size: 16px;
    font-weight: 400;
}
/* Tablefooter */
.reseller-inner-con a:focus,
.reseller-inner-con a:hover {
    text-decoration: none;
}
.reseller-inner-con tbody td:first-child {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: var(--primary-color);
}
.reseller-inner-con tbody tr td:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.reseller-inner-con tbody tr td:last-child{
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}
.reseller-inner-con tbody td {
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    color: var(--primary-color);
}
.reseller-inner-con tbody td:first-child i {
    font-size: 14px;
    margin-right: 4px;
    color: var(--yellow-color);
}
.reseller-inner-con tbody tr {
    background: rgb(255 255 255 / 10%);
}
.reseller-main-con .generic-title {
    padding: 0 100px;
}
.reseller-main-con .generic-title h2{
    color: var(--primary-color);
}
/* reseller table end */
.faq-inner-con .card {
    border: 0;
    background: transparent;
    margin-bottom: 20px;
}
.faq-inner-con .card:last-child{
    margin-bottom: 0;
}
.faq-inner-con .card-header{
    padding: 0;
    border: 0;
    background: transparent;
}
.faq-inner-con .card-header button{
    padding: 0;
    border: 0;
    outline: none;
    text-decoration: none;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    transition: .3s ease-in-out;
}
.faq-inner-con .card-header button.btn.btn-link{
    color: var(--accent);
}
.faq-inner-con .card-header button.btn.btn-link.collapsed{
    color: var(--secondary-color);
}
.faq-inner-con .card-header button.btn.btn-link:hover{
    color: var(--accent);
}
.faq-inner-con .card-header:first-child{
    border-radius: 0;
}
.faq-inner-con .card-body {
    padding: 7px 0 26px;
    line-height: 24px;
}
.faq-inner-con {
    display: grid;
    gap: 15px;
    grid-template-columns: 50% 48%;
}
.faq-inner-con #accordion {
    padding-top: 13px;
}
.faq-main-con .generic-title{
    margin-bottom: 72px;
}
.faq-main-con {
    margin-top: -74px;
    position: relative;
    z-index: 1;
}
.dedicated-global-partners {
    background: url(../images/dedicated-global-partners-bg.jpg) no-repeat center;
    background-size: cover;
    height: 706px;
    margin-bottom: -130px;
}
/* dedicated page styling end here */
/* domain page styling start here */
.domain-banner-con {
    background: url(../images/domain-banner-bg-img.png) no-repeat center;
    background-size: cover;
    height: 687px;
    padding: 164px 0 286px;
}
.domain-banner-con .banner-inner-con h1{
    font-size: 48px;
    line-height: 54px;
    margin-bottom: 24px;
}
.domain-banner-con .banner-inner-con {
    padding: 0 240px;
}
.domain-banner-con .banner-inner-con > span{
    margin-bottom: 20px;
}
.domain-banner-con .banner-inner-con p {
    margin-bottom: 0;
    font-size: 18px;
    line-height: 28px;
}
.most-popular-domain-off-con {
    background: url(../images/flat-off-domain-bg-img.jpg) no-repeat center;
    background-size: cover;
    border-radius: 20px;
    height: 231px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 80px;
    gap: 44px;
    margin-bottom: 50px;
}
.most-popular-domain-off-con figure {
    margin-bottom: -80px;
}
.most-popular-domain-off-con h2{
    font-size: 48px;
    line-height: 56px;
    margin-bottom: 0;
}
.most-popular-domain-off-con h2 span{
    font-weight: 900;
    text-decoration: underline;
}
.most-popular-domain-outer-con .generic-title{
    margin-bottom: 55px;
}
.domains-boxes-main-con {
    display: grid;
    gap: 30px;
    position: relative;
    z-index: 1;
    grid-template-columns: 23% 23% 23% 23%;
}
.popular-domain-box {
    padding: 50px 29px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid transparent;
    transition: .3s ease-in-out;
    background: var(--primary-color);
    display: flex;
    flex-direction: column;
}
.popular-domain-box .primary-btn{
    margin-top: auto;
}
.popular-domain-box .primary-btn a {
    padding: 8px 23px;
    border-radius: 30px;
    color: var(--primary-color);
    text-transform: unset;
    height: 50px;
    width: 100%;
}
.popular-domain-box > span{
    font-size: 64px;
    line-height: 54px;
    font-weight: 700;
    margin-bottom: 20px;
}
.popular-domain-price-con span{
    font-size: 36px;
    line-height: 54px;
}
.popular-domain-price-con small{
    font-size: 18px;
    line-height: 26px;
}
.popular-domain-price-con span,
.popular-domain-price-con small{
    font-weight: 700;
}
.popular-domain-box p{
    line-height: 24px;
}
.popular-domain-box > p{
    margin-bottom: 28px;
}
.popular-domain-price-outer p{
    margin-bottom: 0;
}
.popular-domain-price-outer{
    margin-bottom: 17px;
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 1) > span,
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 1) .popular-domain-price-outer span,
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 1) .popular-domain-price-outer small{
    color: var(--yellow-color);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 1) .primary-btn a{
    background: var(--yellow-color);
    border-color: var(--yellow-color);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 1) .primary-btn a:hover{
    background: transparent;
    color: var(--yellow-color);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 1):hover{
    border-color: var(--yellow-color);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 2) > span,
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 2) .popular-domain-price-outer span,
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 2) .popular-domain-price-outer small{
    color: var(--orange-color);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 2) .primary-btn a{
    background: var(--orange-color);
    border-color: var(--orange-color);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 2) .primary-btn a:hover{
    background: transparent;
    color: var(--orange-color);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 2):hover{
    border-color: var(--orange-color);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 3) > span,
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 3) .popular-domain-price-outer span,
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 3) .popular-domain-price-outer small{
    color: var(--light-blue);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 3) .primary-btn a{
    background: var(--light-blue);
    border-color: var(--light-blue);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 3) .primary-btn a:hover{
    background: transparent;
    color: var(--light-blue);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n + 3):hover{
    border-color: var(--light-blue);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n) > span,
.domains-boxes-main-con .popular-domain-box:nth-child(4n) .popular-domain-price-outer span,
.domains-boxes-main-con .popular-domain-box:nth-child(4n) .popular-domain-price-outer small{
    color: var(--accent);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n) .primary-btn a{
    background: var(--accent);
    border-color: var(--accent);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n) .primary-btn a:hover{
    background: transparent;
    color: var(--accent);
}
.domains-boxes-main-con .popular-domain-box:nth-child(4n):hover{
    border-color: var(--accent);
}
.domain-price-table-main-con .generic-title p{
    font-size: 18px;
    line-height: 28px;
}
.domain-price-table-main-con .generic-title {
    padding: 0 150px;
    margin-bottom: 62px;
}
/* domain table styling start here */
.domain-price-inner-con table {
    border-collapse: separate;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 63px;
    border-spacing: 0 10px;
}
.domain-price-inner-con table th .domain-price-table-header{
    padding: 12px 30px 10px;
    border-radius: 20px;
}
.domain-price-inner-con table th:not(:first-child) .domain-price-table-header{
    margin: 0 15px;
}
.domain-price-inner-con table th:nth-child(2) .domain-price-table-header{
    background: var(--orange-color);
}
.domain-price-inner-con table th:nth-child(3) .domain-price-table-header{
    background: var(--accent);
}
.domain-price-inner-con table th:nth-child(4) .domain-price-table-header{
    background: var(--light-blue);
    margin-right: 0;
}
.domain-price-inner-con table th {
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 300;
    text-align: center;
}
.domain-price-inner-con table th:first-child, .domain-price-inner-con table tr td:first-child {
    text-align: left;
    font-weight: 300;
}
.domain-price-inner-con table tr td:first-child i{
    font-size: 20px;
    color: var(--accent);
}
.domain-price-inner-con table tbody tr{
    background: rgb(255 255 255 / 10%);
}
.domain-price-inner-con table td{
    color: var(--primary-color);
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    padding: 12px 30px 10px;
    text-align: center;
    position: relative;
}
.domain-price-inner-con .domain-btn-con a {
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--accent);
    align-items: center;
    justify-content: center;
    display: inline-flex;
    position: relative;
    transition: .3s ease-in-out;
    padding-bottom: 5px;
}
.domain-price-inner-con .domain-btn-con a::after{
    content: "";
    background: var(--accent);
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: .3s ease-in-out;
}
.domain-price-inner-con .domain-btn-con a:hover{
    color: var(--yellow-color);
}
.domain-price-inner-con .domain-btn-con a:hover::after{
    background: var(--yellow-color);
}
.domain-price-inner-con table tbody tr td span {
    display: inline-block;
    font-size: 10px;
    top: -1px;
    line-height: 10px;
    padding: 5px 8px;
    border-radius: 10px;
    position: relative;
    font-weight: 700;
    margin-left: 0;
    color: var(--secondary-color);
}
.domain-price-inner-con table tbody tr td span.new {
    background: var(--yellow-color);
}
.domain-price-inner-con table tbody tr td span.sale {
    background: url(../images/sale-tag-bg.png) no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    width: 43px;
    height: 20px;
    position: absolute;
    left: -42px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 1px 5px 9px;
}
.domain-main-con .generic-title{
    margin-bottom: 60px;
}
.domain-price-table-main-con {
    background: url(../images/domain-pricing-table-bg-img.png) no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1484px;
    margin-top: -240px;
}
.domain-price-inner-con table tbody tr td:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.domain-price-inner-con table tbody tr td:last-child {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}
.domain-price-table-main-con .generic-title h2,
.domain-price-table-main-con .generic-title p{
    color: var(--primary-color);
}
/* domain page styling end here */
/* vps page styling start here */
.slider-main-box {
    padding: 53px 60px 39px;
    border-right: 1px solid var(--secondary-color);
}
.vps-slider-checks {
    padding: 21px 20px 18px;
}
.slider-outer {
    background: #effafe;
    border-bottom: 1px solid var(--secondary-color);
    display: grid;
    grid-template-columns: 75% 25%;
}
.vps-slider-checks > span{
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 9px;
    text-transform: uppercase;
    color: var(--secondary-color);
}
.vps-slider-checks form ul {
    display: grid;
    gap: 9px;
    grid-template-columns: 22% 22% 22% 23%;
}
.vps-slider-checks form ul li span{
    font-size: 12px;
    line-height: 14px;
    color: var(--secondary-color);
}
.vps-slider-checks form ul li{
    text-align: center;
}
.vps-slider-checks form ul li figure{
    margin-bottom: 8px;
}
.slider-container {
    border-radius: 20px;
    border: 1px solid var(--secondary-color);
    position: relative;
    z-index: 1;
}
.vps-price-plan > span{
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 8px;
    text-align: center;
    color: var(--secondary-color);
}
.smallbox2 .vps_btn.generic-btn{
    width: 100%;
}
.price_content .product-con{
    background: url(../images/product-con-bg-img.png) no-repeat center;
    background-size: cover;
}
.vps-slider-checks ul li input[type="radio"] {
    accent-color: var(--secondary-color);
    width: 16px;
    height: 16px;
}
.vps-slider-inner-con p {
    color: var(--primary-color);
    padding: 28px 30px 9px;
    background: var(--secondary-color);
    margin-top: -20px;
    width: 100%;
    float: left;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    font-size: 14px;
    line-height: 24px;
    color: var(--yellow-color);
    font-weight: 300;
}
.vps-slider-inner-con p span{
    font-weight: 500;
}
.vps-slider-main-con .generic-title{
    margin-bottom: 70px;
}
/*  */
.hostiko-plan-benefits-inner-con ul{
    display: grid;
    gap: 29px;
    grid-template-columns: 31.6% 31.6% 31.6%;
}
.hostiko-plan-benefits-inner-con ul li {
    padding: 20px 26px 20px 53px;
    font-size: 18px;
    line-height: 28px;
    border-radius: 20px;
    color: var(--secondary-color);
    background: rgb(244 228 116 / 15%);
    border: 1px solid var(--yellow-color);
}
.hostiko-plan-benefits-inner-con ul li i{
    position: absolute;
    left: 28px;
    top: 50%;
    font-size: 16px;
    transform: translateY(-50%);
}
.hostiko-plan-benefits .generic-title{
    margin-bottom: 71px;
}
/*  */
.management-level-inner-con{
    display: grid;
    gap: 30px;
    grid-template-columns: 48.6% 48.6%;
}
.management-level-box{
    position: relative;
    padding: 43px 49px 50px 48px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--primary-color);
}
.vps-management-main-con{
    background: url(../images/vps-management-bg-img.png) no-repeat center;
    background-size: cover;
    height: 911px;
}
.management-level-header figure {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    margin-bottom: -7px;
}
.management-level-header {
    display: grid;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 24px;
    grid-template-columns: auto auto;
}
.management-heading p{
    margin-bottom: 0;
}
.management-heading h5{
    margin-bottom: 6px;
}
.management-level-box ul li {
    padding-left: 31px;
    margin-bottom: 2px;
}
.management-level-box ul{
    margin-bottom: 19px;
}
.vps-management-main-con .generic-title{
    margin-bottom: 71px;
}
.management-level-box ul li::before {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 15px;
    color: var(--green-color);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.management-level-box .generic-btn a {
    height: 50px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    padding: 10px 35px;
    color: var(--primary-color);
    max-width: 260px;
    box-shadow: unset;
}
.management-level-inner-con .management-level-box:nth-child(2n + 1) .management-level-header p{
    color: var(--orange-color);
}
.management-level-inner-con .management-level-box:nth-child(2n + 1) .management-level-header figure{
    background: var(--orange-color);
}
.management-level-inner-con .management-level-box:nth-child(2n + 1) ul li::before{
    color: var(--orange-color);
}
.management-level-inner-con .management-level-box:nth-child(2n + 1) .generic-btn a{
    background: var(--orange-color);
    border-color: var(--orange-color);
}
.management-level-inner-con .management-level-box:nth-child(2n + 1) .generic-btn a:hover{
    background: var(--primary-color);
    color: var(--orange-color);
}
.management-level-inner-con .management-level-box:nth-child(2n) .management-level-header p{
    color: var(--accent);
}
.management-level-inner-con .management-level-box:nth-child(2n) .management-level-header figure{
    background: var(--accent);
}
.management-level-inner-con .management-level-box:nth-child(2n) ul li::before{
    color: var(--accent);
}
.management-level-inner-con .management-level-box:nth-child(2n) .generic-btn a{
    background: var(--accent);
    border-color: var(--accent);
}
.management-level-inner-con .management-level-box:nth-child(2n) .generic-btn a:hover{
    background: var(--primary-color);
    color: var(--accent);
}
.management-level-inner-con .management-level-box:nth-child(2n + 1)::before {
    content: "";
    background: url(../images/vps-management-box-bg-img1.png) no-repeat center;
    background-size: cover;
    width: 442px;
    height: 161px;
    position: absolute;
    right: -21px;
    bottom: -5px;
}
.management-level-inner-con .management-level-box:nth-child(2n)::before {
    content: "";
    background: url(../images/vps-management-box-bg-img2.png) no-repeat center;
    background-size: cover;
    width: 429px;
    height: 164px;
    position: absolute;
    right: -21px;
    bottom: -11px;
}
.management-level-box-inner-con {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.management-level-box-inner-con .generic-btn{
    margin-top: auto;
}
.vps-management-main-con .generic-title h2{
    color: var(--primary-color);
}
/* vps page styling end here */
/* shared page styling start here */
.shared-banner-main-con{
    background: url(../images/shared-hosting-banner-bg.png) no-repeat center;
    background-size: cover;
}
.shared-banner-main-con .sub-banner-inner-con h1{
    margin-bottom: -60px;
}
.shared-banner-main-con .sub-banner-inner-con p{
    max-width: 860px;
}
@media (min-width: 992px) {
    .sub-banner-inner-con p {
        display: none;
    }
}
.shared-hosting-types-inner-con {
    display: grid;
    gap: 30px;
    grid-template-columns: 31.6% 31.6% 31.6%;
    position: relative;
    z-index: 1;
}
.shared-hosting-type-box-heading h6{
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 10px;
    color: var(--primary-color);
}
.shared-hosting-type-box-heading p{
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 31px;
    color: var(--primary-color);
}
.shared-hosting-type-box-heading .hosting-price-box {
    margin-bottom: 0;
}
.shared-hosting-type-box-heading .hosting-price-box .numeric1,
.shared-hosting-type-box-heading .hosting-price-box .plan-price-amount {
    font-size: 60px;
    line-height: 54px;
    font-weight: 800;
}
.shared-hosting-type-box-heading .hosting-price-box .dollar {
    top: 0;
}
.shared-hosting-type-box-heading .hosting-price-box .dollar,
.shared-hosting-type-box-heading .hosting-price-box .numeric2 {
    font-size: 30px;
    line-height: 36px;
}
.shared-hosting-type-box-heading .hosting-price-box .dollar,
.shared-hosting-type-box-heading .hosting-price-box .numeric1,
.shared-hosting-type-box-heading .hosting-price-box .plan-price-amount,
.shared-hosting-type-box-heading .hosting-price-box .numeric2,
.shared-hosting-type-box-heading .hosting-price-box .month-title small {
    color: var(--primary-color);
}
/* ---- CARD OUTER ---- */
.shared-hosting-type-content-con {
    border-radius: 20px;
    background: var(--primary-color);
    overflow: visible;
    box-shadow: 0 4px 32px rgba(25,32,45,0.10);
    border: 1px solid #eef0f4;
    position: relative;
}
/* ---- HEADING BOX ---- */
.shared-hosting-type-box-heading {
    padding: 30px 28px 24px;
    min-height: 286px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.shared-hosting-type-box-heading h6 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}
.shared-hosting-type-box-heading p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: rgba(255,255,255,0.80);
    margin-bottom: 18px;
}
/* ---- PRICE ---- */
.shared-hosting-type-box-heading .hosting-price-box {
    margin-bottom: 16px;
    align-items: flex-end;
    gap: 2px;
}
.shared-hosting-type-box-heading .hosting-price-box .dollar {
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    top: 0;
    color: var(--primary-color);
    padding-right: 4px;
}
.shared-hosting-type-box-heading .hosting-price-box .numeric1,
.shared-hosting-type-box-heading .hosting-price-box .plan-price-amount {
    font-size: 60px;
    line-height: 64px;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -2px;
}
.shared-hosting-type-box-heading .hosting-price-box .numeric2 {
    font-size: 26px;
    line-height: 26px;
    font-weight: 600;
    color: var(--primary-color);
}
.shared-hosting-type-box-heading .hosting-price-box .month-title {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 4px;
    padding-bottom: 8px;
}
.shared-hosting-type-box-heading .hosting-price-box .month-title small,
.shared-hosting-type-box-heading .hosting-price-box .plan-period-label {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
}
/* ---- BILLING SELECTOR inside heading ---- */
.shared-hosting-type-box-heading .billing-selector-wrap {
    margin-top: auto;
    position: relative;
    z-index: 999;
}
.shared-hosting-type-box-heading .peak99-discount-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-top: 12px;
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(5, 27, 46, 0.82), rgba(9, 76, 120, 0.72)) !important;
    border: 1px solid rgba(255,255,255,0.58) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(6,17,33,0.22);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.shared-hosting-type-box-heading .peak99-discount-pill[hidden] {
    display: none;
}
.shared-hosting-type-box-heading .billing-select-box {
    background: rgba(255,255,255,0.95);
    border: none;
    border-radius: 14px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--secondary-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    position: relative;
    z-index: 999;
}
.shared-hosting-type-box-heading .billing-select-box:hover,
.shared-hosting-type-box-heading .billing-select-box.open {
    background: #fff;
}
.shared-hosting-type-box-heading .billing-options {
    border: none;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    z-index: 9999;
    position: absolute;
}
.shared-hosting-type-box-heading .billing-option-row {
    font-size: 14px;
    padding: 11px 20px;
}
.shared-hosting-type-box-heading .billing-option-row.active {
    background: var(--secondary-color);
    color: #fff;
}
/* ---- BOTTOM / FEATURES ---- */
.shared-hosting-type-bottom-con {
    padding: 28px 28px 32px;
}
.shared-hosting-type-bottom-con ul {
    margin-bottom: 28px;
}
.shared-hosting-type-bottom-con ul li {
    font-size: 15px;
    line-height: 24px;
    padding-left: 28px;
    margin-bottom: 10px;
    color: #444;
}
.shared-hosting-type-bottom-con ul li i {
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 13px;
}
.shared-hosting-type-bottom-con ul li span {
    font-weight: 700;
    color: var(--secondary-color);
}
.shared-hosting-type-bottom-con ul li small {
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 16px;
    margin-left: 4px;
    font-size: 11px;
}
/* ---- BUTTON ---- */
.shared-hosting-type-bottom-con .primary-btn a {
    width: 100%;
    border-radius: 30px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    height: 52px;
}
/* ---- PER-CARD ACCENT COLORS ---- */
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+1) .shared-hosting-type-box-heading {
    background: var(--orange-color) url(../images/shared-hosting-plan-img1.png) no-repeat center;
    background-size: cover;
}
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+2) .shared-hosting-type-box-heading {
    background: var(--light-blue) url(../images/shared-hosting-plan-img2.png) no-repeat center;
    background-size: cover;
}
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n) .shared-hosting-type-box-heading {
    background: var(--accent) url(../images/shared-hosting-plan-img3.png) no-repeat center;
    background-size: cover;
}
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+1) .shared-hosting-type-bottom-con ul li i,
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+1) .shared-hosting-type-bottom-con ul li span,
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+1) .shared-hosting-type-bottom-con ul li small { color: var(--orange-color); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+1) .shared-hosting-type-bottom-con ul li small { border-color: var(--orange-color); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+1) .shared-hosting-type-bottom-con .primary-btn a { background: var(--orange-color); border-color: var(--orange-color); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+1) .shared-hosting-type-bottom-con .primary-btn a:hover { background: transparent; color: var(--orange-color); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+2) .shared-hosting-type-bottom-con ul li i,
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+2) .shared-hosting-type-bottom-con ul li span,
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+2) .shared-hosting-type-bottom-con ul li small { color: var(--light-blue); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+2) .shared-hosting-type-bottom-con ul li small { border-color: var(--light-blue); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+2) .shared-hosting-type-bottom-con .primary-btn a { background: var(--light-blue); border-color: var(--light-blue); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n+2) .shared-hosting-type-bottom-con .primary-btn a:hover { background: transparent; color: var(--light-blue); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n) .shared-hosting-type-bottom-con ul li i,
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n) .shared-hosting-type-bottom-con ul li span,
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n) .shared-hosting-type-bottom-con ul li small { color: var(--accent); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n) .shared-hosting-type-bottom-con ul li small { border-color: var(--accent); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n) .shared-hosting-type-bottom-con .primary-btn a { background: var(--accent); border-color: var(--accent); }
.shared-hosting-types-inner-con .shared-hosting-type-content-con:nth-child(3n) .shared-hosting-type-bottom-con .primary-btn a:hover { background: transparent; color: var(--accent); }
@media only screen and (max-width: 767px) {
    .shared-hosting-type-box-heading .peak99-discount-pill {
        margin-top: 8px;
        min-height: 32px;
        padding: 6px 11px;
        font-size: 11px;
    }
}
/*  */
.shared-features-content-box {
    text-align: center;
    margin-bottom: 35px;
}
.shared-features-content .shared-features-content-box:last-child{
    margin-bottom: 0;
}
.shared-features-content-box p{
    line-height: 24px;
}
.shared-features-content-box p:last-child{
    margin-bottom: 0;
}
.shared-features-content-box figure{
    width: 51px;
    height: 51px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.advance-shared-features-inner-con {
    display: grid;
    align-items: center;
    grid-template-columns: 24% 52% 24%;
}
.advance-shared-features-main-con .generic-title{
    margin-bottom: 0;
}
.shared-features-img figure img{
    width: 100%;
}
.shared-table-main-con .reseller-inner-con thead th:nth-child(3) .reseller-table-header{
    margin-right: 15px;
}
.shared-table-main-con .reseller-inner-con thead th:nth-child(4) .reseller-table-header{
    background: var(--light-blue);
    margin-right: 0px;
}
.shared-table-main-con .reseller-inner-con tbody td {
    font-size: 14px;
    line-height: 28px;
}
.shared-table-main-con .reseller-inner-con tbody td:nth-child(2){
    color: var(--orange-color);
}
.shared-table-main-con .reseller-inner-con tbody td:nth-child(3){
    color: var(--accent);
}
.shared-table-main-con .reseller-inner-con tbody td:nth-child(4){
    color: var(--light-blue);
}
.shared-table-main-con .reseller-inner-con tbody tr td:first-child{
    font-size: 18px;
    font-weight: 300;
}
.shared-table-main-con .reseller-inner-con thead tr th:first-child {
    width: 42%;
    font-weight: 700;
}
.shared-table-main-con {
    background: url(../images/shared-table-bg-img.png) no-repeat center;
    background-size: cover;
    height: 1484px;
    display: unset;
    padding-top: 380px;
    margin-top: -242px;
}
.shared-table-main-con .generic-title p{
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 300;
}
/* shared page styling end here */
.reseller-plans-main-con .reseller-inner-con {
    display: grid;
    gap: 30px;
    grid-template-columns: 23% 23% 23% 23%;
}
.reseller-plans-main-con .reseller-box {
    background: var(--primary-color);
    padding: 46px 34px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.reseller-plans-main-con .reseller-box h6 {
    margin-bottom: 29px;
}
.reseller-plans-main-con .reseller-box .hosting-price-box {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    justify-content: center;
}
.reseller-plans-main-con .reseller-box ul {
    width: 170px;
    margin: 0 auto 10px;
    text-align: left;
    display: block;
    padding-bottom: 0;
}
.reseller-plans-main-con .reseller-box ul li {
    font-size: 14px;
    line-height: 24px;
    padding-left: 26px;
    margin-bottom: 11px;
    border: 0;
}
.reseller-plans-main-con .reseller-box ul li i {
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 14px;
    color: var(--accent);
}
.reseller-plans-main-con .reseller-box ul li span {
    display: inline-block;
    font-weight: 600;
}
.reseller-plans-main-con .reseller-box .primary-btn{
    margin-top: auto;
}
.reseller-plans-main-con .reseller-box .primary-btn a {
    width: 100%;
    border-radius: 20px;
}
.reseller-plans-main-con .hosting-price-box span.numeric1{
    color: var(--accent);
}


































/* 404 page styling start here */
.error-section {
    height: 100vh;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    position: relative;
}
.error-con {
    position: relative;
    z-index: 2;
    padding: 0 100px;
}
.error-con h2 {
    font-size: 130px;
    line-height: 125px;
    margin-bottom: 20px;
    color: var(--primary-color);
}
.error-con p {
    font-size: 22px;
    line-height: 36px;
    margin-bottom: 30px;
    color: var(--primary-color);
}
.error-con .generic-btn a {
    font-size: 16px;
    font-weight: 500;
    height: auto;
    padding: 20px 40px;
    border-radius: 14px;
    display: inline-block;
    color: var(--secondary-color);
    background: var(--primary-color);
    transition: .3s ease-in-out;
    border: 1px solid var(--primary-color);
}
.error-con .generic-btn a:hover{
    color: var(--primary-color);
    background: transparent;
}
/* 404 page styling end here */
/* coming soon page styling start here */
.coming-soon-con {
    position: relative;
    z-index: 2;
}
.coming-soon-con h2 {
    font-size: 80px;
    line-height: 80px;
    margin-bottom: 40px;
    color: var(--primary-color);
}
.coming-soon-social-links ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}
.coming-soon-social-links ul li a {
    width: 60px;
    height: 60px;
    color: var(--secondary-color);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .3s ease-in-out;
    border-radius: 14px;
    border: 1px solid var(--primary-color);
}
.coming-soon-social-links ul li a i {
    font-size: 18px;
    color: var(--secondary-color);
}
.coming-soon-social-links ul li a:hover {
    transform: translateY(-6px);
    background: transparent;
}
.coming-soon-social-links ul li a:hover i {
    color: var(--primary-color);
}
.error-section .generic-btn i{
    margin-right: 10px;
}
/* coming soon page styling end here */
/* bottom to top button */
#button.show {
    opacity: 1;
    visibility: visible;
}
#button:hover {
    cursor: pointer;
}
#button {
    display: inline-block;
    background-color: var(--yellow-color);
    border: 1px solid var(--yellow-color);
    width: 60px;
    height: 60px;
    border-radius: 100%;
    text-align: center;
    position: fixed;
    bottom: 72px;
    right: 113px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-animation: spineer 2s infinite;
    animation: spineer 2s infinite;
    cursor: pointer;
}
#button::after {
    content: "\f062";
    font-family: "Font Awesome 5 free";
    font-size: 20px;
    line-height: 26px;
    color: var(--secondary-color);
    font-weight: 600;
}
@-webkit-keyframes spineer {
    from {
        box-shadow: 0 0 0 0 rgb(255, 210, 0, .99)
    }

    to {
        box-shadow: 0 0 0 25px rgb(252, 143, 9, .01)
    }
}
@keyframes spineer {
    from {
        box-shadow: 0 0 0 0 rgb(255, 210, 0, .99)
    }

    to {
        box-shadow: 0 0 0 25px rgb(252, 143, 9, .01)
    }
}
/* bottom to top button */
/* Preloader -------------------------------------------------------*/
/* Loader Styles start here */
.loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0d1b2a;
    z-index: 99999;
}
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    font-size: 0;
    color: #00c8ff;
    display: inline-block;
    margin: -25px 0 0 -25px;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.lead {
    font-size: 13px;
}
.loader div {
    background-color: #00c8ff;
    display: inline-block;
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    opacity: .5;
    border-radius: 50%;
    -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
    animation: ballPulseDouble 2s ease-in-out infinite;
}
.loader div:last-child {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
@-webkit-keyframes ballPulseDouble {

    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes ballPulseDouble {

    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
/* Preloader -------------------------------------------------------*/

/* =========================================
   SPEED COMPARISON SECTION — theme-matched
   ========================================= */
.speed-comparison-main-con {
    background: #f9f9f9;
}
.speed-comparison-inner-con {
    display: grid;
    grid-template-columns: 44% 52%;
    gap: 60px;
    align-items: center;
}

/* LEFT content */
.speed-comparison-content h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 18px;
}
.speed-comparison-subtitle {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 20px;
    display: block;
}
.speed-comparison-content p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin-bottom: 16px;
}
.highlight-speed {
    color: var(--accent);
    font-weight: 700;
}
.speed-cta-btn {
    margin-top: 32px;
}

/* RIGHT chart card */
.speed-comparison-chart {
    background: var(--primary-color);
    border-radius: 20px;
    padding: 32px 36px 24px;
    border: 1px solid var(--border-color);
    box-shadow: 10px 10px 40px rgb(25 32 45 / 8%);
}
.chart-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: var(--secondary-color);
    font-size: 17px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 14px;
    margin-bottom: 22px;
}
.chart-header-badge i {
    font-size: 18px;
    color: var(--secondary-color);
}
.chart-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-item::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 3px;
}
.legend-ttfb::before { background: var(--yellow-color); }
.legend-lp::before   { background: var(--accent); }
.legend-lt::before   { background: var(--secondary-color); }

/* chart rows */
.chart-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chart-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.chart-label {
    min-width: 82px;
    max-width: 82px;
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary-color);
    text-align: right;
    line-height: 16px;
}
.chart-label-peak99 {
    color: var(--accent);
    font-weight: 700;
}
.chart-bar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}
.chart-bar {
    height: 16px;
    border-radius: 4px;
    min-width: 4px;
}
.bar-ttfb { background: var(--yellow-color); }
.bar-lp   { background: var(--accent); }
.bar-lt   { background: var(--secondary-color); }

/* x-axis */
.chart-xaxis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding-left: 94px;
    font-size: 11px;
    color: #aaa;
}
.chart-xaxis-label {
    display: none;
}
.chart-source {
    font-size: 11px;
    color: #aaa;
    margin-top: 16px;
    margin-bottom: 0;
    text-align: right;
    font-style: italic;
}

@media (max-width: 991px) {
    .speed-comparison-inner-con {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .speed-comparison-content h2 {
        font-size: 28px;
        line-height: 36px;
    }
}

/* =========================================
   BILLING PERIOD SELECTOR
   ========================================= */
.billing-selector-wrap {
    position: relative;
    margin: 12px 0 18px;
}
.billing-select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary-color);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-color);
    transition: border-color .2s;
    user-select: none;
}
.billing-select-box:hover,
.billing-select-box.open {
    border-color: var(--accent);
}
.billing-select-box .billing-chevron {
    font-size: 12px;
    color: var(--text-color);
    transition: transform .2s;
}
.billing-select-box.open .billing-chevron {
    transform: rotate(180deg);
}
.billing-options {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--primary-color);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    z-index: 9999;
    box-shadow: 0 8px 24px rgb(25 32 45 / 12%);
}
.billing-options.open {
    display: block;
}
.billing-option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--secondary-color);
    cursor: pointer;
    transition: background .15s;
}
.billing-option-row:hover {
    background: #f4f7f4;
}
.billing-option-row.active {
    background: var(--accent);
    color: var(--secondary-color);
    font-weight: 600;
}
.bo-label { font-weight: 500; }
.bo-price  { font-weight: 600; }
/* Hide native select — we use custom UI */
.billing-select { display: none; }


/* =========================================
   HERO VIDEO SECTION
   ========================================= */
.hero-video-main-con {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* Video fills the section */
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Dark gradient overlay so text stays readable */
.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(25, 32, 45, 0.75) 0%,
        rgba(25, 32, 45, 0.50) 60%,
        rgba(25, 32, 45, 0.30) 100%
    );
    z-index: 1;
}
/* Content sits above overlay */
.hero-video-main-con .container {
    position: relative;
    z-index: 2;
}
.hero-video-content {
    max-width: 680px;
    padding: 160px 0 120px;
}
/* Tag / eyebrow */
.hero-video-tag {
    display: inline-block;
    background: var(--accent);
    color: var(--secondary-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 30px;
    margin-bottom: 28px;
}
/* Headline */
.hero-video-content h1 {
    font-size: 56px;
    line-height: 66px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
}
.hero-video-content h1 span {
    color: var(--accent);
}
/* Sub text */
.hero-video-content p {
    font-size: 18px;
    line-height: 30px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    max-width: 520px;
}
/* Buttons row */
.hero-video-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.hero-video-btns .generic-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 30px;
    border: 2px solid var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: .2s ease-in-out;
}
.hero-video-btns .generic-link a:hover {
    background: transparent;
    color: var(--accent);
}
/* Outline / secondary button */
.hero-video-btns .hero-btn-outline a {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}
.hero-video-btns .hero-btn-outline a:hover {
    background: #ffffff;
    color: var(--secondary-color);
    border-color: #ffffff;
}
/* Responsive */
@media (max-width: 991px) {
    .hero-video-content h1 {
        font-size: 36px;
        line-height: 46px;
    }
    .hero-video-content {
        padding: 120px 0 80px;
    }
}
@media (max-width: 575px) {
    .hero-video-content h1 {
        font-size: 28px;
        line-height: 38px;
    }
}

/* =========================================
   HOSTING TYPES CAROUSEL (homepage)
   ========================================= */
.hosting-types-carousel {
    padding-bottom: 10px;
}
.hosting-types-carousel .hosting-type-box {
    height: 100%;
}
.hosting-types-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}
.hosting-types-carousel .owl-item {
    display: flex;
}
.hosting-types-carousel .owl-item .hosting-type-box {
    width: 100%;
}
/* Alternate card colours cycling through orange → blue → green */
.hosting-types-carousel .owl-item:nth-child(3n+1) .hosting-type-content-con { background-image: url(../images/shared-plan-bg-img.jpg); }
.hosting-types-carousel .owl-item:nth-child(3n+2) .hosting-type-content-con { background-image: url(../images/dedicated-plan-bg-img.jpg); }
.hosting-types-carousel .owl-item:nth-child(3n)   .hosting-type-content-con { background-image: url(../images/vps-plan-bg-img.jpg); }

/* =========================================
   HOSTING PLAN CARD — HOVER MOUNTAIN EFFECT
   ========================================= */
.hosting-type-content-con {
    background-position: center bottom;
    transition:
        background-position 0.6s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.hosting-type-box:hover .hosting-type-content-con {
    background-position: center 30%;
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(25, 32, 45, 0.22);
}
/* Keep the card overflow visible for the shadow to show */
.hosting-type-box {
    transition: transform 0.3s ease;
    overflow: visible;
}
/* Also apply to carousel cards */
.hosting-types-carousel .hosting-type-box:hover .hosting-type-content-con {
    background-position: center 30%;
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(25, 32, 45, 0.22);
}