:root {
    --purple: #4553C7;
    --red: #FF1052;
}

html, body {
    font-family: "DM Sans", "Raleway", "Montserrat", Arial, Tahoma;
    scroll-behavior: smooth;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.body-sticky {
    padding-top: 85px;
}

.status-completed {background-color: var(--red) !important}


/* Header */
.vl-topnav {
    background-color: var(--purple);
    color: #fff;
}

.vl-topnav .content {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 0;
}

.vl-topnav .list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vl-topnav .list.right {
    justify-content: flex-end;
}

.vl-topnav .list .link {
    color: #fff;
    font-size: 15px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: 0.2s;
}

.vl-topnav .list .link:hover {
    opacity: 0.7;
}

.vl-topnav .list .link i {
    margin-right: 6px;
}

.vl-topnav .dropdown-flag .btn {
    border: 0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: none !important;
}

.vl-topnav .dropdown-flag .btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.vl-topnav .dropdown-flag .dropdown-menu {
    width: 60px !important;
    min-width: 60px !important;
    padding: 4px 0 !important;
}

.vl-topnav .dropdown-flag .dropdown-menu .dropdown-item {
    text-align: center;
    padding: 8px 0;
    border: 0;
}

.vl-topnav .dropdown-flag .dropdown-menu img {
    height: 24px;
    border-radius: 4px;
}

.vl-topnav .dropdown-flag .btn img {
    height: 20px;
    border-radius: 2px;
    margin-right: 5px;
}

.vl-topnav .dropdown-flag .btn::after {
    transition: 0.2s;
}

.vl-topnav .dropdown-flag .btn.actived::after {
    transform: rotate(180deg);
}

.vl-topnav .currency-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.vl-topnav .currency-list a {
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 8px;
    color: #fff;
    font-size: 13px;
    transition: 0.2s;
}

.vl-topnav .currency-list a.active, .vl-topnav .currency-list a:hover {
    background-color: #fff;
    color: var(--purple);
}

.vl-topnav .currency-list a:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.vl-topnav .currency-list a:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


/* Navbar */
.vl-navbar {
    background-color: var(--purple);
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.2s;
}

.vl-navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.vl-navbar .grid-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.vl-navbar .logo {
    width: 190px;
    min-width: 190px;
    display: block;
}

.vl-navbar .logo img {
    width: 100%;
}

.vl-navbar .list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.vl-navbar .list .link {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s;
    margin: 0 10px;
    padding: 0 10px;
    height: 85px;
    display: flex;
    align-items: center;
    font-size: 17px;
    justify-content: center;
    position: relative;
}

.vl-navbar .list .link:hover {
    opacity: 0.8;
}

.vl-navbar .list .button {
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    border-radius: 4px;
    color: #fff;
    margin-left: 18px;
    text-decoration: none;
    font-size: 16px;
    height: 40px;
    text-align: center;
    border: 0;
    transition: 0.2s;
}

.vl-navbar .list .button:hover {
    opacity: 0.7;
}

.vl-navbar .list .button.white {
    background-color: #fff;
    color: var(--purple);
}

.vl-navbar .list .button i {
    margin-right: 6px;
}

.vl-navbar .vl-navbar-dropdown-link.show .show-icon {
    transform: rotate(180deg);
}

.vl-navbar .vl-navbar-dropdown-link .show-icon {
    font-size: 14px;
    margin-left: 5px;
    transition: 0.3s;
}

.vl-navbar-dropdown-badge {
    background-color: var(--red);
    color: #fff;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 2px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.vl-navbar-dropdown-badge::before {
    border: 5px solid #0000;
    border-right-color: var(--red);
    bottom: -5px;
    content: "";
    display: block;
    position: absolute;
    right: 0;
}

.vl-navbar .vl-navbar-dropdown-menu {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9;
    width: 100%;
    display: none;
}

.vl-navbar .vl-navbar-dropdown-menu .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 18px;
}

.vl-navbar .vl-navbar-dropdown-menu .item-link {
    background-color: #fff;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    padding: 12px;
    color: var(--bs-dark);
    text-decoration: none;
    transition: 0.2s;
    height: 85px;
}

.vl-navbar .vl-navbar-dropdown-menu .item-link:hover {
    transform: scale(1.03);
}

.vl-navbar .vl-navbar-dropdown-menu .item-link .img {
    height: 52px;
    width: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.vl-navbar .vl-navbar-dropdown-menu .item-link .title {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 18px;
}

.vl-navbar .vl-navbar-dropdown-menu .item-link .desc {
    opacity: 0.7;
    margin-bottom: 0;
    font-size: 15px;
}

.vl-navbar .dropdown-user .dropdown-item {
    padding: 10px 20px 10px 16px;
}

.vl-navbar .dropdown-user .dropdown-item .icon {
    width: 24px;
    margin-right: 4px;
    text-align: center;
    display: inline-block;
}


/* Mobile Navbar */
.vl-mobile-navbar {
    background-color: var(--purple);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 14px 0;
}

.vl-mobile-navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.vl-mobile-navbar .grid-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vl-mobile-navbar .logo {
    height: 34px;
    display: block;
}

.vl-mobile-navbar .logo img {
    height: 34px;
}

.vl-mobile-navbar .actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.vl-mobile-navbar .actions .button {
    height: 40px;
    width: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    margin-left: 8px;
    color: var(--purple);
    border-radius: 2px;
    font-size: 18px;
}

.vl-mobile-navbar .actions .button.w-auto {
    padding: 0 6px;
    min-width: auto;
    width: auto;
}

.vl-mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 999;
    background-color: #fff;
    padding: 12px;
}

