@font-face {
  font-family: UnageoBold;
  src: url(fonts/Unageo-Bold.ttf);
}
@font-face {
  font-family: Comicy;
  src: url(fonts/Comicy.ttf);
}
@font-face {
  font-family: HighEmpathy;
  src: url(fonts/High\ Empathy.ttf);
}
@font-face {
  font-family: Bebas;
  src: url(fonts/Bebas-Regular.ttf);
}
@font-face {
  font-family: Roboto;
  src: url(fonts/Roboto-Medium.ttf);
}
/* -----------------------------------GENERAL----------------------------------- */    
*{box-sizing: border-box;padding: 0;margin: 0;}
html{
  font-family: Arial, Helvetica, sans-serif;
  scroll-behavior: smooth;
}
a{
  text-decoration: none;
  color: black;
}
li{
  list-style: none;
}
body{
  scroll-snap-type: y mandatory;
}
/*img {vertical-align: middle;}*/
/* -----------------------------------GENERAL----------------------------------- */


/* -----------------------------------HEADER----------------------------------- */
header{
  position: relative;
  top: 0;
  bottom: 0;
}
#mobilenav{
  display: none;
}
#mainnav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  height: 9rem;
  width: 100vw;
  background: #ff5800;
  filter: saturate(90%);
  opacity: .9;
}
a:has(> #logo){
  margin-left: 3rem;
}
#logo{
  width: 20rem;
}
#logo:hover{
  filter: drop-shadow(0 0 .05rem white);
  transition: all .5s;
}

#mainnavmid{
  display: flex;
  gap: 3rem;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: UnageoBold;
}
#mainnavmid a{
  color: #ddf5f5;
}

#mainnavmid a:hover{
  color: #00215b;
}

#mainnavmid a:active{
  color: #00215b;
}

#mainnavmid > :first-child > :first-child{
  color: #00215b;
}
#mainnavright{
  display: flex; 
  align-items: center;
}
#mapicon{
  margin-right: 1rem;
}
#mapicon:hover{
  transform:translateY(.2rem);
  transition: all .3s;
}
#mapicon img{
  width: 5rem;
}
#lang{
  font-size: 1rem;
  font-weight: 900;
  color: #ddf5f5;
}
#lang:hover{
  color: #00215b;
}
#tel{
  font-size: 1rem;
  font-weight: 900;
  color: #00215b;
  margin: 0 2rem 0 2rem;
}
#socialnav{
  z-index: 1;
  display: flex;
  gap: 0.75rem;
  margin-right: 3rem;
}
#socialnav img{
  height: 1.25rem;
}
header aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: fixed;
  right: 0;
  z-index: 1;
  bottom: 65%;
}
#book{
  opacity: 0;
}
.sideorder{
  font-family: 'Nunito', sans-serif;
  color:#ff5800;
  font-size: 1.1rem;
  letter-spacing: .08rem;
  font-weight: 700;
  display: flex;
  border: 0;
  background: rgb(20, 20, 20);
  filter: drop-shadow(0 0 2px black);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none;
  border-radius: .8rem 0 0 .8rem;
  gap: 1rem;
  padding: .5rem  1.25rem .4rem .8rem;
  /*animation: order .5s ease-in-out 2s infinite;*/
}
.sideorder:hover{
  transform: translateX(1rem);
  transition: all .3s;
}
.sideorder img{
  width: 3rem;
}
dialog{
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: .5rem;
  border: 0;
  filter: drop-shadow(1px 1px 1px);
}
dialog::backdrop{
  background-color: rgba(0, 0, 0, .5);
}
form{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 0;
  font-family: Bebas;
  font-size: 1.5rem;
}
form input, form textarea{
  width:30rem;
  color: #00215b;
  background-color: rgba(0, 0, 0, 0);
  padding: .2rem;
  border: 1px solid #00215b;
  -moz-border: 1px solid #00215b; /* Specific for Firefox */
  outline: 1px solid #00215b;     /* To remove focus outline as well */
  appearance: none;
  -webkit-appearance: none; /* For WebKit browsers */
  -moz-appearance: none;    /* For Mozilla Firefox */
}
form input[type=submit]{
  color: #ff5800;
  background-color: #00215b;
  font-weight: 600;
}
/* -----------------------------------HEADER----------------------------------- */
        

