/* <--------------------------------------------------------- Fonts ---------------------------------------------------------> */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
/* font-family: 'Montserrat', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
/* font-family: 'Quicksand', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
/* font-family: 'Quicksand', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap');
/* font-family: 'Montserrat Alternates', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
/* font-family: 'Poiret One', cursive; */
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap');
/* font-family: 'Bowlby One SC', cursive; */
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
/* font-family: 'Kaushan Script', cursive; */
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
/* font-family: 'Major Mono Display', monospace; */


/* <--------------------------------------------------------- Media Queries ---------------------------------------------------------> */

/* Xlarge screens and above*/
@media (min-width: 1200.01px) {
     .booking-form .form-control {
          font-size: 17px !important;
     }
}

/* large screens only*/
@media only screen and (min-width: 991px) and (max-width: 1200px) {
     .booking-form .form-control {
          font-size: 15px !important;
     }
}

/* Miduem screens only*/
@media only screen and (min-width: 767.1px) and (max-width: 990.9px) {
     .booking-form .form-control {
          font-size: 13px !important;
     }
}

/* medium screens and above*/
@media (min-width: 991.11px) {

     .covid-19 {
          width: 50%;
          align-items: center;
     }

     @keyframes covid19 {
          0% {
               left: -50%;
          }

          100% {
               left: 50%;
          }
     }

     .covid-19 svg {
          width: 30px;
          height: 30px;
     }

     .follow {
          max-width: 57px;
     }

     .testimonials {
          padding-top: 130px !important;
     }

     .section {
          height: 125vh;
     }

     .carousel-item .wrap {
          top: 525px;
     }

}

/* medium and smaller screens*/
@media (max-width: 991.1px) {

     .carousel-item img {
          border-radius: 0 !important;
     }

     .booking-form .form-control {
          font-size: 11px !important;
          font-weight: bolder;
     }


     .section {
          height: 125vh;
     }

}


/* small and xSmall screens */
@media (max-width: 767px) {

     .carousel-item img {
          border-radius: 0 !important;
          max-height: 400px;
     }

     .services-title h1 {
          font-size: 40px !important;
     }

     .mySlides {
          min-height: 410px !important;
     }

     span#statusMsg {
          top: 135px !important;
          left: 6px !important;
          font-size: 12px;
     }

     .booking-form .form-control {
          font-size: 12px !important;
          padding: 0 5px !important;
     }
     .reservation {
          padding: 222px 0;
     }

     .section {
          height: 168vh;
     }

     .carousel-item .wrap {
          top: 300px;
     }

     .booking-form{
          background-image: none !important;
          background-color: #009688;
     }
}


/* custom reolutions */
@media (max-width: 430px) {
     .title {
          font-size: 40px !important;
     }

}

@media (max-width: 355px) {
     .title {
          font-size: 30px !important;
     }

     .program p {
          font-size: 13px !important;
     }

}

body {
     /* background-color: #A0522D; */
     background-color: sandybrown;
     font-family: 'Raleway', sans-serif;
     overflow-x: hidden !important;
}

.navbar {
     position: fixed !important;
     top: 0;
     z-index: 1000;
     width: 100%;
     background-color: white;
     font-family: 'Montserrat', sans-serif;
     box-shadow: inset 0 -47px 8px #e9e5e5;
}

.navbar a {
     cursor: pointer;
}

.navbar img {
     width: 152px;
}


.navbar-fixed-top.scrolled {
     background-color: #fae0b5 !important;
     transition: background-color 200ms linear !important;
     box-shadow: 0 7px 3px -2px rgba(0, 0, 0, .2);
     padding: 0px 20px;
}

.carousel img {
     border-radius: 0 0 350px 350px;
     box-shadow: 0px 0px 7px black;
}

.booking {
     background-color: #ffffff;
     border-radius: 25px;
     margin-top: -50px;
     z-index: 2;
     box-shadow: 0px 0px 13px gray;
}

.booking .form-control {
     border-radius: 50px;
     background-color: #e7e7e9;
}

.booking button {
     width: 100%;
     border-radius: 10px;
     background-color: papayawhip;
     border: unset !important;
     font-weight: 600;
     font-family: 'Montserrat', sans-serif;
}

.booking button:hover {
     background-color: #363131;
     color: #fff;
     transition: ease-in all 0.2s;
     border-radius: 15px
}