.vl-mobile-menu .vl-mobile-menu-close {
    font-size: 24px;
    color: var(--bs-dark);
    position: absolute;
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vl-mobile-menu .currency {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vl-mobile-menu .currency .price {
    color: var(--bs-dark);
    margin-left: 10px;
}

.vl-mobile-menu .currency-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vl-mobile-menu .currency-list a {
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 8px;
    color: #6e6e6e;
    font-size: 13px;
    transition: 0.2s;
}

.vl-mobile-menu .currency-list a.active, .vl-mobile-menu .currency-list a:hover {
    background-color: var(--purple);
    color: #fff;
}

.vl-mobile-menu .currency-list a:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.vl-mobile-menu .currency-list a:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.vl-mobile-menu .list {
    margin-top: 10px;
}

.vl-mobile-menu .list li {
    border-bottom: 1px solid #e5e5e5;
}

.vl-mobile-menu .list li .link {
    padding: 14px 0;
    display: block;
    color: var(--bs-dark);
    font-weight: 500;
    position: relative;
}

.vl-mobile-menu .list li .link.show .show-icon {
    transform: rotate(180deg);
}

.vl-mobile-menu .vl-navbar-dropdown-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.vl-mobile-menu .vl-navbar-dropdown-menu {
    display: none;
}

.vl-mobile-menu .vl-navbar-dropdown-menu .item-link {
    background-color: #fff;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    padding: 12px;
    color: var(--bs-dark);
    text-decoration: none;
    transition: 0.2s;
    margin: 4px 0;
}

.vl-mobile-menu .vl-navbar-dropdown-menu .container {
    padding: 0;
}

.vl-mobile-menu .vl-navbar-dropdown-menu .item-link:hover {
    transform: scale(1.03);
}

.vl-mobile-menu .vl-navbar-dropdown-menu .item-link .img {
    height: 48px;
    width: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.vl-mobile-menu .vl-navbar-dropdown-menu .item-link .title {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 16px;
}

.vl-mobile-menu .vl-navbar-dropdown-menu .item-link .desc {
    opacity: 0.7;
    margin-bottom: 0;
    font-size: 14px;
}


/* Swiper Home */
.vl-slider-home {
    background-color: var(--purple);
    color: #fff;
}

.vl-slider-home-item {
    padding: 50px 0;
}

.vl-slider-home-item .title {
    font-weight: 700;
    font-size: 50px;
}

.vl-slider-home-item p {
    font-size: 17px;
    line-height: 27px;
}

.vl-slider-home-item .img {
    max-width: 420px;
    margin: auto;
}

.vl-slider-home-item .btn {
    height: 46px;
    padding: 0 20px;
    font-size: 16px;
}

.vl-slider-home .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #fff;
}


/* Page Head */
.vl-page-head {
    background-color: var(--purple);
    color: #fff;
    padding: 30px 0;
}

.vl-page-head.padding-80 {
    padding: 80px 0;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

@keyframes blink-50 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.vl-tabs-content:not(.active) {
    display: none;
}

.animation-blink {
    animation: blink 2.5s infinite;
}

.animation-blink-50 {
    animation: blink-50 2.5s infinite;
}

.vl-page-head .badge-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--red);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-size: 15px;
    animation: blink 2.5s infinite;
}

.vl-page-head .badge-top i {
    margin-right: 8px;
}

.vl-page-head .title {
    font-size: 48px;
    background-color: #5765dc;
    padding: 8px 14px;
    border-radius: 12px;
    margin: 10px 0;
    display: inline-block;
}

.vl-page-head .subtitle {
    font-size: 24px;
    font-weight: 500;
}

.vl-page-head .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 6px;
}

.vl-page-head .list li {
    font-size: 18px;
}

.vl-page-head .list li::before {
    content: "\f00c";
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    margin-right: 8px;
    color: #50ff50;
}

.grid-ddos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0 10px 0;
}

.grid-ddos-item {
    text-align: center;
}

.grid-ddos-item i {
    font-size: 2.25rem;
    margin-bottom: 8px;
}

.grid-ddos-item .text {
    font-size: 1.1rem;
}


/* Compare */
.vl-compare-tabs {
    margin: 30px 0;
}

.vl-compare-tabs ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 10px;
}

.vl-compare-tabs .link {
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f1f1;
    height: 50px;
    border-radius: 6px;
    color: var(--bs-dark);
    font-weight: 500;
    transition: 0.2s;
    position: relative;
}

.vl-compare-tabs .link i {
    margin-right: 8px;
}

.vl-compare-tabs .link.active, .vl-compare-tabs .link:hover {
    color: #fff;
    background-color: var(--purple);
}

.vl-compare-tabs-content:not(.active) {
    display: none;
}

.vl-compare-table .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vl-compare-table.grid-5 .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vl-compare-table .head .text {
    background-color: #ccc;
    padding: 20px 5px;
    text-align: center;
    color: #fff;
}

.vl-compare-table .head .text:first-child {
    background-color: var(--purple);
}

.vl-compare-table .head .item:nth-child(3) .text {
    background-color: #333e98;
}

.vl-compare-table .head .item:nth-child(4) .text {
    background-color: #212d92;
}

.vl-compare-table .list .text {
    padding: 20px 5px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    height: 100%;
}

.vl-compare-table .list:first-child .text {
    border-top: 1px solid #e5e5e5;
}

.vl-compare-table .list .item:first-child .text {
    text-align: right;
    border-left: 1px solid #e5e5e5;
    padding-right: 20px;
    font-weight: 600;
}

.vl-compare-table .fa-check {
    color: #0cbc0c;
    font-size: 20px;
}


/* Hosting */
.container-four-package {
    max-width: 1400px !important;
}

.vl-section-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.vl-section-tabs ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vl-section-tabs .link {
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 6px;
    margin: 0 6px;
    color: var(--bs-dark);
    font-weight: 500;
    transition: 0.2s;
    position: relative;
}

.vl-section-tabs .link img {
    height: 24px;
    margin-right: 8px;
    transition: 0.2s;
}

.vl-section-tabs .link .img-cpanel {
    height: 20px;
}

.vl-section-tabs .link.cpanel {
    border: 1px solid #FF6C2C;
    color: #FF6C2C;
}

.vl-section-tabs .link.cpanel.active, .vl-section-tabs .link.cpanel:hover {
    background-color: #FF6C2C;
    color: #fff;
}

.vl-section-tabs .link.cpanel.active img, .vl-section-tabs .link.cpanel:hover img {
    filter: brightness(0.5);
}

.vl-section-tabs .link.directadmin {
    border: 1px solid #31B7E9;
    color: #31B7E9;
}

.vl-section-tabs .link.directadmin.active, .vl-section-tabs .link.directadmin:hover {
    background-color: #31B7E9;
    color: #fff;
}

.vl-section-tabs .link.directadmin.active img, .vl-section-tabs .link.directadmin:hover img {
    filter: brightness(0.5);
}

.vl-section-tabs .link .badge {
    position: absolute;
    right: -10px;
    top: -10px;
}


/* Domain Search */
.vl-domain-search-home-container {
    max-width: 1000px;
    margin: auto;
}

.vl-domain-search-home {
    position: relative;
}

.vl-domain-search-home .form-control {
    height: 60px;
    font-size: 18px;
    padding: 0 20px;
}

.vl-domain-search-home .buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.vl-swiper-domains-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 10px;
}

.vl-swiper-domains-item .img {
    height: 30px;
    max-width: 70px;
    object-fit: contain;
}

.vl-swiper-domains-item .prices {
    text-align: right;
}

.vl-swiper-domains-item .prices .old-price {
    font-size: 14px;
    text-decoration: line-through;
    opacity: 0.7;
}

.vl-swiper-domains-item .prices .new-price {
    font-size: 18px;
    font-weight: 600;
}


/* Server Package */
.vl-server-package {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    margin: 14px 0;
}

.vl-server-package .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.vl-server-package .top img {
    height: 30px;
}

.vl-server-package .top .title {
    font-size: 20px;
    font-weight: 600;
}

.vl-server-package .top .title i {
    color: var(--red);
}

.vl-server-package .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vl-server-package .flex .left .grid {
    display: grid;
    grid-template-columns: 160px 130px repeat(3, 160px);
    align-items: flex-start;
}

.vl-server-package .flex .left .grid .item .value {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
}

.vl-server-package .flex .left .grid .item .value i {
    color: var(--purple);
    margin-right: 5px;
}

