/*===== Local Fonts =====*/
@font-face {
  font-family: circe;
  src: url("fonts/Circe-Regular.otf");
}

@font-face {
  font-family: circe-bold;
  src: url("fonts/Circe-Bold.otf");
}

@font-face {
  font-family: appetite;
  src: url("fonts/Appetite-Regular.ttf");
}
/*===== VARIABLES CSS =====*/
:root{
    --header-height: 3rem;
  
    /*===== Colors =====*/
    --first-color: #FFAC28;
    --dark-color: #212121;
    --white-color: #fff;
    
    /*===== Font and typography =====*/
    --body-font: circe;
    --normal-font-size: 1rem;
    --category-font-size: 1rem;
    --page-title-font-size: 3rem;
    --header-font-size: 2rem;
    --introduction-font-size: .8rem;
    --gallery-title-font-size: 1.5rem;
    --head-title-font-size: 1.3rem;
    /*===== z index =====*/
    --z-fixed: 100;
  }

  a.hov{
    text-decoration: none;
    color: var(--second-color);
  }
  body{
    margin: 0 0 0 0;
    padding: 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: 500;
    height: 100vh;
  }
  .notification {
    position: fixed; /* Fixed position to stay in place */
    top: 10%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Shift to center */
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    padding: 20px 30px; /* Increased padding for a larger box */
    border-radius: 8px; /* Slightly larger border radius */
    z-index: 1000; /* Ensure it appears above other elements */
    transition: opacity 0.5s ease; /* Smooth transition */
    opacity: 0; /* Start hidden */
    font-size: 18px; /* Larger text */
    text-align: center; /* Center text */
}

  
  @media screen and (max-width: 768px){
    :root{
      --normal-font-size: .738rem;
      --category-font-size: 1rem;
      --page-title-font-size: 2.5rem;
    }
    #offer-container{
      flex-direction: column;
    }
    #offer-right-side, #offer-left-side, form, input{
      width: 100%;
      min-width: 100%;
    }

    #offer-left-side{
      order: 2;
    }

    #offer-right-side{
      margin-bottom: 2rem;
      order: 1;
    }

    #introduction-content-container{
      flex-direction: column;
    }
    
    #introduction-text, #introduction-opening, #introduction-picture{
      width: 100% !important;
      max-width: 100% !important;
      order: 2;
    }

    #introduction-opening h1, #opening-content, #introduction-text p, h1{
      padding: 0 2rem 0 2rem;
    }

    #introduction-picture{
      order: 0;
      justify-content: center;
    }

    #introduction-picture img{
      min-width: 50% !important;
    }

    #introduction-section{
      height: auto !important;
      background-size: cover !important;
      width: 100% !important;
      background-image: url("img/small-background.png") !important;
      background-position: left center !important;
    }

    #about-us-text{
      margin-top: 5rem;
    }

    #introduction-opening{
      margin-bottom: 5.5rem;
    }
  }
  
  @media screen and (max-width: 1024px){
    :root{
      --normal-font-size: .738rem;
      --category-font-size: 1rem
    }
  }

.header{
    width: 100%;
    display: flex;
    z-index: var(--z-fixed);
    background-color: rgba(0,0,0,0);
  }

#main-section{
  background-image: url("img/landing_page.png");
  background-repeat: "no-repeat";

  background-size: cover;
  background-position: center;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

#landing-image{
  max-width: 800px;
  width: 100%;
  margin-right: 2rem;
}


#products-section{
  height: auto;
  color: var(--dark-color);
}

/*===== Head Title =====*/
.head-title{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5rem;
}

.head-title-container{
  display: flex;
  justify-content: center;
  flex-direction: column;;
}

.head-title-image{
  max-width: 64px;
}

.head-title-text{
  margin-block-start: 0;
  margin-block-end: 0;
  font-family: circe-bold;
  font-size: var(--head-title-font-size);
}

.head-title-item{
  display: flex;
  justify-content: center;
}

/*===== Category Selector =====*/
#product-category-selector{
  margin-top: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.category-item{
  height: auto;
  margin: 1rem 2rem 0 2rem;
}

.category-item-image img{
  filter: invert(100%);  
  max-width: 45px;
}

.category-item-text{
  margin-block-start: .3rem;
  margin-block-end: 0;
  font-family: appetite;
  font-size: var(--category-font-size);
}

.category-item-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 8rem;
  height: 8rem;
  background-color: #F8EFF0;
  transition: background-color .5s;
  cursor: pointer;
  text-align: center;
}

.category-item-container:hover{
  background-color: var(--first-color);
  transition: background-color .5s;
}

/*===== Products =====*/

.product-item-text{
  font-size: var(--category-font-size);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 1rem;
}

.product-item-name, .product-description, .product-price{
  margin-block-start: 0;
  margin-block-end: 1rem;
}

.product-item-name, .product-price{
  font-family: circe-bold;
}

