html{
  --spacing: 1rem;
  --spacingsmall: 0.5rem;
  --bigspacing: 6rem;
  scroll-behavior: smooth;
  font-family: 'Inter';
}

::-moz-selection {
  color: var(--whitecolor);
  background: var(--maincolor);
}
::selection {
  color: var(--whitecolor);
  background: var(--maincolor);
}

body{
  color: var(--darkcolor);
}

a:hover{
  color: var(--maincolor);
  transition: 0.2s;
}

section{
  padding-top: 5rem;
  /* margin-bottom: var(--bigspacing); */
}

h2{
  font-size: 30px;
  font-weight: bold;
  margin-bottom: calc(var(--spacing)*2);
}

p{
  margin-bottom: var(--spacing);
  line-height: 1.4;
  max-width: 65ch;
}

hr {
  background: var(--lightcolor);
  opacity: 25%;
  width: 100%;
  border: 0;
  height: 2px;
  margin-top: calc(var(--spacing)*2);
  margin-bottom: calc(var(--spacing)*2);
}

.section-margin{
  padding-left: var(--bigspacing);
  padding-right: var(--bigspacing);
}

header{
  position: sticky;
  z-index: 1000;
  top: 0;
  background-color: var(--whitecolor);
  padding: var(--spacing);
  box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.25);
  -webkit-box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.25);
}

.logo {
  width: 50px;
  margin-left: var(--spacing);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.big-title{
  color: var(--whitecolor);
  font-size: 50px;
  font-weight: bold;
  max-width: 20ch;
}

.subheadline{
  color: var(--whitecolor);
  max-width: 60ch;
}

.border-radius{
  border-radius: 15px;
}
.border-radius:hover{
  box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.55);
  -webkit-box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.55);
  -moz-box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.55);
  transition: 0.2s;
}

.blue-background{
  background: #ffffff;
  background: linear-gradient(270deg,rgba(255, 255, 255, 0) 52%, rgba(0, 0, 50, 1) 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

#aboutus, #howtobook{
background: #ffffff;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 62%, rgba(219, 254, 255) 100%);
}


.box-heading{
  margin-top: var(--bigspacing);
  display: flex;
  justify-content: center;
}

.box-image{
  max-width: 500px;
  border-radius: 15px;
}

.box-textimggrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));;
  gap: var(--spacing);
  align-items: center;
  justify-items: center;
}

.bigpicture{
  height: calc(100vh - var(--bigspacing));
  background-size: cover;
  background-position: -50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bigpicture > *{
  color: var(--whitecolor);
}

.subtext{
  font-size: smaller;
  color: rgb(168, 173, 175);
}

/* -------------------------------  HOMESCREEN ---------------------------------------*/

.homescreen{
  margin-top: -6rem;
}

.front-content{
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

/* -------------------------------  TOGGLE TEXT ---------------------------------------*/

.paragraph-text {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.3s ease;
}

.paragraph-text.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.paragraph-content{
  overflow: hidden;
  min-height: 0;
}

.toggle-text{
  max-width: 100px;
  text-align: left;
  text-decoration: underline;

}

@media (prefers-reduced-motion: reduce) {
  .paragraph-text {
    transition: none;
  }
}



/* -------------------------------  ABOUT US ---------------------------------------*/

.double-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--spacing)*2);
  margin-bottom: var(--bigspacing);
}

.size-img{
  max-width: 500px;
}

/* -------------------------------  HOW TO BOOK ---------------------------------------*/

.howtobook-layout, .howtobook-layout-in{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing);
}

.howtobook-layout-in{
  gap: var(--bigspacing);
}

.howtobook-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bigspacing);
}

.book-card{
  max-width: 20rem;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--spacing)*2);
  padding: calc(var(--spacing)*2);
  border-radius: 15px;
  box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.35);
  -webkit-box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.35);
  -moz-box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.35);
}

.book-card:hover{
  transform: translateY(-2%);
  transition: 0.2s;
  box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.55);
  -webkit-box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.55);
  -moz-box-shadow: 2px 6px 21px -10px rgba(0,0,0,0.55);
}

.book-card > p {
  margin-bottom: 0;
}

.svg-step{
  width: 65px;
}

.big-number{
  position: absolute;
  color: var(--lightcolor);
  font-size: 55px;
  font-weight: bold;
  opacity: 25%;
  top: -21%;
  left: 2%;
}

/* -------------------------------  GALLERY ---------------------------------------*/

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacingsmall);
}

.gallery-img{
  aspect-ratio: 4/3;
  border-radius: 15px;
  object-fit: cover; 
}


/* -------------------------------  FOOTER ---------------------------------------*/

footer{
  background-color: var(--darkcolor);
  color: var(--whitecolor);
  padding: calc(var(--spacing)*2) var(--bigspacing) var(--bigspacing)  var(--bigspacing) ;
  margin-top: var(--bigspacing);
}

.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.footer-menu{
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.logo-footer{
  background-color: white;
  border-radius: 50%;
  padding: var(--spacingsmall) var(--spacing) var(--spacingsmall) var(--spacing);
  align-self: flex-start;
}

.footer-menu > * {
  margin-bottom: 0;
}

.flex-footer{
  display: flex;
  flex-direction: row;
  gap: calc(var(--spacing)*2);
}

.footer-menu > div{
  /* margin-top: var(--spacing); */
  margin-bottom: var(--spacing);
}

.credits{
  opacity: 50%;
}

/* -------------------------------  BUBBLES ---------------------------------------*/

.bubble-container{
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}

nav > .bubble-container{
  margin-top: 0;
  margin-bottom: 0;
}


.bubble-title{
  padding: calc(var(--spacingsmall)*1.5) var(--spacing) calc(var(--spacingsmall)*1.5) var(--spacing);
  border-radius: 35px;
  background-color: var(--maincolor);
  color: var(--whitecolor);
  text-wrap: nowrap;
}
.bubble-container{
  position: relative;
  width: fit-content;
}

.bubble{
  position:absolute;
  background-color: var(--maincolor);
  top: 19px;
  right: -7px;
  content: '';
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.bubble-hover:hover {
  transform: scale(1.1);
  transition: 0.2s;
}

.book-now{
  background-color: var(--maincolor);
}

.book-now:hover{
  color: var(--whitecolor);
}

.title-bubble-color, .dark-bubble{
  background-color: var(--darkcolor);
}
.title-bubble-color{
  padding-left: calc(var(--spacing)*2);
  padding-right: calc(var(--spacing)*2);
}

.dark-bubble{
  top: -15px;
  right: 2px;
  width: 24px;
  height: 24px;
}
.second-bubble{
  top: -1px;
  right: -20px;
  width: 17px;
  height: 17px;
}


@font-face {
  font-family: 'Inter';
  src: url(../fonts/INTER_18PT-REGULAR.TTF);
}

@font-face {
  font-family: 'Inter';
  font-weight: bold;
  src: url(../fonts/INTER_18PT-BOLD.TTF);
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  src: url(../fonts/INTER_18PT-ITALIC.TTF);
}


.mobile{
  display: none;
}


@media screen and (max-width: 1000px) {

.mobile{
  display: block;
}

.howtobook-grid{
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*2);
}

.howtobook-layout-in{
  gap: calc(var(--spacing)*2);
}

.flex-footer{
  flex-direction: column;
}

main {
  --padding: 3rem;
}

.footer-grid{
  display: flex;
  flex-direction: column;
}
}