.covid-19 {
     background-color: #cf3c3c;
     position: absolute;
     top: 115px;
     animation: covid19 7s linear infinite;
     cursor: pointer;
     color: white !important;
     z-index: 2;
     font-family: 'Quicksand', sans-serif;
}

.covid-19:hover {
     animation: none;
     width: 100%;
}

.covid-19 a {
     color: white;
     text-decoration: underline !important;
}

.covid-19 a:hover {
     color: black;
}

.covid-sm button#main {
     background-color: #cf3c3c;
     border: unset;
     border-radius: 15px 15px 0 0;
     box-shadow: 0 0 6px black;
     transform: rotate(-90deg);
     transform-origin: right, top;
     -ms-transform: rotate(-90deg);
     -ms-transform-origin: right, top;
     -webkit-transform: rotate(-90deg);
     -webkit-transform-origin: right, top;
     position: absolute;
     right: -13px;
     top: 190px;
     z-index: 2;
}

.covid-sm button svg {
     margin: 0;
     width: 25px;
     height: 25px;
}

.covid-sm button:after .covid-sm button:before .covid-sm button:focus {
     border: unset !important;
     box-shadow: unset !important;
}

.offcanvas ul {
     font-weight: 600;
}

.services-title {
     font-family: 'Poiret One', cursive;
     margin-top: 25px;
     text-align: center;
     /* box-shadow: 0 0 10px white; */
     border-radius: 20px;
}

.services-title h1 {
     font-size: 70px;
     color: #ffffffbf;
}

.text_norlam {
     font-weight: normal;
}

.title {
     font-size: 47px;
     color: #000000fc;
     line-height: 60px;
     font-weight: bold;
     font-family: 'Raleway', sans-serif;
}

.program {
     border-radius: 15px;
}

.program-left {
     box-shadow: 5px 10px 18px rgb(216, 206, 206);
     background-color: blanchedalmond;
}

.program-right {
     background-color: rgb(255, 255, 255);
     text-align: right;
     box-shadow: 5px 10px 18px rgb(216, 206, 206);
}


.program p {
     font-size: 17px;
     line-height: 36px;
     font-weight: 500;
     margin-top: 23px;
     color: #504f4f;
}

.program a {
     text-decoration: none;
}

.program img {
     border: 5px solid white;
     box-shadow: 0 0 4px grey;
     border-radius: 20px;
     max-height: 400px;
}

.read-more {
     font-size: 17px;
     background-color: #000;
     color: #fff;
     padding: 13px 0px;
     width: 100% !important;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     border-radius: 10px;
     cursor: pointer;
}

.read-more:hover {
     background: #964B00;
     color: #fff;
     transition: ease-in all 0.5s;
     border-radius: 25px;
}

.card-price {
     background-color: #f6f6f6;
     box-shadow: 0 0 2px grey;
}

.modals-img img {
     width: 100%;
     box-shadow: 0 0 13px grey;
     border-radius: 5px;
}

.follow {
     background-color: rgb(255, 255, 255);
     position: fixed;
     left: 0;
     top: 40%;
     z-index: 1250;
     border-radius: 0 50px 50px 0;
     box-shadow: 0 0 20px #5d574e;
}

.follow-sm {
     bottom: 0 !important;
     top: unset !important;
     left: unset !important;
     border-radius: 30px 30px 0 0 !important;
     padding-top: 12px;
     padding-bottom: 5px;
}

.follow ul {
     list-style: none;
}

.follow li {
     margin-bottom: 5px;
}

.follow a {
     text-decoration: none;
}


.follow img {
     width: 25px;
     height: 25px;
}

.follow img:hover {
     width: 30px;
     height: 30px;
     /* border-bottom: 2px solid rgb(177, 132, 132) ; */
     transition: 350ms ease-out;
}

.review-section {
     background-color: rgb(0, 0, 0);
     /* box-shadow: 0 0 10px wheat; */
     border: none !important;
}

.review-form {
     background-color: #222222;
     box-shadow: 2px 2px 4px white;
}

.review-form label {
     color: white;
}

.review-title {
     color: white;
     font-size: 40px;
     box-shadow: -15px 3px 2px wheat;
}

.text-left {
     text-align: left;
}

