/* ===================================================
   GALLERY SECTION
=================================================== */

.gallery-section{

   padding:100px 0;

   background:
      linear-gradient(
         180deg,
         #000,
         #140008
      );

   position:relative;

   overflow:hidden;

}

/* ===================================================
   HEADING
=================================================== */

.gallery-heading{

   text-align:center;

   max-width:760px;

   margin:
      0 auto 70px;

}

.gallery-heading h2{

   font-size:58px;

   line-height:1.2;

   color:#fff;

   margin:
      25px 0 20px;

}

.gallery-heading p{

   color:#aaa;

   font-size:18px;

   line-height:1.9;

}

/* ===================================================
   GRID
=================================================== */

.gallery-grid{

   display:grid;

   grid-template-columns:
      repeat(4,1fr);

   gap:28px;

}

/* ===================================================
   CARD
=================================================== */

.gallery-card{

   position:relative;

   overflow:hidden;

   border-radius:28px;

   height:430px;

   background:#111;

   border:
      1px solid rgba(255,255,255,0.08);

   transition:0.4s ease;

}

.gallery-card:hover{

   transform:
      translateY(-8px);

   border-color:
      rgba(255,0,120,0.25);

   box-shadow:
      0 0 35px rgba(255,0,120,0.15);

}

/* ===================================================
   IMAGE
=================================================== */

.gallery-card img{

   width:100%;
   height:100%;

   object-fit:cover;

   display:block;

   transition:0.5s ease;

}

.gallery-card:hover img{

   transform:scale(1.06);

}

/* ===================================================
   BADGE
=================================================== */

.gallery-badge{

   position:absolute;

   top:16px;
   left:16px;

   z-index:5;

   padding:8px 15px;

   border-radius:40px;

   background:
      rgba(0,0,0,0.45);

   backdrop-filter:blur(14px);

   border:
      1px solid rgba(255,255,255,0.08);

   color:#fff;

   font-size:10px;

   font-weight:600;

   letter-spacing:1.5px;

   text-transform:uppercase;

}

/* ===================================================
   RATE TAG
=================================================== */

.gallery-rate-tag{

   position:absolute;

   top:16px;
   right:16px;

   z-index:5;

   padding:8px 14px;

   border-radius:40px;

   background:
      linear-gradient(
         45deg,
         #ff2e7a,
         #ff0066
      );

   color:#fff;

   font-size:11px;

   font-weight:700;

   box-shadow:
      0 0 20px rgba(255,0,120,0.25);

}

/* ===================================================
   OVERLAY
=================================================== */

.gallery-overlay-info{

   position:absolute;

   left:0;
   right:0;
   bottom:0;

   padding:22px;

   background:
      linear-gradient(
         to top,
         rgba(0,0,0,0.95),
         rgba(0,0,0,0.55),
         transparent
      );

}

/* ===================================================
   NAME + AGE
=================================================== */

.gallery-top-info{

   display:flex;

   align-items:center;

   justify-content:space-between;

   gap:10px;

   margin-bottom:14px;

}

.gallery-top-info h3{

   margin:0;

}

.gallery-top-info h3 a{

   color:#fff;

   font-size:28px;

   font-weight:700;

   line-height:1.2;

   transition:0.3s;

}

.gallery-top-info h3 a:hover{

   color:#ff2e7a;

}

/* AGE */

.gallery-top-info span{

   color:#ffcc00;

   font-size:17px;

   font-weight:600;

}

/* ===================================================
   STATUS
=================================================== */

.gallery-status{

   display:inline-flex;

   align-items:center;

   gap:8px;

   padding:10px 15px;

   border-radius:40px;

   background:
      rgba(255,255,255,0.08);

   backdrop-filter:blur(10px);

   border:
      1px solid rgba(255,255,255,0.08);

   color:#fff;

   font-size:12px;

   font-weight:500;

}

/* STATUS DOT */

.gallery-status::before{

   content:"";

   width:8px;
   height:8px;

   border-radius:50%;

   background:#00ff84;

   box-shadow:
      0 0 10px #00ff84;

}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:1200px){

   .gallery-grid{

      grid-template-columns:
         repeat(3,1fr);

   }

}

