/* =========================================
SIVANATHI PRODUCTIONS
PREMIUM GALLERY SYSTEM
========================================= */


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


.gallery-hero{

min-height:55vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:150px 20px 80px;

background:

radial-gradient(
circle at top,
rgba(0,229,255,.15),
transparent 45%
),

var(--bg-primary);

}



.gallery-hero h1{

font-size:

clamp(45px,6vw,80px);

font-weight:800;

letter-spacing:-2px;

margin-bottom:20px;


background:

linear-gradient(
90deg,
#ffffff,
#00E5FF
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.gallery-hero p{

max-width:750px;

margin:auto;

font-size:18px;

line-height:1.8;

color:var(--text-light);

}





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


.gallery-section{

padding:80px 20px 120px;

background:var(--bg-primary);

}






/* ==========================
FILTER BUTTONS
========================== */


.gallery-filter{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:60px;

}



.gallery-btn{


padding:12px 28px;

border-radius:50px;


border:

1px solid rgba(255,255,255,.15);


background:

rgba(255,255,255,.05);


color:#fff;


cursor:pointer;


font-size:15px;


transition:.35s ease;


}



.gallery-btn:hover,
.gallery-btn.active{


background:

linear-gradient(
135deg,
#00E5FF,
#8B5CF6
);


color:#000;


border-color:transparent;


transform:translateY(-3px);

}





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


.gallery-grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(260px,1fr)
);


gap:35px;


}




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

.gallery-card{

position:relative;

overflow:hidden;

border-radius:20px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.12);

transition:.35s ease;

aspect-ratio:1 / 1;

}



.gallery-card:hover{

transform:translateY(-8px);

box-shadow:
0 15px 35px rgba(0,0,0,.35);

}



.gallery-card img{

width:100%;

height:100%;

display:block;

object-fit:cover;

object-position:center;

transition:.4s ease;

}



.gallery-card:hover img{

transform:scale(1.05);

}


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


.gallery-info{


padding:25px;


background:

linear-gradient(
180deg,
transparent,
rgba(0,0,0,.85)
);


position:absolute;


bottom:0;


left:0;


right:0;


}




.gallery-info h3{


font-size:22px;


color:#fff;


margin-bottom:8px;


}



.gallery-info p{


font-size:15px;


color:#00E5FF;


}






/* ==========================
HIDDEN FILTER ITEMS
========================== */


.gallery-card.hide{


display:none;


}






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


@media(max-width:768px){



.gallery-hero{


padding:

120px 20px 70px;


}



.gallery-hero p{


font-size:16px;


}




.gallery-section{


padding:

60px 15px 80px;


}



.gallery-filter{


gap:10px;


}



.gallery-btn{


padding:

10px 20px;


font-size:14px;


}


/*

.gallery-card img{


height:330px;

}


*/


}



/* ==========================
GALLERY PREVIEW
========================== */


.gallery-preview{

background:

linear-gradient(
180deg,
transparent,
rgba(0,229,255,.05)
);

}




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

.gallery-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}






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


.preview-card{


position:relative;


overflow:hidden;


border-radius:25px;


border:

1px solid rgba(255,255,255,.12);


aspect-ratio:3 / 4;


background:#08090D;


}







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


.preview-card img{


width:100%;


height:100%;


object-fit:cover;


display:block;


transition:.5s ease;


}




.preview-card:hover img{


transform:scale(1.08);


}







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


.preview-content{


position:absolute;


bottom:0;


left:0;


right:0;


padding:30px;


background:


linear-gradient(

180deg,

transparent,

rgba(0,0,0,.90)

);


}







.preview-content h3{


color:#ffffff;


font-size:28px;


margin-bottom:8px;


}




.preview-content p{


color:#00E5FF;


font-size:15px;


}







/* ==========================
BUTTON
========================== */


.gallery-button{


text-align:center;


margin-top:50px;


}







/* ==========================
TABLET & MOBILE
========================== */


@media(max-width:900px){



.gallery-preview-grid{


grid-template-columns:

repeat(2,1fr);


}



}





@media(max-width:600px){



.gallery-preview-grid{


grid-template-columns:

1fr;


}



.preview-content{


padding:25px;


}



.preview-content h3{


font-size:24px;


}



}













/* ==========================
FLOATING CONTACT BUTTONS
========================== */


.floating-buttons{

position:fixed;

right:25px;

bottom:25px;

display:flex;

flex-direction:column;

gap:15px;

z-index:9999;

}




.floating-buttons a{

width:64px;

height:64px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:

0 10px 30px rgba(0,0,0,.35);

transition:.3s;

}




.floating-buttons a:hover{

transform:

translateY(-5px) scale(1.08);

}




.floating-whatsapp{

background:#25D366;

}




.floating-phone{

background:#0A84FF;

}




.floating-buttons img{

width:32px;

height:32px;

}


















.gallery-note{

padding:80px 20px;

text-align:center;

background:#101827;

}


.gallery-note h2{

font-size:40px;

color:#fff;

margin-bottom:20px;

}



.gallery-note p{

max-width:750px;

margin:auto;

color:#A7B0C0;

font-size:18px;

line-height:1.8;

}





















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


.gallery-hero-meta{

margin-top:45px;

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:20px;

}



.gallery-hero-meta span{

display:flex;

align-items:center;

gap:10px;

padding:12px 25px;

border-radius:50px;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.15);

color:#ffffff;

font-size:15px;

}



.gallery-hero-meta i{

color:#00E5FF;

font-size:18px;

}



@media(max-width:600px){


.gallery-hero-meta span{

width:100%;

justify-content:center;

}


}