html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-style: normal;
}



.til {
  font-family: "Tilt Neon", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "XROT" 0,
    "YROT" 0;
}

.pacifico {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.cormo {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.raleway {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.btn-1 {
  padding: 12px 22px;
  background-color: transparent;
  border: 3px solid white;
}

.btn-1 a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.btn-2 {
  padding: 12px 22px;
  background-color: transparent;
  border: 3px solid black;
}

.btn-2 a {
  color: black;
  text-decoration: none;
  font-size: 18px;
}
.res {
  position: absolute;
  top: 40px;
  right: 10px;
}

/* background-img */
#background-img {
  background: url('img/Main\ pic.jpeg') rgba(0, 0, 0, 0.50);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  background-blend-mode: multiply;
}

.background-ds h1 {
  font-size: 55px;
  color: white;
  margin: 20px 0;
  letter-spacing: 10px;
}


/* about-index */
.about-ds {
  padding: 30px;
}

.about-ds  h2 {
  color: #46595F;
  font-size:35px;
  letter-spacing: 10px;
}

.about-ds p {
  color: grey;
  font-size: 20px;
}

/* gallery */
#gallery {
  background: url('img/borsh.jpg') rgba(0, 0, 0, 0.40);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 70vh;
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
}

.gallery-ds h1 {
  color: white;
  letter-spacing: 12px;
  font-size: 50px;
  margin-bottom: 20px;
}

/* facilities */
.facilities-ds h1 {
  color: black;
  font-size: 55px;
}
.faci-img img  {
  transition: 0.7s ease-in-out;
  padding: 20px;
  border-radius: 50%;
}

.faci-img img:hover  {
  transform: translateY(-20px);
  transition: 0.7s ease-in-out;
  cursor: pointer;
  padding: 20px;
  background-color:#ffffff ;
  border-radius: 50%;
}
.faci-img p {
  color: grey;
  font-size: 20px;
  margin-top: 20px;
}

/* rooms */
#rooms {
  background: url('img/rooms/Apartament-with-sea-view/a\ \(12\).jpg') rgba(0, 0, 0, 0.50);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 80vh;
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
}

#rooms-rooms {
  background: url('img/rooms/Apartament-with-sea-view/1.jpeg') rgba(0, 0, 0, 0.50);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  background-blend-mode: multiply;
}
.rooms-dss h1 {
  font-size: 55px;
  color: white;
}

.rooms-ds h1 {
  font-size: 35px;
  color: white;
  margin: 30px 0;
}

.rooms-desc h1 {
  color: white;
  letter-spacing: 12px;
  font-size: 50px;
  margin-bottom: 20px;
}

