/*Online web page for a "shop" that sell services for events moment such as taking pictures in weddings, music event etc-->
<!--It contains a navbar, images presentation-->

<!--The website is called unikapture (.fr), and have a logo in /img/logo.png*/


@import url('https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro');


/*color variables*/
:root{
    --color-1: #5E2378;
    --color-2: #1E1D1C;
    --color-3: #E30613;
    --color-4: #E8C3F7;
    --color-5: #FFF;
}

*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  scroll-behavior: smooth;
}

.navbar{
    padding: 18px;
    width: 100%;
    overflow: visible;

    background: transparent;
    height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    /*keepnavbar on top of screen*/
    top: 0;
    padding: 90px 10px;
    transition: 0.4s;
    z-index: 99;
    
}




  
  #navbar a {
    float: left;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px; 
    line-height: 25px;
    border-radius: 4px;
  }
  #navbar h1{
    float: left;
    text-align: center;
    padding: 12px;
    text-decoration: none;

    color:white;
  }
  #navbar #logo {
    font-size: 35px;
    font-weight: bold;
    transition: 0.4s;
  }
  
  #navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  
  #navbar a.active {
    background-color: dodgerblue;
    color: white;
  }
  
  #navbar-right {
    float: right;
  }
  
  @media screen and (max-width: 580px) {
    #navbar {
      padding: 20px 10px !important;
    }
    #navbar a {
      float: none;
      display: block;
      text-align: left;
    }
    #navbar-right {
      float: none;
    }
  }


.navbar li{
  list-style: none;
  display: inline;
}
.navbar li a{
  text-decoration: none;
  padding: 14px 20px;
  font-size: 16px;
  border-radius: 4px;
  color: #f2f2f2;
  display: inline-block;
  text-align: center;
  letter-spacing: 1px;
  transition: all .3s ease-in;
  font-family: "Play", sans-serif;
}
.navbar li a:hover{
  color:rgb(219, 219, 219);
  /*Underline animation*/
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.097) 50%);
    background-size: 220%;
    background-position: 100%;
    transition: background 0.5s;

}

.navbar .logo{

  height: 100px;
  margin-right: 20px;
}

.container{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center; /* Center vertically */
    background: var(--color-1);
}

.container img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.container video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    bottom: 10%;
    left: 5%;
    color: rgb(255, 255, 255);
    text-align: left;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.205);
    padding: 20px;
    border-radius: 10px;
}
.video-overlay h1{
  margin:0;
}

.article {
  margin: 0 auto;
  padding: 20px;
  width: 80vw;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /*margin top */
  margin-top: 20px;
  --animate-delay: 0.5s;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.5s ease-in-out;
}

.article.animate__animated {
  opacity: 1; /* Show when animation is triggered */
}

.article p {
  margin-bottom: 15px;
  font-size:1.075em;
}

.article h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
  /*center*/
  text-align: center;
}

.article img{
  /*would be great to be on the side of the div*/
  float: left;
  margin-right: 20px;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;

}

.article form {
  display: flex;
  flex-direction: column;
}

.article form label {
  margin-top: 10px;
}

