/*
=============== 
Fonts
===============
*/

/* blue granient color

backgrou1nd: hsla(200, 55%, 25%, 1);

background: linear-gradient(45deg, hsla(200, 55%, 25%, 1) 0%, hsla(206, 66%, 34%, 1) 52%, hsla(200, 55%, 25%, 1) 100%);

background: -moz-linear-gradient(45deg, hsla(200, 55%, 25%, 1) 0%, hsla(206, 66%, 34%, 1) 52%, hsla(200, 55%, 25%, 1) 100%);

background: -webkit-linear-gradient(45deg, hsla(200, 55%, 25%, 1) 0%, hsla(206, 66%, 34%, 1) 52%, hsla(200, 55%, 25%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#1D4C64", endColorstr="#1E6091", GradientType=1 );
#00d2da  Lila https://coolors.co/523bc2-5f4ac6-6c59cb-7967cf-8676d4-9385d8-a094dc-ada3e1-bab1e5-c7c0ea ; */

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  --clr-primary-1: #00959f;
  --clr-primary-2: rgb(43, 139, 197,0.2);
  --clr-primary-3: #1e6091;
  --clr-primary-31:linear-gradient(176deg, rgba(43,139,197,0.3) 0%, rgba(255,255,255,1) 100%);
  --clr-primary-4: #1D4C64;
  /* primary/main color */
  --clr-primary-5:rgb(43,139,197, 0.15);
  /* lighter shades of primary color */
  --clr-primary-6: rgb(86, 255, 248);
  --clr-primary-7: rgb(0, 57, 147);
  --clr-primary-8: linear-gradient(191deg, rgba(43,139,197,0.8) 28%, rgba(255,255,255,1) 100%); ;
  --clr-primary-9:linear-gradient(191deg, rgba(43,139,197,1) 22%, rgba(255,255,255,1) 100%);;
  --clr-green-1: #416767;
  /* darkest grey - used for headings */
  --clr-grey-1: #669bbc;
  --clr-primary-3-50: rgba(43, 139, 197, 0.5)
  ;
  --clr-grey-3: #deadae;
  --clr-grey-4: #deadae;
  --clr-light-cyan: #cbeef3;
  --clr-black: #A67F8E;
  --clr-light-green: rgba(172, 228, 219, 0.3);
  --clr-green: #00959f;
  /* grey used for paragraphs */
  --clr-grey-5: #deadae;
  --clr-grey-6: hsl(209, 23%, 30%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%, 0.4);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-white-light: rgba(255, 255, 255, 0.315);;
  --ff-primary:  "Montserrat", sans-serif;
  --ff-secondary:"Original Surfer", sans-serif ;
  --ff-third:"Montserrat", sans-serif ;
  --transition: all 0.3s linear;
  --spacing: 0.25rem;
  --radius: 0.5rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
}
/*
=============== 
Global Styles
===============
*/

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--ff-primary);
  font-optical-sizing: auto;
  font-style: normal;
  background: var(--clr-white);
  line-height: 1.5;
  font-size: 1rem;
  overflow-x: hidden;
}

.logo {
  color: white;
  left: 50vw;
  position: relative;
}

ul {
  list-style-type: none;
}
a {
  text-decoration: none;
  color: var(--clr-green-1);
}
img:not(.nav-logo) {
  width: 100%;
  display: block;
}



.capital-letter{
  font-size: 3rem;
}


.nav-logo {
  position: relative;
  max-width: 2.9rem;
  height: auto;

  border-radius: 3px;
  z-index: 1; /* Ensure this is lower than the pseudo-element */
}


.hero-logo {
  position: relative;
  max-width: 19rem;
  height: auto;

}

.headline2, .headline3 h3{
  color: var(--clr-white);
  font-size: 1.9rem;
  box-shadow: var(--light-shadow);
}






.whatsapp-bar-icon{
  color: green;
transform: scale(1.8);

}

.whatsapp-bar-icon:hover{
  color: greenyellow;
}


#header_logo {
  width: 60%;
  height: 100%;
}

h1 {
  text-align: center;
}


h2,
h3{
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.25rem;
  font-family: var(--ff-secondary);
  font-optical-sizing: auto;
  letter-spacing: var(--spacing);
  text-align: center;
  

}

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
  padding: 1rem;
  text-transform: uppercase;
  color: var(--clr-white);
  background-color: var(--clr-primary-3);
font-weight: 900;
}
h3 {
  font-size: 1.25rem;
  text-transform: uppercase;
}
h4 {
  font-size: 1rem;
  letter-spacing: var(--spacing);
text-transform: uppercase;
}

nav h3,
h5 {
  color: white;
}
h5{
  color: var(--clr-primary-1);
}

p {
  text-transform: lowercase;
}

.contact p {
  margin-bottom: 0;
}



li {
  text-align: center;

}
@media screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 2.8rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1rem;
  }
  body {
    font-size: 1rem;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1.3;
  }

  li {
    text-align: left;
  }
  .nav-logo {
    max-width: 5rem;

    left: 0vw;
    margin-top: 0;
  }
}
/*  global classes */
.icon-container {
  display: flex;
  justify-content: center;
  gap: 2rem; /* Space between icons */
  transform: translateY(-60%);
margin-top:2rem;

}

.icon {
  font-family: var(--ff-primary);

  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--clr-primary-9);
  opacity: 0.8;
}

.icon:hover {
  opacity: 1;
}

.icon i {
  font-size: 1.5rem; /* Adjust icon size */
  color: var(--clr-white);
}

.icon p {
  margin-top: 0.5rem;
  font-size: 0.9rem; /* Description text size */
  color: var(--clr-white);
}

