.bg-primary { background-color: var(--primary-color); }
.bg-white { background-color: var(--white-color); }
.bg-white-secondary { background-color: var(--second-white-color); }
.bg-deactive { background-color: var(--deactive-color); }
.bg-black { background-color: var(--black-color); }
.bg-red { background-color: var(--error-color); }
.text-color-white { color: var(--white-color); }
.text-color-deactive { color: var(--deactive-color); }
.text-color-primary { color: var(--primary-color); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex-grow: 1; }
.center-hor { justify-content: center; }
.center-ver { align-items: center; }
.container-padding { padding: 60px 0px; }
.container-padding-bottom { padding: 0px 0px 60px; }
.item-padding-10 { padding: 10px; }
.item-padding-20 { padding: 20px; }
.item-padding-30 { padding: 30px; }
.item-padding-40 { padding: 40px; }
.item-padding-10-20 { padding: 10px 20px; }
.item-padding-20-30 { padding: 20px 30px; }
.item-padding-20-40 { padding: 20px 40px; }
.item-padding-80-0 { padding: 80px 0px; }
.btn-padding{padding: 8px 24px;}
.un-wrap { white-space: nowrap; }
.img-icon,.img-content{ object-position: center; height: 100%; width: 100%; }
.img-content{ object-fit: cover; object-position: center;}
.img-icon{ object-fit: contain; object-position: center;}
.jus-sb { justify-content: space-between; }
.gap-30 { gap: 30px; }
.gap-20 { gap: 20px; }
.gap-10 { gap: 10px; }
.gap-5 { gap: 5px; }
.gap-2 { gap: 2px; }
.col-1 { width: 100%; }
.z-index-minus-1 { z-index: -1; }
.z-index-1 { z-index: 1; }
.z-index-2 { z-index: 2; } 
.z-index-3 { z-index: 3; } 
.z-index-4 { z-index: 4; } 
.z-index-5 { z-index: 5; } 
.border-radius-15 { border-radius: 15px; }
.border-radius-10 { border-radius: 10px; }
.border-radius-5 { border-radius: 5px; }
.col-section-2 ,.col-2 { width: calc((100% - var(--gap)) / 2); }
.col-3 { width: calc((100% - (var(--gap) * 2)) / 3); }
.col-4 { width: calc((100% - (var(--gap) * 3)) / 4); }
.col-5 { width: calc((100% - (var(--gap) * 4)) / 5); }
.clamp-text{  display: -webkit-box;  -webkit-box-orient: vertical;  overflow: hidden;}
.fill-view { width: 100%;}
.btn-custom { width: 100%; border-radius: 10px; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25); }
.btn-custom-fit { width: fit-content !; border-radius: 10px; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25); }
.custom-item { border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.4); }
.custom-item.shadow { box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25); }
.custom-item__low { border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 10px; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06); }
.cursor-pointer { cursor: pointer; }
.title-border-bottom{background-color: var(--primary-color); height: 2px; max-width: 94px;}
.cover-all{width: 100%; height: 100%; top: 0px; left: 0px;}
.overflow-hidden{overflow: hidden;}

.border-none {border: none;outline: none;}

.text-sm {font-size: calc(var(--font-size-base) - 2px);}
.text-xs {font-size: calc(var(--font-size-base) - 4px);}
.text-red { color: var(--error-color);}

.widget-posts__link {width: 100%;height: 100%;top: 0;left: 0;}

@media (max-width: 1024px) {.col-4,.col-5 {width: calc((100% - (var(--gap) * 2)) / 3);} .col-section-2 {width: 100%}}
@media (max-width: 768px) {.item-padding-80-40 { padding: 30px; } .item-padding-40 { padding: 20px; } .col-3,.col-4,.col-5 {width: calc((100% - var(--gap)) / 2);}  .item-padding-20{ padding: 10px;}  .item-padding-30{ padding: 10px;} }
@media (max-width: 600px) {
  :root {
    --gap: 10px;
  }
  
  .col-3,.col-2 {width: 100%;}
}

@media (max-width: 480px) {.col-2,.col-3,.col-4,.col-5 { width: 100%;}}

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.bold { font-weight: bold; }
.italic { font-style: italic; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-header-size{ font-size: 38px;}
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fixed { position: fixed; }
.pos-stick { position: sticky; }

.container-xxs,
.container-xs,
.container-m,
.container-l,
.container-ts,
.container-s {
  margin: 0 auto;
  width: calc(100% - 20px);
}

.container-f{
  max-width: 100%;
  width: 100%;
}

.container-l{
  max-width: 1414px;
}

.container-m {
  max-width: 1199px;
}

.container-s {
  max-width: 1098px;
}

.container-xs {
  max-width: 920px;
}

.container-xxs{
  max-width: 500px;
}

.container-ts {
  max-width: 768px;
}