/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw0aXpsog.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw9aXpsog.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw2aXpsog.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw3aXpsog.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", sans-serif
}

html {
  background-color: #443627;
}

body {
  font-family: "Lato", sans-serif;
  background-color: #fff;
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.w3-bar,
h1,
button {
  font-family: "Montserrat", sans-serif
}

.w3-bar {
  height: 70px;
  align-items: center;
}

.w3-bar-item {
  font-size: larger;
  height: 100%;
}

.w3-content {
  max-width: 1200px;
  margin: auto;
}

.edges-margin {
  margin: 0 32px;
}

.custom-color-one,.custom-color-one-hover:hover {color:#fff!important; background-color: #443627!important;}
.custom-color-text-one,.custom-color-text-one-hover:hover {color: #443627!important;}
.custom-color-two, .custom-color-two-hover:hover {color:#fff!important; background-color: #D98324!important;}
.custom-border-2,.custom-hover-border-2:hover{border-color:#443627!important}
.custom-color-text-two,.custom-color-text-two-hover:hover {color: #D98324!important;}
.custom-color-three, .custom-color-three-hover:hover {color:#fff!important; background-color: #47443e!important;}
.custom-color-text-three,.custom-color-text-three-hover:hover {color: #EFDCAB!important;}
.custom-color-four, .custom-color-four-hover:hover {color:#000!important; background-color: #F2F6D0!important;}
.custom-color-text-four,.custom-color-text-four-hover:hover {color: #F2F6D0!important;}

/* ============================================================================
   GALLERI CARD GRID
   Responsive card grid with overlays for the gallery page.
   ========================================================================== */

.galleri-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
}

.galleri-card {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  height: 300px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transition: box-shadow 0.2s ease;
  cursor: pointer;
  background-color: #443627;
}

.galleri-card:hover {
  box-shadow: 0 14px 36px rgba(0,0,0,0.2);
}

.galleri-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.galleri-card:hover img {
  transform: scale(1.04);
}

.galleri-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
}

.galleri-card-overlay h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.25;
  color: #fff;
  font-family: "Montserrat", sans-serif;
}

@media (max-width: 992px) {
  .galleri-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .galleri-grid {
    grid-template-columns: 1fr;
  }
  .galleri-card {
    height: 250px;
  }
}