.btn {
  max-width: 100vw;
  text-transform: uppercase;
  background: none;
  color: white;
  padding: 1rem 1.5rem;
  letter-spacing: var(--spacing);
  display: inline-block;
  font-weight: 700;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);

}



.btn.tour{
padding: 0.25rem 0.25rem;
  margin: 0 auto;
  color: var(--clr-white);
}

.btn:hover {
  color: var(--clr-white);
  background: var(--clr-primary-1-linear-gradient);
  border: none;
}

.gtid-itembtn {
background: var(--clr-primary-2);
margin-bottom: 0.25rem;
color: var(--clr-white);
font-weight: 700;
height: 100%;
width: 90%;
align-self: center;
justify-self: center;
border: 1px groove wheat;
box-shadow: var(--dark-shadow);
}



/* ==== global section
================================== */

.section {
  padding-top: 2rem;
  padding-bottom: 1rem;
  
}

.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
}
@media screen and (min-width: 992px) {
  .section-center {
    width: 95vw;
  }

}


.section-title {
  text-align: center;
  color: var(--clr-primary-1);
  text-transform: capitalize;
  font-size: 1rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);

}

.section-title h3{
  font-size: 1.35rem;
}
.section-title h2{
margin-bottom: 0.2rem;
color: var(--clr-primary-1);
}
.section-title h5{
  font-family:var(--ff-secondary); ;
  font-size: 1rem;
 color: white;
margin-bottom: 0.2rem;
}

.section-title.video {
  background-color: rgba(222, 173, 174, 0.2);
  padding: 0.2rem 1rem;
}






.project-text{
  gap: 2rem;
  hyphens: auto; 
	text-align: left;
  text-transform: none;
  display: inline-block;
  padding: 0.25rem 0.15rem;
  padding-top: 1.25rem;
  max-width: 90vw;
  max-width: 30rem;
  margin: 0 auto;
  color: white;
}

.project table{
  border-spacing: 10px;

}



.section-title {
  margin-bottom: 0.3rem;
}

.bg-grey {
  background: var(--clr-grey-10);
}
/*
=============== 
Navbar
===============
*/
.nav-links {
  display: none;
}
.nav {
  width: 100%;
  position: absolute;
  height: auto;
  min-height: 6vh;
  padding: 1rem 1rem 1rem 1rem;
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
  transition: var(--transition);
  z-index: 32;



}
.nav-single-page {
  background-color:var(--clr-primary-1);
  
}


.nav-center {
  display: block;
  max-width: auto;
  margin: 0 auto;
  width: 100%;

}

.nav-header {
  
  display: flex;
  align-self: end;
  justify-self: end;
  align-items: center;
  justify-items: flex-end;
  width: 100%;
  text-align: center;
  
}

.nav-btn {
  position: absolute;
  background: transparent;
  border-color: transparent;
  color: var(--clr-primary-3);
  font-size: 2rem;
  cursor: pointer;
  justify-self: end;
  z-index: 30;
  right: 0;
margin-right: 2rem;

}

#nav-btn {
  color:var(--clr-white);
  justify-self: right;

}

li a::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background-color: var(--clr-green-1);

  transition: all.5s;
}

li a:hover::after {
  width: 100%;
  color: var(--clr-green-1);
}

.video-text.subtitle{
  font-family: var(--ff-third);

  color: white;
  border-color: transparent;
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 800;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: var(--clr-primary-3);
}

@media screen and (min-width: 768px) {
  

  .nav {
    /* background: var(--clr-primary-10); */
    position: absolute;
   
  }
  .single-page {

    padding-bottom: -3rem;
  }
  .about-title {
    margin-top: 8rem;
  }

  .nav-btn {
    display: none;
  }
  .nav-links {
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
justify-items: center; 
    font-family:var(--ff-primary);
    font-optical-sizing: auto;
    font-style:unset;
   }



  .nav-links a {
    font-family: var(--ff-primary);
  font-style: normal;
  font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--clr-white);
    font-weight: 700;
    letter-spacing: var(--spacing);
    transition: var(--transition);
    -webkit-text-stroke-color: var(--clr-primary-3);
  }
  .nav-links a:hover {
    color: var(--clr-primary-3);
  }
  .nav-center {
    display: grid;
    grid-template-rows: 1fr ;
    align-items: end;
 justify-items: end;
    justify-content: start;
    min-width: 100vw;
    grid-template-areas:
      "b b"
      "a a";
  }
  .nav-links {
    grid-area: a;
  }

  .nav-header {
    grid-area: b;
  }
  .single-page {
    padding-top: 4rem;
  
  }
  .nav-logo {
    max-width: 3rem;
    
  }
}

/* Define the spin animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Apply the animation to the hero logo */
.hero-logo.spin-onload {
  animation: spin 3s ease-in-out; /* Adjust duration and easing */
  display: inline-block;
}

/* fixed navbar */
.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
background: var(--clr-primary-3);  z-index: 200;
  box-shadow: 2;
  box-shadow: var(--light-shadow);
  opacity: 1;
  border: none;

}

.show-links {
  height: 280px;
}

/*
=============== 
Sidebar
===============
*/
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  background: var(--clr-primary-1);
  z-index: 1000;
  display: grid;
  place-items: center;
  transition: var(--transition);
  /* add later */
  transform: translateX(-100%);
  opacity: 90%;
  z-index: 4000;
  
}

.show-sidebar {
  transform: translateX(0);
}

.sidebar-links {
  text-align: center;
}
.sidebar-links a {
  font-size: 2rem;
  text-transform: var(--transition);
  color: var(--clr-grey-5);
  letter-spacing: var(--spacing);
  display: inline-block;
  margin-bottom: 1.5rem;
}

.sidebar-links a:hover {
  text-decoration: underline;
}

