@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Ropa+Sans:ital@0;1&display=swap');
/*KEYFRAMES ANIMATIONS*/

@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideOutToLeft {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(-100%);
      opacity: 0;
    }
  }

  .reveal {
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  
  .reveal.visible {
    opacity: 1;
  }
/*GENERAL*/

*{
    font-family: "Cormorant Garamond", serif;
    margin: 0;
    font-weight: 300;
    scroll-behavior: smooth;
}

/*NAVBAR-DESKTOP*/

.navbar{
    background-color: #dfd9da;
    position: sticky;
    top: 0;
    display: flex;
    padding: 0;
    justify-content: space-around;
    align-items: center;
    height: 70px;
    z-index: 999;

}

img.logo{
    height: 6rem;
    padding-top: 0.5rem;
}

.nav-links-container li, .socials-container li{
    list-style: none;
}
li a{
   text-decoration: none;
   color: #757575;
}

.nav-links{
    display: flex;
    gap: 2rem;
    padding: 0;
    font-size: 1.35rem;
    font-weight: 400;
}

.nav-links a:hover{
color: white;
font-weight: bold;
}

.bi-chevron-down{
    position: relative;
    top: 0.2rem;
    transition: 300ms linear all;
}


.nav-icon{
    color: #757575;
}

.nav-icon:hover{
    color: white;
    font-weight: bold;
}

.socials-container{
    display: flex;
    padding-top: 0.4rem;
    gap: 1rem;
}

.scrolled {
    background-color: #dfd9da80; 
  }
  
  .navbar:hover {
    background-color: #dfd9da; 
  }
  .bi-cart{
    padding-left: 2rem;
  }
/*DROPDOWN MENU*/

.dropdown-container{
    padding: 0;
    text-align: center;
    position: absolute;
    background-color: #dfd9dae7;
    margin-top: 22px;
    margin-left: -16px;
    z-index: 999;
    display: none;
    }

.dropdown-content{
    list-style: none;
    display: inline-block;
    position: relative;
    text-decoration: none;
    outline: 0;
    font-weight: 500;
    margin: 20px;
}

.active{
    transform: rotate(180deg);
    transition: 300ms linear all;
}

/*NAVBAR HAMBURGER*/

.navbar.hamburger{
    display: none;
}

.hamburger-icon:hover{
    cursor: pointer;
}

/*SIDEBAR*/

.sidebar{
background-color: #dfd9dae7;
width: 45%;
height: 100vh;
position: fixed;
top: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 6rem;
z-index: 999;
display: none;
}


.sidebar-content{
    list-style: none;
    color: #757575;
    font-size: 1.5rem;
}
.sidebar-menu{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    padding: 0;
}

.sidebar-hover:hover{
    color: white;
    cursor: pointer;
}

.open{
    animation: slideInFromLeft 300ms ease-out;
    display:flex;
}

.hide{
    display: none;
}

.sidebar p{
    color: #757575;
    font-size: 0.8rem;
    padding-top: 30vh;
    text-align: center;
}


/*SIDEBAR MENU*/

.sidemenu{
    background-color: #dfd9dae7;
    width: 35%;
    height: 100vh;
    left:45%;
    position: fixed;
    top: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 999;
    display: none;
    padding-top: 6rem;
    }

    .open{
        animation: slideInFromLeft 300ms ease-out;
        display:flex;
    }

    .bi-chevron-right{
        position: relative;
        top: 0.1rem;
        transition: 200ms linear all;
    }
   
   /*LANDING-PAGE*/
   
   .background{
    height: 100vh;
    width: 100%;
    background-image: url(./assets/landingpage_background.png);
    background-color: #dfd9da;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
   }
.landing-page-container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 3rem;
    background-color: #dfd9da24;
    color: #757575;
}

h1{
  color: white;
}

h1 span{
    font-size: 2rem;
    color: #757575;
}

span a{
    text-decoration: none;
    color: inherit;
}
span a:hover{
    color: white;
    transition: all 300ms ease-in-out;
}
/*PORTFOLIO SECTION*/