.rooms-card-1 {
  background: url('img/rooms/Double-room-with-sea-view/h\ \(201\).jpg') rgba(0, 0, 0, 0.50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-blend-mode: multiply;
  height: 100vh;
  display: flex;
  align-items: end;
}


.rooms-card-2 {
  background: url('img/rooms/Triple-room-with-sea-view/a\ \(93\).jpg') rgba(0, 0, 0, 0.50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-blend-mode: multiply;
  height: 100vh;
  display: flex;
  align-items: end;
}

.rooms-card-3 {
  background: url('img/rooms/Apartament-with-sea-view/a\ \(12\).jpg') rgba(0, 0, 0, 0.50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-blend-mode: multiply;
  height: 100vh;
  display: flex;
  align-items: end;
}

.rooms-ds {
  padding: 30px;
}

.rooms-ds h5 {
  color: white;
  font-size: 30px;
}

.rooms-ds p {
  color: white;
  font-size: 23px;
}

/* tstimonials */
.testimonials-ds h1 {
  font-size: 55px;
  color: black;
}
.testimonials-ds {
  text-align: center;
  background-color: #46595F;
  padding: 100px;
  height: 300px;
}

.testimonials-ds h2 {
  color: white;
}

.testimonials-ds p {
  color: white;
}

/* about.html */
#about-about {
  background: url('img/448921370.jpg') rgba(0, 0, 0, 0.50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 80vh;
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
  background-attachment: fixed;
}

/* rooms.html */
#about-rooms {
  background: url('img/519019227.jpg') rgba(0, 0, 0, 0.50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 80vh;
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
  background-attachment: fixed;
}

/* gallery.html */
#about-gallery {
  background: url('img/the-vibe/3.jpeg') rgba(0, 0, 0, 0.50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  background-blend-mode: multiply;
  background-attachment: fixed;
}

/* contact.html */
#about-contact {
  background: url('img/402439826.jpg') rgba(0, 0, 0, 0.50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  background-blend-mode: multiply;
  background-attachment: fixed;
}

.contact-ds h1 {
  color: white;
  font-size: 55px;
}

.contact-form {
  text-align: center;
  line-height: 50px;
}

.contact-form i  {
  color: #E60023;
  font-size: 45px;
}

.contact-form h2 {
  font-size: 35px;
  color: black;
}

.contact-form p {
  font-size: 20px;
  color: #E60023;
}

.contact-form a {
  text-decoration: none;
  color: #E60023;
}


@media (max-width:767px) {

  .btn-1 a {
    font-size: 17px;
  }
  /* home */
  .background-ds h1 {
    font-size: 40px;
  }

  .background-ds h3 {
    font-size: 25px;
  }

  .about-ds h2 {
    font-size: 30px;
  }

  .about-ds p {
    font-size: 17px;
  }

  .rooms-desc h1 {
    font-size: 40px;
  }

  .gallery-ds h1 {
    font-size: 40px;
  }

  .tesimonials-ds h1 {
    font-size: 40px!important;
  }

  .testimonials-ds {
    padding: 40px !important;
  }

  /* gallery */
  .gallery-ds h1 {
    font-size: 40px !important;
  }

  /* contact */
  .contact-ds h1 {
    font-size: 40px !important;
  }

  .contact-form h2 {
    font-size: 35px;
  }

  .contact-form p {
    font-size: 19px;
  }
  /* rooms */
  .rooms-ds h1 {
    font-size: 28px;
  }

  .rooms-ds h5 {
    font-size: 23px;
  }

  .rooms-ds p {
    font-size: 18px;
  }

  .facilities-ds h1 {
    font-size: 37px !important;
  }

  .faci-img p {
    font-size: 17px ;
  }

  .rooms-dsc h1 {
    font-size: 40px !important;
  }

  .rooms-dss h1 {
    font-size: 40px;
  }
}

@media (max-width:800px) {
  .background-ds img {
    height: 200px !important;
  }

  .background-ds h1 {
    font-size: 40px ;
  }

  .background-ds h3 {
    font-size: 22px;
  }

  /* about-index */
  .about-ds h2 {
    font-size: 30px;
  }

  .about-ds p {
    font-size: 17px;
  }

  /* facilities */
  .facilities-ds h1 {
    font-size: 40px !important;
  }

  .faci-img p {
    font-size: 16px;
  }

  /* testimonials */
  .tesimonials-ds h1 {
    font-size: 40px !important;
  }

  .testimonials-ds h2 {
    font-size: 30px;
  }

  .testimonials-ds p {
    font-size: 18px;
  }

  /* rooms.html */
  .rooms-dss img {
    height: 200px !important;
  }

  .rooms-dss h1 {
    font-size: 40px;
  }

  .rooms-ds h1 {
    font-size: 27px;
  } 

  .rooms-ds h5 {
    font-size: 23px;
  }

  .rooms-ds p {
    font-size: 17px;
  }

  /* contact.html */
  .contact-ds img {
    height: 200px !important;
  }

  .contact-ds h1 {
    font-size: 40px;
  }

  .contact-dss h1 {
    font-size: 40px !important;
  }

  .contact-form h2 {
    font-size: 27px;
  }

  .contact-dss p {
    font-size: 15px;
  }
}

@media (max-width:900px) {
  .background-ds img {
    height: 200px !important;
  }

  .background-ds h1 {
    font-size: 40px ;
  }

  .background-ds h3 {
    font-size: 22px;
  }

  /* about-index */
  .about-ds h2 {
    font-size: 30px;
  }

  .about-ds p {
    font-size: 17px;
  }

  /* facilities */
  .facilities-ds h1 {
    font-size: 40px !important;
  }

  .faci-img p {
    font-size: 16px;
  }

  /* testimonials */
  .tesimonials-ds h1 {
    font-size: 40px !important;
  }

  .testimonials-ds h2 {
    font-size: 30px;
  }

  .testimonials-ds p {
    font-size: 18px;
  }

  /* rooms.html */
  .rooms-dss img {
    height: 200px !important;
  }

  .rooms-dss h1 {
    font-size: 40px;
  }

  .rooms-ds h1 {
    font-size: 27px;
  } 

  .rooms-ds h5 {
    font-size: 23px;
  }

  .rooms-ds p {
    font-size: 17px;
  }

  /* contact.html */
  .contact-ds img {
    height: 200px !important;
  }

  .contact-ds h1 {
    font-size: 40px;
  }

  .contact-dss h1 {
    font-size: 40px !important;
  }

  .contact-form h2 {
    font-size: 27px;
  }

  .contact-dss p {
    font-size: 15px;
  }
}

@media (max-width:1100px) {
  .background-ds img {
    height: 200px !important;
  }

  .background-ds h1 {
    font-size: 40px ;
  }

  .background-ds h3 {
    font-size: 22px;
  }

  /* about-index */
  .about-ds h2 {
    font-size: 40px;
  }

  .about-ds p {
    font-size: 20px;
  }

  /* facilities */
  .facilities-ds h1 {
    font-size: 40px !important;
  }

  .faci-img p {
    font-size: 18px;
  }

  /* testimonials */
  .tesimonials-ds h1 {
    font-size: 40px !important;
  }

  .testimonials-ds h2 {
    font-size: 30px;
  }

  .testimonials-ds p {
    font-size: 18px;
  }

  /* rooms.html */
  .rooms-dss img {
    height: 200px !important;
  }

  .rooms-dss h1 {
    font-size: 40px;
  }

  .rooms-ds h1 {
    font-size: 27px;
  } 

  .rooms-ds h5 {
    font-size: 23px;
  }

  .rooms-ds p {
    font-size: 17px;
  }

  /* contact.html */
  .contact-ds img {
    height: 200px !important;
  }

  .contact-ds h1 {
    font-size: 40px;
  }

  .contact-dss h1 {
    font-size: 40px !important;
  }

  .contact-form h2 {
    font-size: 27px;
  }

  .contact-dss p {
    font-size: 15px;
  }
}





/* annimation */
.fadeinleft {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease-out;
  }
  
  .fadeinright {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease-out;
  }
  
  .fadeindown {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
  }
  
  .fadeinup {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1.2s ease-out;
  }
  
  .fade-in {
    opacity: 0;
    transition: all 1.3s ease-in;
  }
  
  .active-left,
  .active,
  .active-right,
  .active-down,
  .active-up {
    opacity: 1;
    transform: translateX(0);
    transform: translateY(0);
  }
  
  .fadein {
    opacity: 0;
  }


@duration: 0.8s;

.todo-list {
  background: #FFF; 
  font-size: 20px;
  max-width: 15em;
  margin: auto;
  padding: 0.5em 1em;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

.todo {
  position: relative;
  padding: 1em 1em 1em 1em;
  margin: 0 auto;
  cursor: pointer; 
  border-bottom: solid 1px #ddd;
  &:last-child { border-bottom: none; }
}

.todo__state {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.todo__text {
  color: saturate(#1B4A4E,15%);
  transition: all @duration/2 linear @duration/2;
  margin-left:20px;
}

.todo__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
  
  fill: none;
  stroke: #27FDC7;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}


.todo__line,
.todo__box,
.todo__check {
  transition: stroke-dashoffset @duration cubic-bezier(.9,.0,.5,1);
}


.todo__circle {
  stroke: #27FDC7;
  stroke-dasharray: 1 6;
  stroke-width: 0;
  
  transform-origin: 13.5px 12.5px;
  transform: scale(0.4) rotate(0deg);
  animation: none @duration linear; cubic-bezier(.08,.56,.04,.98);
  
  @keyframes explode {
    0% { stroke-width: 0; transform: scale(0.5) rotate(0deg); }
    30% { 
      stroke-width: 3;
      stroke-opacity: 1;
      transform: scale(0.8) rotate(40deg);
      animation-timing-function: cubic-bezier(.89,.01,.95,.51);
    }
    100% { 
      stroke-width: 0;
      stroke-opacity: 0;
      transform: scale(1.1) rotate(60deg);
      animation-timing-function: cubic-bezier(.08,.56,.04,.98);
    }
  }
}

.todo__box { 
  stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0;
  transition-delay: @duration * 0.2; 
}
.todo__check {
  stroke: #27FDC7;
  stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995;
  transition-duration: @duration * 0.4; 
}
.todo__line {
  stroke-dasharray: 168, 1684; 
  stroke-dashoffset: 168;
}
.todo__circle { 
  animation-delay: @duration * 0.7; 
  animation-duration: @duration * 0.7; 
}

.todo__state:checked {
  
  ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; }
  
  ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; }
  ~ .todo__icon .todo__line { stroke-dashoffset: -8; }
  ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: @duration * 0.6; }
  ~ .todo__icon .todo__circle { animation-name: explode; }
  
}


/* 
.container-loader {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.left {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #1096B1;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #1096B1;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.left {
  left: 0;
  animation-name: slideFromLeft;
}

.right {
  right: 0;
  animation-name: slideFromRight;
}

.content {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

@keyframes slideFromLeft {
  0% {
      transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
}
  100% {
      transform: translateX(0);
      opacity: 0;
  }
}

@keyframes slideFromRight {
  0% {
      transform: translateX(100%);
  }
  50% {
    transform: translateX(0);
}
  100% {
      transform: translateX(0);
      opacity: 0;
  }
} */