.quotes {
     display: flex;
     padding: 5rem 2rem;
     align-items: center;
     min-height: 100vh;
}

.quotes-slide {
     color: white;
     padding: 3rem;
     background-color: rgb(39, 36, 36);
     cursor: pointer;
     box-shadow: 0px 0px 0px 1px #d5d5d5;
     line-height: 1.75;
     font-family: 'Roboto', sans-serif;
     transition: all .5s ease;
     outline: none;
}

.testo-title {
     color: #daffdd;
     margin-bottom: 20px;
     font-size: 27px;
}

.blockquote {
     margin: 0;
}

cite {
     font-style: normal;
     font-family: 'Roboto', sans-serif;
     font-size: .9rem;
}


cite:before {
     content: '\2014 \0020';
}


.icon {
     width: 25px;
     height: 25px;
     fill: #1a73e8;
}


q {
     color: gray;
     font-style: italic;
}

.slideshow-container {
     position: relative;
}

.testimonials {
     background-color: #ffebda;
     align-items: center;
}

.testimonials h4 {
     /* box-shadow: 0px 13px 9px white; */
     font-size: 28px;
     /* font-family: 'Bowlby One SC', cursive; */
}


/* Slides */
.mySlides {
     display: none;
     text-align: center;
     background-color: #222222;
     min-height: 350px;
     width: 100% !important;
     border-radius: 25px;
     box-shadow: 1px 1px 10px rgb(32, 31, 31);
     position: relative;
     padding: 3.5rem 3rem;
}

.mySlides a {
     color: #ffffff;
     font-size: medium;
}

.align-date {
     position: absolute !important;
     top: 5px;
     right: 25px;
     z-index: 100;
     color: #ffffff;
     font-size: 18px;
}

.align-email {
     position: absolute;
     bottom: 8px;
}

.align-name {
     position: absolute;
     bottom: 27px;

}

/* Next & previous buttons */
.prev,
.next {
     cursor: pointer;
     width: auto;
     padding: 16px;
     color: #888;
     font-weight: bold;
     font-size: 20px;
     /* border-radius: 0 3px 3px 0; */
     user-select: none;
}

.prev {
     border-radius: 13px 0 0 13px;
}

.next {
     border-radius: 0 13px 13px 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
     background-color: rgba(0, 0, 0, 0.8);
     color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
     text-align: center;
     padding: 20px;
     background: #ddd;
}

/* The dots/bullets/indicators */
.dot {
     cursor: pointer;
     height: 15px;
     width: 15px;
     margin: 0 2px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
     transition: background-color 0.6s ease;
}

/* Add an italic font style to all quotes */
q {
     font-style: italic;
}

/* Add a blue color to the author */
.author {
     color: cornflowerblue;
}

span#reviewValue {
     color: #333c33;
     font-weight: bold;
}

span#emoji {
     font-size: 22px;
}

span#starsDisplay {
     position: absolute;
     top: 5px;
     left: 25px;
     z-index: 100;
}

.input-group-text img {
     width: 50px;
     height: 50px;
}

.Rev input[type="submit"] {
     padding: 10px 30px;
     background: #e6ffbf;
     border-radius: 5px;
     border: none;
     box-shadow: 0 0 4px white;
}

.Rev input[type="submit"]:hover {
     background-color: #a0bd73;
     transition: 500ms ease-in-out;
}

.foot-feet {
     background-color: #fae0b5;
}

.foot-feet a {
     color: #5d574e !important;
     text-decoration: underline !important;
     font-family: 'Major Mono Display', monospace;
}

.foot-feet a:hover {
     color: #ffffff !important;
}

strong#developer {
     font-family: 'Kaushan Script', cursive;
     font-size: 25px;
}

span#statusMsg {
     background-color: #e7e7e9;
     border-radius: 10px;
     position: fixed;
     top: 175px;
     left: 15px;
     animation: msg 90ms normal;
     z-index: 2500;
}

@keyframes msg {
     0% {
          left: -100px
     }

     100% {
          left: 0;
     }
}

span#statusMsg svg {
     position: absolute;
     top: 5px;
     right: 8px;
     color: black;
     cursor: pointer;
     z-index: 30000;
}

span#statusMsg svg:hover {
     color: #696969;
}

.section {
     position: relative;
}

.section .section-center {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%)
}