.vl-server-package .flex .left .grid .item .key {
    opacity: 0.7;
    font-size: 17px;
}

.vl-server-package .flex .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.vl-server-package .flex .right .price {
    font-size: 20px;
    font-weight: 500;
}

.vl-server-package .flex .right .price .price-new {
    font-weight: 600;
    margin-bottom: 4px;
}

.vl-server-package .flex .right .price .cycle {
    font-size: 16px;
    margin-left: -4px;
}

.vl-server-package .flex .right .price .price-old {
    font-weight: 400;
    opacity: 0.7;
    text-decoration: line-through;
    font-size: 16px;
}

.vl-server-package .flex .right .btn {
    height: 44px;
    margin-left: 20px;
    padding: 0 20px;
    font-size: 17px;
}


/* Pricing Item */
.vl-pricing-box {
    background-color: #fff;
    border-radius: 8px;
    padding: 24px;
    border: 1px solid #E5E5E5;
    margin: 12px 0;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.05);
}

.vl-pricing-box .title-area {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.vl-pricing-box .title-area .img-right {
    height: 50px;
    width: 50px;
}

.vl-pricing-box .title-area .product-name {
    margin-bottom: 5px;
    font-size: 22px;
    font-weight: 500;
}

.vl-pricing-box .title-area .desc {
    font-size: 15px;
    color: #767676;
}

.vl-pricing-box .price {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1px;
}

.vl-pricing-box .price .cycle {
    font-size: 20px;
    font-weight: 300;
    color: #767676;
}

.vl-pricing-box .price .old-price {
    opacity: 0.7;
    font-size: 22px;
    font-weight: 400;
    text-decoration: line-through;
    margin-left: 10px;
}

.vl-pricing-box .body-area {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #E5E5E5;
}

.vl-pricing-box .body-area .title {
    font-size: 16px;
    margin-bottom: 10px;
}

.vl-pricing-box .list-features li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 0;
    color: #4f4f4f;
    font-size: 17px;
}

.vl-pricing-box .list-features li .icon {
    width: 25px;
    text-align: center;
    margin-right: 6px;
    font-size: 17px;
}

.vl-pricing-box .list-features li strong {
    font-weight: 600;
}

.vl-pricing-box .detailed {
    padding-top: 24px;
    text-align: center;
    font-weight: 500;
    border-top: 1px solid #e5e5e5;
}

.vl-pricing-box .detailed .link {
    color: var(--purple);
}

.vl-pricing-box .os-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
}

.vl-pricing-box .os-list img {
    height: 38px;
}

.vl-pricing-box .btn-purple {
    width: 100%;
    margin-top: 15px;
    height: 42px;
}


/* Category Items */
.vl-category-item {
    background-color: #fff;
    border: 2px solid var(--purple);
    padding: 15px;
    border-radius: 8px;
    margin: 12px 0;
    text-align: center;
}

.vl-category-item .img {
    height: 100px;
    padding: 20px;
    text-align: center;
}

.vl-category-item .name {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
    opacity: 1;
}

.vl-category-item p {
    font-size: 15px;
    opacity: 0.7;
    line-height: 20px;
    margin-bottom: 10px;
}


/* Prepared */
.vl-prepared-item {
    background-color: #f7f7f7;
    padding: 40px;
    border-radius: 8px;
    margin: 10px 0;
}

.vl-prepared-item img {
    max-height: 80px;
    margin-bottom: 20px;
}

.vl-section-prepared-examples .container {
    max-width: 1500px !important;
}

#animated-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-gap: 18px;
}

.lg-backdrop {
    background-color: rgba(0,0,0,0.3) !important;
}


/* Features Item */
.vl-features-item {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    margin: 12px 0;
    height: calc(100% - 24px);
}

.vl-features-item .img {
    height: 100px;
    width: 100px;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e5e5;
    border-radius: 100%;
}

.vl-features-item .img img {
    max-width: 70%;
    max-height: 70%;
}

.vl-features-item .title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 7px;
}

.vl-features-item .desc {
    font-size: 15px;
}


/* Features Slider */
.vl-swiper-features {
    overflow: visible !important;
    margin-top: 40px;
}

.vl-swiper-features .swiper-slide {
    height: auto;
}

.vl-slider-features-item {
    border: 1px solid #e5e5e5;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
    height: 100%;
}