.product-price{
  color: var(--first-color);
}

.product-description{
  color: #A5A5A5;
}

.product-item{
  height: auto;
  margin: 0 2rem 2rem 2rem;
}

.product-item-image{
  width: 250px;
}

.product-item-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20rem;
  height: 23rem;
  transition: box-shadow .5s;
  cursor: pointer;
}

.product-item-container:hover{
  box-shadow: rgba(0,0,0,0.2) 0 0 0.5rem;
  transition: box-shadow .5s;
}

#all-product-container{
  display: flex;
  justify-content: center;
  align-items: top;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin: 2.4rem 0 0 0;
}

/*===== Highlighted Part =====*/
#highlighted-product-section{
  background-image: url("img/highlighted_product_background.png");
  background-repeat: "no-repeat";

  background-size: cover;
  background-position: center;
  height: 100vh;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column ;
}

.highlighted-product{
  max-width: 1000px;
  width: 100%;
  margin-top: 3rem;
}

.highlighted_mobile{
  display: none;
}

#highlighted_title{
  margin-top: 5rem;
}

/*===== Offer Part =====*/
#offer-section{
  margin-top: 2rem;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#offer-container{
  display: flex;
  justify-content: center;
  width: 70%;
  height: auto;
  background-color: #F5F5F5;
  border-radius: 30px;
  margin: 2rem 0 4rem 0;
  padding: 3rem;
}

#offer-left-side, #offer-right-side{
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 50%;
}

#offer-left-side{
 margin-right: 8rem;
}

#offer-right-side{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  flex-direction: column;
}

input, textarea{
  display: block;
  background-color: #ECECEC;
  border: 1px solid #B5B5B5;
  height: 30px;
  width: 100%;
  color: black;
  transition: box-shadow .2s;
  margin-bottom: 1.2rem;
}

textarea{
  resize: none;
  height: 110px;
}

input:focus {
  outline: none;
  box-shadow: rgba(0,0,0,0.2) 0 0 0.5rem;
  transition: box-shadow .2s;
}

textarea:focus {
  outline: none;
  box-shadow: rgba(0,0,0,0.2) 0 0 0.5rem;
  transition: box-shadow .2s;
}


form{
  width: 100%;
}


label, .dropdown-header{
  font-family: circe-bold;
  font-size: var(--category-font-size);
}

.dropdown-header p{
  margin: 1.5rem 0 .2rem 0;
}

.dropdown-box{
  background-color: #ECECEC;
  border: 1px solid #B5B5B5;
  height: 30px;
  width: 100%;
  color: var(--dark-color);
  transition: box-shadow .2s;
  margin-bottom: 1.2rem;
  font-size: var(--category-font-size);
  margin: 0;
  cursor: pointer;
}

.dropdown-input{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: .5rem;
}

.dropdown-container{
  width: 100%;
}

.dropdown-content{
  display: none;
}

.dropdown-item{
  max-width: 100%;
  margin: 0;
  padding: .3rem;
}

.dropdown-item:hover{
  background-color: #B5B5B5;
  transition: background-color .2s;
}

.dropdown-content-active {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #ECECEC;
  border: 1px solid #B5B5B5;  
  z-index: 1;
}

.calendar-container{
  width: 100%;
  background-color: #B5B5B5;
  height: 80%;
  margin-top: 1rem;
}

#submit-offer{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 30px;
  background-color: var(--first-color);
  color: var(--light-color);
  font-family: circe-bold;
  font-size: var(--category-font-size);
  border: none;
  cursor: pointer;
  transition: background-color .5s;
}

#submit-offer:hover{
  background-color: #B5B5B5;
  transition: background-color .5s;
}

/*===== Introduction Part =====*/
#introduction-section{
  background-image: url("img/introduction_background.png");
  background-repeat: no-repeat;

  background-size: cover;
  background-position: center;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.page-title-container{
  display: flex;
  justify-content: center;
  align-items: top;
  width: 100%;
  height: 17%;
  font-family: appetite;
  font-size: var(--page-title-font-size);
  color: var(--white-color);
  text-shadow: 1rem 1rem 1.5rem var(--dark-color);
}

#introduction-content{
  width: 100%;
  height: 60%;
}

#introduction-content-container h1{
  color: var(--white-color);
  font-family: circe-bold;
  font-size: var(--header-font-size);
  margin: 3.5rem 0 .5rem 0;
}

#introduction-content-container p{
  color: var(--white-color);
  font-size: var(--introduction-font-size);
}

#introduction-content-container{
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 100%;
  height: 80%;
}

#introduction-text, #introduction-opening, #introduction-picture{
  width: 25%;
  max-width: 25%;
}


.opening-row{
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: 2px dotted var(--white-color); 
  border-style: none none dotted;
}

.opening-row-item p{
  font-size: var(--category-font-size) !important;
  margin: 0;
}

#introduction-picture{
  display: flex;
  align-items: flex-start;
}