#booking {
     font-family: 'Raleway', sans-serif
}

.booking-form {
     position: relative;
     /* max-width: 950px; */
     width: 100%;
     margin: auto;
     padding: 40px;
     overflow: hidden;
     background-image: url('../images/modals/modal7-2.jpg');
     background-size: cover;
     border-radius: 5px;
     z-index: 20
}

.booking-form:before {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     background: rgba(0, 0, 0, 0.7);
     z-index: -1
}

.booking-form .form-header {
     text-align: center;
     position: relative;
     margin-bottom: 30px
}

.booking-form .form-header h1 {
     font-weight: 700;
     text-transform: capitalize;
     font-size: 42px;
     margin: 0px;
     color: #fff
}

.booking-form .form-group {
     position: relative;
     margin-bottom: 30px
}

.booking-form .form-control {
     background-color: rgba(255, 255, 255, 0.2);
     height: 60px;
     padding: 0px 25px;
     border-radius: 40px;
     color: #fff;
     -webkit-box-shadow: 0px 0px 0px 2px transparent;
     box-shadow: 0px 0px 0px 2px transparent;
     -webkit-transition: 0.2s;
     transition: 0.2s;
}

.booking-form .form-control:-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.5)
}

.booking-form .form-control:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.5)
}


.booking-form .form-control::placeholder{
     color: #9c9899 !important;
}

.booking-form .form-control:focus {
     -webkit-box-shadow: 0px 0px 0px 2px #ff8846;
     box-shadow: 0px 0px 0px 2px #ff8846
}

.booking-form input[type="date"].form-control {
     padding-top: 16px
}

.booking-form input[type="date"].form-control:invalid {
     color: rgba(255, 255, 255, 0.5)
}

.booking-form input[type="date"].form-control+.form-label {
     opacity: 1;
     top: 10px
}

.booking-form select.form-control {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}

.booking-form select.form-control:invalid {
     color: rgba(255, 255, 255, 0.5)
}

.booking-form select.form-control+.select-arrow {
     position: absolute;
     right: 15px;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     width: 32px;
     line-height: 32px;
     height: 32px;
     text-align: center;
     pointer-events: none;
     color: rgba(255, 255, 255, 0.5);
     font-size: 14px
}

.booking-form select.form-control+.select-arrow:after {
     content: '\279C';
     display: block;
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg)
}

.booking-form select.form-control option {
     color: #000;
}

.booking-form .form-label {
     position: absolute;
     top: -10px;
     left: 25px;
     opacity: 0;
     color: #ff8846;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1.3px;
     height: 15px;
     line-height: 15px;
     -webkit-transition: 0.2s all;
     transition: 0.2s all
}

.booking-form .form-group.input-not-empty .form-control {
     padding-top: 16px
}

.booking-form .form-group.input-not-empty .form-label {
     opacity: 1;
     top: 10px
}

.booking-form .submit-btn {
     color: #fff;
     background-color: #e35e0a;
     font-weight: 700;
     height: 60px;
     padding: 10px 30px;
     width: 100%;
     border-radius: 40px;
     border: none;
     text-transform: uppercase;
     font-size: 16px;
     letter-spacing: 1.3px;
     -webkit-transition: 0.2s all;
     transition: 0.2s all
}

.booking-form .submit-btn:hover,
.booking-form .submit-btn:focus {
     opacity: 0.9
}

.reservation {
     background-color: #ffebda;
}

.form-group label {
     color: white !important;
}

.button-book-head {
     margin-top: -25px;
     width: 100%;
}

.carousel-item .wrap {
     position: absolute;
}

.carousel-item .wrap a {
     font-size: 1.5rem;
     padding: 1rem 3rem;
     color: #f4f4f4;
     text-transform: uppercase;
}

.carousel-item .wrap .btn {
     text-decoration: none;
     border: 1px solid rgb(255 255 255);
     position: relative;
     overflow: hidden;
}

.carousel-item .wrap .btn:hover {
     box-shadow: 1px 1px 25px 10px rgba(0, 0, 0, 0.4);
}

.carousel-item .wrap .btn:before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(120deg,
               transparent,
               rgb(255 255 255),
               transparent);
     transition: all 650ms;
}

.carousel-item .wrap .btn:hover:before {
     left: 100%;
}