@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --text-dark: #171717;
  --text-light: #525252;
  --extra-light: #ffffff;
  --white: #ffffff;
  --max-width: 1200px;
  --header-font: "Playfair Display", serif;
}

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

.section__container {
  max-width: var(--max-width);
  margin: auto;
  padding: 5rem 1rem;
}

.section__header {
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 400;
  font-family: var(--header-font);
  color: var(--text-dark);
  text-align: center;
}

.section__description {
  color: var(--text-light);
  font-family: "Montserrat";
  line-height: 1.75rem;
  text-align: center;
  margin-bottom: 3.5rem;
}

.btn {
  padding: 0.75rem 1.5rem;
  outline: none;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  background-color: var(--text-dark);
  border-radius: 5px;
  transition: 0.3s;
  cursor: pointer;
}

.btn:hover {
  background-color: #573a23;
}

img {
  display: flex;
  width: 100%;
}

a {
  text-decoration: none;
  transition: 0.3s;
}

html,
body {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", sans-serif;
}

.header {
  min-height: 600px;
  background-image: radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9)),
    url("img/main_new.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.header_stories {
    min-height: 600px;
  background-image: radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9)),
    url("img/pribehy.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.header_weddings {
      min-height: 600px;
  background-image: radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9)),
    url("img/svatbamain.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.header_about {
        min-height: 600px;
  background-image: radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9)),
    url("img/omne.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.header_contact {
          min-height: 600px;
  background-image: radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9)),
    url("img/kontakt.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

nav {
  position: fixed;
  isolation: isolate;
  top: 0;
  width: 100%;
  max-width: var(--max-width);
  margin: auto;
  z-index: 9;
}

.nav__header {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: #7c654c;
}

.nav__logo img {
  max-width: 70px;
}

.nav__menu__btn {
  font-size: 1.5rem;
  color: var(--white);
  cursor: pointer;
}

.nav__links {
  list-style: none;
  position: absolute;
  width: 100%;
  padding: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  background-color: #4e3b1f;
  transform: translateY(-100%);
  transition: 0.5s;
  z-index: -1;
  font-family: var(--header-font);
}

.nav__links.open {
  transform: translateY(0);
}

.nav__links .nav__logo {
  display: none;
}

.nav__links a {
  padding-bottom: 5px;
  font-weight: 500;
  color: var(--white);
  border-bottom: 2px solid transparent;
}

.nav__links a:hover {
  border-color: var(--white);
}

.about__container .section__description {
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 2rem;
  font-family: "Montserrat";
}

.about__container img {
  max-width: 280px;
  margin-inline: auto;
  border-radius: 50%;
}

.portfolio__grid {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
}

.portfolio__card {
  position: relative;
  isolation: isolate;
}

.portfolio__card::after {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  font-family: var(--header-font);
  color: var(--white);
}

.portfolio__card:nth-child(1)::after {
  content: "Portraits";
}

.portfolio__card:nth-child(2)::after {
  content: "Weddings";
}

.portfolio__card:nth-child(3)::after {
  content: "Fashions";
}

.portfolio__content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: 0.3s;
  z-index: 1;
}

.portfolio__card:hover .portfolio__content {
  opacity: 1;
}