.social-icons {
  display: grid;
  margin-top: 3rem;
  width: 20rem;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
}

.social-icon {
  font-size: 1.5rem;
  color: var(--clr-grey-1) var(--transition);
}

.social-icon:hover {
text-decoration: underline;
}

.close-btn {
  position: absaolute;
  top: 1rem;
  right: 1rem;
  font-size: 3rem;
  background: transparent;
  border: transparent;
  transition: var(--transition);
  color:var(--clr-white);
  cursor: pointer;
  z-index: 4000;
}

.close-button{
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 3rem;
  cursor: pointer;
  background: none;
  border: none;
  color: red;
  z-index: 999999;
}

.close-btn:hover {
  color: var(--clr-grey-1);
}

.close-button.bottom {
  position: static;
  background: transparent;
  display: inline-block;
}


/*
=============== 
Hero
===============
*/
/* underline added to globals */

.hero-diashow {
  position: relative;
  width: 100%;
  height: 500px; /* Adjust as needed */
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Keeps the image filling the container */
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.hero .underline {
  margin-bottom: 0.5rem;
  margin-left: 0;
}


.sticky-booking-btn {
  display: grid;
  grid-template-rows: 1fr 1fr; /* Two equal-width columns */
  justify-items:end; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 10%;
  background-color: transparent;
  z-index: 1000;
  margin-bottom: 0.55rem;
  padding-right: 1rem;
}

.sticky-btn {
color: white;
font-style: bold;
letter-spacing: 0.5rem;
}

.sticky-phone{
    text-align: center;
}

.fa-phone.phone{
    color: var(--clr-primary-1);
  font-size: 1.5rem;
  border-color: var(--clr-white);

}

.fa-phone.phone:hover{
color: var(--clr-primary-3);
}

#booking-btn{
  display: none;
}



.hero {
  position: relative;

  height: 100vh;
  z-index: 1;
  overflow: hidden;
}

.menu-btn {
  display: flex;
z-index: 30;
  grid-template-rows: 1fr;
gap: 2rem;
}

.video-btn:hover{
  background: var(--clr-primary-3);
}


@media screen and (min-width: 992px) {

  .sticky-btn {
    color: white;
    font-style: bold;
    letter-spacing: 1rem;
    
    }



}


.video-btn {
  font-family: var(--ff-primary);
  text-align: center;
  color: var(--clr-white);
  border-color: var(--clr-white1);
  align-items: center;
  border-radius: 12px;
  box-shadow: transparent 0 0 0 5px,rgba(18, 18, 18, .1) 0 6px 20px;
  font-size: 2.2rem;
  justify-content: center;
  line-height: 1;
  margin: 0;
  outline: none;
  padding: 1rem 4rem;
  text-decoration: none;
  transition: box-shadow .2s,-webkit-box-shadow .2s;
  white-space: nowrap;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

}

select {
color: var(--clr-white);
font-weight: 800;
}


.btn {
  display: block;
}

.slideshow-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide {
  display: none;
}

.booking-frame{
  border: 1px solid var(--clr-primary-3);
  border-right: none;
  border-left: none;
justify-content: center;
justify-items: center;
padding: 2rem 0;

}

/* Booking Widget */
.booking-widget {
  border-bottom: 4px solid var(--clr-white);
  background: var(--clr-primary-3);
text-align: center;
  position: relative;
  display: grid;
  gap: 0.2rem;
  font-size: 2rem;
  color: var(--clr-white);
  align-self: center;
max-width: 100vw;
  padding-bottom: 5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  grid-row: 1fr 1fr 1fr 1fr ;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
  "headline headline"
  "a b "
  "c d"
  "e f"
  "g g"
  "i i"
  "j j"

  ;
}


.headline-booking {
  width: 100%;
grid-area: headline;
margin-bottom: 1.5rem;
}

.date-headline{
  color: white;
  background: var(--clr-primary-3);
  font-size: 1.5rem;
  transform: translateY(100%);
}

.guests{
  display: grid;
  place-items: center;

}
.room-type{
  display: grid;
  place-items: center;
}


.service-options{
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  place-items: center;
  grid-area: service;
  flex-wrap: wrap;
  gap: 2rem;

  margin-bottom: 2rem;
}
.service-options1{
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  place-items: center;
  align-self: center;
}
.headlineservice{
  margin:1.5rem auto;
  align-self: center;
  text-align: center;
  background-color: var(--clr-primary-3);
  color: white;
  grid-area: headlineservice;
  padding: 0.7rem 0;
  width: 89vw;
}
/* Umgebender Container */
#inline-picker {
  max-width: 100vw;
  margin: 4rem auto;
  display: flex;
  justify-content: center;
margin-bottom: 0;
  box-shadow: none;

}

/* Hauptcontainer von Litepicker */
.litepicker {


  box-sizing: border-box;
  box-shadow: none;


}

/* Zentrierung und schöneres Layout */
.litepicker .container__main {
  display: flex;
  justify-content: center;
max-width: 100vw;
}


/* Optional: Monate nebeneinander und zentriert */
.litepicker .container__months {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 2rem;
  box-shadow: none;
}
.litepicker .container__days {
  color: white !important;  /* Change to your preferred color */
}



.option1{
  grid-area: i;
  margin: 0 auto;
}
.mobile-picker-widget{
  grid-area: f;
align-self: center;
}


.name-input{
  position: relative;
 
  }


  .submit{
    grid-area: submit;
  }

  .price-display{
    grid-area: l;
margin: 0 auto;   
    text-align: center;
  }




/* 
.booking-widget::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/10Days-surferpackage-image.jpg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8; 
  z-index: -1; 
} */

