/******* HOME PAGE *********/
/******** HEADER HOME *********/


.header-home {background:url(../img/header.jpg) no-repeat center center; background-size:cover;}
.header-home .container-item {padding:40px;}
.header-home-wrapper {display: flex; align-items:center; gap:40px;}
.header-home-item {flex: 1; display:flex; flex-direction:column; align-items:center; text-align:center;
                  gap:30px; max-width:600px; text-wrap:balance;}
.header-home-item b {text-transform:uppercase; font-size:17px; margin-bottom:-10px; font-weight:400; letter-spacing:2px;}
.header-home-item h1 {display:flex; flex-direction:column; align-items:center; font-size:56px; line-height:1;
                     color:var(--primary);}
.header-home-item h1 span {color:var(--blue);}

.header-home-item img {width:100%; max-width:525px;}
.btn-solid.red {background:#ff0000; color:#fff;}
.i-red {color:#ff0000 !important; border-radius:4px; background:#fff; padding:4px 6px; font-size:10px;}
.header-home-item .btn-solid {min-width:140px;}
@media (min-width: 1200px){
 .btn-solid.red:hover {background:#000000; }
}
/******* HOME how it works *********/
.how-works-wrapper {display: grid; gap:30px; grid-template-columns: repeat(4, minmax(0, 1fr));}
.how-item {display: flex; flex-direction: column; gap: 10px; background:#1f1f1f; 
              padding:30px 20px; border-radius:30px; flex:1; text-align:center;}
.how-item__image {position: relative; max-width: 161px; margin:0px auto 10px auto}
.how-item__image span {position: absolute; right:-12px; display:flex; align-items: center; justify-content: center;
                      background: linear-gradient(98deg,rgba(129, 0, 155, 1) 0%, rgba(0, 212, 255, 1) 100%);
                      width:60px; height:60px; border-radius:50%;}
.how-item__image span i {font-size: 28px; color: #fff;}
.how-item__image img {width: 100%;  aspect-ratio: 1 / 1; display:grid; place-items:center;    
  border-radius:50%;  object-fit: cover; margin:0 auto}
.how-item h3 {font-size:24px; }
.how-item p {color: #999;}

/******** SCROLL LOGO BRENDS ********/
.slider-row {overflow: hidden; margin-bottom: 0px;}
.slider-track {display: flex;width: fit-content;animation: slide-left 38s linear infinite; position:relative;}
.slider-row.reverse .slider-track {animation: slide-right 38s linear infinite;}
.slider-track img {width: 260px;height: 100px;object-fit: contain;margin: 0 10px; border-radius: 20px;}
@keyframes slide-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
@keyframes slide-right {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
}
.ander-brends-wrapper {margin: 0px auto 0 auto; display: flex; gap:30px; flex-wrap:wrap;}
.ander-brands-item {text-align:center; flex:1; background:#222222; padding:30px;
                   border-radius:20px; border:1px solid #353535;
                   }
.ander-brands-item div {font-size:46px; font-weight:800; margin-bottom:6px;}
.ab-blue {color:#30c1ff;}
.ab-yellow {color:#ffec00;}
.ab-green {color:#bfff00;}
.ab-orange {color:#ffa800;}

/******* HOME CREATOR block *********/

.creator-item {display: flex; flex-direction: column; gap: 20px; background:#1f1f1f; 
              padding:20px; border-radius:30px; flex:1; position:relative; padding-bottom:60px;
              text-decoration:none; color:#fff; margin-bottom:10px; border:2px solid #1f1f1f}
.creator-item__image {position: relative; max-width: 161px; margin:10px auto 0 auto}
.creator-item__image > img {width: 100%;  aspect-ratio: 1 / 1; display:grid; place-items:center;    
  border-radius:50%;  object-fit: cover; margin:0 auto}
.creator-item__image span {position: absolute; right:0px; display:flex; flex-direction:column; gap:4px;}
.creator-item__image span img {width: 40px;}
.creator-item__title {display: flex; flex-direction: column; gap: 0px; align-items:center; text-align:center; overflow:hidden;}
.creator-item__title strong {font-size:24px; transition:all 0.3s;}
.creator-item__title span {color:#01d4ff;}
.creator-item__foot {display: flex; gap: 20px; justify-content: space-between; font-size:14px; position:absolute;
                    bottom:20px; left:20px; right:20px;}
.creator-item__foot span {display: flex; gap: 4px; justify-content: space-between; align-items:center;}
.creator-item__foot span i {color: var(--primary); font-size:15px;}
.creator-item:hover {border-color:var(--primary);} 
.creator-item:hover .creator-item__title strong {color:var(--primary);}

/************* HOME COMMUNITY block **************/
.community-wrapper {display:flex; flex-direction:column; align-items:center;
                   text-align:center; gap:30px; text-wrap:balance;}
.com-p {font-size:18px; font-weight:400;}
.com-p.com-gray {color: #999; text-transform:uppercase; font-size:16px; letter-spacing:2px;}
.com-p.com-blue {color:#30c1ff;}
.com-num {color:#30c1ff; font-size:86px; line-height:1; font-weight:900; margin-top:-10px;}
.com-image-wrapper {display:flex; align-items:center; gap:10px;}
.com-image-wrapper img {width:265px; position:relative; z-index:2}
.com-image-wrapper i {color:var(--primary); font-size:46px; display:flex; background:#313131; align-items:center;
                     justify-content:center; aspect-ratio: 1 / 1; border-radius:50px; width:68px; cursor:pointer;
                     transition:all 0.3s; margin-left:-20px}
.com-image-wrapper i:hover {background:var(--primary); color:#000;}
.no-sponsors {margin-bottom: 40px;}
.no-sponsors h2 span {display: block;}
.no-sponsors p {max-width:600px;}
.ns-blue {margin-bottom:30px; color:var(--blue); text-transform:uppercase; letter-spacing:2px; text-wrap:balance; line-height:1.4;}
.ns-white {margin-top:30px; font-size:20px; line-height:1.4}
.ns-white br {display:none;}
.ns-white span {color:var(--primary);}
/******** start earning wrapper *********/
.start-earning-wrapper {display: flex; align-items: center; gap: 40px; display:none;}
.start-earning-item {flex: 1; display:flex; flex-direction:column; 
                  gap:30px; max-width:600px; text-align:left;}
.start-earning-item img {width:100%; max-width:585px;}
.start-earning-item h2 {font-size: 56px;font-weight: 900; line-height:1.1; text-wrap:balance; margin-bottom:-10px;}
.start-earning-item h2 span {color:var(--primary);}
.start-earning-item p {font-size:20px; font-weight:300; max-width:360px; text-wrap:balance;}
.start-earning-item .btn-group {justify-content:start;}

.start-earn-wrapper {display: flex; align-items: center; gap: 40px;  padding:40px;
                    border-radius:30px; background:#2a2a2a; border:1px solid #404040;}
.start-earn-item {flex: 1; display:flex; flex-direction:column; 
                  gap:30px; max-width:600px; text-align:left;}
.start-earn-item img {width:100%; max-width:585px;}
.start-earn-item h2 {font-size: 46px;font-weight: 900; line-height:1.1; text-wrap:balance; margin-bottom:-10px;}
.start-earn-item h2 span {color:var(--primary);}
.start-earn-item p {font-size:20px; font-weight:300; max-width:360px; text-wrap:balance;}
.start-earn-item .btn-group {justify-content:start;}


/******** Browse by Niche ********/
.niches-grid {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}
.niche-tag {display: inline-flex; align-items: center; gap: 10px;
    background: #2a2a2a; border-radius: 12px; padding: 10px 24px; color: #b5b5b5;
    text-decoration: none; transition: all 0.3s; font-size:16px; border:1px solid #99999938;}
.niche-tag i {color:var(--primary); font-size:14px; font-weight:300; transition: all 0.3s; opacity:0.8}
.niche-tag:hover {color:#ccc;}
.niche-tag:hover i {color:#ccc; opacity:1}
/********* HOME FAQ ********/
.faq-wrapper {display: grid; grid-template-columns: 320px 1fr; gap: 56px;}
.faq-wrapper .container-title {text-align:left;}
.faq-wrapper .container-title h2 {font-size:46px;}

.tabs-nav {display: flex; flex-direction:column;}
.tabs-for-faq {}
.tab-btn {padding: 14px 20px; border:0;color: #ccc;font-size: 15px;cursor: pointer; flex:1; text-decoration:none; 
          text-align:center;display:flex; align-items:center; gap:12px; text-align:left; white-space: nowrap; 
          border-radius:12px;}
.tab-btn i {font-size:15px;}
.tab-btn.active { color: #000000; background:var(--primary);}
.tab-btn span.tab-label {flex:1;}
.faq-support {background:#1f1f1f; border-radius:12px; display:flex; flex-direction:column; gap:6px;
             padding:18px 20px; margin-top:10px;}
.faq-support span {color:#999; font-size:15px;}
.faq-support a {text-decoration:none;}
.tab-panel {display: none; min-height: 200px;}
.tab-panel.active { display: block; }


/***** MEDIA *****/
@media (min-width: 1200px) {
  .tab-btn:not(.active):hover  {background:#1f1f1f;}
}
@media (max-width: 1200px) {
    .creator-item:hover {border-color:#1f1f1f;} 
    .creator-item:hover .creator-item__title strong {color:#fff;} 
}

@media (max-width: 1000px) {
 .header-home {background:url(../img/header-mob.jpg) no-repeat center center; background-size:cover;}
 .header-home-wrapper {flex-direction:column;}
 .header-home .container-item {padding:80px 40px 40px 40px;}
 .how-works-wrapper {gap:20px;; grid-template-columns: repeat(2, minmax(0, 1fr));}

 .start-earning-wrapper {display: flex; align-items: center; gap: 40px;}
 .start-earning-item h2 {font-size: 46px; margin-bottom:-10px;}
 .start-earning-item p {font-size:18px; }
 .ander-brands-item {flex-basis:30%;}
 .faq-wrapper {flex-direction:column; display:flex; gap:0;}
 .faq-item {display: contents; background:#ccc;}
 .tabs-for-faq {flex-direction: row;flex-wrap: nowrap;overflow-x: auto;overflow-y: hidden;
        scrollbar-width: none;-webkit-overflow-scrolling: touch; margin-bottom:20px;
        scroll-behavior: smooth; order:1}
 .tabs-for-faq::-webkit-scrollbar {display: none;}
 .tab-btn {padding: 14px 16px; font-size: 14px;border-radius:0px;}
 .tab-btn i {display:none;}
 .tab-btn span.tab-count {display:none;}
 .tab-btn.active {background:none; color:var(--primary); border-bottom:1px solid;} 
 .faq-content {order:2;}
 .faq-wrapper .accordion-wrapper {max-width:100%;}
 .faq-support {order:3; margin-top:20px;}
}

@media (max-width: 840px) {
 .faq-wrapper .container-title {text-align:center;}
 .faq-wrapper .container-title h2 {font-size:46px;} 
 .start-earning-wrapper {flex-direction:column; gap: 40px;}
 .start-earning-item {align-items:center; text-align:center;}
 .start-earning-item h2 {font-size: 46px;}
 .start-earning-item p {font-size:18px; }
 .start-earn-wrapper {flex-direction:column; align-items:center;}
 .start-earn-item {align-items:center; text-align:center;}
}

@media (max-width: 640px) {
   .header-home .container-item {padding:60px 20px 40px 20px;}
   .header-home-item h1 {font-size:42px;}
   .how-works-wrapper {gap:20px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
   .how-item {padding:30px 20px; border-radius:30px; }
   .how-item__image {position: relative; max-width: 140px; margin:0px auto 0px auto}
   .how-item__image span {right:-10px; width:46px; height:46px;}
   .how-item__image span i {font-size: 24px;}
   .how-item h3 {font-size:24px; }
   .how-item p {font-size:16px;}

   .ander-brends-wrapper {gap:20px 20px;}
   .slider-row {margin-bottom: 10px;}
   .slider-track img {width: 160px;height: 100px; margin:0 5px;}
   .ander-brands-item div {font-size:36px; margin-bottom:4px;}
   .com-tit h2 {font-size: 32px;} 
   .niches-grid {gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); display:grid; margin:0 -10px;}
   .niches-grid a {font-size:16px; padding:14px 14px; flex-direction:column; align-items:center; text-align:center;
                  border-radius:20px; gap:6px; border:0;}
   .niche-tag {padding: 14px 20px;}
   
   .start-earning-wrapper {flex-direction:column; gap: 30px;}
   .start-earning-item h2 {font-size: 32px; line-height:1.3}
   .start-earning-item p {font-size:18px; }
   .no-sponsors {margin-bottom: 40px;}
   .start-earn-wrapper {padding:0px; gap:30px; background:none; border:0;}
   .start-earn-item {gap:30px;}
   .start-earn-item h2 {font-size: 32px; line-height:1.3}
   .start-earn-item p {font-size:18px; }
   .faq-wrapper .container-title h2 {font-size:32px;} 
   .ns-white br {display:block;}
 }

 @media (max-width: 431px) {
.com-image-wrapper img {width:200px;}  
.com-image-wrapper i {font-size:30px;  width:50px; } 

}

@media (max-width: 340px) {
.com-image-wrapper img {width:200px;}
}