@media(max-width:992px){

   .gallery-grid{

      grid-template-columns:
         repeat(2,1fr);

   }

}

/* MOBILE */

@media(max-width:768px){

   .gallery-section{

      padding:80px 0;

   }

   .gallery-heading{

      margin-bottom:45px;

   }

   .gallery-heading h2{

      font-size:38px;

   }

   .gallery-heading p{

      font-size:16px;

   }

   .gallery-grid{

      grid-template-columns:
         repeat(2,1fr);

      gap:16px;

   }

   .gallery-card{

      height:280px;

      border-radius:22px;

   }

   /* BADGE */

   .gallery-badge{

      top:12px;
      left:12px;

      padding:6px 11px;

      font-size:8px;

   }

   /* RATE */

   .gallery-rate-tag{

      top:12px;
      right:12px;

      padding:6px 11px;

      font-size:9px;

   }

   /* OVERLAY */

   .gallery-overlay-info{

      padding:15px;

   }

   /* NAME */

   .gallery-top-info{

      margin-bottom:10px;

   }

   .gallery-top-info h3 a{

      font-size:18px;

   }

   /* AGE */

   .gallery-top-info span{

      font-size:13px;

   }

   /* STATUS */

   .gallery-status{

      padding:7px 11px;

      font-size:10px;

      gap:6px;

   }

   .gallery-status::before{

      width:6px;
      height:6px;

   }

}
/* ===================================================
   GALLERY CONTENT SECTION
=================================================== */

.gallery-content-section{

   padding:100px 0;

   background:
      linear-gradient(
         180deg,
         #140008,
         #000
      );

   position:relative;

   overflow:hidden;

}

/* ===================================================
   WRAP
=================================================== */

.gallery-content-wrap{

   display:grid;

   grid-template-columns:
      1.1fr 0.9fr;

   gap:70px;

   align-items:start;

}

/* ===================================================
   LEFT CONTENT
=================================================== */

.gallery-content h2{

   font-size:48px;

   line-height:1.25;

   color:#fff;

   margin:
      25px 0 30px;

}

.gallery-content p{

   color:#aaa;

   font-size:16px;

   line-height:1.9;

   margin-bottom:24px;

}

/* LINKS */

.gallery-content a{

   color:#ff2e7a;

   transition:0.3s;

}

.gallery-content a:hover{

   color:#ffcc00;

}

/* ===================================================
   RIGHT GRID
=================================================== */

.gallery-feature-grid{

   display:grid;

   grid-template-columns:
      repeat(2,1fr);

   gap:24px;

}

/* ===================================================
   CARD
=================================================== */

.gallery-feature-card{

   position:relative;

   padding:35px 28px;

   border-radius:28px;

   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 */

.gallery-feature-card::before{

   content:"";

   position:absolute;

   inset:0;

   background:
      radial-gradient(
         circle at top right,
         rgba(255,0,120,0.12),
         transparent 45%
      );

   pointer-events:none;

}

/* HOVER */

.gallery-feature-card:hover{

   transform:
      translateY(-8px);

   border-color:
      rgba(255,0,120,0.3);

   box-shadow:
      0 0 35px rgba(255,0,120,0.15);

}

/* ===================================================
   ICON
=================================================== */

.gallery-feature-card i{

   font-size:34px;

   color:#ff2e7a;

   margin-bottom:22px;

}

/* ===================================================
   TITLE
=================================================== */

.gallery-feature-card h3{

   color:#fff;

   font-size:24px;

   line-height:1.4;

   margin-bottom:16px;

}

/* ===================================================
   TEXT
=================================================== */

.gallery-feature-card p{

   color:#aaa;

   font-size:14px;

   line-height:1.8;

}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:992px){

   .gallery-content-wrap{

      grid-template-columns:1fr;

   }

}

@media(max-width:768px){

   .gallery-content-section{

      padding:80px 0;

   }

   .gallery-content h2{

      font-size:36px;

   }

   .gallery-content p{

      font-size:15px;

   }

   .gallery-feature-grid{

      grid-template-columns:1fr;

      gap:18px;

   }

   .gallery-feature-card{

      padding:30px 24px;

   }

   .gallery-feature-card h3{

      font-size:22px;

   }

}