@media screen and (min-width: 768px) {
  .booking-widget{
  
    grid-row: 1fr 1fr 1fr 1fr ;
    grid-template-columns: 1fr  ;
    grid-template-areas:
     "headline headline headline headline"
    "i i i i"
    "j j j j"
    "f f f f"
    "k k k k"
    "headlineservice  headlineservice headlineservice headlineservice"
    "service service service service"
    "l l l l"
    "submit submit submit submit"
    ;
  }
  
  }

/*
=============== 
About
===============
*/

.single-page {
  display: flex;
  flex-direction: column;
  background: var(--clr-primary-1);
padding-top: 3rem;
min-height: 100vh;
width: auto;


}

.prices {
  padding-top: 0;
  padding-bottom: 0;
}

.single-page p {
  color: black;
}

.about-title h1 {
  color: white
}

.about-title .underline {
  text-align: center;
  margin-left: 42%;
}

.about-center {
  display: grid;
  gap: 3rem 2rem;
}



@media screen and (min-width: 992px) {
  .about-center {
    grid-template-columns: 1fr 1fr;
  }

  .about-info {
    align-self: center;
  }

  .single-page {
    min-height: calc(100vh - 5rem - 198px);
    background-attachment: fixed;
  }

}

#totalCost {
  font-size: 2rem;
  color: white;
  border: none;
  outline: none; /* Removes the border that shows up when the field is focused */
  background-color: transparent; /* Optional: Makes the background transparent */
  pointer-events:fill; /* Optional: Prevents users from clicking into the field */
}


/* section center add to globals */

#about {
  padding-bottom: 0rem;
  padding-top: 0;

}

.about-info p{
  hyphens: auto; 
	text-align: left;
  text-transform: none;
}


.about-img {
  flex: 0 0 70%;
  overflow: hidden; /* Ensure images don't overflow the container */
  cursor: pointer; /* Show cursor as pointer on hover */

  cursor: pointer; /* Show cursor as pointer on hover */

  position: relative; /* Positioning context for absolute positioning */
  transition: transform 3s ease;
}

.about-photo {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 3s ease;
}

.about-img:hover {
  transform: scale(1.5); /* Optional: Scale up on hover */

  z-index: 1; /* Ensure it appears above neighbor images */
}
.about-info {
  text-align: left;
}
.project-title{
  padding: 1rem;
  text-align: center;
  background: var(--clr-primary-3-50);

}

.card-info h3 {
  background-color:silver;
  color: black;
}

.section.explore {
width: 90%;
  padding: 2rem;
  color: var(--clr-primary-3);
  text-align: center;
  margin-bottom: 3rem;
  border-color: var(--clr-primary-1);
  border-width: 0.2px;
padding-bottom: 2rem;
 margin: 0 auto;
 margin-top: 2.25rem;
 margin-bottom: 2rem;
}
.section.explore p{
  font-size: 1.4rem;
}
.section.explore h2{
background: none;

color: var(--clr-primary-3);
}
.tour-title {
  position: absolute;
  left: 50%; /* Set left position to 50% */
  transform: translateX(-50%); /* Translate back by 50% of its own width */
  bottom: 10px;
  margin: 0;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  color: #333;
  font-size: 16px;
  text-align: center; /* Center text horizontally */
}



/*
=============== 
Services
===============
*/
.services {
  align-self: center;
  justify-self: center;
  width: 90vw;
z-index: 20;
padding-bottom: 3rem;
margin-top: 5rem;


}

.service {
  text-align: center;
  margin-bottom: 3rem;
}

.service-icon  {
  padding: 0.25rem;
  display: inline-block;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  background: transparent;
color: var(--clr-primary-3);
}




.service-titel   {
  font-size: 0.6rem;
  color: var(--clr-primary-3);
font-weight: 800;
text-transform: none;
font-style:oblique;
padding: 0 0.5rem;
}


.services-center {
  margin-top: 2rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
padding: 0 2rem;
justify-self: center;
}




@media screen and (min-width: 576px) {
  .service-icon  {

    padding: 0.5rem;
    display: inline-block;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--clr-primary-2);
  }

  .section.explore p{
    font-size: 2.2rem;
  }
 
  .service-titel   {
    font-size: 0.9rem;
  } 
  .service {
    -webkit-box-flex: 0;
    flex: 0 0 calc(9% - 1rem);
    margin-bottom: 1rem;
  }
}
@media screen and (min-width: 992px) {
  .service {
    -webkit-box-flex: 0;
  }
}
@media screen and (min-width: 1170px) {

 
  .service-icon {
    align-self: start;
  }

  .service-titel {
    margin-bottom: 0.5 rem;
  }
}

/*
=============== 
Projects booking-widget templates
===============
*/


.projects {
  background: none;
height: auto;
width: 100%;
padding: 0 10rem;
}

.rooms{
  background:var(--clr-primary-2);
}

.headline h2{
  color: var(--clr-primary-3);
  text-align: center;
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 0.25rem;
  width: 100%;
    
  }

.rooms h3{
color: var(--clr-primary-3);
-webkit-text-stroke-color: var(--clr-white);
}

p.project-extra {
  font-size: 1.2rem;
  margin-top: 1rem;
}
.package-service{
  font-size: 1.15rem;
  width: 50%;
  height: 100%;
  border-radius: 10px;
  box-shadow: var(--light-shadow);
  margin-bottom: 90%;
}
.project:hover ,.rooms h3{
color: white;
}

#inline-picker {
  background-color: var(--clr-white); /* z.B. hellgrau */
}



.project {
  position: relative;
  display: flex;
  height: auto;
  width: 100%;
  border-radius: var(--radius);
  z-index: 0;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
  padding: 1rem;
  align-items: start;
  margin-bottom: 45%;
  z-index: 2;
  box-shadow: var(--light-shadow);

}





