/* =========================================================
PHOTO GALLERY PAGE
========================================================= */

* {
  box-sizing: border-box;
  }

body {
margin: 0;
font-family: "DM Sans", sans-serif;
color: #17324d;
background: #ffffff;
}

/* =========================================================
NAVIGATION LINKS
========================================================= */

.nav-links {
display: flex;
align-items: center;
gap: 27px;
font-size: 13px;
color: #444444;
}

.nav-links a {
color: #444444;
text-decoration: none;
transition: color 0.2s ease;
}

.nav-links a:hover {
color: #08b8bd;
}

.nav-links a.active {
color: #08b8bd;
font-weight: 600;
}

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

.gallery-hero {
background: turquoise;


min-height: 325px;

display: flex;
align-items: center;
justify-content: center;

text-align: center;

padding: 60px 20px;


}

.gallery-hero-content {
width: 100%;
max-width: 850px;


margin: 0 auto;

}

/* Hero Label */

.gallery-label {
display: block;


margin-bottom: 10px;

color: #ffffff;

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

letter-spacing: 2px;


}

/* Hero Heading */

.gallery-hero h1 {
margin: 0 0 18px;

color: #ffffff;

font-family: "Playfair Display", serif;

font-size: 52px;
line-height: 1.2;

}

/* Hero Paragraph */

.gallery-hero p {
max-width: 850px;

margin: 0 auto;

color: #ffffff;

font-size: 20px;
line-height: 1.7;


}

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

.gallery-section {
background: #ffffff;


padding: 100px 20px 110px;


}

.gallery-container {
width: 100%;
max-width: 1060px;

margin: 0 auto;

}

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

.gallery-heading {
max-width: 780px;

margin: 0 auto 50px;

text-align: center;

}

.gallery-heading h2 {
margin: 0 0 15px;

color: #080808;

font-family: "Playfair Display", serif;

font-size: 38px;
line-height: 1.25;

}

.gallery-heading p {
margin: 0;


color: #50657a;

font-size: 18px;
line-height: 1.7;


}

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

.gallery-grid {
width: 100%;

display: grid;

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

gap: 30px 28px;

}

/* =========================================================
GALLERY ITEM
========================================================= */

.gallery-item {
background: #ffffff;


border: 1px solid #cbd9dc;

border-radius: 15px;

overflow: hidden;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

.gallery-item:hover {
transform: translateY(-5px);

box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.10);

}

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

.gallery-image {
position: relative;

width: 100%;

height: 245px;

overflow: hidden;

background: #e2f8f9;

}

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

.gallery-image img {
width: 100%;
height: 100%;

display: block;

object-fit: cover;

transition:
    transform 0.4s ease;

}

/* =========================================================
IMAGE HOVER - SHOW FULLER IMAGE
========================================================= */

.gallery-item:hover .gallery-image img {
transform: scale(1.12);
}

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

.image-overlay {
position: absolute;

top: 0;
left: 0;

width: 100%;
height: 100%;

display: flex;

align-items: center;
justify-content: center;

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

opacity: 0;

transition:
    opacity 0.3s ease;

}

.gallery-item:hover .image-overlay {
opacity: 1;
}

/* Expand Icon */

.image-overlay i {
width: 45px;
height: 45px;

border-radius: 50%;

background: #ffffff;

color: #08b8bd;

display: flex;

align-items: center;
justify-content: center;

font-size: 17px;

}

/* =========================================================
CAPTION
========================================================= */

.gallery-caption {
min-height: 72px;

padding: 17px 18px;

color: #50657a;

background: #ffffff;

font-size: 15px;

line-height: 1.5;

text-align: left;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1000px) {

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

    gap: 25px;
}

}

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

@media (max-width: 700px) {

.gallery-hero {
    min-height: 300px;

    padding: 50px 20px;
}

.gallery-hero h1 {
    font-size: 42px;
}

.gallery-hero p {
    font-size: 18px;
}


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


.gallery-heading {
    margin-bottom: 35px;
}

.gallery-heading h2 {
    font-size: 34px;
}

.gallery-heading p {
    font-size: 17px;
}


.gallery-grid {
    grid-template-columns: 1fr;

    gap: 22px;
}


.gallery-image {
    height: 280px;
}

}

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

@media (max-width: 500px) {

.gallery-hero h1 {
    font-size: 36px;
}

.gallery-hero p {
    font-size: 17px;
}

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

.gallery-image {
    height: 250px;
}

.gallery-caption {
    font-size: 15px;
}

}