.hosting-plan-tab {
    width: 100%;
}
 .hosting-plan-tab .nav-item {
    background-image: url('../images/common/blue-btn-bg.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    transition: .3s ease-in-out;
}
 .hosting-plan-tab .nav-item .nav-link {
    color: var(--white-color);
    text-align: center;
    font-weight: 600;
}
 .hosting-plan-tab .nav-item:hover {
    background-image: url('../images/common/orange-btn-bg.webp');
}
.hosting-plan-tab .nav-item-active{
    background-image: url('../images/common/orange-btn-bg.webp');
}
@media (max-width: 480px) {

     .hosting-plan-tab .nav-item {
        width: 30%;
        margin: 0% 1.5% 5% 1.5%;
    }
     .hosting-plan-tab .nav-item .nav-link {
        padding: 12% 0% 9% 0%;
        font-size: 3.5vw ;
    }
}
@media (min-width: 481px) {
     .hosting-plan-tab .nav-item {
        width: 25%;
        margin: 0% 2.5% 5% 2.5%;
    }
     .hosting-plan-tab .nav-item .nav-link {
        padding: 13% 0% 9% 0%;
        font-size: 2.5vw ;
    }
}
@media (min-width: 576px) {
     .hosting-plan-tab .nav-item {
        width: 17%;
        margin: 0% 1.5% 5% 1.5%;
    }
     .hosting-plan-tab .nav-item .nav-link {
        padding: 15% 0% 9% 0%;
        font-size: 1.5vw ;
    }
}
@media (min-width: 768px) {
     .hosting-plan-tab .nav-item {
        width: 12%;
        margin: 0% 3% 3% 3%;
    }
     .hosting-plan-tab .nav-item .nav-link {
        font-size: 1vw ;
    }
}
@media (min-width: 992px) {
     .hosting-plan-tab .nav-item .nav-link {
        padding: 12% 0% 9% 0%;
        font-size: .9rem ;
    }
}
@media (min-width: 1200px) {
     .hosting-plan-tab .nav-item .nav-link {
        padding: 13% 0% 10% 0%;
    }
}
@media (min-width: 1400px) {

     .hosting-plan-tab .nav-item .nav-link {
        padding: 15% 0% 10% 0%;
    }
}