/* -----------------------------------MAIN----------------------------------- */
main {
  position: relative;
  height: 100vh;
  width: 100%;
}
#home{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  filter: blur(1px) brightness(85%);
  /*transform: translateY(.25rem);*/
}
.rotating-text-wrapper {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rotating-text-wrapper h2 {
  font-size: 2.5em;
  margin: 0;
  padding: 0.3em;
  color: #fff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  animation-duration: 6s;
  animation-iteration-count: 1;
  opacity: 1;
}
.rotating-text-wrapper button {
  border: 0;
  background: #ff5800;
  cursor: pointer;
  outline: none;
  border-radius: .8rem;
  text-align: center;
  font-size: 1.25em;
  font-weight: 700;
  font-family: UnageoBold;
  margin-top: 2rem;
  padding: 1.25rem;
  color: #fff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  animation-duration: 2s, .3s;
  animation-iteration-count: 1, infinite;
  animation-delay: 0, 2s;
  opacity: 1;
}
.rotating-text-wrapper button:hover {
  background:#00215b;
  transition: background-color .5s;
}
.rotating-text-wrapper h2:nth-child(1) {
  animation-name: rotating-text-1;
}
@keyframes rotating-text-1 {
  0% { /*10% delay*/
    opacity: 0;
  }
  10% {
    transform: translateY(200%);
    opacity: 0;
  }
  33% {
    transform: translateY(0%);
    opacity: 1;
  }
}
/*.rotating-text-wrapper h2:nth-child(2) {
  background-color: tomato;
  animation-name: rotating-text-2;
}
@keyframes rotating-text-2 {
  0% {
    opacity: 0;
  }
  33% {
    transform: translateY(100%);
    opacity: 0;
  }
  67% {
    transform: translateY(0);
    opacity: 1;
  }
}
.rotating-text-wrapper h2:nth-child(3) {
  background-color: cornflowerblue;
  animation-name: rotating-text-3;
}
@keyframes rotating-text-3 {
  0% {
    opacity: 0;
  }
  66% {
    transform: translateY(0);
    opacity: 0;
  }
  95% {
    transform: translateY(-100%);
    opacity: 1;
  }
}*/
.rotating-text-wrapper button {
  animation-name: rotating-text-4, tilt-shaking;
}
@keyframes rotating-text-4 {
  0% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-.5deg); }
  50% { transform: rotate(-0deg); }
  75% { transform: rotate(.5deg); }
  100% { transform: rotate(0deg); }
}
@media screen and (max-width: 576px) {
  .rotating-text-wrapper {
    font-size: 0.7rem;
  }
}
.content {
  position: absolute;
  left: calc(50% - 2.34rem);
  bottom: 3rem;
  animation: gotomenu .5s ease-in-out infinite;
  filter: drop-shadow(0 0 1px #00215b);
}
/*    p {
        margin: 0 0 20px;
        color: #00215b;
        font-weight: 900;
        font-size: 1.5rem;
        font-family: UnageoBold;
    }
}
.content p:hover{
    color: #ff5800;
}
/* Arrow & Hover Animation */
#more-arrows {
	width: 4.69rem;
    height: 4.06rem;
  
    &:hover{
        polygon {
            fill: #ff5800;
            transition: all .2s ease-out;

            &.arrow-bottom {
                transform: translateY(-18px);
            }

            &.arrow-top {
                transform: translateY(18px);
            }
      
        }
  
    }
  
}

polygon {
  fill: #ff5800;
  transition: all .2s ease-out;
    
  &.arrow-middle {
	  opacity: 0.75;
	}

	&.arrow-top {
	  opacity: 0.5
	}	 
}

@keyframes gotomenu{
  0% {transform: translateY(0);}
  50% {transform: translateY(.1rem);}
  100% {transform: translateY(0);}
}
/* -----------------------------------MAIN----------------------------------- */


/* -----------------------------------MENU----------------------------------- */
#menusection {
  scroll-snap-align: start;
  scroll-margin-top: 9rem;
  background-color: rgb(251, 226, 186);
}
.menunav{
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}
.menunav h1{
  color: rgb(45, 45, 45);
  font-family: Comicy;
  font-size: 1.5rem;
}
.menunav ul{
  max-width: 100vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-family: Comicy;
  gap: 2rem;
  font-size: 1.5rem;
}
/* The dots/bullets/indicators */
.dot {
  border-bottom: #00215b solid 1px;
  color: #ff5800;
  cursor: pointer;
}
.active, .dot:hover {
  color: #00215b;
}


/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

#menu {
	display: flex;
  height: 60vh;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.menuCat {
  margin: 0 auto;
  display: none;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.menuItem {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  scroll-snap-align: center;
  gap: 2rem;
}

.menuItem img{
  width: 30rem;
}
figcaption{
  font-family: Bakso;
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: rgb(45, 45, 45);
}
figcaption b{
  font-family: HighEmpathy;
  color: black;
  font-size: 2.5rem;
}

/* Next & previous buttons */
.prev, .next {
  z-index: 1;
  position: absolute;
  top: 20vh;
  cursor: pointer;
  width: auto;
  padding: 1.05rem 1.25rem 1.2rem 1.1rem;
  color: white;
  background-color: rgba(0, 0, 0, .8);
  font-weight: bold;
  font-size: 1.5rem;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.prev {
  left: 0;
  border-radius: 0 3px 3px 0;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* -----------------------------------MENU----------------------------------- */


/* -----------------------------------FOOTER----------------------------------- */
#footercontainer {
  scroll-snap-type: y mandatory;
  display: flex;
  flex-wrap: wrap;
  background-color: whitesmoke;
  color: rgb(50, 50, 50);
  font-family: Roboto;
  justify-content:space-around;
  align-items: center;
}
#contact{
  scroll-snap-align: start;
  scroll-margin-top: 6.5rem;
  padding: 3rem;
}
#contact h1, #contact h2{
  color: #ff5800;
}
#contact a{
  color: rgb(50, 50, 50);
}
#logof{
  max-width: 12.5rem;
  opacity: .4;
}
#map{
  scroll-snap-align: start;
  scroll-margin-top: 6.5rem;
  height: 30rem;
  width: 40rem;
  z-index: 0;
  margin: 3rem;
  border: #00215b 2px solid;
}
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 0; /* Place the button at the bottom of the page */
  right: 2rem; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: black; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px 15px 5px 15px; /* Some padding */
  border-radius: 10px 10px 0 0; /* Rounded corners */
  font-size: 1.5rem; /* Increase font size */
  opacity: .7;
}