.vl-slider-features-item .img {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.vl-slider-features-item .subtitle {
    display: inline-block;
    padding: 4px 8px;
    background-color: var(--red);
    color: #fff;
    border-radius: 20px;
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 10px;
}

.vl-slider-features-item .title {
    font-size: 24px;
    font-weight: 600;
}

.vl-slider-features-item p {
    font-size: 15px;
}

.vl-swiper-features .button-slider {
    height: 45px;
    width: 45px;
    background-color: var(--purple);
    border-radius: 100%;
}

.vl-swiper-features .button-slider::after {
    color: #fff;
    font-size: 20px;
}


/* Blogs */
.vl-blog-item {
    position: relative;
    margin: 12px 0;
}

.vl-blog-item .img {
    position: relative;
    padding-bottom: 150%;
}

.vl-blog-item .img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vl-blog-item .content {
    color: #fff;
    padding: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.vl-blog-item .content .title {
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 4px;
}

.vl-blog-item .content .desc {
    font-size: 15px;
    margin-bottom: 0;
}


/* Mail */
.app-lists {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin: 20px 0;
}

.app-lists img {
    height: 50px;
}

.vl-mail-pricing {
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    color: #333;
    border-radius: 8px;
    overflow: hidden;
}

.vl-mail-pricing .vl-mp-storage {
    background-color: #D1003B;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #fff;
    font-size: 50px;
    font-weight: 600;
}

.vl-mail-pricing .vl-mp-storage .alt {
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: -10px;
}

.vl-mail-pricing .vl-mp-storage-content {
    width: 100%;
}

.vl-mp-right {
    padding: 30px;
}

.vl-mp-label {
    font-weight: 500;
    font-size: 17px;
    margin-bottom: 6px;
}

.vl-mp-number-select {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    background-color: rgba(218, 47, 84, 0.1);
    height: 45px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.vl-mp-number-select .button {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple);
}

.vl-mp-number {
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.vl-mp-prices {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vl-mp-prices .vl-mp-discount {
    background-color: var(--purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
    min-width: 60px;
    margin-right: 12px;
    font-size: 20px;
    border-radius: 6px;
}

.vl-mp-prices .vl-mp-price-old {
    opacity: 0.7;
    text-decoration: line-through;
    font-size: 17px;
}

.vl-mp-prices .vl-mp-price-new {
    font-size: 24px;
    font-weight: 600;
}

.vl-mail-pricing .btn {
    height: 45px;
    font-weight: 500;
    font-size: 18px;
}


/* Corporate */
.vl-page-head-normal {
    background-color: var(--purple);
    color: #fff;
    text-align: center;
    padding: 40px 0;
}

.vl-page-head-normal .title {
    font-size: 50px;
}

.vl-corporate-card {
    background-color: #fff;
    padding: 30px;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
}

.vl-corporate-card .page-content h1, .vl-corporate-card .page-content h2,
.vl-corporate-card .page-content h3, .vl-corporate-card .page-content h4,
.vl-corporate-card .page-content h5, .vl-corporate-card .page-content h6 {
    color: var(--purple);
    margin-top: 20px;
}

.vl-corporate-card .page-content {
    margin-bottom: 10px;
}

.vl-corporate-card .page-title {
    font-weight: 700;
    margin-top: 0 !important;
    font-size: 36px;
    margin-bottom: 20px;
}

.vl-corporate-nav ul li a {
    background-color: #f7f7f7;
    padding: 12px 20px;
    display: block;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
    border-radius: 8px;
    transition: 0.2s;
}

.vl-corporate-nav ul li a:hover, .vl-corporate-nav ul li a.active {
    background-color: var(--purple);
    color: #fff;
}


    /* Feature Left */
.vl-features-left {
    padding: 30px 0;
}

.vl-features-left .title {
    font-weight: 600;
    color: var(--purple);
}

.vl-features-left .img {
    text-align: center;
}

.vl-features-left .img img {
    max-height: 300px;
}

.vl-features-left .subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #6c757d;
    text-transform: uppercase;
}

.vl-section-home-feature .title {
    font-size: 40px;
    color: var(--purple);
    text-align: center;
    margin-bottom: 10px;
}

.vl-section-home-feature .img {
    text-align: center;
}

.vl-section-home-feature .img img {
    max-height: 420px;
}


/* Legend Features */
.vl-legend-features .content-area {
    background-color: var(--purple);
    color: #fff;
}

.vl-legend-features .head-title {
    font-size: 40px;
    text-align: center;
    margin-bottom: 20px;
}

.vl-legend-item {
    padding: 20px 0;
    text-align: center;
}

.vl-legend-item .img {
    height: 150px;
    margin-bottom: 20px;
}

.vl-legend-item .subtitle {
    opacity: 0.7;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.vl-legend-item .title {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 5px;
}

.vl-legend-item .desc {
    margin-bottom: 0;
}

.vl-tilt-top {
    width: 100%;
    height: 100px;
    background-color: var(--purple);
    clip-path: polygon(0 80%, 100% 0, 100% 100%, 0 100%);
    position: relative;
    bottom: -1px;
}

.vl-tilt-bottom {
    width: 100%;
    height: 100px;
    background-color: var(--purple);
    clip-path: polygon(0 0, 100% 0, 100% 20%, 0 100%);
    position: relative;
    top: -1px;
}


/* FAQ */
.vl-faq-item:not(:last-child) {
    border-bottom: 1px solid #e5e5e5;
}

.vl-faq-item .head {
    padding: 20px 0;
    position: relative;
    cursor: pointer;
}

.vl-faq-item .head .title {
    font-size: 18px;
    font-weight: 500;
}

.vl-faq-item .head.active .title, .vl-faq-item .head:hover .title {
    text-decoration: underline;
}

.vl-faq-item .head::after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    display: block;
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.2s;
}

.vl-faq-item .head.active::after {
   transform: translateY(-50%) rotate(180deg);
}

.vl-faq-item .body {
    padding-bottom: 20px;
    display: none;
}

.vl-faq-item .body p {
    font-size: 16px;
    line-height: 24px;
    color: #6c757d;
}


/* Cart */
.vl-menu-domain {
    background-color: var(--purple);
    text-align: center;
}

.vl-menu-domain .content {
    padding: 30px 0 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.vl-menu-domain .list {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vl-menu-domain .list li a {
    color: #fff;
    font-size: 17px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: 0.2s;
    margin: 0 4px;
}

.vl-menu-domain .list li a.active, .vl-menu-domain .list li a:hover {
    background-color: #fff;
    color: var(--purple);
}

.domain-page-title {
    text-align: center;
    color: var(--purple);
    margin-bottom: 30px;
}


/* Comments */
.vl-comments-item {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
}

.vl-comments-item .img {
    height: 64px;
    width: 64px;
    margin: 0 auto 12px auto;
    border: 2px solid var(--purple);
    border-radius: 100%;
    overflow: hidden;
}

.vl-comments-item p {
    margin-bottom: 0;
    height: 160px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vl-page-seo-content::-webkit-scrollbar {
    display: none;
}

.vl-comments-item .stars {
    margin: 8px 0 10px 0;
}

.vl-comments-item .stars i {
    color: #F7B32A;
    margin: 0 2px;
}

.vl-comments-item .name {
    font-size: 20px;
    margin: 0;
}


/* Clientarea */
.vl-ca-menu {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.vl-ca-menu .grid {
    display: grid;
    grid-template-columns: 0.2fr 1fr;
    align-items: center;
}

.vl-ca-menu .user {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-right: 1px solid #e5e5e5;
    padding-right: 20px;
    height: 80px;
}

.vl-ca-menu .user .img {
    height: 50px;
    width: 50px;
    min-width: 50px;
    border: 2px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    padding: 6px;
    margin-right: 10px;
}

.vl-ca-menu .user .name {
    font-weight: 500;
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.vl-ca-menu .user .email {
    font-size: 14px;
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.vl-ca-menu .user .link-settings {
    background-color: #f1f1f1;
    height: 38px;
    width: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 100%;
    color: #6c757d;
    margin-left: 12px;
}

.vl-ca-menu .list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
}

.vl-ca-menu .list a {
    font-weight: 500;
    color: var(--bs-dark);
    font-size: 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border-right: 1px solid #e5e5e5;
    transition: 0.2s;
}

.vl-ca-menu .list a i {
    margin-right: 7px;
}

.vl-ca-menu .list a:hover {
    background-color: rgba(69,83,199, 0.1);
    color: var(--purple);
}


.vl-ca-shortcut {
    padding: 17px 25px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--purple);
    transition: 0.2s;
    background-color: rgba(69,83,199, 0.1);
    border: 1px solid rgba(69,83,199, 0.3);
    margin: 12px 0;
}

.vl-ca-shortcut:hover {
    color: var(--purple);
}

.vl-ca-shortcut i {
    font-size: 40px;
    margin-right: 18px;
}

.vl-ca-shortcut .title {
    font-weight: 500;
    font-size: 16px;
}

.vl-ca-shortcut .stat {
    font-size: 30px;
}


.vl-ca-services-item {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #f1f1f1;
    margin-bottom: 12px;
}

.vl-ca-services-item:last-child {
    margin-bottom: 0;
}

.vl-ca-services-item .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f1f1;
    padding: 12px 16px;
}

.vl-ca-services-item .top .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 90px);
}

.vl-ca-services-item .left .icon-item {
    font-size: 24px;
    margin-right: 8px;
    width: 24px;
    text-align: center;
}

.vl-ca-services-item .left .name {
    font-weight: 500;
    font-size: 18px;
    overflow-wrap: anywhere;
}

.vl-ca-services-item .btn-sm {
    font-weight: 500;
    padding: 4px 12px !important;
    margin-left: 10px;
}

.vl-ca-services-item .alt {
    padding: 10px 16px;
}

.vl-ca-services-item .alt-table {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 12px;
}

.vl-ca-services-item .alt-table .item {
    font-size: 15px;
    margin: 4px 0;
}

.vl-ca-services-item .alt-table .item .left {
    font-weight: 500;
}

.vl-ca-services-item.product-version .left .icon-item {
    width: auto;
    font-size: 32px;
}

.vl-ca-services-item.product-version .top {
    position: relative;
}

.vl-ca-services-item.product-version .top .btn {
    height: 79px;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 8px 0 0;
    padding: 0 20px !important;
    font-size: 18px;
}

.vl-ca-services-item.product-version .alt-table {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vl-ca-services-item.product-version .alt-table .item {
    font-size: 16px;
}


.ob-badge {
    padding: 4px 8px !important;
    font-weight: 500;
    font-size: 14px;
}

.ob-badge.badge-opacity-success {
    background-color: rgba(0, 173, 128, 0.1);
    color: var(--purple);
}

.ob-badge.badge-warning {
    background-color: #ffb107 !important;
    color: #fff;
}

.ob-badge.badge-opacity-warning {
    background-color: rgba(255, 177, 7, 0.1) !important;
    color: #ffb107;
}

.vl-ca-section {
    margin-bottom: 24px;
    background-color: #fcfcfc;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    padding: 18px;
}

.vl-ca-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.vl-ca-section-head .btn-link {
    color: var(--bs-dark);
    padding: 10px 0 !important;
    font-weight: 500;
    transition: 0.2s;
    text-decoration: none !important;
}

.vl-ca-section-head .btn-link:hover {
    transform: scale(1.03);
}

.vl-ca-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vl-ca-pagetitle {
    font-size: 36px;
}


.vl-ca-empty {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #f1f1f1;
    padding: 30px 20px;
    text-align: center;
}

.vl-ca-empty .icon-large {
    font-size: 50px;
    color: #6c757d;
}

.vl-ca-empty .text {
    color: #6c757d;
    margin-top: 12px;
    font-size: 18px;
}

.vl-ca-empty .btn {
    margin-top: 12px;
}

.vl-ca-empty .btn i {
    position: relative;
    top: -0.5px;
}

.card-sidebar {
    border-radius: 6px !important;
}


.sidebar .list-group-item, .card-sidebar .list-group-item {
    padding: 12px 15px !important;
}
.sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover,
.card-sidebar .list-group-item.active, .card-sidebar .list-group-item.active:focus, .card-sidebar .list-group-item.active:hover{
    background-color: var(--purple);
    color: #fff;
    border: 1px solid var(--purple) !important;
    border-top: 0;
}
.sidebar-menu-item-icon-wrapper {
    margin-right: 6px !important;
}

.list-group-item+.list-group-item.active {
    margin: 3px 0;
}

.card-sidebar .card-header {
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
}

.sidebar .list-group-item, .card-sidebar .list-group-item {
    margin: 3px 0 !important;
    border-radius: 6px !important;
    border: 1px solid #f1f1f1 !important;
    transition: 0.2s
}

.card-sidebar .collapsable-card-body {
    padding: 8px 16px 16px 16px;
}

.sidebar .list-group-item .badge, .card-sidebar .list-group-item .badge {
    background-color: #f7f7f7;
    color: #383838;
    font-size: 12px;
}

.card-header {
    background-color: #fff;
    border-bottom: 0 !important;
    font-weight: 600;
    padding: 12px 16px !important;
}

.card-header i:first-child {
    height: 30px;
    width: 30px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar .card-sidebar .card-minimise {
    position: relative;
    top: 8px;
    right: 2px;
}

[menuitemname="Support"] {
    display: none;
}

[menuitemname="My Invoices Summary"] .card-footer .col-xs-6 {
    width: 100%;
    margin: 2px 0;
}

[menuitemname="My Invoices Summary"] .card-footer .btn i {
    margin-right: 8px;
}

.dataTables_empty {
    border-radius: 6px !important;
    padding: 15px 10px !important;
}



.vl-clientarea-card {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    padding: 20px;
    border-radius: 6px;
}

.vl-clientarea-card .head-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.vl-clientarea-card .head-flex .vl-cc-head {
    margin-bottom: 0;
}

.vl-cc-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.vl-cc-head .icon {
    font-size: 20px;
    margin-right: 10px;
}

.vl-cc-head .title {
    font-weight: 600;
    font-size: 20px;
}

.dataTables_wrapper table.table-list {
    margin: 16px 0 !important;
}

.table-list {
    border: 0 !important;
    border-spacing: 0 6px !important;
}

.table-list .label.status {
    padding: 4px 8px !important;
    font-weight: 500 !important;
}

div.dataTables_wrapper div.dataTables_length select {
    height: 34px;
}

.table-list thead th {
    background-color: rgba(69,83,199, 0.1) !important;
    border: 0 !important;
    font-size: 15px;
    font-weight: 500 !important;
    color: var(--purple) !important;
    padding: 10px 26px 10px 10px !important;
}

.table-list thead th:first-child, .table-list tbody td:first-child,
.table-list thead th.first-child, .table-list tbody td.first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

.table-list thead th:last-child, .table-list tbody td:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.table-list tbody td {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.table-list tbody td:first-child, .table-list tbody td.first-child {
    border-left: 1px solid #e5e5e5 !important;
}

.table-list tbody td:last-child {
    border-right: 1px solid #e5e5e5;
}

#tableServicesList th:nth-child(2), #tableServicesList td:nth-child(2) {
    padding-left: 12px !important;
}

.table-container {
    overflow-y: auto;
}

a {
    color: var(--purple);
}

.scroll-btn-group {
    overflow-y: auto;
    width: 100%;
}

.scroll-btn-group .btn {
    white-space: nowrap;
}


.vl-sp-detail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.vl-sp-detail .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vl-sp-detail .left .icon {
    height: 60px;
    width: 60px;
    min-width: 60px;
    margin-right: 12px;
    background-color: var(--purple);
    color: #fff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.vl-sp-detail .left .name {
    font-size: 18px;
}

.vl-sp-detail .left .sub {
    margin-bottom: 0;
    font-size: 16px;
    opacity: 0.7;
    font-weight: 400;
}

.vl-sp-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 16px;
}

.vl-sp-detail-box {
    border: 1px solid #e7e7e7;
    padding: 12px;
    border-radius: 6px;
}

.vl-sp-detail-box .key {
    font-weight: 500;
}

.vl-sp-detail-box .value {
    font-size: 15px;
}

.card {
    border-radius: 6px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--purple);
}

.vl-sp-list-item {
    border-bottom: 1px solid #e7e7e7;
    padding: 10px 0;
}

.vl-sp-list-item .text-right {
    text-align: left !important;
}

.sidebar .truncate {
    white-space: break-spaces;
}


[menuitemname="Ticket Information"] .card-footer .col-xs-6 {
    width: 100%;
    max-width: 100%;
    flex: inherit;
}

[menuitemname="Ticket Information"] .card-footer .col-button-right {
    margin-top: 8px;
}

[menuitemname="Ticket Information"] .card-footer .btn i {
    margin-right: 8px;
}

.card.view-ticket {
    overflow: hidden;
}

.ticket-reply.staff .posted-by {
    background-color: var(--purple);
    color: #fff;
}

.ticket-reply.staff {
    border: 1px solid var(--purple);
    overflow: hidden;
    border-radius: 6px;
}

.vl-ca-home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 10px 0;
}

.vl-ca-home-head .credit-area {
    background-color: var(--purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 20px;
    border-radius: 8px;
}

.vl-ca-home-head .credit-area .add {
    color: #fff;
    margin-right: 10px;
}

.vl-ca-home-head .credit-area .credit i {
    font-size: 20px;
    margin-left: 8px;
}

.vl-ca-home-head .credit-area span {
    letter-spacing: 0.6px;
}


/* Whois */
.vl-whois-box {
    background-color: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    margin: 20px 0;
    padding: 30px;
}

.vl-whois-box .domainn {
    font-size: 32px !important;
    margin-bottom: 10px;
    width: 100%;
}

.vl-whois-box .badge {
    font-weight: 500;
    font-size: 14px;
    color: #fff;
}

.vl-whois-box .features li {
    display: grid;
    grid-template-columns: 0.2fr 0.8fr;
    padding: 12px 0;
    border-top: 1px solid #d7d7d7;
}

.vl-whois-box .features li .left {
    font-weight: 500;
}



.vl-domain-table .tld-pricing-header {
    border-bottom: 1px solid #d7d7d7;
    padding: 14px 0;
    font-weight: 500;
    font-size: 18px;
}

.vl-domain-table .tld-row {
    border-bottom: 1px solid #d7d7d7;
    padding: 14px 0;
    font-size: 16px;
}

.vl-domain-table .tld-row small {
    font-size: 16px;
}


/* Footer */
.vl-footer {
    background-color: var(--purple);
    color: #fff;
}

.vl-footer .footer-top {
    padding: 40px 0;
}

.vl-footer .list li a {
    color: #fff;
    margin: 2px 0;
    display: inline-block;
    transition: 0.2s;
}

.vl-footer .list li a:hover, .vl-footer .link-contact:hover {
    opacity: 0.7;
}

.vl-footer .footer-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.vl-footer .link-contact {
    display: inline-block;
    color: #fff;
    margin-bottom: 8px;
    transition: 0.2s;
}

.vl-footer .footer-top .list.list-inline li {
    margin-right: 20px;
}

.vl-footer .link-social {
    color: #fff;
    font-size: 24px;
}

.vl-footer .footer-top-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}

.vl-footer .footer-alt {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vl-footer .footer-alt .img-logo {
    height: 40px;
}


/* General */
.vl-page-seo-content {
    padding: 30px;
    background-color: #f8f8f8;
    border-radius: 8px;
    overflow-y: auto;
    max-height: 350px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vl-page-seo-content::-webkit-scrollbar {
    display: none;
}

.vl-page-seo-content h1 {
    text-align: center;
}

.vl-page-seo-content h1, .vl-page-seo-content h2, .vl-page-seo-content h3,
.vl-page-seo-content h4, .vl-page-seo-content h5, .vl-page-seo-content h6 {
    color: var(--purple);
}

.mw-1000 {
    max-width: 1000px;
    margin: auto;
}

.list-inline li {
    display: inline-block;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 15px;
}

.btn-xs {
    height: 24px;
}

.btn-red {
    background-color: var(--red);
    color: #fff;
    border-color: var(--red);
}

.btn-red:hover, .btn-red:focus {
    color: #fff;
    background-color: #d2023b;
    border-color: #d2023b;
}

.btn-purple {
    background-color: var(--purple);
    color: #fff;
    border-color: var(--purple);
}

.btn-purple:hover, .btn-purple:focus {
    color: #fff;
    background-color: #4450ad;
    border-color: #4450ad;
}

.btn-outline-purple {
    background-color: #fff;
    color: var(--purple);
    border-color: var(--purple);
}

.btn-outline-purple:hover, .btn-outline-purple:focus {
    background-color: var(--purple);
    color: #fff;
    border-color: var(--purple);
}

.vl-wave div {
    height: 100px;
    overflow: hidden;
}

.vl-wave div svg {
    height: 100px;
    width: 100%;
}

.vl-wave div svg path {
    fill: var(--purple);
    stroke: none;
}

.vl-section {
    padding: 60px 0;
}

.vl-section-purple {
    background-color: rgba(69, 83, 199, 0.05);
}

.vl-section-head {
    text-align: center;
    margin-bottom: 20px;
}

.vl-section-head .title {
    font-weight: 600;
    font-size: 36px;
    margin-bottom: 6px;
    color: var(--purple);
}

.vl-section-content {
    background-color: rgba(69, 83, 199, 0.05);
    padding: 30px;
    border-radius: 10px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.vl-whatsapp-button {
    background-color: #25D366 !important;
    color: #fff !important;
    position: fixed;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    left: -57px;
    padding: 12px;
    font-weight: 500;
    z-index: 9;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.vl-whatsapp-button.en {
    left: -36px;
}

.text-purple {
    color: var(--purple);
}

.form-control {
    height: 40px;
}

.custom-checkbox {
    padding-left: 24px;
}

.custom-checkbox .custom-control-label::before {
    height: 18px !important;
    width: 18px !important;
    top: 3px;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--purple);
    border-color: var(--purple);
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--purple);
    border-color: var(--purple);
}

.custom-control-label::after {
    width: 18px !important;
    height: 18px !important;
    top: 3px !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--purple);
}

.bg-purple {background-color: var(--purple) !important}


/* Cookie */
.vl-cookie-box {
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    padding: 20px;
    border-radius: 6px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 440px;
    z-index: 99;
    right: 20px;
}

.vl-cookie-box .title {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vl-cookie-box .title img {
    height: 32px;
    margin-right: 10px;
}

.vl-cookie-box .link-close {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5px;
    font-size: 24px;
    display: flex;
    color: #fff !important;
}

/* ma eklemeler */
.svgboyutu{width:32px; height:32px}
.ilksatirkismi{margin-top: 60px !important;}
.ikonboyutlari {width:100px;}
.ikonboyutlari1 {width:100px;}
.leftborder{border-left: 4px solid #1c2ab8;}
.container_kart *{
margin:0;
padding:0;
box-sizing:border-box;
}

.container_kart{
font-family:'Inter',sans-serif;
color:#0b132b;
}

.container_kart{
width:95%;
max-width:1400px;
margin:auto;
padding:10px 0 0px;
}

/* HEADER */

.top{
text-align:center;
margin-bottom:38px;
}

.mini{
display:inline-block;
padding:10px 22px;
background:#eef1ff;
border-radius:40px;
font-size:14px;
font-weight:700;
color:#3856ff;
margin-bottom:18px;
}

.top h1{
font-size:68px;
line-height:1.08;
font-weight:800;
letter-spacing:-2px;
margin-bottom:18px;
}

.top h1 span{
color:#3856ff;
}

.top p{
max-width:1030px;
margin:auto;
font-size:18px;
line-height:1.8;
color:#667085;
}

/* GRID */

.row1{
display:grid;
grid-template-columns:0.9fr 1.94fr 0.9fr;
gap:24px;
margin-bottom:24px;
}

.cozumler_row2{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-bottom:40px;
}

/* kartcozumler */

.kartcozumler{
background:#fff;
border-radius:24px;
padding:25px;
border:1px solid #edf0f7;
box-shadow:0 8px 30px rgba(0,0,0,.05);
position:relative;
min-height:250px;
}

.badge{
position:absolute;
top:24px;
left:24px;
background:#3556ff;
color:#fff;
font-size:13px;
font-weight:700;
padding:8px 16px;
border-radius:40px;
}

.flex_kartic{
display:flex;
gap:28px;
align-items:flex-start;
margin-top:0px;
}

.ikon_kart{
font-size:72px;
line-height:1;
min-width:92px;
}

.icerik_kart h3{
font-size:20px;
font-weight:800;
margin-bottom:10px;
}

.icerik_kart p{
font-size:16px;
line-height:1.75;
color:#667085;
}

.kart_cizgi{
height:1px;
background:#edf0f7;
margin:7px 0 17px;
}

.kart_bottom{
display:flex;
justify-icerik_kart:space-between;
align-items:end;
gap:10px;
}

.small{
font-size:14px;
color:#98a2b3;
margin-bottom:6px;
}

.price{
font-size:29px;
font-weight:800;
line-height:1;
color:#3556ff;
}

.price span{
font-size:16px;
font-weight:500;
color:#667085;
margin-left:6px;
}

.container_kart .btn{
background:#3556ff;
color:#fff;
text-decoration:none;
padding:15px 28px;
border-radius:14px;
font-size:14px;
font-weight:700;
white-space:nowrap;
}

/* CENTER */

.center{
background:linear-gradient(135deg,#324bff,#1c2ab8);
border-radius:24px;
padding:26px;
position:relative;
box-shadow:0 18px 40px rgba(52,75,255,.22);
min-height:325px;
}

.center .badge{
background:#fff;
color:#3556ff;
}

.center-top{
    display: flex;
    gap: 18px;
    margin-top: -7px;
    align-items: flex-start;
    margin-left: 116px;
}

.center .ikon_kart{
font-size:78px;
min-width:100px;
color:#fff;
}

.center-text h3{
font-size:32px;
font-weight:800;
color:#fff;
margin-bottom:8px;
}

.center-text p{
font-size:15px;
color:#e6ebff;
}

.inner{
background:#fff;
border-radius:18px;
padding:22px;
margin-top:-21px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.inner div{
border-right:1px solid #edf0f7;
padding-right:14px;
}

.inner div:last-child{
border-right:none;
}

.inner strong{
display:block;
font-size:16px;
font-weight:800;
margin-bottom:8px;
color:#111827;
}

.inner span{
font-size:14px;
line-height:1.6;
color:#667085;
}

.center-bottom{
    display: flex;
    justify-icerik_kart: space-between !important;
    align-items: end;
    margin-top: 18px;
    justify-content: space-between;
}

.center-bottom .small{
color:#dfe5ff;
}

.center-bottom .price{
color:#fff;
font-size:29px;
}

.center-bottom .price span{
color:#dfe5ff;
}

.center-btn{
background:#fff;
color:#3556ff;
padding:15px 28px;
border-radius:14px;
text-decoration:none;
font-weight:700;
font-size:16px;
}

/* FOOT ikon_kartS */

.features{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
text-align:center;
}

.features i{
font-style: normal;
font-size:28px;
display:block;
margin-bottom:10px;
color:#3556ff;
}

.features h4{
font-size:18px;
font-weight:700;
margin-bottom:5px;
}

.features p{
font-size:14px;
color:#667085;
}

/* MOBILE */

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

@media(max-width:1200px){

/* CONTAINER */
.container_kart{
    padding:0;
}

/* BAŞLIK */
.container_kart .top h1{
    font-size:37px;
}

/* 🔥 ANA YAPI → FLEX (STABİL) */
.container_kart .row1{
    display:flex !important;
    flex-direction:column !important;
    gap:16px;
}

/* ✅ SIRALAMA */

/* 1️⃣ Sınırsız Hosting (mavi) */
.container_kart .center{
    order:-1 !important;
}

/* 2️⃣ .com Domain */
.container_kart .row1 .kartcozumler:nth-child(1){
    order:0 !important;
}

/* 3️⃣ Hazır Web Sitesi */
.container_kart .row1 .kartcozumler:nth-child(3){
    order:1 !important;
}

/* ❌ GRID ETKİLERİNİ SIFIRLA */
.container_kart .center{
    grid-column:auto !important;
}

/* ALT GRID */
.container_kart .cozumler_row2{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:16px;
}

/* FEATURES FIX (tema çakışma çözüm) */
.container_kart .features{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:20px;
}

/* TYPOGRAPHY */
.container_kart .icerik_kart h3{font-size:28px !important;}
.container_kart .icerik_kart p{font-size:18px !important;}
.container_kart .price{font-size:32px !important;}
.container_kart .price span{font-size:18px !important;}
.container_kart .small{font-size:16px !important;}
.container_kart .btn{font-size:18px !important;}

.container_kart .center-text h3{font-size:32px !important;}
.container_kart .center-text p{font-size:18px !important;}

.container_kart .inner strong{font-size:18px !important;}
.container_kart .inner span{font-size:16px !important;}

.container_kart .features h4{font-size:18px !important;}
.container_kart .features p{font-size:14px !important;}

/* KAYMA FIX */
.container_kart .center-top{
    margin-left:0 !important;
}

/* ICON */
.container_kart .svgboyutu{
    width:48px !important;
    height:48px !important;
}

}


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

@media(max-width:768px){
.inner{margin-top: 6px;}

.center-top{margin-top: 28px;}
/* HER ŞEY TEK SÜTUN */
.container_kart .row1{
    flex-direction:column !important;
}

.container_kart .cozumler_row2{
    grid-template-columns:1fr !important;
}

.container_kart .features{
    grid-template-columns:1fr !important;
}

}
/* ===== TABLET ÖZEL (768–1200) ===== */
@media (min-width:768px) and (max-width:1200px){

/* FLEX → GRID */
.container_kart .row1{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:20px;
}

/* 🔥 Sınırsız Hosting ÜSTTE FULL */
.container_kart .center{
    grid-column:1 / -1 !important;
    order:0 !important;
}

/* .com SOL */
.container_kart .row1 .kartcozumler:nth-child(1){
    order:1 !important;
}

/* Hazır Web SAĞ */
.container_kart .row1 .kartcozumler:nth-child(3){
    order:2 !important;
}

}
/*# ma eklemeler biter */

/*ma eklemeler 2.kısım*/

.avantajlar{padding: 0px !important;}
.verilink-advantages{
    padding:60px 20px;
    background:radial-gradient(circle at 75% 10%, #4553c7 0%, #002d6a 50%);
}

.verilink-advantages .container{
    max-width:1400px;
    margin:auto;
}

.verilink-advantages .section-title{
    text-align:center;
    max-width:850px;
    margin:0 auto 60px;
}

.verilink-advantages .section-title h2{
    font-size:51px;
    font-weight:800;
    color:#ffffff;
    margin-bottom:20px;
    line-height:1.2;
}

.verilink-advantages .section-title p{
    font-size:18px;
    line-height:1.8;
    color:#e9e9e9;
}

.advantages-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    align-items:stretch;
}

.advantage-card{
 background: #fff;
    border-radius: 24px;
    padding: 19px 36px;
    text-align: center;
    border: 1px solid #edf0f7;
    transition: all .35s ease;
    height: 284px;
    position: relative;
}

.advantage-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 50px rgba(0,0,0,0.08);
    z-index:2;
}

.advantage-card .icon{
    width:88px;
    height:88px;
    margin:0 auto 24px;
    background:linear-gradient(135deg,#eef2ff,#ffffff);
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#3553d8;
    transition:all .3s ease;
}

.advantage-card:hover .icon{
    background:#3553d8;
    color:#fff;
}

.advantage-card h3{
    font-size:24px;
    font-weight:700;
    color:#111827;
    margin-bottom:16px;
    line-height:1.4;
}

.advantage-card p{
    font-size:16px;
    line-height:1.8;
    color:#6b7280;
    margin:0;
}

@media(max-width:992px){

    .advantages-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .verilink-advantages .section-title h2{
        font-size:45px;
    }

}

@media(max-width:768px){

.advantage-card{

    height: auto;
}

    .advantages-grid{
        grid-template-columns:1fr;
    }

    .verilink-advantages{
        padding:70px 15px;
    }

    .verilink-advantages .section-title{
        margin-bottom:50px;
    }

    .verilink-advantages .section-title h2{
        font-size:45px;
    }

    .verilink-advantages .section-title p{
        font-size:16px;
    }

    .advantage-card{
        padding:35px 25px;
    }

    .advantage-card h3{
        font-size:22px;
    }

}


.verilink-campaigns{
  padding:90px 20px;
  background:#f4f7ff;
  font-family:Arial,sans-serif;
}

.campaign-header{
  text-align:center;
  margin-bottom:55px;
}

.campaign-badge{
  background:#295cff;
  color:#fff;
  padding:10px 22px;
  border-radius:40px;
  font-size:13px;
  font-weight:700;
  display:inline-block;
  margin-bottom:18px;
}

.campaign-header h2{
font-size: 50px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
}

.campaign-header p{
  max-width:700px;
  margin:auto;
  color:#667085;
  font-size:17px;
  line-height:1.8;
}

.campaign-grid{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.campaign-card{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  padding:35px 28px;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.4s;
  isolation:isolate;
}

.campaign-card:hover{
  transform:translateY(-12px);
}

.campaign-card .glow{
  position:absolute;
  width:260px;
  height:260px;
  background:rgba(255,255,255,.12);
  border-radius:50%;
  top:-120px;
  right:-100px;
  z-index:-1;
}

.domain-card{
  background:linear-gradient(135deg,#ff0037,#ff4d00);
}

.hosting-card{
  background:linear-gradient(135deg,#1b2cff,#00a6ff);
}

.mail-card{
  background:linear-gradient(135deg,#6a11cb,#2575fc);
}

.vds-card{
  background:linear-gradient(135deg,#8e2de2,#ff0080);
}

.discount-circle{
  position:absolute;
  top:22px;
  right:22px;
  width:85px;
  height:85px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  font-size:28px;
  font-weight:800;
  box-shadow:0 15px 30px rgba(0,0,0,.15);
}

.card-top{
  color:#fff;
}

.mini-tag{
  display:inline-block;
  background:rgba(255,255,255,.18);
  padding:8px 16px;
  border-radius:30px;
  font-size:12px;
  font-weight:700;
  margin-bottom:22px;
  backdrop-filter:blur(10px);
}

.card-top h3{
  font-size:38px;
  line-height:1.1;
  margin-bottom:14px;
  font-weight:800;
}

.card-top p{
  color:rgba(255,255,255,.85);
  line-height:1.7;
  font-size:15px;
}

.campaign-image{
  text-align:center;
  margin:25px 0;
}

.campaign-image img{
  width:180px;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.25));
}

.campaign-card a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:#fff;
  color:#111827;
  padding:18px;
  border-radius:16px;
  font-weight:700;
  transition:.3s;
}

.campaign-card a:hover{
  background:#111827;
  color:#fff;
}

@media(max-width:1100px){

  .campaign-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:700px){

    .verilink-campaigns{
  padding:40px 20px;
}
.campaign-header {
    margin-bottom: 39px;
}

  .campaign-header h2{
    font-size:36px;
  }

  .campaign-grid{
    grid-template-columns:1fr;
  }

}
.verilink-hero-support {/*
background: radial-gradient(circle at 20% 20%, #0788c9 0%, #075d99 35%, #173b6f 100%); */
    padding: 70px 20px;
    overflow: hidden;
    position: relative;
    color: #f9f8f8;
    font-family: Arial, sans-serif;
}

.vh-container {
  max-width: 1180px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: 50px;
}

.vh-badge {
    display: inline-block;
    background: rgb(20 65 149 / 79%);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
}

.vh-content h2 {
    font-size: 42px;
    line-height: 1.18;
    margin-bottom: 22px;
    font-weight: 800;
    color: #525252;
}

.vh-content p {
font-size: 16px;
    line-height: 1.8;
    max-width: 620px;
    color: rgb(58 58 58 / 86%);
    margin-bottom: 28px;
}

.vh-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-bottom: 34px;
}

.vh-list span {
    font-size: 17px;
    font-weight: 600;
    color: #0a0a0a;
}

.vh-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.vh-actions a {
  background: #ff8a13;
  color: #fff;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(255,138,19,.28);
}

.vh-actions .outline {
background: #203b9f;
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: none;
}

.vh-visual {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.vh-visual img {
  position: relative;
  z-index: 3;
  max-height: 430px;
  max-width: 100%;
  object-fit: contain;
}

.vh-shape {
  position: absolute;
  border: 22px solid;
  border-radius: 45% 55% 50% 50%;
  width: 330px;
  height: 430px;
  transform: rotate(20deg);
  opacity: .95;
}

.shape-one {
  border-color: #ff8a13;
  right: 125px;
  top: 0;
}

.shape-two {
  border-color: #22c6bd;
  right: 25px;
  top: 0;
  transform: rotate(-18deg);
}

@media(max-width: 900px) {
  .vh-container {
    grid-template-columns: 1fr;
  }

  .vh-content h2 {
    font-size: 30px;
  }

  .vh-list {
    grid-template-columns: 1fr;
  }

  .vh-visual {
            min-height: 272px;
        margin-top: -11px;
  }

  .vh-shape {
    width: 230px;
    height: 300px;
  }
}
/* ma 2.kısım biter*/