/*
Theme Name: Hostiko-child
Author: Designing Media
Description: Embark on a journey of hosting excellence with the Hostiko WordPress and WHMCS theme. Immerse yourself in a state-of-the-art design meticulously crafted to cater to the diverse requirements of web hosting providers. Our theme brings together a modern and responsive interface, ensuring a seamless user experience for both hosting providers and their clients. With a perfect fusion of aesthetics and functionality, the Hostiko theme becomes the go-to platform for showcasing hosting plans, services, and technical features. Elevate your online presence with a theme that prioritizes performance, reliability, and an impressive visual appeal tailored to the Hostiko ecosystem.
Version: 2.2.4
Template: hostiko

*/

     :root{
         --arrow-display:none;
     }

    .nexus_pricingplan article{width:100%;margin:0 auto;position:relative;box-shadow:none;border-radius:10px;}
    .nexus_pricingplan ul{display:flex;top:0;z-index:10;}
    .nexus_pricingplan table tbody tr:last-child td{border-bottom-left-radius:10px;}
    .nexus_pricingplan li{list-style:none;flex:1}
    .nexus_pricingplan li:last-child{border-right:1px solid #DDD}
    .nexus_pricingplan button{width:100%;border:1px solid #ddd;border-right:0;border-top:0;padding:10px;background:#FFCE60;font-size:14px;font-weight:700;height:50px;color:#fff}
    .nexus_pricingplan li.active button{background: #025CFB;color:#fff}
    .nexus_pricingplan table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%;background-color:#fff;}
    .nexus_pricingplan th{background:#F5F5F5;display:none;border:solid 1px #d8e3f0;}
    .nexus_pricingplan td,.nexus_pricingplan th{padding:20px;empty-cells:show;text-align:left}
    .nexus_pricingplan table thead tr th.hide2{/* background-color:transparent; */}
    .nexus_pricingplan td+td,.nexus_pricingplan th+th{text-align:center;display:none}
    .nexus_pricingplan td.default{display:table-cell}
    .nexus_pricingplan .sep{background:#fff;font-weight:700;font-size:20px;line-height:20px;color:#403883;padding:20px;border:1px solid #ddd}
    .nexus_pricingplan .txt-l{font-size:28px;font-weight:700;color:#0c5adb}
    .nexus_pricingplan .txt-top{position:relative;top:-9px;left:-2px}
    .nexus_pricingplan .tick{font-size:18px;color:#2CA01C}
    .nexus_pricingplan table tbody tr.pricing_row td{color:#0c5adb}
    .nexus_pricingplan table tr td .comperison_plan_btn a{font-weight:500;background-color: #096fcf!important;text-decoration:none;border: solid 2px #096fcf;color:#fff;font-size:15px;line-height:15px;padding:12px 24px;border-radius:10px;display:inline-block;transition:.5s ease-in-out;box-shadow: 0px 11px 1px 0px rgba(63.99999999999994, 56, 151, 0.1);}
    .nexus_pricingplan table tr td .comperison_plan_btn a:hover{background:#3b88ff!important;color:#fff !important;border:solid 2px #3b88ff;}
    .nexus_pricingplan .hide{border:0;background:none}
    .nexus_pricingplan table{color:#4b5064}
    .nexus_pricingplan table thead tr th{font-size:18px;line-height:20px;color:#403883;border-radius:6px;font-weight:700;padding:20px;padding-top:25px;border:solid 1px #ddd;padding-bottom:25px;background-color:#fff;}
    .nexus_pricingplan table tbody tr:first-child td{background-color:#fff;padding:20px;padding-top:20px;border:solid 1px #ddd; color: #403883;}
    .nexus_pricingplan table tbody tr:first-child td span.txt-l{font-size:26px;line-height:36px;color: #403883;font-weight:400}
    .nexus_pricingplan table tbody .dollar-pricetxt{font-size:16px}
    .nexus_pricingplan table tbody tr:first-child td span.princing_btn a{font-size:12px;line-height:12px;font-weight:700;text-transform:uppercase;display:block;padding-top:15px;color:#516f8f}
    .nexus_pricingplan table tbody tr td{border-left:none;color:#8079b8;border-right:none;/* font-size: 16px; */font-weight:400;line-height:18px;border:solid 1px #ddd;}
    .nexus_pricingplan table tbody tr:first-child{border-left:none;border-top:0}
    .nexus_pricingplan table tbody tr, .nexus_pricingplan tr{border-bottom:none}
    .nexus_pricingplan table tbody tr.tbl_content:nth-child(odd){background-color:#fff!important}
    .nexus_pricingplan table tbody tr.pricing_row{background-color:#eef3fc!important}
    
    
    
    /*Further Responsiveness Css*/
    
    .nexus_pricingplan ul{
	overflow-x: scroll;
    overflow-y: hidden;
}


.nexus_pricingplan ul::-webkit-scrollbar {
  width: 10px;
	height:5px;
}


.nexus_pricingplan ul::-webkit-scrollbar-track {
  background: #ffb53a; 
}
 

.nexus_pricingplan ul::-webkit-scrollbar-thumb {
  background: #333; 
}

    

.nexus_pricingplan table thead tr th:first-child{
   visibility:hidden!important;
   border:none!important;
 }

.nexus_pricingplan table tbody tr td:first-child{
   font-weight:600!important;
    color:#096FCF!important;
    font-size:18px!important;
    
 }
 
 
 /*For Urdu */
 .plan_urdu table tbody tr td:first-child{
     text-align: right;
 }
 
 
/* .nexus_pricingplan table tbody tr:nth-child(10) > td:nth-child(1){
   visibility:hidden!important;
   border:none!important;
 } */
.nexus_pricingplan table tbody tr:first-child td{
  background:#a0a0a038 !important;
 }

.nexus_pricingplan table tbody tr:first-child td:not(.empty_td){
  background:#a0a0a038 !important;
font-weight:800!important;
 }
.nexus_pricingplan table tbody tr td:not(:first-child,.default){
 
font-weight:500!important;
color:#333;
 }

 .nexus_pricingplan table .domains span:after{
    content: "|";
   font-size:8px;
    font-weight:600;
    margin:0px 10px;
    padding:0px !important;
}

 .nexus_pricingplan table th.default{
   position:relative;
}


 .nexus_pricingplan table th.default:before{
    content:"Popular";
    background:#ffce60;
    position:absolute;
    bottom:-10px;
    z-index:10;
    border-radius:20px;
    padding:2px 10px;
    font-size:12px
}



  .animate a{
        color: #ff0000;
    }
    .main-wrapper {
    cursor: pointer;
    width: 100%;
    max-width: 250px;
    margin: 0px auto;
    position: relative;
    z-index: 99;
    text-align: center;
}
 
    
/*     .down-click {*/
/*  display:none;*/
     
/*}*/

.sub-price {
    padding: 6px;
    border: 2px solid #096fcf;
    border-radius: 6px;
}

/*before sub-price*/

.sub-price{
    position:relative;
}



.sub-price:before {
    content: "\e994";
	position: absolute;
    background: #096FCF;
    padding:0px 8px;
    
    color: #ffffff;
    z-index: 120;
    right:0px;
    bottom: 0px;
    font-size: 16px;
    font-weight: 500;
    display: var(--arrow-display);
    font-family: elementskit!important;
	
}

.down-click
{
       display: none !important;
       position: absolute;
       width: 100%;
       top: 95%!important;
       /* border: 2px solid #096fcf; */
       background: #ffffff;
       /* border-radius: 5px; */
       /* border-top: 0px; */
       box-shadow: 10px 10px 79px 0px rgba(55.99999999999997, 136.00000000000014, 255, 0.1);
       border: 2px solid #fbb43e;
       border-top: none;
       z-index: -1;
       
      transition:all 1s ease !important;
}


ul.down-click[is_open="true"]{
    display:block !important;

}







.text-style
{
    display:block;
}
.down-click > li {
    list-style: none;
    padding: 6px;
    border-bottom: 1px solid #dddddd;
    /* border-left: 1px solid #8d8c8c; */
    /* border-right: 1px solid #8d8c8c !important; */
 transition:all 0.3s ease;
}

.down-click > li:hover{
 background:#eee;
}
.Price-layout{
    color: #403883;
font-size:24px!important;
}
.text-style
{
 color:#333;
 font-size:14px!important;
 font-weight:400;   
}
sup {
    top: -1px;
}
  
    .nexus_pricingplan table tr td:nth-child(3) {
            border-left: 3px solid #096fcf !important;
            border-right: 3px solid #096fcf !important;
        background:#096fcf;
            color:#fff;
            border-radius:0px;
        }
    
        .nexus_pricingplan table tr:first-child th:nth-child(3) {
            border-left: 3px solid #096fcf !important;
            border-right: 3px solid #096fcf !important;
            border-top: 3px solid #096fcf !important;
            background:#096fcf;
            color:#fff;
            border-radius:0px;
        }
    
        .nexus_pricingplan table tr:last-child td:nth-child(3) {
            border-left: 3px solid #096fcf !important;
            border-right: 3px solid #096fcf !important;
            border-bottom: 3px solid #096fcf !important;
            background:#096fcf;
            color:#fff;
            border-radius:0px;
        }
    
        .nexus_pricingplan table tr:last-child td:nth-child(3) .comperison_plan_btn a{
           
              color: #ffffff !important;
        background: #FFB237 !important;
        border-color: #FFB237 !important;
    
        }
    
        .nexus_pricingplan table tr:last-child td:nth-child(3) .comperison_plan_btn a:hover{
           
          background: #ffffff !important;
        color: #096FCF !important;
        border-color: #fff !important;
    
       }
       
       
       
       /*price main*/
       
       
       .Price-layout {
        position: relative;
}

.Price-layout img {
        position: absolute;
        top: 10px;
        right: 5px;
        background-color: #fff;
    border-radius: 50%;
    padding: 5px;
    
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.Price-layout img {
  animation: blink 1s infinite; /* Blinking animation with a 1-second duration, set to repeat infinitely */
}





 .nexus_pricingplan table .domains span:last-child:after{
    content: "";
}
    @media (min-width: 991px) {
        .nexus_pricingplan ul{display:none}
        .nexus_pricingplan td,.nexus_pricingplan th{display:table-cell!important;width: 290px;}
        .nexus_pricingplan td+td,.nexus_pricingplan th+th{width:auto}
    }
    @media screen and (max-width: 991px) {
        .nexus_pricingplan .sep{width:100%;float:left;height:auto}
        .nexus_pricingplan table tbody tr td{width:50%;float:left;height:auto;border:none}
        .nexus_pricingplan table tbody tr{display:flex}
        .nexus_pricingplan table tbody tr:first-child td,.nexus_pricingplan td{line-height:20px;padding:10px 20px;border:none}
        .nexus_pricingplan .sep{border:none}
        .nexus_pricingplan table tbody tr{border:none}
        .nexus_pricingplan .sep{padding:15px;font-size:18px;line-height:18px}
        .nexus_pricingplan table tbody tr td{font-size:14px}
    }
    @media screen and (max-width: 480px) {
        .nexus_pricingplan table tbody tr:first-child td span.txt-l{font-size:24px;line-height:24px}
        .nexus_pricingplan table tbody tr:first-child td,.nexus_pricingplan td{padding:15px}
        .nexus_pricingplan table tbody tr:first-child td span.princing_btn a{padding-top:7px}
        .nexus_pricingplan .sep{padding:15px;height:auto;font-size:14px;line-height:14px}
        .nexus_pricingplan table tbody tr td{font-size:14px;line-height:14px}
        .nexus_pricingplan button{height: 96px;}
        .nexus_pricingplan table tbody tr:last-child td a{padding:15px 24px;}
        .nexus_pricingplan table tr td .comperison_plan_btn a {
    font-size: 14px;
    line-height: 14px;
    padding: 12px 22px;
        }
    }
    
    
    
 .is-loading  {
     min-height:20px;
     width:100%;
	 background: #eee;
	 background: linear-gradient(110deg, #e8e8e8 8%, #f5f5f5 18%, #ececec 33%);
	 border-radius: 5px;
	 background-size: 200% 100%;
	 animation: 1.5s shine linear infinite;
}

 .is-loading  > div,
  .is-loading  > sup,
   .is-loading  > span{
     opacity:0;
 }

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}