/* ===================================================
   CATEGORY INTRO SECTION
=================================================== */

.category-intro-section{

   padding:100px 0;

   background:
      linear-gradient(
         180deg,
         #120008,
         #000
      );

   position:relative;

   overflow:hidden;

}

/* ===================================================
   WRAP
=================================================== */

.category-intro-wrap{

   display:grid;

   grid-template-columns:
      1.05fr 0.95fr;

   gap:70px;

   align-items:center;

}

/* ===================================================
   CONTENT
=================================================== */

.category-intro-content h2{

   font-size:52px;

   line-height:1.2;

   color:#fff;

   margin:
      25px 0 30px;

}

.category-intro-content p{

   color:#aaa;

   font-size:16px;

   line-height:1.9;

   margin-bottom:24px;

}

/* LINKS */

.category-intro-content a{

   color:#ffcc00;

   transition:0.3s;

}

.category-intro-content a:hover{

   color:#ff2e7a;

}

/* ===================================================
   IMAGE
=================================================== */

.category-intro-image{

   position:relative;

}

.category-intro-image img{

   width:100%;

   height:650px;

   object-fit:cover;

   border-radius:36px;

   display:block;

   border:
      1px solid rgba(255,255,255,0.08);

}

/* ===================================================
   FLOATING BADGE
=================================================== */

.category-floating-badge{

   position:absolute;

   left:20px;
   bottom:20px;

   padding:12px 18px;

   border-radius:50px;

   background:
      rgba(0,0,0,0.45);

   backdrop-filter:blur(14px);

   border:
      1px solid rgba(255,255,255,0.08);

   display:inline-flex;

   align-items:center;

   gap:10px;

}

/* DOT */

.category-floating-badge::before{

   content:"";

   width:8px;
   height:8px;

   border-radius:50%;

   background:#00ff84;

   box-shadow:
      0 0 10px #00ff84;

}

/* TEXT */

.category-floating-badge span{

   color:#fff;

   font-size:12px;

   font-weight:600;

   letter-spacing:1px;

   text-transform:uppercase;

}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:992px){

   .category-intro-wrap{

      grid-template-columns:1fr;

   }

}

@media(max-width:768px){

   .category-intro-section{

      padding:80px 0;

   }

   .category-intro-content h2{

      font-size:38px;

   }

   .category-intro-content p{

      font-size:15px;

   }

   .category-intro-image img{

      height:500px;

      border-radius:28px;

   }

   .category-floating-badge{

      left:18px;
      bottom:18px;

      padding:10px 16px;

   }

   .category-floating-badge span{

      font-size:10px;

   }

}
/* ===================================================
   CATEGORY CONTENT SECTION
=================================================== */

.category-content-section{

   padding:100px 0;

   background:
      linear-gradient(
         180deg,
         #000,
         #140008
      );

   position:relative;

   overflow:hidden;

}

/* ===================================================
   WRAP
=================================================== */

.category-content-wrap{

   display:grid;

   grid-template-columns:
      0.95fr 1.05fr;

   gap:70px;

   align-items:center;

}

/* ===================================================
   IMAGE
=================================================== */

.category-content-image{

   position:relative;

}

.category-content-image img{

   width:100%;

   height:650px;

   object-fit:cover;

   border-radius:36px;

   display:block;

   border:
      1px solid rgba(255,255,255,0.08);

}

/* ===================================================
   FLOATING BADGE
=================================================== */

.category-content-badge{

   position:absolute;

   left:20px;
   bottom:20px;

   padding:12px 18px;

   border-radius:50px;

   background:
      rgba(0,0,0,0.45);

   backdrop-filter:blur(14px);

   border:
      1px solid rgba(255,255,255,0.08);

   display:inline-flex;

   align-items:center;

   gap:10px;

}

/* DOT */

.category-content-badge::before{

   content:"";

   width:8px;
   height:8px;

   border-radius:50%;

   background:#00ff84;

   box-shadow:
      0 0 10px #00ff84;

}

/* TEXT */

.category-content-badge span{

   color:#fff;

   font-size:12px;

   font-weight:600;

   letter-spacing:1px;

   text-transform:uppercase;

}

/* ===================================================
   CONTENT
=================================================== */

.category-content-box h2{

   font-size:50px;

   line-height:1.2;

   color:#fff;

   margin:
      25px 0 30px;

}

.category-content-box p{

   color:#aaa;

   font-size:16px;

   line-height:1.9;

   margin-bottom:24px;

}

/* LINKS */

.category-content-box a{

   color:#ffcc00;

   transition:0.3s;

}

.category-content-box a:hover{

   color:#ff2e7a;

}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:992px){

   .category-content-wrap{

      grid-template-columns:1fr;

   }

}

@media(max-width:768px){

   .category-content-section{

      padding:80px 0;

   }

   .category-content-box h2{

      font-size:38px;

   }

   .category-content-box p{

      font-size:15px;

   }

   .category-content-image img{

      height:500px;

      border-radius:28px;

   }

   .category-content-badge{

      left:18px;
      bottom:18px;

      padding:10px 16px;

   }

   .category-content-badge span{

      font-size:10px;

   }

}
/* ===================================================
   CATEGORY FEATURE SECTION
=================================================== */