#introduction-picture img{
  max-width: 100%;
  min-width: 100%;
}

.ripped-top{
  max-width: 100%;
  width: 100%;
  position: absolute;
  transform: rotate(180deg);
}

/*===== Gallery Section  =====*/
#gallery-section{
  margin-top: 2rem;
  width: 100%;
  height: auto;
  margin-bottom: 5rem;
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#gallery-container{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.gallery_box{
  width: auto;
  height: auto;
  background-color: #F8EFF0;
  box-shadow: rgba(0,0,0,0.3) 0 0 0.5rem;
  padding: 1rem;
  margin: 2rem 1.5rem 0 1.5rem;
}

.gallery_date{
  color: #414141;
  margin: .5rem 0 0 0;
}

.gallery_image{
  width: 100%;
}

.gallery_title{
  color: #414141;
  font-family: appetite;
  font-size: var(--gallery-title-font-size);
  margin: 0;
}

/*===== Footer Section =====*/
#ripped_texture_footer{
  height: 5vh;
}

#footer_background{
  position: relative;
}

#footer_top_content{
  display: flex;
  justify-content: center;
  align-items: center;
}

#footer_top_content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#footer_content_container{
  display: flex;
  flex-direction: column;
  color: var(--white-color);
}

#footer-section{
  background-image: url("img/footer.png");
  background-repeat: "no-repeat";
  background-size: initial;
  background-position: center;
  width: 100%;
  height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6rem;
}

#footer_copyright p{
  margin: 0;
  font-size: var(--introduction-font-size);
  text-align: center;
  padding: 0 1rem 0 1rem;
}

.footer_item{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 2rem 0 2rem;
}

.footer_icon{
  margin-right: 1rem;
  width:32px;
  height:32px;
}

/*===== Burger Animation =====*/
#nav_toggle {
  position: relative;
  display: block;
  width: 50px;
  height: auto;
  cursor: pointer;
  transition: all .5s ease-in-out;
}

#nav_burger {
  width: 25px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
  transition: all .5s ease-in-out;
}

/* ANIMATION */
#nav_toggle.open #nav_burger:nth-child(2) {
  transform: translateX(-50px);
  background: transparent;
}
#nav_toggle.open #nav_burger:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#nav_toggle.open #nav_burger:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/*===== NAV =====*/

#nav-container{
  height: 5rem;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 999;
  margin-top: 2rem;
}


#nav-list{
  display: flex;
  justify-content: center;
  align-items: center;
}

#nav-list{
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

.nav_item{
  padding: 0 3rem 0 3rem;
}

ul {
  list-style-type: none;
}

.nav_link, .nav_logo, .nav_toggle{
  font-size: 1.3rem;
  font-family: circe-bold;
  color: var(--white-color);
  transition: color .5s;
  text-decoration: none;
}

.nav_link:hover{
  color: var(--first-color);
  transition: color .5s;
  cursor: pointer;
}

#mobile-header{
  display: none;
}

#nav_toggle_container{
  justify-content: flex-end;
  margin-right: 1rem;
}

#nav_logo_container{
  flex-basis: 100%;
}

#mobile_link{
  display: none;
}

.nav-active{
  opacity: 100% !important;
  transition: all .5s;
}
  
@media screen and (max-width: 768px){
  #nav-container{
    position: fixed;
  }
  #nav-menu{
    display: none;
    position: fixed;
    top: 5rem;
    width: 100%;
    height: auto;
    background: rgba(100,100,100,.7);
    backdrop-filter: blur(15px);
    transition: .5s;
  }

  #nav-list{
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  #nav-open{
    display: block;
    width: auto;
  }

  #mobile-header{
    display: flex;
    background-color: #111213;
    width: 100%;
    height: 100%;
    justify-content:flex-start;
    align-items: center;
  }

  #mobile-header img {
    width: 100px
  }

  #nav-container{
    margin: 0 !important;
  }

  .nav__logo{
    display: none;
  }

  .nav_item{
    padding: 1rem 0 1rem 0 !important;
    font-size: var(--category-font-size);
  }

  .nav_item a{
    text-shadow: #212121 0 0px 10px;
  }

  #footer-section{
    height: auto;
	  padding: 1rem 0;
  }

  .highlighted_mobile{
    display: block;
    width: 340px;
    margin-bottom: 4rem;
  }

  #highlighted-product-section{
    height: auto;
  }

  .highlighted-product{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
  }

  .hightlighted_big{
    display: none;
  }

  .category-item{
    margin: 1rem .5rem 0 .5rem;
  }

  #mobile_link{
    display: block;
  }
}

@media screen and (max-width: 595px){
  #ripped_texture_footer{
    height: 5vh;
  }

  #footer_logo{
    order: -1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footer-section{
    height: auto;
	  padding: 1rem 0;
  }

  .footer_item{
    margin-bottom: 1rem;
  }
}