/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

:root {
    --c1: #ffffff;
    --c2: #000000;
    --c3: #e6c7b3;
    --c4: #ce936c;
    --c5: #5c3200;
}

@font-face {
  font-family: 'BrownSugar'; src: url('brown-sugar.ttf') format('truetype');
}
@font-face {
  font-family: 'Aileron'; src: url('Aileron-Regular.otf') format('opentype');
}

.img-desktop {
  display: none;
}
.img-mobile {
  display: none;
}

.countdown{
  position: absolute;
  font-family: 'BrownSugar';
  font-size: 5vw;
  top: calc(55px + 106vw); 
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 999;
}

@media (max-width: 425px) {
  #pag {
    display: none;
  }

  nav .navbar {
    justify-content: center; /* Center the menu when logo is gone */
  }

  nav .navbar .menu {
    justify-content: space-around; /* Still keep good spacing */
  }

}


h3 {
  font-family: 'BrownSugar';
  color: black;
  font-size: 8vw;
  font-weight: 400;
}


/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth; /* Enables smooth scrolling */
}

/* Body Styles */
body {
  background-color: #ffffff; /* Light background for body */
}

/* Navigation Bar */
nav {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 60px;
  background: var(--c5); /* New color: Calming green for navigation bar */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
  z-index: 1000; /* Ensures the navbar stays on top */
}

/* Navbar container to align content */
nav .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 0 5vw; /* This creates outer spacing of the whole navbar */
  gap: clamp(1rem, 5vw, 3rem); /* Dynamic spacing between the logo and menu */
}

/* Logo Styles */
nav .navbar .logo a {
  font-family: "BrownSugar";
  color: #fff; /* White text for logo */
  font-size: 17px;
  font-weight: 400;
  text-decoration: none; /* No underline */
  white-space: nowrap;
}

/* Menu Container */
nav .navbar .menu {
  display: flex;
  flex-grow: 1;
  justify-content: space-around; /* Even spacing */
  max-width: 500px; /* Maximum width the menu can grow to */
  width: 100%;
}

/* Menu List Items */
.navbar .menu li {
  list-style: none;
  margin: 0; /* Removed margin between items, spacing now handled by justify-content */
}

/* Menu Links */
.navbar .menu li a {
  font-family: "Aileron";
  color: #fff; /* White text for menu items */
  font-size: 12px;
  font-weight: 500;
  text-decoration: none; /* No underline for links */
  transition: color 0.3s; /* Smooth color transition on hover */
}

/* Hover Effect on Menu Links */
.navbar .menu li a:hover {
  color: var(--c3); /* Lighter green color on hover */
}

/* Section Styling */
section {
  display: block;
  position:relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  color: #2e4053; /* Darker color for section text */
  text-align: center; /* Centering text */
}

img {
  width: 100vw;
}

/* Scroll-to-Top Button */
.button a {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #000000; /* White text for the button */
  background:var(--c3); /* Matching green background for button */
  padding: 7px 12px;
  font-size: 18px;
  border-radius: 6px; /* Rounded corners */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Light shadow for button */
  transition: background 0.3s; /* Smooth background transition */
}

/* Hover Effect on Scroll Button */
.button a:hover {
  background: var(--c4); /* Slightly darker green on hover */
}

#iban1 {
  color: #000000;
  position: absolute;
  z-index: 999;
  font-size: 2vw;
  top: calc(3px + 80vw); 
  left: 61.5vw;
  white-space: nowrap;
}

#iban2 {
  color: #000000;
  position: absolute;
  z-index: 999;
  font-size: 1.7vw;
  top: calc(5px + 114.2vw); 
  left: 71.5vw;
  white-space: nowrap;
}

#fotky h3 {
  display: block;        /* explicitly block, though default */
  width: 100%;           /* span full width */
  text-align: center;    /* center text */
  margin-bottom: 20px;   /* space below title */
}



.album-link {
  display: block;          /* makes the link act like a block container */
  text-decoration: none;   /* remove underline */
  color: inherit;          /* keep text color if there is any text */
}


.foto_album {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
  padding: 0 3vw;
}

.foto_album .collum {
  display: flex;
  flex-direction: column;
  gap: 3vw;
}

.foto_album img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.google-photos-link {
  display: block;
  margin: 0 0 15px 10px; /* 10px left padding like the photos */
  font-family: 'Aileron', sans-serif;
  font-size: 14px;
  text-decoration: underline;
  color: var(--c4); /* matching your wedding theme color */
}

.google-photos-link:hover {
  color: var(--c5); /* darker shade on hover */
}