.article form input, 
.article form textarea {
  margin-top: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.article form input[type="submit"] {
  margin-top: 20px;
  background-color: var(--color-1);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.article form input[type="submit"]:hover {
  background-color: var(--color-3);
}

.contact-form {
    width: 100%;
    max-width: 800px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.image-slider {
  display: flex;
  flex-flow: column;
  width: 80%;
  aspect-ratio: 16 / 9;
  min-height: 300px;
  overflow: hidden;
  border-radius: 8px;
  container-type: inline-size;
  contain: content;
  background-color: #0006;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 2px 4px,
      rgba(0, 0, 0, 0.25) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 8px 16px,
      rgba(0, 0, 0, 0.15) 0px 16px 32px;
  /*center*/
  margin: 0 auto;
  margin-top:20px;
  
}

.slider__content {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
}

.slider-control--button {
  border: 0;
  background: 0;
  outline: 0;
  cursor: pointer;
  place-content: center;
  padding-inline: 3vw;
  z-index: 1;
  display: grid;
}

.icon {
  height: 2rem;
  width: 2rem;
  fill: var(--icon-default);
  border-radius: 50%;
}

.slider-control--button:where(:hover) {
  background-image: linear-gradient(
      to var(--position),
      #0000 0%,
      #0002,
      80%,
      #0006 100%
  );
  .icon {
      fill: var(--icon-accent);
      background: #0001;
  }
}

.slider-control--button:active {
  outline: 0.2em solid hsl(204 100 53);
  outline-offset: -0.5em;
}

.prev-button {
  --position: left;
}
.next-button {
  --position: right;
}

.image-display {
  position: fixed;
  inset: 0;
}

.slider-navigation {
  z-index: 10;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-columns: 100%;
  gap: 1.25rem;
  padding: 1rem;
  place-content: center;
  background-color: var(--navigation-color);
  backdrop-filter: blur(6px);
}

.nav-button {
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 0;
  aspect-ratio: 16 / 9;
  transition: filter 150ms linear, scale 266ms ease;
}

.thumbnail {
  display: block;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.nav-button[aria-selected="true"] {
  scale: 1.1;
}

.nav-button[aria-selected="true"],
.nav-button:focus-visible {
  outline: 0.2em solid var(--active-color);
  outline-offset: 0.2em;
}

.nav-button[aria-selected="false"] {
  filter: opacity(0.7);
}

.nav-button[aria-selected="false"]:where(:hover, :focus-visible) {
  filter: opacity(1);
}

@container (max-width: 660px) {
  .nav-button:not(:has(img)) {
      background-color: rgb(241, 235, 232);
  }

  .slider-navigation {
      display: flex;
      justify-content: center;
      padding-block: 1.5em;
  }

  .nav-button {
      inline-size: 0.625rem;
      aspect-ratio: 1;
      border-radius: 50%;
  }

  .nav-button > .thumbnail {
      display: none;
  }

  .nav-button[aria-selected="true"] {
      background-color: black;
      scale: 1.5;
  }
}

.formula-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    background-color: rgb(241, 235, 232);
    padding: 20px;
    border-radius: 10px;
    margin-left:2vw;
    margin-right:2vw;
}

.formula {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 20vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.formula:hover {
    transform: scale(1.05);
}

.formula h1 span {
    color: var(--color-3);
}


.formula h1 {
    font-size: 24px;
    margin-bottom: 10px;
    
}
.formula hr {

}

.formula .price {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.formula .content {
    text-align: left;
    margin-bottom: 20px;
}

.formula ul {
    list-style-type: " - ";
    padding: 0;
}

.formula ul li {
    margin-bottom: 5px;
}

.formula button {
    margin-top: auto;
    background-color: var(--color-1);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    pointer-events: none; /* Prevent button from being clicked separately */
}

.formula button:hover {
    background-color: var(--color-3);
}

@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 10px;
    }

    .navbar ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar li {
        width: 100%;
        text-align: left;
    }

    .navbar li a {
        width: 100%;
        padding: 10px 0;
    }

    .navbar li:first-child {
        display: none;
    }

    .navbar li:last-child {
        order: -1;
    }

    .navbar li:last-child a::before {
        content: "\260E"; /* Unicode for phone icon */
        font-size: 18px;
        margin-right: 8px;
    }

    .navbar li:last-child a {
        display: flex;
        align-items: center;
    }

    .formula-container {
        flex-direction: column;
        align-items: center;
    }

    .formula {
        width: 90%;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 480px) {
    .navbar {
        padding: 15px 10px;
    }

    .navbar li a {
        font-size: 14px;
        padding: 8px 0;
    }

    .formula {
        width: 100%;
    }

    .formula h1 {
        font-size: 20px;
    }

    .formula .price {
        font-size: 16px;
    }

    .formula .content {
        font-size: 14px;
    }

    .formula button {
        padding: 8px 16px;
        font-size: 14px;
    }
}

footer {
    background-color: var(--color-2);
    color: var(--color-5);
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: 40px; /* Add margin-top */
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
}

.footer-content p {
    margin: 5px 0;
}

.footer-content a {
    color: var(--color-5);
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration: underline;
}

hr{
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #f2f2f2;
}