.portfolio-bg{
    height: 100vh;
    width: 100%;
     background-image: url(./assets/portfolio_background.png);
     background-color: #dfd9da85;
     background-blend-mode:soft-light;
  
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;

}

.portfolio-title{
    display: flex;
    height: 20vh;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: #757575;
    padding: 2rem
;}

.portfolio-img-container {
    display: flex;
    width: 100%;
padding-bottom: 5rem;
padding-top: 1rem;
    box-sizing: border-box;
    height: 70vh;
    color: #757575;
    justify-content: center;
  }
  
  .box {
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0,0,0,.1);
    line-height: 0;
    transition: 300ms all linear
  }
  
  .box  img {
    width: auto;
    height: calc(100% - 10vh);
    object-fit:contain;
    object-position: left;
    cursor: pointer;
  }
  
  .box > span {
    font-size: 3vh;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
  }
  
.box p{
    text-align: center;
    padding-top: 1rem;
    display: none;
}

  .box:hover{
transform: scale(1.2);    color: white;
  } .box:hover>p{
    display: block;
  }

  /*UNIQUE SECTION*/

  .unique-bg{
    height: 100vh;
    width: 100%;
    background-image: url(./assets/unique_background.png);
    background-color: #dfd9da85;
    background-blend-mode:soft-light;

    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;

}

.unique-img{
    height: 80vh;

}

.unique-container{
    display: flex;
    justify-content: space-between;
    height: 100vh;
    align-items: center;
    margin-left: 6rem;
    margin-right: 6rem;

}

.unique-text{
    padding: 1rem;
    text-align: center;
    color: #757575;
    font-size: 1.4rem;
    display: flex;
    height: 60%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

/*PORTFOLIO SECTION RESPONSIV*/

.portfolio-img-container-resp{
  display: none;
}

/*CONTACT FORM*/

.contact-form-bg{
    height: 100vh;
    width: 100%;
    background-image: url(./assets/contact_background.png);
    background-color: #ffffff6e;
    background-blend-mode:lighten;

    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}
    
.contact-form-title{
    display: flex;
    height: 20vh;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: #757575;
    padding-top: 10rem;
}

.contact-form-container{
    text-align: center;
}
 
  #form {
    width: 20rem;
    margin: 2rem auto 10rem auto;
    padding-right: 1.7rem;
  }
  
  input {
    font-size: 0.875em;
    width: 18.75rem;
    height: 3rem;
    padding: 0 1rem 0 1rem;
    
    background: transparent;
    outline: none;
    color: #757575;
    
    border: solid 1px #757575;
    border-bottom: none;
    
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
  }
  
  input:hover {
    background: #dfd9da;
    color: white;
  }
  
  textarea {
    width: 18.89rem;
    height:6rem;
    padding: 15px;
    
    background: transparent;
    outline: none;
    
    color: #757575;
    font-size: 0.875em;
    
    border: solid 1px #757575;
    
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
  }
  
  textarea:hover {
    background: #dfd9da;
    color: white;
  }
  
  #submit {
    width: 20.89rem;
    
    padding: 0;
    margin: -0.3rem 0 0 0;
    
    font-size: 0.9em;
    color: #757575;
    
    outline:none;
    cursor: pointer;
    
    border: solid 1px #757575;
    border-top: none;
  }
  
  #submit:hover {
    background: #dfd9da;
    color: white;
  }

/*FOOTER*/

#site-content {
	height: 85vh;
    background-color: #dfd9da;
    background-image: url(./assets/footer_background.png);
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;

}


#site-footer {
    height: auto;
    background-color: #dfd9da;
    color: #757575;
    padding: 2rem;
}

#site-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    text-align: center;
    gap: 1rem;
}

#site-footer a{
    text-decoration: none;
    color: inherit;
}

#site-footer a:hover{
    color: white;
}

.footer-center{
  flex-grow: 1;
  text-align: center;
}

.footer-side{
  width: 30rem;
}


/*WEDDING PAGE*/

