.bg-sec-light{background-color: #f5f6fa;}
.title-xl{
    font-size: clamp(1.8rem,3vw,2.5rem);
    line-height: clamp(3rem,2ch,6rem);
}
.pad-bot-xxl{padding-bottom: 4rem;}
.text-size-m{font-size: clamp(1.3rem,1.6vw,1.6rem);line-height: clamp(2rem,2.4ch,3rem);}
.text-size-xs{font-size: clamp(1.0rem,2.2vw,1.2rem);line-height: 2rem;}
.text-thin{font-weight: 300;}
.text-extrathin{font-weight: 200;}
.text-bold{font-weight: 700;}
.text-bolder{font-weight: 800;}
.text-maxbold{font-weight: 900;}
.wrap{position: relative;margin: 0 auto;}
.wrap-s{max-width:920px;}

.font-hostkurd{font-family: HostKurdWeb;}
.flex{display: flex;flex-wrap: wrap;}
.flex-col{flex-direction: column;}
.flex-gap-xxl{gap: clamp(2rem,3vw,6rem);column-gap: 6rem;}
.flex-gap-l {gap: 2rem;}
.flex-gap-m {gap: 1.1rem;}
.flex-justify-end {justify-content: flex-end;}
.flex-align-center {align-items: center;}

.fit-wide {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding-top: 8vh;
    padding-bottom: 8vh;
    padding-left: 4rem;
    padding-right: 4rem;
}
.plan li {font-size: 15px;margin: 0;padding: 0;list-style: none;text-align: right;font-weight: 300;}

.tier-desc br {display: none;}

.feature:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f060";
    font-weight: 200;
    margin: 0 3px;
}

