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

.services-gallery{

margin-top:90px;

padding:20px 10px;

background:linear-gradient(135deg,#f7f9fc,#eef3ff);

position:relative;

overflow:hidden;

}

/* title */

.gallery-title{

text-align:center;

font-size:38px;

margin-bottom:20px;

color:#0a2342;

font-weight:700;

}

/* grid */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:35px;

max-width:1200px;

margin:auto;

perspective:1200px;

}

/* card */

.gallery-card{

position:relative;

overflow:hidden;

border-radius:20px;

cursor:pointer;

transform-style:preserve-3d;

transition:0.5s;

box-shadow:0 20px 40px rgba(0,0,0,0.15);

background:#fff;

}

/* image */

.gallery-card img{

width:100%;

height:240px;

object-fit:cover;

transition:0.7s;

}

/* 3D hover */

.gallery-card:hover{

transform:rotateY(8deg) rotateX(5deg) scale(1.05);

box-shadow:0 35px 70px rgba(0,0,0,0.25);

}

/* zoom image */

.gallery-card:hover img{

transform:scale(1.2);

}

/* overlay */

.gallery-info{

position:absolute;

bottom:0;

left:0;

width:100%;

padding:20px;

text-align:center;

background:linear-gradient(transparent,rgba(0,0,0,0.85));

color:#fff;

transition:0.4s;

}

/* title */

.gallery-info h3{

font-size:18px;

margin:0;

font-weight:600;

letter-spacing:0.5px;

}

/* glow border animation */

.gallery-card::before{

content:"";

position:absolute;

inset:-2px;

border-radius:22px;

background:linear-gradient(120deg,#ff7a00,#00aaff,#ff7a00);

background-size:300%;

z-index:-1;

opacity:0;

transition:0.4s;

}

/* activate glow */

.gallery-card:hover::before{

opacity:1;

animation:glowBorder 6s linear infinite;

}

@keyframes glowBorder{

0%{background-position:0%}

100%{background-position:300%}

}

/* floating dental icons background */

.services-gallery::before{

content:"🦷 🪥 🦷";

position:absolute;

top:20%;

left:5%;

font-size:80px;

opacity:0.03;

animation:floatingTeeth 18s linear infinite;

}

@keyframes floatingTeeth{

0%{transform:translateY(0)}

50%{transform:translateY(-60px)}

100%{transform:translateY(0)}

}

/* responsive */

@media(max-width:768px){

.gallery-title{

font-size:30px;

}

}