.wedding-bg{
  height: 100vh;
  background-image: url(./assets/esküvői_termékek-bg.jpg);
  background-color: #dfd9dae3;
  background-blend-mode: lighten;
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

.wedding-container{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  text-align: center;
  color: #757575;
}

.wedding-title-h3{
  font-size: 2.5rem;
}

.wedding-title p{
  font-size: 2rem;
}

.wedding-title a{
  text-decoration: none;
  color: inherit;
}
.wedding-title a:hover{
  color: white;
  transition: all 200ms ease-in-out;
}






/*PRODUCTS PAGE*/

.product-title-background{
  height: 60vh;
  background-image: url(./assets/landingpage_background.png);
  background-color: #dfd9dacf;
  background-blend-mode: lighten;
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #757575;
}

.product-title-container{
 height: 14rem;
 width: 45rem;
 border: solid 1px #757575;
 font-size: 1.8rem;
 display: flex;
 justify-content: center;
 align-items: center;
}

.product-title{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
#termekek-husvet{
  background-color: #dfd9da;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem;
  color: #757575;
  gap: 4rem;
}

.product-container{
  height: auto;
  background-color: #dfd9da;
  padding: 5rem;
  border: 1px solid #757575;
  width: 20rem;
}

.product-container h2{
  font-size: 3rem;
  color: #757575;
}

.product-sub-container {
  width: 20rem; 
}
.product-box {
  border: 2px solid #757575; /* 4px */
  padding: 0.625rem; /* 10px */
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
  width: 100%;
}
.product-box img {
  width: 100%;
  display: block;
}
.details {
  display: none;
  margin-top: 0.625rem; /* 10px */
  text-align: center;
}

.expanded {
  border-color: white;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); /* 4px 6px */
}

.qty-container{
  display: flex;
  margin: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.price{
  font-size: 1.2rem;
}


.qty-input{
  width: 15%;
  height: auto;
  border: none;
  text-align:center;
  font-size: 1.5rem;
padding: 0;
  border: solid 1px #757575;
}

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    opacity: 1;
}

.details h3{
  font-size: 2rem;
}

.envelope-container{
  display: flex;
  justify-content: center;
  align-items: center;
}

#giftWrap{
  width: 20px;
  height: 20px;
}

.qty-container p{
  padding-right: 10px;
}


/* ADD TO CART BUTTON */
.button-76 {
  background-color: #cf245f;
  background-image: linear-gradient(to bottom right, #dfd9da, #f3e1ea);
  border: 0;
  border-radius: .25rem;
  box-sizing: border-box;
  color: #757575;
  cursor: pointer;
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
  padding: 1rem 1.25rem;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-76:hover {
  box-shadow: none;
  color: white;
}

/*CART FUNCTION*/

.cart-container {
  position: relative;
  display: inline-block;
}


.cart-count {
  position: absolute;
  top: -18px;
  right: -12px;
  color: #dfd9da;
  font-size: 1.2rem;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
flex-direction: column;
justify-content:left;
align-items: center;
}

.cart-count.visible{
  color: red;
  font-weight: bold;
}

/*CART DROPDOWN*/
.cart-dropdown {
  position: absolute;
  top: 30px;
  right: 0;
  width: 250px;
  background: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 10px;
  display: none; 
  z-index: 100;
}

.cart-dropdown.visible {
  display: block; 
}

.cart-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-dropdown li {
  font-size: 1rem;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
}

.cart-dropdown button {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
}

.cart-total {
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  padding: 5px;
  border-top: 1px solid #ddd;
}

.clear-cart {
  background-color: red;
  color: white;
}

.checkout {
  background-color: green;
  color: white;
}

/*AIDENLAPOK RESPONSIVE*/

.product-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  justify-items: center;
  width: 100%;
  padding: 5rem 2rem;
  text-align: center;
}

.product-container > h2 {
  grid-column: 1 / -1; /* teljes szélességen terjedjen */
  font-size: 3rem;
  color: #757575;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .product-container {
    grid-template-columns: repeat(2, 1fr); /* laptop méret: 2 oszlop */
  }
}

@media (min-width: 1200px) {
  .product-container {
    grid-template-columns: repeat(3, 1fr); /* nagy monitor: 3 oszlop */
  }
}

.product-sub-container {
  width: 100%;
  max-width: 20rem;
}