.projects-info {
  display: flex;
  flex-direction: column;
  position: relative;
  font-size:1rem;
  color: var(--clr-white);
  -webkit-text-stroke-width: 0.1px;
  -webkit-text-stroke-color: var(--clr-white);
  height: 100%;
  width: 100%;
  text-transform: capitalize;
  text-align: center;
  justify-content: space-around;
  transform: translateY(120%);
  z-index: 1;

}


.project:not(.package) {
  color: var(--clr-white);
  position: relative;
  width: 100%;
  text-transform: capitalize;
  text-align: center;

}



.projects-info p{
  position: relative;
max-width:100%;
color: white;
z-index: 2;


}

.project-desc{
  margin-top: 1.5rem;
}



.project-img {
  transition: var(--transition);
  height: 11vw;
  width: auto;
  min-height: 120px;

  object-fit: cover;
  object-position: center;
}




.project-img:hover{
border: 0.5px inset var(--clr-primary-2);
cursor: pointer;
opacity: 1;
}

.projects-center {
position: relative;
top: 0;
width: 100vw;
  height: auto;
  background: var(--clr-primary-3);
  z-index: 4;
  display: grid;
   align-self: center;
  justify-items: center;
  justify-self: center;  
  column-gap: 1rem;
  row-gap: 1rem;
  padding-top: 2rem;
  z-index: 10;
  grid-template-columns: 1fr; /* Single column */
  grid-template-areas:
"headline2"
    "d"
    "e"
 
"headline3"
    "h"
    "i"
    "j"
    "k"
    "l"
    "m"
    ;


}

.projects-center::after {
  content: "";
  position: absolute;
  bottom: -3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  max-width: 100vw; /* kannst du anpassen */
  height: auto;
  aspect-ratio: 3/1; /* oder feste Höhe */
  background-image: url('../images/Hero-background-wave.png'); /* Pfad anpassen */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  pointer-events: none; /* damit Klicks durchgehen */
  z-index: 0; /* sollte kleiner sein als dein Content */
}
.project.package{ 
color: var(--clr-white);
margin-bottom: 150%;
}

.project.package:hover{
background-image: url(../images/Amazigh-single_symbol2.png);
background-size: 100% 200%;
background-position: center;
}


p.project-extra {
  font-size: 1.2rem;
  margin-top: 1rem;
  font-weight: 700;

}


@media screen and (min-width: 676px) {

  .projects-info p{
    font-size: 2rem;
  }


  .projects-center {
    padding-bottom: 10rem;

  }

  p.project-extra {
    font-size: 1.2rem;
    margin-top: 1rem;
  }
}

@media screen and (min-width: 1170px) {
  .projects-center {
row-gap: 6rem;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-areas:
    "headline3 headline3 headline3 headline3 headline3 headline3"
      "j j k k m m"
      "headline2 headline2 headline2 headline2 headline2 headline2"
      "d d n n e e ";
   column-gap: 1rem;
   grid-auto-rows: minmax(auto, max-content);


  }
  

  }
  .project-4 { 
    grid-area: d;
    background-image: url(../images/surfguiding.jpg);
  background-size: 100% 100%;
  height: 30vh;
  width: 90%;


  }
  .project-5 { 
    grid-area: e;
    background-image: url(../images/airport-pickup.jpg);
    background-size: 140% 100%;
 height: 30vh;
 width: 90%;


}
 /* 7Day Surfer Package */
  .project-10 { grid-area: j;
  background-image: url(../images/7Days-surfpackage-image.jpg);
  background-size: 100% 100%;
  height: 34vh;
  transform: translateY(-95%);
  }
  .project-11 { 
    grid-area: k; 
    background-image: url(../images/10Days-surferpackage-image.jpg);
    background-size: 100% 100%;
  height: 34vh;
  }
  .project-12 {
    grid-area: l;

   }
  .project-13 { 
    background-image: url(../images/freesurfer-package-image.jpg);
    background-size: cover;
  height: 34vh;
  grid-area: m; 
  transform: translateY(-95%);
  
  }

  .project-41{
    background-image: url(../images/snorkeling.jpg);
    background-size: cover;
  height: 30vh;
  grid-area: n; 
  width: 90%;
  }

/*
=============== 
Connect
===============
*/