#myBtn:hover {
  background-color: #00215b; /* Add a dark-grey background on hover */
  opacity: 1;
  transition: all .3s;
}
footer{
  text-align: center;
  background-color: #ff5800;
  font-size: smaller;
  color: white;
  width: 100%;
  padding: .3rem 0;
}
/* -----------------------------------FOOTER----------------------------------- */



@media screen and ((orientation: portrait) or (width < 1200px)){
  main{
    height: calc(100vh - 5vh);
  }
  #home{
    object-position: 80% 100%;
  }
  #mainnav{
    height: 6.5rem;
  }
  a:has(> #logo){
    margin-left: .5rem;
  }
  #logo{
    width: 14rem;
  }
  #mainnavmid{
    display: none;
  }
  #mainnavright{
    display: none;
  }
  #mobilenav{
    display: block;
    z-index: 2;
  }
  #sandwich {
    display: block;
    margin-right: 1rem;
    width: 2rem;
    height: 2rem;
    background-image: url("icons/sandwich.png");
    background-repeat: no-repeat;
    background-size:cover;
    z-index: 2;
  }
  #smenu {
    z-index: 2;
    height: 100vh;
    width: 80vw;
    background-color: #ff5800;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    transform: translateX(80vw);
    transition: transform 250ms ease-in-out;
  }

  #smenu:target{
    transform: translateX(0vw);
  }

  #menu-cross{
    z-index: 2;
    position: absolute;
    left: 2.5vw;
    margin-top: 1vh;
    width: 3vh;
    height: 3vh;
    background-image: url("icons/cross.png");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
  }

  #menu_background {
    z-index: 2;
    margin: auto;
    margin-top: 5vh;
    width: 25vh;
    height: 25vh;
    background-image: url("pictures/toubkal\ logo\ w.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  #socialnav{
    justify-content: center;
    margin: 0;
  }

  #snav {
    font-family: Geologica;
    font-size: 1.2rem;
    margin-top: 5vh;
    color: aliceblue;
    display: flex;
    flex-direction: column;
    border-top: 1px solid aliceblue;
    border-bottom: 1px solid aliceblue;
  }

  .menuicon{
    width: 1.2rem;
  }
  .nav1 {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: aliceblue;
    border-top: 1px solid aliceblue;
    border-bottom: 1px solid aliceblue;
    padding: 1em 0 1em 1em;
  }
  .nav1:hover {
    background-color: aliceblue;
    color: rgb(5, 25, 45);
    transition: 250ms ease-in-out;
    cursor: pointer;
  }
  
  header aside {
    flex-direction: row;
    justify-content: space-between;
    left: 0;
    bottom: 0;
  }
  .sideorder{
    border-radius: .5rem .5rem .5rem .5rem;
    gap: .5rem;
    padding: .1rem .2rem .1rem .5rem;
    /*animation: order .5s ease-in-out 2s infinite;*/
  }
  .sideorder:hover{
    transform: translateX(0);
    transition: 0;
  }
  .sideorder img{
    width: 1rem;
  }
  .sideorder span{
    font-size: .7rem;
  }
  .rotating-text-wrapper {
    top: 20%;
  }
  .rotating-text-wrapper h2{
    font-size: 2.5rem;
  }
  .content {
    position: absolute;
    left: calc(50% - 2rem);
  }
  #menusection {
    scroll-margin-top: 2.5rem;
  }
  #menu {
    height: 60vh;
    gap: .5rem;
  }
  .menunav{
    padding-top: 5rem;
    gap: 2rem;
  }
  .menunav h1{
    font-size: 1.25rem;
  }
  .menunav ul{
    max-width: 100vw;
    gap: 1rem;
    font-size: .8rem;
  }
  .menuCat {
    margin: 0;
    scroll-snap-type: x mandatory;
    padding: 0 3rem 0 3rem;
  }
  .menuItem img{
    width: 16rem;
  }
  figcaption{
    font-size: 1.3rem;
  }
  figcaption b{
    font-size: 1.3rem;
  }
  /* Next & previous buttons */
  .prev, .next {
    padding: .2rem .5rem .5rem .5rem;
  }
  #map{
    height: 50dvh;
    width: 95dvw;
    margin: 1rem;
  }
  #myBtn {
    right: 50%;
    opacity: 0;
  }
}