.feature-text{float:right;width:45%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.feature-value{float:left;width:45%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.feature-divide{display:inline-block;}
.feature{text-align:center !important;line-height: 45px;border-bottom: 1px solid #ececec;}
.feature:last-child{border: none;}


.sub-nav {margin-top: 20px;padding: 10px 0;text-align: center;}
.sub-nav a{text-decoration:none;}

.sub-nav .button{background-color: #fff;color: #000; padding:10px;width: 200px;display: inline-block;margin: 5px;border-radius: 4px;border: 1px solid lightgrey;}
.sub-nav .button:hover{background-color: #f3f3f3;}
.sub-nav .button:focus {outline: none;box-shadow: none;}

.sub-nav .active{background-color: #24a8ff;color: #fff;border: 1px solid #2599e6;}
.sub-nav .active:hover{background-color: #178cdb;}

.sub-nav .icon{float: right;font-size: 30px;border-left: 1px solid #d8d8d8;padding-left: 10px;}
.sub-nav span.text {line-height: 35px;}

@media (max-width: 768px){
.sub-nav .button{width:100%;margin: 5px 0;}
}

.sub-nav-container{background: #fff;padding: 10px;border-radius: 5px 5px 0 0;border: 1px solid #d1d1d1;margin-bottom: 30px;}
.sub-nav-container a{text-decoration:none;}
.sub-nav-container .button{padding: 10px;border-radius: 5px;border: 1px solid #e9e9e9;display: inline-block;}
.sub-nav-container .button:hover{background-color: #f3f3f3;}

.includes-features{margin-top:20px;}
.includes-features .head-text {padding: 0 0 0 0;margin: 15px 0;text-align: center;background: url(../img/head-bg.png) no-repeat center center;background-size: 100% auto;}
.includes-features .head-text span{background-color:#fff;padding:0 10px;font-weight: 500;font-size: 16px;}
.includes-features .item{border: 1px solid #efefef;border-radius: 4px;padding: 0;font-size: 16px;padding: 5px;background: #fbfbfb;}
.includes-features .icon{float: right;font-size: 50px;font-weight: 400;color: #9298a5;width: 100%;text-align: center;border-bottom: 1px solid #e7e7e7;display: block;padding-bottom: 10px;padding-top:0.5rem;background: #fdfdfd;}
.includes-features .text{font-weight: 300;color: #6d7986;line-height: 30px;text-align: center;padding: 10px 0;display: inline-block;width: 100%;}   
    
    
h6, .h6 {
    font-size: 1.75rem;
}
.lt-weight {
    font-weight: 200 !important;
}
.justify-content-center {
    justify-content: center !important;
}
.bg-white {
    background-color: #fff !important;
}

.text-orange {
    color: #fff;
    font-weight: 200;
}
.tier .tier-level h3 {
    font-size: 1.75em;
}

.tier .tier-level h3 {
    font-size: 1.75em;
}
.tier .tier-level .acct {
    font-size: .75em;
    margin-top: -10px;
    display: block;
}
.gray-600 {
    color: #868e96;
}
.tier .tier-info .tier-price {
    position: relative;
    font-size: 5em;
    margin-left: -15px;
    font-weight: 700;
}
.tier .tier-info .monthly {
    display: block;
    margin-top: -15px;
    margin-right: -5px;
}
.tier .tier-info .tier-price sup {
    top: -30px;
    margin-right: 4px;
    font-size: 0.35em;
}

.tier-desc .mt-0{
    border-bottom: 1px dashed#dfdfdf;
    padding-bottom: 10px;
}

.tier .tier-desc p {
    font-size: 0.9em !important;
    line-height: 22px;
}
.tier ul{
    padding: 0;
}
.plan{
    padding:10px;
}
.plan .tier-4, .metal .tier-4 {
    background: linear-gradient(45deg, #6ea9f7, #1a73e8);
 }
 .plan .tier-color, .metal .tier-color {
    border-radius: 10px 10px 0 0;
    width: 100%;
}
.plan-head{
    background: #015cd1;
    border-radius: 20px 20px 0 0;
    width: 100%;
}
.plan-head .title{
    color: #fff;
    font-weight: 400;
    font-family: HostKurdWeb;
    font-size: 1.5rem;
    border-bottom: 1px solid #0756bd;
    background: #1266d3;
    border-radius: 10px 10px 0 0;
    margin-bottom: 3rem;
}

.plan-head .pricing{
    color: #fff;
    font-weight: 200;
}
.plan-head .pricing .price{
    font-size: 5rem;
    text-shadow: 2px 2px 2px #0e305c;
}
.plan-head .pricing .price .dollar{
    font-weight: 200;
    font-size: 3.5rem;
}
.plan-head .pricing .price sup{
    font-weight: 200;
    top: -0.6em;
    font-size: 2.2rem;
}
.plan-head .pricing .monthly{
    font-weight: 200;
    font-size: 1.5rem;
    font-family: hostkurdweb;
    top: -20px;
    position: relative;
}
.plan-xl {
    margin-top: -25px;
}
.plan-xl .tier {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.16);
}

.page-header{
    padding: 1rem 0;
    background: white;
    border: 1px solid #d7d6d6;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    margin-bottom: 10px;
}

.btn:focus {
    outline: none;
    box-shadow: none;
  }

.margintop50 {
    margin-top: 50px;
}
.padding0 {
    padding: 0;
}

  /* Header Box */
.headerbox{
    background: url(../img/blue-triangle-lines.svg);
    background-position: right top;
    background-size: 750px auto;
    background-repeat: no-repeat;
    background-color: #DFECFC;
    padding: 39px 0 2%;
}
.headerbox .hero-content {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.hero-content p{
    font-weight: 300;
    font-size: 1.2rem;
    font-family: 'HostKurdWeb';
}
.hero-content h2{
margin-bottom: 1.75rem;
}
.hero-content .cta{
    background-color: #196BDE;
    border: solid 1px;
    border-color: #196BDE;
    font-size: 1.375rem;
    padding: 20px 45px;
    color: white;
    font-family: 'hostkurdweb';
    font-weight: 700;
    border-radius: 5px;
    height: auto;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}
.opDown{
    opacity: 50%;
}
#loading {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
  }
  
  #loading-image {
    z-index: 100;
  }
  
.hero-content .cta:hover{
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0,0,0,.12);
}
.hero-content .cta-alignment-start{
    display: flex;
    justify-content: flex-start;
}

.headerbox .text-eyebrow{
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    font-family: 'HostKurdWeb';
}
.headerbox .text-headline{
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 150%;
    margin-bottom: 1.5rem;
}
.sub-nav h1{
    font-size: 2.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
    font-family: 'HostKurdWeb';
    font-weight: 800;
    line-height: 3rem;
}
.sub-nav p{
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 30px;
    font-family: 'HostKurdWeb';
}

#wordpress .container{
    padding-top:8vh;
    padding-bottom:8vh;
}
/* Filter Items Button */
/*---------------------*/

#filterBtnContainer .button.selected{background-color: #6d7986;color: #fff;}

.filterDiv {
    display: none; /* Hidden by default */
}
  /* The "show" class is added to the filtered elements */
.show {
    display: block !important;
}

@media (max-width: 991px){
    .headerbox {background-image: none;}
    .headerbox .text-headline {font-size: 1.5rem;}
    .hero-content p {font-size: 1.1rem;}
    .hero-content .cta-alignment-start a{width: 100%;}
    .hero-content .cta {padding: 15px 45px;}
    .headerbox img{margin-top: 30px;}
    .headerbox .text-eyebrow {font-size: 1.3rem;}
    .sub-nav h1{font-size: 2rem;}
    .sub-nav p {font-size: 1.1rem;}
    .fit-wide{padding-left: 2rem;padding-right: 2rem;}
}