.connect {
  min-height: 90vh;
  min-width: 100%;
  position: relative;
  z-index: 10;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.connect {
  
  display: grid;
  place-items: center;
align-items: end;
  width: 100%;
  height: 100%;
}

.video-text {
  max-width: 60rem;
  color: var(--clr-white);
  text-transform: capitalize;
  font-size: 1.5rem;
  letter-spacing: var(--spacing);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-align: center;

  

}

.video-text span {
padding: 0.2rem 1rem;
  max-width: 100vw;
  border-radius:var(--radius);
  

}
.video-text {
  position: relative;
  display: inline-block;
  overflow: hidden; /* Versteckt den Text, der außerhalb des Containers liegt */
}

.video-text span {
  display: inline-block;
  position: relative;
  transform: translateX(-100%); /* Verschiebt den Text außerhalb des Sichtfelds nach links */
  animation: slide-in 2s ease forwards; /* Animation, um den Text von links nach rechts zu schieben */
}

@keyframes slide-in {
  100% {
    transform: translateX(0); /* Schiebt den Text auf seine normale Position */
  }
}

@media screen and (min-width: 769px) {
  .skill-center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .video-text.subtitle{
    font-size: 4rem;
  }
  
}
.skills {
  height: 50vh;
  width: 100%;
  background-position: center;
  color: white;
  background-size: cover;
  opacity: 1;

  position: relative;
}



/***** /// ==== KONTAKT ===== /// *****/

.section-title.info {
 

  color:var(--clr-primary-1) ;
 
}
.page-impressum p
{
  color: var(--clr-white);
}

.page-impressum h4 {
  color: wheat;
}



.section-title.media {
  color: white;
}

.fa-info-circle{
  color: white;
}



/****** MEDIA QUERRY MAPS & SOCIAL-MEDIA /// _*_*****/



@media screen and (min-width: 900px) {



  .copyright p {
    text-align: left;
    align-self: left;
  }


}
/* 
=============== Contact =============== */

.section.contact{
  background: var(--clr-primary-3);
  width: 100vw;
  z-index: 1;

}

.contact-center {
  
  width: 90vw;
  display: -webkit-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  justify-self: center;
  margin: 0 auto;
}

.contact-title {
  margin: 0 auto;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
  color: var(--clr-white);
}

.project-text{
  z-index: 20;
}

.grid-container {
  color: white;
  text-align: center;
width: auto;  
display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(1fr, auto);
  align-self: center;
  margin: 1.5rem auto;
  gap: 1.4rem;
  z-index: 100;
}

.grid-item {
  display: flex;
  flex-direction: column;
  justify-items: end;
}

label {
  margin-bottom: 5px;
  font-weight: 700;
}



input, select {
  background: transparent;
  font-size: 1.5rem;
  border: 0.5px solid #ccc;
  width: auto;
  text-align: center;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  cursor: pointer;
}

input{
  color: var(--clr-white);
  border-bottom: 0.5px solid var(--clr-primary-3);
  font-size: 2rem;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */

  color:    var(--clr-white);
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 0.5px solid var(--clr-white);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color:    var(--clr-white);
 opacity:  1;
 border-bottom: 0.5px solid var(--clr-white);
 text-align: center;
 font-weight: 700;
 text-transform: uppercase;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color:    var(--clr-white);
 opacity:  1;
 border-bottom: 0.5px solid var(--clr-white);
 text-align: center;
 font-weight: 700;
 text-transform: uppercase;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color:    var(--clr-white);
 text-align: center;
 font-weight: 700;
 text-transform: uppercase;
 border-bottom: 0.5px solid var(--clr-white);
}
::-ms-input-placeholder { /* Microsoft Edge */
 color:    var(--clr-white);
 text-align: center;
 font-weight: 700;
 text-transform: uppercase;
 border-bottom: 0.5px solid var(--clr-white);
}

::placeholder { /* Most modern browsers support this now. */
 color:    var(--clr-white);
 text-align: center;
 font-weight: 700;
 text-transform: uppercase;
 border-bottom: 0.5px solid var(--clr-white);
}

textarea{
  height: 2.5rem ;
  padding: 10px;
  border: 1px solid #ccc;
  width: 90%;
  align-self: center;
  color:var(--clr-primary-3);
  font-size: 1.2rem;
  background-color: var(--clr-primary-1-linear-gradient);
}


button {
  grid-column: span 4; /* Make the button span all columns */
  padding: 10px;
  border: none;
  background: var(--clr-primary-7);
  color: white;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
background-color: var(--clr-grey-1);


}

.contact-form {
flex-direction: row;
  margin: 0 auto;
  color: var(--clr-primary-3);
  z-index: 200;
}

.form-title{
color: greenyellow ;
margin: 2rem;
}

.daily-routine{
  margin-top: 1rem;
}





@media screen and (min-width: 676px) {
  .mobile-poster{
  display: none;
  }
  
  .desktop-poster{
    display: block;
  }

  .form-control {
    width: 50vw;
    margin: 0.5rem 0.5rem;
    cursor: pointer;
  }
  .contact-form {
    width: 50vw;
  }
  .contact-title {
    align-items: center;
    
    max-width: 35vw;
  }
}

/* Google reviews */

.google-reviews{

  width: 100%;

}
/* section maps */
.maps {
  width: 100vw;
  margin-bottom: -2rem;
  min-height: 60vh;
  border-radius: var(--radius);
  z-index: 0;

}

.projects-info h4{
  color: white;
  font-size: 1.5rem;
  text-decoration: underline;
  margin-top: 2rem;
}

@media screen and (min-width: 992px) {
  .grid-container {
    display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(1fr, auto);
  align-items: start;
}
  .grid-container.b {
    display: grid;
  grid-template-columns: 1fr ;
  grid-template-rows: repeat(1fr, auto);
 /* Space between grid items */
}
  .contact-center {
    display: -webkit-box;
    
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
  .contact-form {
    width: 100%;
    height: auto;
    margin: 0 auto;
    align-self:center;
    -webkit-box-flex: 1;
    flex: 1 1 auto;

  }


  .contact{
    align-self: center;
    justify-self: center;
  }
}

/* 
=============== Footer =============== */

.footer {

  text-align: left;
  z-index: 10;
  position: relative;
}
.footer {
  background: var(--clr-primary-3);
  text-align: center; /* Aligning all text in the center */
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
  display: flex; /* Using flexbox for alignment */
  flex-direction: column; /* Align items vertically */
  align-items: center; /* Align items horizontally */
/* margin-bottom: 1rem; */
}

.footer-links {
  grid-area: c;
  margin-bottom: 1.5rem;
}
.footer-links {
  grid-area: c;
  margin-bottom: 1.5rem;
}

.footer-adress {
  color: var(--clr-white);
  text-transform: capitalize;
  font-size: 1rem;
  letter-spacing: var(--spacing);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  grid-area: a;
}

.footer-icon {
  grid-area: b;
}
.footer-link {
  grid-area: d;
  margin-bottom: 1rem;
}
#adress {
  grid-area: a;
  color: var(--clr-white);
  text-transform: capitalize;
  font-size: 1rem;
  letter-spacing: var(--spacing);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-align: center;
}

.footer-links {
  color: var(--clr-white);
  text-transform: capitalize;
  font-size: 1rem;
  letter-spacing: var(--spacing);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  max-width: 100vw;
}

.footer-links span {
  text-transform: lowercase;
  font-size: 0.8rem;

}

.footer-links:hover {
  color: var(--clr-black);
}

.footer-icon {
  font-size: 2rem;
  color: var(--clr-white);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.footer-icon:hover {
  color: var(--clr-black);
}

.copyright {
  text-transform: capitalize;

  color: var(--clr-white);
  font-size: 0.7rem;

  text-align: center;
}
.section.footer.about {
  background-color: #deadae;
  color: white;
}

.index-about-site {
  height: 1000px;
  width: auto;
}

.back-button {
  position: fixed;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background-color: #fff; /* Adjust to your design */
  color: #333; /* Adjust to your design */
  border: 1px solid #333; /* Adjust to your design */
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  z-index: 1000; /* Ensure it's above other elements */
}

.back-button:hover {
  background-color: #333; /* Adjust to your design */
  color: #fff; /* Adjust to your design */
}

@media screen and (min-width: 700px) {
  .footer {
    padding-bottom: 2rem;
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a b c d";
    text-align: center;
  }


  .footer-adress {
    text-align: left;
  }
  #adress {
    text-align: left;
  }

  /*
=============== 
Single Page
===============
*/
  .main-about {
    justify-items: center;
    align-items: center;
  }

  .index-about-site nav {
    background-color: var(--clr-grey-1);
  }

  .page-info {
    text-align: center;
  }

  .page-info {
    max-width: 700px;
  }

  .page-info a:hover {
    color: var(--clr-black);
  }

  /* ///// ABOUT /// */
  /* ////////////////// */
}

.section-center.page-info p {
  color: white;
}
.page-info {
  text-align: center;
  font-size: 1.5rem;
}
.page-info a {
  text-transform: uppercase;
  color: white;
  background-color: #deadae;
  transition: var(--transition);
}

.project-hero {
  height: 90vh;
  width: auto;
  background: var(--clr-primary-10);
  justify-content: center;

  place-items: center;
}

/* ///// IMPRESSUM /// */
/* ////////////////// */

.page-impressum {
  display: grid;
  grid-template-rows: 1fr;
  text-align: center;
  color: white;
  padding-top: 2.25rem;
  margin-top: 3rem;
 
}


@media screen and (min-width: 900px) {
  .page-impressum {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    /* padding-bottom: 4rem; */
    text-align: left;

    padding-right: 6rem;
    padding-left: 6rem;
    box-shadow: var(--dark-shadow);
    /* margin-bottom: 2rem; */
  
  }
  .page-impressum.about {
    grid-template-columns: 1fr;
  }
}

/* .single-price-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;


} */



/*
=============== 
Featured Tours
===============
*/
.featured-center {
  padding-bottom: 4rem;
}

/* Ensure the tooltip text doesn't affect the hover state of the button itself */
.info-button:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  height: auto;
  
}

