/* =========================================================
   TAMDRILL — GALLERY PAGE CSS
   File: gallery.css
========================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{

/* COLORS */
--primary:#2596be;
--primary-dark:#1f7fa0;

--bg:#f8fafc;
--surface:#ffffff;

--text:#0f172a;
--text-light:#64748b;

--border:rgba(15,23,42,0.08);

/* SHADOWS */
--shadow-soft:
0 15px 40px rgba(15,23,42,0.08);

--shadow-hover:
0 25px 60px rgba(15,23,42,0.14);

/* RADIUS */
--radius-xl:40px;
--radius-lg:30px;
--radius-md:22px;

}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

/* =========================================================
   HEADER / HERO
========================================================= */

.gallery-header{
position:relative;

height:72vh;

display:flex;
align-items:center;

padding:150px 80px 100px;

overflow:hidden;
}

.header-bg{
position:absolute;
inset:0;

width:100%;
height:100%;

object-fit:cover;
}

.header-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
rgba(0,0,0,0.58),
rgba(0,0,0,0.58)
);

z-index:1;
}

.gallery-header::after{
content:'';

position:absolute;

width:650px;
height:650px;

right:-220px;
top:-220px;

background:
radial-gradient(
circle,
rgba(37,150,190,0.2),
transparent 70%
);

filter:blur(40px);

z-index:1;
}

.header-content{
position:relative;
z-index:2;

max-width:760px;
}

.mini-label{
display:inline-block;

padding:10px 22px;

border-radius:999px;

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

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

backdrop-filter:blur(12px);

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

color:#ffffff;

margin-bottom:24px;
}

.header-content h1{
font-size:74px;
line-height:1.03;

color:#ffffff;

margin-bottom:24px;

font-family:'Space Grotesk',sans-serif;
font-weight:700;
}

.header-content p{
font-size:20px;
line-height:1.9;

color:rgba(255,255,255,0.88);

max-width:680px;
}

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

.gallery-section{
padding:120px 80px;
}

.section-heading{
text-align:center;

max-width:760px;

margin:0 auto 70px;
}

.section-heading span{
display:inline-block;

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

color:var(--primary);

margin-bottom:18px;
}

.section-heading h2{
font-size:58px;
line-height:1.1;

font-family:'Space Grotesk',sans-serif;

margin-bottom:20px;

color:var(--text);
}

.section-heading p{
font-size:18px;
line-height:1.9;

color:var(--text-light);
}

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

.gallery-grid{
display:grid;

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

gap:30px;
}

.gallery-card{
position:relative;

overflow:hidden;

border-radius:var(--radius-lg);

background:#ffffff;

box-shadow:var(--shadow-soft);

transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}

.gallery-card:hover{
transform:translateY(-8px);

box-shadow:var(--shadow-hover);
}

.gallery-card img{
width:100%;
height:320px;

object-fit:cover;

transition:transform 0.45s ease;
}

.gallery-card:hover img{
transform:scale(1.06);
}

/* =========================================================
   OPTIONAL IMAGE OVERLAY
========================================================= */

.gallery-card::after{
content:'';

position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,0.18),
transparent 60%
);

opacity:0;

transition:0.35s ease;
}

.gallery-card:hover::after{
opacity:1;
}

/* =========================================================
   FOOTER
========================================================= */

footer{
background:#ffffff;

padding:35px 20px;

text-align:center;

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

color:#64748b;

border-top:
1px solid rgba(15,23,42,0.08);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

.header-content h1{
font-size:62px;
}

.section-heading h2{
font-size:50px;
}

}

@media(max-width:992px){

.gallery-header{
padding:130px 40px 90px;
height:65vh;
}

.gallery-section{
padding:100px 40px;
}

.header-content h1{
font-size:52px;
}

.section-heading h2{
font-size:44px;
}

}

@media(max-width:768px){

.gallery-header{
height:auto;

padding:140px 20px 90px;
}

.gallery-section{
padding:80px 20px;
}

.header-content h1{
font-size:38px;
line-height:1.1;
}

.header-content p{
font-size:16px;
}

.section-heading h2{
font-size:36px;
}

.section-heading p{
font-size:16px;
}

.gallery-grid{
gap:20px;
}

.gallery-card{
border-radius:24px;
}

.gallery-card img{
height:240px;
}

}

@media(max-width:480px){

.header-content h1{
font-size:30px;
}

.section-heading h2{
font-size:30px;
}

.gallery-card img{
height:220px;
}

}




/* =========================================================
   TAMDRILL — GLOBAL NAVBAR
========================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

nav{
position:fixed;
top:0;
left:0;

width:100%;
height:82px;

display:flex;
align-items:center;

padding:0 60px;

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

backdrop-filter:blur(16px);

border-bottom:
1px solid rgba(15,23,42,0.08);

z-index:999;
}

/* ================= LOGO ================= */

.logo{
display:flex;
align-items:center;
}

.logo img{
height:42px;
width:auto;
}

/* ================= RIGHT SIDE MENU ================= */

nav ul{
display:flex;
align-items:center;
gap:36px;

list-style:none;

/* PUSH MENU TO RIGHT */
margin-left:auto;

/* SPACE BEFORE BUTTON */
margin-right:30px;
}

nav ul li a{
position:relative;

font-size:15px;
font-weight:600;

color:#334155;

text-decoration:none;

transition:0.3s ease;
}

/* UNDERLINE EFFECT */

nav ul li a::after{
content:'';

position:absolute;

left:0;
bottom:-8px;

width:0;
height:2px;

background:#2596be;

transition:0.35s ease;
}

nav ul li a:hover{
color:#2596be;
}

nav ul li a:hover::after{
width:100%;
}

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

.nav-cta{
display:inline-flex;
align-items:center;
justify-content:center;

padding:14px 24px;

border-radius:999px;

background:
linear-gradient(
135deg,
#2596be,
#1f7fa0
);

color:#ffffff;

font-size:14px;
font-weight:700;

text-decoration:none;

box-shadow:
0 15px 35px rgba(37,150,190,0.22);

transition:0.35s ease;
}

.nav-cta:hover{
transform:translateY(-3px);

box-shadow:
0 20px 40px rgba(37,150,190,0.3);
}

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

@media(max-width:768px){

nav{
height:74px;
padding:0 20px;
}

.logo img{
height:34px;
}

nav ul{
display:none;
}

.nav-cta{
display:none;
}

}