.category-feature-section{

   padding:100px 0;

   background:
      linear-gradient(
         180deg,
         #140008,
         #000
      );

   position:relative;

   overflow:hidden;

}

/* ===================================================
   GRID
=================================================== */

.category-feature-grid{

   display:grid;

   grid-template-columns:
      repeat(4,1fr);

   gap:28px;

}

/* ===================================================
   CARD
=================================================== */

.category-feature-card{

   position:relative;

   padding:38px 30px;

   border-radius:30px;

   overflow:hidden;

   background:
      rgba(255,255,255,0.04);

   backdrop-filter:blur(18px);

   border:
      1px solid rgba(255,255,255,0.08);

   transition:0.4s ease;

}

/* GLOW */

.category-feature-card::before{

   content:"";

   position:absolute;

   inset:0;

   background:
      radial-gradient(
         circle at top right,
         rgba(255,204,0,0.12),
         transparent 45%
      );

   pointer-events:none;

}

/* HOVER */

.category-feature-card:hover{

   transform:
      translateY(-8px);

   border-color:
      rgba(255,204,0,0.35);

   box-shadow:
      0 0 35px rgba(255,204,0,0.15);

}

/* ===================================================
   ICON
=================================================== */

.category-feature-icon{

   width:72px;
   height:72px;

   border-radius:50%;

   display:flex;

   align-items:center;

   justify-content:center;

   margin-bottom:26px;

   background:
      linear-gradient(
         45deg,
         #f1df92,
         #e7d27a
      );

   box-shadow:
      0 0 25px rgba(241,223,146,0.2);

}

.category-feature-icon i{

   color:#000;

   font-size:28px;

}

/* ===================================================
   TITLE
=================================================== */

.category-feature-card h3{

   color:#fff;

   font-size:25px;

   line-height:1.4;

   margin-bottom:16px;

}

/* ===================================================
   TEXT
=================================================== */

.category-feature-card p{

   color:#aaa;

   font-size:15px;

   line-height:1.8;

}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:1200px){

   .category-feature-grid{

      grid-template-columns:
         repeat(2,1fr);

   }

}

@media(max-width:768px){

   .category-feature-section{

      padding:80px 0;

   }

   .category-feature-grid{

      grid-template-columns:1fr;

      gap:18px;

   }

   .category-feature-card{

      padding:32px 24px;

      border-radius:24px;

   }

   .category-feature-icon{

      width:60px;
      height:60px;

      margin-bottom:20px;

   }

   .category-feature-icon i{

      font-size:22px;

   }

   .category-feature-card h3{

      font-size:21px;

   }

   .category-feature-card p{

      font-size:14px;

   }

}
/* ===================================================
   CATEGORY CTA SECTION
=================================================== */

.category-cta-section{

   padding:0 0 100px;

   background:#000;

}

/* ===================================================
   CTA BOX
=================================================== */

.category-cta-box{

   position:relative;

   padding:70px 60px;

   border-radius:36px;

   overflow:hidden;

   text-align:center;

   background:
      linear-gradient(
         135deg,
         #1a0008,
         #2b0010
      );

   border:
      1px solid rgba(255,255,255,0.08);

}

/* GLOW */

.category-cta-box::before{

   content:"";

   position:absolute;

   inset:0;

   background:
      radial-gradient(
         circle at top right,
         rgba(255,204,0,0.12),
         transparent 40%
      );

   pointer-events:none;

}

/* ===================================================
   HEADING
=================================================== */

.category-cta-box h2{

   font-size:54px;

   line-height:1.2;

   color:#fff;

   margin:
      25px 0;

}

/* ===================================================
   TEXT
=================================================== */

.category-cta-box p{

   max-width:850px;

   margin:
      0 auto 40px;

   color:#aaa;

   font-size:16px;

   line-height:1.9;

}

/* ===================================================
   BUTTONS
=================================================== */

.category-cta-btns{

   display:flex;

   justify-content:center;

   gap:20px;

   flex-wrap:wrap;

}

.category-cta-btn{

   min-width:220px;

   height:60px;

   padding:0 32px;

   border-radius:50px;

   display:inline-flex;

   align-items:center;

   justify-content:center;

   text-align:center;

   font-size:16px;

   font-weight:700;

   transition:0.3s ease;

}

/* PRIMARY */

.category-cta-btn.wa-btn{

   background:
      linear-gradient(
         45deg,
         #f1df92,
         #e7d27a
      );

   color:#000;

}

/* OUTLINE */

.category-cta-btn.outline-btn{

   border:
      1px solid rgba(255,255,255,0.12);

   color:#fff;

   background:
      rgba(255,255,255,0.04);

}

/* HOVER */

.category-cta-btn:hover{

   transform:
      translateY(-4px);

}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:768px){

   .category-cta-section{

      padding:0 0 80px;

   }

   .category-cta-box{

      padding:50px 25px;

      border-radius:28px;

   }

   .category-cta-box h2{

      font-size:36px;

   }

   .category-cta-box p{

      font-size:15px;

   }

   .category-cta-btn{

      width:100%;

   }

}