* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 }

 :root {
    --primary-font: "Roboto", sans-serif;
 }

 body {
    font-family: var(--primary-font);
 }

 #header .logo {
    width: 35%;
 }

 #header {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: white;
 }

 #footer {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    padding: 40px 0;
 }

 #footer ul {
    padding: 0;
 }

 #footer ul li {
    list-style-type: none;
 }

 #footer ul li a {
    color: black;
    text-decoration: none;
 }




 #hero .overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    overflow: hidden;
 }

 #hero .overlay h1 {
    font-size: 2.5rem;
 }

 #item {
    position: absolute;
    top: 95%;
    left: 8%;
    width: 84%;
 }

 #item .card {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
 }

 #item .card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    overflow: hidden;
    transition: all ease 0.5s;
    scale: calc(0.95);
 }

 #item .card img:hover {
    scale: calc(1);
    transition: all ease 0.5s;
 }

 @keyframes zoom {
    from {
       transform: scale(1, 1);
    }

    to {
       transform: scale(1.5, 1.5);
    }
 }

 #hero .fill>img {
    animation: zoom 15s;
 }

 #about img {
    border-radius: 30px;
    width: 100%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
 }

 #about p {
    text-align: justify;
 }

 i {
    color: #FF734D;
 }

 h2,
 h3,
 h4,
 h6 {
    font-size: 1.5rem;
 }

 h5 {
    font-size: 1rem;
 }

 .hidden {
    display: none !important;
 }

 @keyframes swipeUp {
    from {
       transform: translateY(100%);
       opacity: 0;
    }

    to {
       transform: translateY(0);
       opacity: 1;
    }
 }

 @keyframes swipeDown {
    from {
       transform: translateY(0);
       opacity: 1;
    }

    to {
       transform: translateY(100%);
       opacity: 0;
    }
 }

 .visible {
    display: block;
    animation: swipeUp 2s ease-in-out;
 }

 .hiding {
    animation: swipeDown 1s ease-in-out;
    animation-fill-mode: forwards;
 }


 .message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
 }

 .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
 }

 .modal-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #FF734D;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
 }

 @keyframes spin {
    0% {
       transform: rotate(0deg);
    }

    100% {
       transform: rotate(360deg);
    }
 }


 #query {
    z-index: 99999999 !important;
 }

 #query .form {
    z-index: 100;
    top: 40%;
    right: -61px;
    rotate: -90deg
 }

 #query .social {
    z-index: 100;
    top: 50%;
    left: 0
 }

 #query .social div {
    background-color: #26d367;
 }

 #query .social div a {
    color: #fff
 }

 #query .social div i {
    font-size: 17px
 }

 #query .wp {
    top: 45%;
    right: 0px;
    z-index: 99999;
    background-color: #26d367;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    box-shadow: 1px 1px 5px #383636;
 }

 #query .wp a i {
    font-size: 1.8rem;
    color: white !important;
 }

 #query .tel a i {
    font-size: 1.5rem;
 }

 @media (min-width: 0) {
    #hero img {
       width: 100%;
       height: 80vh;
       object-fit: cover;
    }

    #header .active {
       color: #FF734D !important;
       font-weight: 600;
    }

    #header ul li a {
       color: #333;
       font-family: var(--primary-font);
    }

    #hero button {
       background-color: #FF734D;
       color: white;
       padding: 5px 20px;
       margin-top: 10px;
    }

    #about {
       margin-top: 82rem;
    }

    #hotel {
       margin-top: 5rem;
    }

    #hotel span {
       font-size: 0.7rem;
    }

    #hotel .bord {
       border: 1px solid #e4dfdf;
       padding: 1rem;
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
       transition: all ease 0.7s;
    }

    #hotel .bord:hover,
    #facility .card:hover {
       background-color: #FF734D;
       color: white;
       transition: all ease 0.7s;
    }

    #facility {
       margin: 4.5rem 0;
    }

    #facility .card {
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
       padding: 2rem;
    }

    #form label {
       color: #FF734D;
       padding-bottom: 5px;
    }

    #form input {
       padding: 5px 10px;
       border-radius: 15px;
       border: 2px solid #666666;
    }

    #form input[type="submit"] {
       background-color: #FF734D;
       width: 100%;
       padding: 5px 20px;
       color: white;
       border: 2px solid #FF734D;
       border-radius: 15px;
    }

    #about h2,
    #hotel h3,
    #facility h3,
    #contact h3 {
       text-align: center !important;
    }

    #footer {
       margin-top: 3rem;
    }

    #hero h1 {
       font-size: 2rem !important;
       font-weight: 600;
    }

    #available {
       background-color: rgba(0, 0, 0, 0.8);
       color: white;
       z-index: 999;
    }

    #available .space {
       justify-content: space-between;
    }

    #available .submit {
       color: #FF734D;
       border-radius: 20px;
    }

    #available form input[type="date"] {
       padding: 0 10px;
       color: #FF734D;
    }

    #available select {
       padding: 0 10px;
    }

    /* about page start */
    #aboutp img,
    #tariff img,
    #gallery img,
    #contact img {
       width: 100%;
       height: 200px;
       object-fit: cover;
    }

    #aboutp .overlay,
    #tariff .overlay,
    #gallery .overlay,
    #contact .overlay {
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0;
    }

    #aboutp .overlay,
    #tariff .overlay,
    #gallery .overlay,
    #contact .overlay {
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: rgba(0, 0, 0, 0.2);
    }

    #aboutp .overlay h2,
    #tariff .overlay h2,
    #gallery .overlay h2,
    #contact .overlay h2 {
       color: white;
       font-weight: 700;
       font-size: 2rem;
    }

    #aboutp #content {
       margin: 2rem 0;
    }

    #aboutp #content h1 {
       color: #FF734D;
       font-size: 1.5rem;
    }

    #aboutp #content p {
       text-align: justify;
       font-size: 13px;
    }

    #aboutp #content img {
       border-radius: 2rem;
    }

    /* about page end */

    /* tariff page start */
    #tariff #content {
       margin: 3rem 0;
    }

    #tariff #content .card {
       border: 0;
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

    #tariff #content h1 {
       font-size: 1.5rem;
    }

    #tariff #content .card span {
       font-weight: 500;
    }

    #tariff #content .card p {
       color: #666666;
    }

    #tariff #content .card h5 {
       font-weight: 800;
       font-family: var(--primary-font);
    }

    #tariff #content .card ul li {
       font-size: 15px;
    }

    #gallery #photo .img {
       width: 100%;
       height: 200px;
       border-radius: 30px;
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
       padding: 10px;
       transition: all ease 0.5s;
    }

    #gallery #photo .img:hover {
       background-color: #FF734D;
       transition: all ease 0.3s;
    }

    /* tariff page end */
 }

 @media (min-width: 576px) {
    #hotel {
       margin-top: 6rem;
    }

    #facility {
       margin: 6rem 0;
    }

    #hero h1 {
       font-size: 2.5rem !important;
       font-weight: 600;
    }

    #footer {
       margin-top: 5rem;
    }

    #about {
       margin-top: 25rem;
    }

    #about h2,
    #hotel h3,
    #facility h3,
    #contact h3 {
       text-align: left !important;
    }

    #about a {
       color: #FF734D;
       text-decoration: none;
    }

    #header .logo {
       width: 12%;
    }

    /* about page start */
    #aboutp img,
    #tariff img,
    #gallery img,
    #contact img {
       width: 100%;
       height: 300px;
    }

    #aboutp #content {
       margin: 5rem 0;
    }

    /* about page end */

    #tariff #content .card {
       border: 0;
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
       margin: 0 8rem;
       padding: 3rem;
    }

    #hero img {
       width: 100%;
       height: 80vh;
       /* object-fit: cover; */
    }
 }

 @media (min-width: 768px) {}

 @media (min-width: 992px) {}

 @media (min-width: 1200px) {}

 @media (min-width: 1400px) {}