/*=========================================================
  GALLERY HERO
=========================================================*/

.gallery-hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    height:50vh;
    min-height:500px;
    overflow:hidden;

    background:url("../images/newimg/r2.jpeg") center center/cover fixed no-repeat;
}

.gallery-hero::before{
    content:"";
    position:absolute;
    inset:0;
    /* background:linear-gradient(
        135deg,
        rgba(3,3,3,.96),
        rgba(3,3,3,.72),
        rgba(3,3,3,.94)
    ); */
}

.gallery-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center,
        rgba(193,18,31,.08),
        transparent 70%);
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:2;
    margin-top:80px;
}

.hero-content h1{
    margin-top:100px;
    margin-bottom:20px;

    font-size:clamp(44px,8vw,90px);
    line-height:1.1;
    letter-spacing:2px;

    color:#fff;
}

.hero-content p{
    /* color:var(--brand-silver); */
    color:red;

    font-size:24px;
    font-weight:500;

    text-transform:uppercase;
    letter-spacing:5px;
}

        /* ==========================================================================
           GALLERY FILTERING
           ========================================================================== */
        .gallery-section {
            padding: 80px 0 100px;
            background: var(--bg-dark);
            min-height: 100vh;
        }

        .gallery-filter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 80px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            padding-bottom: 20px;
        }

        .filter-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-family: var(--font-sans);
            font-size: 20px;
            letter-spacing: 3px;
            text-transform: uppercase;
            cursor: pointer;
            padding-bottom: 10px;
            position: relative;
            transition: var(--transition);
        }

        .filter-btn::after {
            content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
            width: 0; height: 2px; background: var(--brand-red); transition: var(--transition);
        }

        .filter-btn:hover, .filter-btn.active { color: #fff; }
        .filter-btn.active::after { width: 100%; }

        /* ==========================================================================
           EDITORIAL MASONRY GRID
           ========================================================================== */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 350px;
            gap: 20px;
            transition: var(--transition);
        }

        /* Asymmetrical sizing classes */
        .item-tall { grid-row: span 2; }
        .item-wide { grid-column: span 2; }
        .item-large { grid-row: span 2; grid-column: span 2; }

        .gallery-item {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            background: #111;
            border-radius: 2px;
            transition: transform 0.6s ease, opacity 0.6s ease;
        }

        .gallery-item.hide {
            display: none; /* Handled by JS for filtering */
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(40%) contrast(110%);
            transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), filter 1s ease;
        }

        /* Hover Overlay Effect */
        .item-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(3,3,3,0.95) 0%, rgba(193,18,31,0.2) 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: var(--transition);
        }

        .gallery-item:hover img { transform: scale(1.08); filter: grayscale(0%); }
        .gallery-item:hover .item-overlay { opacity: 1; }

        .overlay-icon {
            font-size: 30px;
            color: var(--brand-red);
            margin-bottom: 15px;
            transform: translateY(20px);
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .overlay-text {
            font-family: var(--font-serif);
            font-size: 26px;
            color: #fff;
            letter-spacing: 2px;
            text-align: center;
            transform: translateY(20px);
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
        }

        .gallery-item:hover .overlay-icon,
        .gallery-item:hover .overlay-text {
            transform: translateY(0);
        }

        /* Load More Button */
        .load-more-container {
            text-align: center;
            margin-top: 80px;
        }

        .btn-outline {
            display: inline-block;
            background: transparent;
            color: var(--brand-silver);
            border: 1px solid rgba(255,255,255,0.2);
            padding: 18px 45px;
            font-size: 11px;
            letter-spacing: 4px;
            text-transform: uppercase;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-outline:hover {
            border-color: var(--brand-red);
            background: rgba(193, 18, 31, 0.05);
            color: #fff;
        }

        /* ==========================================================================
           FULLSCREEN LIGHTBOX
           ========================================================================== */
        .lightbox {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.98);
            backdrop-filter: blur(15px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .lightbox.active { opacity: 1; pointer-events: auto; }

        .lightbox-close {
            position: absolute;
            top: 40px; right: 50px;
            color: var(--brand-silver);
            font-size: 40px;
            cursor: pointer;
            transition: var(--transition);
            z-index: 10000;
        }

        .lightbox-close:hover { color: var(--brand-red); transform: rotate(90deg); }

        .lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 90vh;
        }

        .lightbox-img {
            max-width: 100%;
            max-height: 85vh;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 30px 80px rgba(0,0,0,0.9);
            transform: scale(0.95);
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .lightbox.active .lightbox-img { transform: scale(1); }

        .lightbox-caption {
            position: absolute;
            bottom: -40px;
            left: 0;
            width: 100%;
            text-align: center;
            color: var(--text-muted);
            font-family: var(--font-serif);
            font-size: 20px;
            letter-spacing: 2px;
        }

        /* ==========================================================================
           CTA SECTION
        /*=========================================================
  CTA SECTION
=========================================================*/

.cta-section{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    text-align:center;
    background:url("../images/newimg/g4.png") center center/cover fixed no-repeat;
}

.cta-section::before{
    content:"";
    position:absolute;
    inset:0;
    /* background:linear-gradient(
        135deg,
        rgba(3,3,3,.95),
        rgba(8,8,8,.86),
        rgba(3,3,3,.95)
    ); */
}

.cta-section::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center,
        rgba(193,18,31,.08),
        transparent 70%);
    pointer-events:none;
}

.cta-content{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:auto;
}

.cta-content h2{
    font-size:clamp(38px,5vw,60px);
    color:#fff;
    line-height:1.1;
    margin:18px 0 25px;
}

.cta-content p{
    max-width:700px;
    margin:0 auto 50px;
    color:#d2d2d2;
    font-size:24px;
    line-height:1.9;
    font-weight:400;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

/*==========================
 Button
==========================*/

.btn-primary{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;

    padding:18px 45px;

    background:var(--brand-red);
    color:#fff;

    font-size:12px;
    font-weight:500;
    letter-spacing:3px;
    text-transform:uppercase;

    border-radius:2px;

    box-shadow:0 15px 35px rgba(193,18,31,.25);
    transition:all .4s ease;
}

.btn-primary::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.18);
    transform:skewX(-25deg);
    transition:.7s;
}

.btn-primary:hover::before{
    left:120%;
}

.btn-primary:hover{
    background:var(--brand-red-hover);
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(193,18,31,.45);
}

        /* ==========================================================================
           RESPONSIVE DESIGN
           ========================================================================== */
        @media(max-width:1200px) {
            .gallery-grid { grid-template-columns: repeat(3, 1fr); }
            .item-large { grid-column: span 2; grid-row: span 2; }
            .item-wide { grid-column: span 2; }
        }

        @media(max-width:992px) {
            .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
            .item-large, .item-wide { grid-column: span 2; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

        @media(max-width:768px) {
    
            
            .hero-content h1 { font-size: 50px; }
            
            .gallery-filter { gap: 15px; }
            .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 350px; }
            .item-large, .item-wide, .item-tall { grid-column: span 1; grid-row: span 1; } /* Reset masonry on mobile */
            
            .footer-grid { grid-template-columns: 1fr; }
        }