/* Info button styling */
.info-button {

  position: relative;
  font-size: 20px;
  color: var(--clr-primary-1);
  cursor: pointer;
  z-index: 0;
  color: white;
  z-index: 0;
}



.tour-info {
  background: var(--clr-primary-1-linear-gradient);
padding: 1.25rem 1.25rem;
color: var(--clr-white);
padding-top: 1rem;
padding-bottom: 1.1rem;
line-height: 1.5rem;
text-align: center;

}


#read-more-btn{
  color: var(--clr-white);
  font-weight: 800;
  text-decoration: underline;
  font-style: bold;
  cursor: pointer;
  padding: 0.5rem 2rem;
  margin-top: 0.6rem;
  font-size: 2rem;
  
}

.tour-info h4 {
  letter-spacing: var(--spacing);
  color: white;
  font-size: 1rem;
  font-family: var(--ff-primary);
}

.room-info{
  color: var(--clr-white);
  position: absolute;
  overflow: hidden;
  margin-top: 5rem;
  margin: 2rem auto;

}

.project  td{
 padding:  0.5rem;

}

.project th td{
  padding: 1rem;
}


.room-info.active {
  position: relative;
  max-height:3000px; /* Adjust this value to fit your content */
  width: 100%;
  text-align:  center;
  align-self: flex-start;

}

table{
  width: 100%;
  border-spacing: 0.3rem;
  margin: 1rem auto;


}


.price-info{
color: var(--clr-white);
  border-width: 1px;
  border-style:outset;
  padding: 0.7rem 1rem;
background-color: var(--clr-primary-3);
border-style:outset;
text-align: center;
cursor: pointer;
font-size: 1.2rem;

}

.bed-info{
  font-size: 1rem;
  border-width: 0.1rem;
  border-style:none;
  box-shadow: var(--light-shadow);
background-color: var(--clr-primary-3);
color: var(--clr-white);
font-weight: 700;
text-align: center;
cursor: pointer;
text-transform: uppercase;
}

.tour{
  margin-bottom: 40rem;

}

.tour-info p {
  margin-bottom: 0.4rem;
}



.bed-info.btn{
margin-top: 3rem;
  padding: 1rem 3rem;
border-radius: 0rem;
  background: var(--clr-white);
  font-weight: 800;
  color: var(--clr-primary-3);
}

.bed-info:hover{
  background: var(--clr-primary-4);
box-shadow: none;
  text-decoration: underline;

}

.subtitle{
box-shadow: var(--light-shadow);
font-weight: 300;
color: white;
}

