/************************** PRINCIPAL ********************************/
.container-hub{
  margin-top:.5rem;
  margin-bottom:.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
      margin: auto;
    max-width: 1100px;
}
}
@media(min-width:1540px){
  .container-hub{
  max-width:1500px !important;
  margin:auto;
  }
}
@media(min-width:1240px){
  .container-hub{
  max-width:none !important;
  margin:auto;
  }
}
@media(min-width:1110px){
  .container-hub{
  max-width:1100px;
  margin:auto;
  }
}
@media(max-width:1100px){
  .container-hub{
  max-width:100vh;
  margin:auto;
  }
}
/*_______________________ columns ____________________________________ */
.tns-outer{
  width:55%;
}
@media(max-width:1024px){
  .tns-outer{
    width:50%;
  }
}
@media(max-width:964px){
  .tns-outer{
    width:764px;
  }
}
@media(max-width:764px){
  .tns-outer{
    width:564px;
  }
}
@media(max-width:564px){
  .tns-outer{
    width:425px;
  }
}
@media(max-width:375px){
  .tns-outer{
    width:350px;
  }
}
/*_______________________ main container _____________________________*/
.card{
  border-radius:17px;
  overflow:hidden;
}
/*_______________________ nav buttons slider _________________________*/
.tns-nav{
  display:flex;
  gap:1rem;
  margin-top:1rem;
  justify-content:center;
}
.tns-nav button.tns-nav-active {
  min-width: 120px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1 !important;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.tns-nav>button {
    height: 12px;
    width: 12px;
    cursor: pointer;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(34 83 160 / var(--tw-bg-opacity));
    opacity: .4;
    padding: 0;
    border: 0;
}
.tns-outer{
  position:relative;
}
.tns-outer .tns-controls{
  position:absolute;
  width:100%;
  top:40%;
  display:flex;
  justify-content:space-between;
  z-index:10;
}
.tns-controls button{
  border:0;
  background:transparent;
}
/*_______________________ responsive nav buttons slider _________________________*/
@media(max-width:764px){
  .tns-outer .tns-controls{
    display:none;
  }
}
/*________________ content card _________________________ */
section.slider-content{
padding: 1rem 2rem 1rem 2rem;
    background: #F1F4F6;
}
.slider-content .title{
  max-width:100%;
font-weight: 700;
font-size: 37.9696px;
line-height: 45px;
color: #333333;
}
.content_author_tag{
  display:flex;
  justify-content:start;
  gap:1rem;
  margin-top:1rem;
  margin-bottom:1.5rem;
}
.content_author_tag .author{
font-weight: 700;
font-size: 17.5453px;
line-height: 26px;
color: #333333;
}
.content_author_tag .tag_select{
font-weight: 400;
font-size: 17.5453px;
line-height: 26px;
color: #383838;
}
/*===============RESPONSIVE CARD ===========================*/
@media(max-width:764px){
  section.slider-content{
    padding:1rem;
  }
  .slider-content .title{
    font-size: 19px;
    line-height: 22px;
  }
}
/*____________________________________________ list _______________________________________*/
.my-list-buttons{
  width:40%;
  max-height: 770px;
  overflow: auto;
  padding: 0rem 0rem 0rem 2rem;
}
@media(max-width:1024px){
  .my-list-buttons{
    width:50%;
  }
}
@media(max-width:964px){
  .my-list-buttons{
    width:100%;
    padding:0;
  }
}
/*======================== LIST ==============================*/
.list{
  display:block;
}
.list-mobile{
  display:none;
}
@media(max-width:964px){
  .list{
    display:none;
  }
  .list-mobile{
  display:block;
}
}
/*________________________________________ buttons ____________________________________*/
ul.list li.button_list{
border: 1px solid #2253A0;
border-radius: 13px;
  display:flex;
  align-items:center;
  overflow:hidden;-
}
.list .button_list .tag_select{
font-weight: 400;
font-size: 16.86px;
line-height: 24px;
}
.list .button_list .title{
font-weight: 700;
font-size: 20px;
line-height: 22px;
      margin-top: 0.25rem;

}
.list .button_list .link{
    color: #2253A0;
    width: 100%;
    min-height: 100px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 34px;
}
.list .button_list .link:hover{
  background:#2253A0;
  color:#FFFF;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  .my-list-buttons {
    scrollbar-width: auto;
    scrollbar-color: #a9a9a9 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  .my-list-buttons::-webkit-scrollbar {
    width: 10px;
  }

  .my-list-buttons::-webkit-scrollbar-track {
    background: #ffffff;
  }

  .my-list-buttons::-webkit-scrollbar-thumb {
    background-color: #a9a9a9;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
/* ===== mobile list css ====== */
.list-mobile .select-mobile{
  background: #2253A0;
  border-radius: 7.3523px;
  color:white;
  padding:10px 29px;
  font-weight:bold;
  font-size: 16px;
  line-height: 18px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  margin-top:1.5rem;
}
.list-mobile .list-buttons li{
color: #2253A0;
  border: .5px solid #2253A0;
border-radius: 8px;
  padding:9px 20px;
  margin-bottom:1rem;
}
.list-mobile .list-buttons li .tag_select{
  font-weight: 400;
  font-size: 10.7834px;
  line-height: 15px;
}
.list-mobile .list-buttons li .title{
  font-weight: 700;
  font-size: 12.2538px;
  line-height: 18px;
}
.rotate {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.group:hover .rotate {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.list-mobile .list-buttons{

background: rgba(255, 255, 255, 0.99);
box-shadow: 4px 8px 64px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(8px);
 border-radius:10px;
 position: absolute;
 width: 100%;
 padding: 1rem;
  left:0;
  right:0;
z-index:10;
  max-height: 300px;
    overflow: auto;
}
.option-tag{
font-weight: 400;
font-size: 12.2538px;
line-height: 15px;
}
.option-title{
font-weight: 700;
font-size: 12.2538px;
line-height: 18px;
}
img.left{
  position:relative;
  right:50%;
}
img.right{
  position:relative;
  right:-50%;
}
@media(max-width:666px){
  .w-res img{
    width:90%; margin:auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .w-res .slider-content{
    width:90%; margin:auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}
#loadDelay{
      visibility: hidden;  
      animation: fadein 2s !important;
    -moz-animation: fadein 2s !important; /* Firefox */
    -webkit-animation: fadein 2s !important; /* Safari and Chrome */
    -o-animation: fadein 2s !important; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}