.service {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1060%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(246%2c 243%2c 238%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c423.134C84.216%2c404.766%2c173.34%2c427.795%2c251.309%2c391.045C335.759%2c351.24%2c413.677%2c291.467%2c455.952%2c208.226C499.021%2c123.423%2c500.22%2c24.16%2c485.348%2c-69.783C470.622%2c-162.804%2c423.425%2c-243.433%2c371.966%2c-322.31C313.186%2c-412.409%2c263.304%2c-517.984%2c164.773%2c-561.165C62.455%2c-606.006%2c-54.813%2c-582.607%2c-163.55%2c-556.999C-277.202%2c-530.233%2c-394.212%2c-495.971%2c-474.006%2c-410.729C-555.134%2c-324.062%2c-598.146%2c-205.383%2c-603.698%2c-86.799C-608.985%2c26.126%2c-550.128%2c126.959%2c-504.014%2c230.175C-457.503%2c334.279%2c-439.733%2c477.777%2c-333.248%2c518.544C-223.11%2c560.71%2c-115.225%2c448.266%2c0%2c423.134' fill='%23d5c6af'%3e%3c/path%3e%3cpath d='M1440 869.256C1503.326 868.047 1571.953 882.471 1624.9180000000001 847.7370000000001 1677.772 813.075 1688.549 742.884 1717.987 686.952 1749.487 627.101 1808.138 575.181 1803.895 507.68 1799.606 439.449 1739.106 391.235 1696.061 338.122 1651.508 283.148 1614.734 215.685 1548.055 192 1480.268 167.921 1400.735 176.538 1337.448 210.73899999999998 1278.373 242.664 1254.083 311.496 1219.941 369.318 1191.73 417.096 1170.999 465.836 1155.383 519.078 1137.233 580.957 1103.754 643.488 1121.326 705.534 1139.632 770.172 1190.732 824.187 1250.487 854.887 1308.002 884.4359999999999 1375.35 870.491 1440 869.256' fill='white'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1060'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.service__container .section__header {
  color: #7b5c3b;
}

.service__container .section__description {
  max-width: 600px;
  margin-inline: auto;
  color: var(--text-dark);
}

.service__grid {
  margin-top: 4rem;
  display: grid;
  gap: 2rem;
}

.service__card {
  text-align: center;
}

.service__card h4 {
  position: relative;
  isolation: isolate;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  font-size: 2rem;
  font-weight: 400;
  font-family: var(--header-font);
  color: #593A19;
}

.service__card h4::after {
  position: absolute;
  content: "---";
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  line-height: 0;
}

.service__card p {
  color: var(--text-dark);
  line-height: 1.75rem;
  font-family: "Montserrat";
  margin-bottom: 3.5rem;
}

.client__container {
  padding-bottom: 2rem;
}

.swiper {
  margin-top: 2rem;
  padding-bottom: 3rem;
  width: 100%;
}

.client__card {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.client__card img {
  max-width: 120px;
  margin-inline: auto;
  margin-bottom: 2rem;
  border-radius: 100%;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
}

.client__card p {
  margin-bottom: 1rem;
  color: var(--text-light);
  line-height: 1.75rem;
}

.client__card h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
}

.swiper-pagination-bullet-active {
  background-color: var(--text-dark);
}

.gallery__grid {
  margin-block: 2rem;
  display: flex;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

.gallery__grid_weddings {
  margin-block: 2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

.gallery__grid_stories {
  margin-block: 2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

.gallery__grid img {
  transition: 0.3s;
}

.gallery__grid:hover img:not(:hover) {
  opacity: 0.5;
}

.gallery__btn {
  text-align: center;
}

.blog {
  background-image: radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9)), url("img/mvopa.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.blog_weddings {
  background-image: url("img/svatba4.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.blog_stories {
  background-image: url("img/hand.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.blog__container {
  padding-block: 10rem;
  display: grid;
}

.blog__content {
  text-align: center;
}

.blog__content .section__header {
  margin-bottom: 2rem;
  color: var(--white);
}

.blog__content h4 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 400;
  font-family: "Montserrat";
  color: var(--white);
}

.blog__content p {
  margin-bottom: 2rem;
  line-height: 1.75rem;
  color: var(--extra-light);
  font-family: "Montserrat";
}

.blog__content .btn {
  background-color: transparent;
  border: 1px solid var(--white);
}


.instagram__container {
  overflow: hidden;
}

.instagram__flex {
  margin-top: 2rem;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 1rem;

  animation: scroll 60s linear infinite;
}

.instagram__flex img {
  max-width: 280px;
}

@keyframes scroll {
  to {
    transform: translateX(calc(-50% - 0.5rem));
  }
}

.footer__container {
  display: grid;
  gap: 4rem 0;
  align-items: center;
}

.footer__col {
  padding-inline: 2rem;
}

.footer__container img {
  max-width: 170px;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.footer__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__socials a {
  font-size: 1.5rem;
  color: var(--text-dark);
}

.footer__socials a:hover {
  color: var(--text-light);
}

.footer__links {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.footer__links a {
  display: block;
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
}

.footer__links a:hover {
  color: var(--text-light);
}

.footer__col h4 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
}

.footer__col p {
  color: var(--text-light);
  line-height: 1.75rem;
  text-align: center;
}

.footer__bar {
  padding: 1rem;
  font-size: 0.9rem;
  color: var(--text-dark);
  font-family: var(--header-font);
  background-color: #ffffff;
  text-align: center;
}

@media (width > 540px) {
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .footer__col:nth-child(1) {
    grid-area: 1/1/2/3;
  }

  .footer__col:nth-child(3) {
    border-left: 2px solid var(--text-dark);
  }

}
@media (width > 768px) {
  .header {
    min-height: 650px;
  }

  nav {
    padding: 2rem 1rem;
    position: static;
    max-width: 900px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav__header {
    display: none;
  }

  .nav__links {
    padding: 0;
    width: 100%;
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: space-between;
    background-color: transparent;
  }

  .nav__links .nav__logo {
    display: block;
  }

  .nav__links .nav__logo img {
    max-width: 150px;
  }

  .portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .service__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .blog__content {
    grid-column: 2/3;
  }

  .footer__container {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__col:nth-child(1) {
    grid-area: 1/2/2/3;
    border-left: 2px solid var(--text-dark);
    border-right: 2px solid var(--text-dark);
  }

  .footer__col:nth-child(3) {
    border: none;
  }
}

@media (width < 768px) {
  .gallery__grid_weddings {
  margin-block: 2rem;
  display: contents;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

  .gallery__grid_stories {
  margin-block: 2rem;
  display: contents;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

  .blog {
  background-image: radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9)), url("img/mvopa.webp");
  background-size: cover;
  background-position: center center;
}

  .blog__content h4 {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--header-font);
  color: var(--white);
}

.blog__content p {
  font-size: 0.8rem;
  color: var(--extra-light);
}

.blog__content .btn {
  background-color: transparent;
  border: 1px solid var(--white);
}

.footer__bar {
  font-size: 0.6rem;
}

.btn {
  margin-top: 2rem;
}

}

@media (width > 1024px) {
  .header {
    min-height: 700px;
  }

  .portfolio__grid {
    gap: 2rem;
  }
}