.price-info:hover{
  background: var(--clr-primary-1);
  color: white;
  transform: scale(0.95);
box-shadow: none;  

}
.tour-footer {

  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 0.5rem;
  padding-right: 1rem;
  color: white;
  z-index: 3000;
;}

.tour-footer:hover {
text-decoration: underline;  
border-radius: 5px;
  cursor: pointer;
}

.tour-footer p {
  line-height: 0;
  margin-bottom: 0;
  text-transform: capitalize;
  color: var(--clr-white);
}

.tour-footer p:hover{
font-weight: 500;
  text-decoration: underline;
  color: var(--clr-green-1);

}

.tour-btn {
  text-align: center;
}

.info-button .tooltip-text td {
  border: 1px solid #ddd;
  padding: 8px;
}
.info-button .tooltip-text th {
  border: 1px solid #ddd;
  padding: 8px;
}
.info-button .tooltip-text th {
  background-color: var(--clr-primary-3);
  text-align: left;
}




@media screen and (min-width: 768px) {
  .featured-center {
    display: -webkit-box;
 display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between; 
  }


  .tooltip-text {
    font-size: 0.9rem;
  }
}


/* === CONTACT FORM ==== */

.contact-form.b {
  transform: translateY(40%);
  position: relative;
  display: none; /* Hide all forms by default */
  width:100%; /* Set full width for the form */
max-height: 3000px;
}

.contact-form.active {
  display: block; /* This class can be toggled to show the form */
  padding-bottom: 2rem;
   max-height: 2000px; /* genug Platz für große Formulare */
position: fixed;
background: var(--clr-primary-3);
border: 5px inset var(--clr-grey-1);
background-size: 100% 100%;
box-shadow: var(--dark-shadow);
text-align: center;
}
.contact-form.active input, select, option{
  text-align: center;
}

.booking-widget select{
  width:100% ;
}

form li{
  padding: 0.3rem;
  color: white;
  text-align: center;
}

.terms-conditions a{
color: greenyellow;
}



/* === Privace Policy ====
=========================== */

.Bildrechte{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.container {
  width: 80%;
  margin: 8rem auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

.sucess-page p {
color:var(--clr-primary-1);
}
.sucess-page{
  margin-top: 3rem;
}

.logo-text{
  color: var(--clr-white);
  font-weight: 800;
 text-transform: none;
 padding-bottom: 0;
 margin-bottom: -0.2rem;
 margin-top: -0.7rem;
 font-size: 1.2rem;
}

/* Container for phone input fields */
.phone-input {
  display: flex;
  align-items: center;
}

/* Style for the country code input */
.phone-input input[type="text"] {
  width: 70px; /* Adjust width as needed */
  margin-right: 5px; /* Space between the fields */
  padding: 8px;
  text-align: center;
}

/* Style for the phone number input */
.phone-input input[type="tel"] {
  flex: 1;
  padding: 8px;
}

.about-title h2 {
 font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--clr-white);
}

option{
  color: var(--clr-primary-3);
}

 .project-costs {
  display: none;
}
.project-price{
  display: none;
}

.room-details{
  cursor: pointer;
  font-weight: 600;
  background: transparent;
  font-size: 1.5rem;
  text-decoration: underline;
  text-transform:uppercase;
  margin-top: 1rem;
}




.booking-widget label {
  display: block;
  font-weight: bold;
  text-align: center;
  color: var(--clr-white);
font-size: 1.2rem;
width: 25vw;
}

.booking-input{
  margin: 3rem 0;
}
.termns .checkbox{
transform: scale(1.5);
margin: 1rem;
}



label{
  text-transform: uppercase;
  letter-spacing: var(--spacing);
}


/* ===
Booking Widget Mobiscroll
=== */

.md-mobile-picker-header {
  font-size: 14px;
}

input.md-mobile-picker-input {
  color: initial;
  width: 100%;
  padding: 10px;
  margin: 6px 0 12px 0;
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.md-mobile-picker-button.mbsc-button {
  font-size: 13px;
  padding: 0 15px;
  line-height: 36px;
  float: right;
  margin: 6px 0;
  width: 100%;
}

.mbsc-col-no-padding {
  padding-left: 0;
}

.md-mobile-picker-box-label.mbsc-textfield-wrapper-box,
.md-mobile-picker-box-label .mbsc-textfield-wrapper-box,
.md-mobile-picker-inline {
  margin: 6px 0 12px 0;
}


.check-field{
  max-width: 50%;
  height: 4rem;
}

.label-80{
  width: 80%;
  height: 4rem;
}

.booking-widget input, .booking-widget select {

  padding: 8px;
  border: none;
  border-radius: 5px;
  align-self: center;
  color: var(--clr-white);
  
}
.booking-widget button {
  background-color: var(--clr-primary-3);
  color: var(--clr-white);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: var(--spacing);
  padding: 2rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  max-width: 21rem;
margin: auto;
min-width: 20rem;
box-shadow: var(--dark-shadow);
text-transform: uppercase;
}
.booking-widget button:hover {
  background-color: #003f5c;
  color: white;
}
.price-display {
  font-size: 1.9rem;
color: var(--clr-grey-7); 
padding:  1rem 4rem;
letter-spacing: 0.2rem;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}


.surfboard-box{
  display: flex;
  flex-direction: row;
background: var(--clr-grey-9);
padding: 1rem;
}
label.surfboard-box{
  width: 40rem;
}
.lunch-box{
  display: flex;
  flex-direction: row;
  background: var(--clr-grey-9);
margin: 0 1rem;
padding: 1rem;
}
.breakfast{
  display: flex;
  flex-direction: row;
}


.name-direct{
margin: 0 auto;
}