@import url('https://fonts.googleapis.com/css2?family=WindSong:wght@400;500&display=swap');
/*
    [Table of Content]
    01. Reset
    02. Global Style

	  01. Index Page Style
        section Index Page
            1.1. Header section
            1.2. Hero section
            1.3. Moments section
            1.4. OurRoom section
            1.5. ShowCase section
            1.6. Services section
            1.8. EasyStay section
            1.9. NewsEvents section
            1.11. Newsletter section
            1.12. Connect section
            1.13. Footer section


    02. About Page Style
         section About Page
            2.1. SubPagesHero section

    03. Gallery Page Style
         section Gallery Page
            3.1. Glimpse section

    04. Pricing Page Style
          section Pricing Page
            4.1. Rates section
            4.2. Facilities section

    05. Rooms Page Style
          section Rooms Page


    08. Blogs Page Style
          section Blogs Page

    09. SinglePost Page Style
          section SinglePost Page

    10. Services Page Style
            section Services Page
            10.1. OurServices section
            10.2. Amenities section

    11. Contact Page Style
            section Contact Page
            11.1. Map section

            */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}


/* HTML5 display-role reset for older browsers */
/* =====  01. Reset  ====== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    font-family: 'Rubik', sans-serif;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

button:focus {
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

select::-ms-expand {
    display: none;
}

label {
    font-weight: normal;
}

iframe {
    width: 100%;
}

/* =====  End of 01. Reset  ====== */
/* ===== 02. Global Style ===== */
h1 {
    font-size: 80px;
    font-weight: 400;
    line-height: 94px;
    font-family: "Playfair Display", serif;
}

h2 {
    font-size: 40px;
    font-weight: 400;
    line-height: 47px;
    font-family: "Playfair Display", serif;
}

h3 {
    font-size: 55px;
    font-weight: 400;
    line-height: 55px;
    font-family: "WindSong", cursive;;
}

h4 {
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    font-family: "Playfair Display", serif;

}

h5 {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    font-family: "Playfair Display", serif;
}

h6 {
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    font-family: "Playfair Display", serif;
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    font-family: "Gilroy", sans-serif;
}

button {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    font-family: "Gilroy", sans-serif;
}

a {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    font-family: "Playfair Display", serif;
    text-decoration: none;
}

/* input area sugguseation color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

span {
    font-family: "Gilroy", sans-serif;
}

.hover1 {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 1.5px solid #FFFFFF;
    color: #ffff;
    z-index: 1;
    padding: 8px 24px;
    transition: all 0.9s ease;
    text-align: center;
    background: transparent;
}

.hover1:hover {
    color: #C5A56F !important;
}

.hover1::before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    transition: all 0.9s ease;
    background-color: #fff;
    z-index: -1;
    top: 0;
    left: 0;
}

.hover1:hover::before {
    width: 0%;
    background-color: #fff;
    right: 0;
}

.hover1::after {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    transition: all 0.6s ease;
    background-color: #fff;
    z-index: -1;
    bottom: 0;
    right: 0;
}

.hover1:hover::after {
    width: 100%;
    background-color: #fff;
    left: 0;
}

.hover2 {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 1px solid #C5A56F;
    color: #C5A56F;
    z-index: 1;
    padding: 10px 35px;
    transition: all 0.9s ease;
    text-align: center;
}

.hover2:hover {
    color: #ffff !important;
}

.hover2::before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    transition: all 0.9s ease;
    background-color: #fff;
    z-index: -1;
    top: 0;
    left: 0;
}

.hover2:hover::before {
    width: 0%;
    background-color: #fff;
    right: 0;
}

.hover2::after {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    transition: all 0.6s ease;
    background-color: #C5A56F;
    z-index: -1;
    bottom: 0;
    right: 0;
}

.hover2:hover::after {
    width: 100%;
    background-color: #C5A56F;
    left: 0;
}

.hover3 {
    color: #C5A56F;
    text-decoration: none;
    position: relative;
    transition: color 0.9s ease-in;
}

.hover3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #C5A56F;
    transition: width .5s ease-in-out;
}

.hover3:hover::after {
    width: 100%;
}

.hover3:hover {
    color: #C5A56F;
}
/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);

}

.successModal h4,
.successModal h2 {
    color: #ffffff !important;
    text-align: center;
}

.modal-content {
    width: 100%;
    padding: 80px;
    border-radius: 10px;
    text-align: center;
    animation: fadeIn 1s ease-in-out;
    background: rgba(138, 27, 97, 0.35);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.modal-backdrop {
    --bs-backdrop-zindex: 9;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.checkmark {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}

.check-icon {
    width: 100%;
    height: 100%;
    stroke-width: 2;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.check-circle {
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    stroke-width: 2;
    stroke: #ffffff;
    fill: none;
    animation: circle-animation 0.6s ease-in-out forwards;
}

.check-path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 2;
    stroke: #ffffff;
    animation: check-animation 0.3s 0.6s ease-in-out forwards;
}

@keyframes circle-animation {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes check-animation {
    to {
        stroke-dashoffset: 0;
    }
}


/* ===== End of 02. Global Style ===== */
/* ========= 1.1. header section ========= */
header {
    position: absolute;
    width: 100%;
    background: transparent;
    z-index: 5;
}

header .navbar {
    padding: 20px 0px;
}

header .nav-logo {
    z-index: 3;
}

header .nav-logo img {
    width: 200px;
}

header .navbar-collapse {
    justify-content: start;
    flex-grow: unset;
}

header .right-sidbar {
    width: 280px;
    position: fixed;
    height: 100vh;
    top: 0;
    left: -355px;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 20px 10px 20px 0px;
    z-index: 99;
    background-color: #3F3D56;
}

header .open-aside {
    direction: rtl;
    display: none;
    z-index: 2;
}

header .open-aside span {
    display: block;
    border: 2px solid #ffffff;
    background: #ffffff;
    margin: 8px 0px;
    border-radius: 50px;
    transition: all 0.3s ease-in;
}

header .open-aside:hover span {
    width: 70px !important;
    border: 2px solid #C5A56F;
    background: #C5A56F;
}

header .open-aside span:nth-child(1) {
    width: 70px;
}

header .open-aside span:nth-child(2) {
    width: 50px;
}

header aside .fa-xmark {
    padding: 8px 13px;
    background-color: transparent;
    border: 1px solid #ffffff !important;
    border-radius: 10px;
    color: #ffffff;
    border: none;
    font-size: 22px;
    transition: all 0.3s ease-in;
}

header aside .fa-xmark:hover {
    background: #C5A56F;
    border: 1px solid #C5A56F !important;
}

header aside .fa-caret-down {
    color: #ffffff;
    font-size: 22px;
}

header aside a {
    color: #ffffff;
}

header aside ul li a::after,
header aside ul li a.active::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width .3s;

}

header aside ul li a:hover::after,
header aside ul li a.active::after {
    width: 100%;
    transition: width .3s;
}


header #slid-drop {
    display: none;
}

header aside li {
    padding: 12px;
}

header #slid-drop li {
    padding: 12px 0px;
}

header .aside-dropdwon {
    display: block !important;
}

header .page-btn {
    padding: 10px 0px;
    color: #ffffff;
    background-color: transparent;
    border: none;
    font-size: 18px;
}

header .page-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width .3s;
}

header .page-btn:hover::after,
header .page-btn.active::after {
    width: 100%;
    transition: width .3s;
}

header .navbar ul li a {
    color: #ffffff;
    font-size: 14px;
    line-height: 22px;
    font-family: "Playfair Display", serif;
    padding: 12px;
}

header .navbar ul li a.active,
header .navbar ul li a:hover {
    color: #ffffff !important;
}

header .navbar ul li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width .3s;
}

header .navbar ul li a:hover::after,
header .navbar ul li a.active::after {
    width: 100%;
    transition: width .3s;
}

header .dropdown ul {
    width: 200px;
}

header .dropdown-menu {
    padding: 0px;
    display: block;
    overflow: hidden;
    transition: all 0.3s ease-in;
    visibility: hidden;
    background-color: #3F3D56;
}

header .navbar .dropdown:hover .dropdown-menu {
    display: block;
}

header .dropdown ul li a {
    color: #ffffff;
}

header .dropdown ul li a.active,
header .dropdown ul li a:hover {
    background-color: #C5A56F !important;
}

header .open-aside {
    padding: 10px 0px;
    background-color: transparent;
    border: none;
}

/* ========= End of 1.1. header section ========= */
/* =========  1.3. Moments section ========= */
.Moments {
    padding: 100px 0px;
    background: #ffffff;
}

.Moments .mt-0 {
    width: 50%;
    padding-bottom: 80px;
    margin: auto;
}

.Moments p {
    color: #3F3D56;
}

.Moments h5 {
    color: #252335;
}

.Moments h2 {
    color: #252335;
    padding-right: 50px;
}

.Moments h3 {
    color: #C5A56F;
}

.Moments h6 {
    padding: 0px 10px 0px 10px;
    color: #C5A56F;
}

.Moments .mt-lg-3 p {
    font-size: 14px;
    line-height: 22px;
}

.Moments .gap-3 hr {
    width: 60px;
    margin: 0;
    opacity: 1;
    color: #C5A56F;
}

.Moments .my-0 figure {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid #3F3D56;
    box-shadow: 0px 5px 15px 0px #3F3D5626;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Moments img[alt="Frame1"] {
    width: 49px;
}

.Moments img[alt="Frame2"] {
    width: 46px;
}

.Moments img[alt="Frame3"] {
    width: 36px;
}

.Moments figure {
    width: 100%;
    height: 100%;
}

.Moments figure img {
    width: 100%;
    height: 100%;
}

/* ========= End of 1.3. Moments section ========= */
/* ========= 1.4. OurRoom section ========= */
.OurRoom {
    background-color: #F2F2F2;
    padding: 100px 0px;
}

.OurRoom h6 {
    padding: 0px 10px;
    color: #C5A56F;
}

.OurRoom h2 {
    color: #252335;
    padding-right: 50px;
}

.OurRoom h5 {
    color: #252335;
    font-family: "Playfair Display", serif;
}

.OurRoom p {
    color: #3F3D56;
}

.OurRoom .flex-column p {
    font-size: 14px;
    line-height: 22px;
}

.OurRoom span {
    color: #3F3D56;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    transition: all;
}

.OurRoom span:hover {
    color: #C5A56F;
}

.OurRoom hr {
    width: 60px;
    margin: 0;
    opacity: 1;
    color: #C5A56F;
}

.OurRoom .pe-0 {
    padding-left: 50px;
}

.OurRoom a {
    font-size: 16px;
    line-height: 18px;
}

.OurRoom figure {
    width: 100%;
    overflow: hidden;
}

.OurRoom figure img {
    width: 100%;
    transition: all 0.3s ease-in;
    object-fit: cover;
}

.OurRoom .flex-column:hover figure img {
    transform: scale(1.1);
}

.OurRoom img[alt="user"] {
    width: 20px;
}

.OurRoom img[alt="bed"] {
    width: 28px;
}

.OurRoom img[alt="bathroom"] {
    width: 25px;
}

.OurRoom.mt-0 {
    background: #ffffff;
}

.OurRoom.mt-0 h2 {
    color: #3B3533;
}

.OurRoom.mt-0 .row {
    row-gap: 50px;
}

/* ========= End of 1.4. OurRoom section ========= */
/* ========= 1.5. ShowCase section ========= */
.ShowCase {
    padding: 100px 0px;
    background-color: #ffffff;
}

.ShowCase .text-center {
    padding-bottom: 50px;
}

.ShowCase .d-flex h6 {
    padding: 0px 10px 0px 10px;
    color: #C5A56F;
}

.ShowCase .d-flex hr {
    width: 60px;
    margin: 0;
    opacity: 1;
    color: #C5A56F;
}

.ShowCase .RoomSlider {
    padding-top: 20px;
}

.ShowCase figure {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ShowCase figure img {
    width: 100%;
    padding: 0px 10px;
    object-fit: cover;
}

.ShowCase .slick-dots li button:before {
    font-size: 0px !important;
    width: 11px !important;
    height: 11px !important;
    background: #C5A56F;
    border: 1px solid #C5A56F;
    border-radius: 10px;
}

.ShowCase .slick-dots li.slick-active button:before {
    width: 14px !important;
    height: 14px !important;
    background: transparent;
    border: 1px solid #C5A56F;
    top: -1px;

}

/* ========= End of 1.5. ShowCase section ========= */
/* ========= 1.8. EasyStay section ========= */

.EasyStay {
    background-color: #F2F2F2;
    padding: 100px 0px;
}

.EasyStay h2 {
    color: #252335;
}

.EasyStay h6 {
    padding: 0px 10px 0px 10px;
    color: #C5A56F;
}

.EasyStay hr {
    width: 60px;
    margin: 0;
    opacity: 1;
    color: #C5A56F;
}

.EasyStay .m-0 {
    gap: 66px;
    padding-top: 60px;
}

.EasyStay h3 {
    width: 70%;
    position: absolute;
    bottom: 8%;
    color: #C5A56F;
    transform: rotate(-20deg);
}

.EasyStay input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.EasyStay .mx-0 {
    border-bottom: 1px solid #3F3D56;

}

.EasyStay input {
    width: 100%;
    color: #3F3D56;
    font-size: 16px;
    appearance: none;
    padding: 10px 10px 10px 0px;
    border: none;
    outline: none;
    background-color: #F2F2F2;
    font-family: "Playfair Display", serif;
}

.EasyStay input::placeholder {
    color: #3F3D56;
}

.EasyStay span i {
    font-size: 18px;
    color: #3F3D56;
    padding-right: 8px;
}

.EasyStay span .fa-key {
    transform: rotate(180deg);
    padding: 0px 0px 0px 10px;
}

/* .EasyStay select {
    width: 100%;
    border: none;
    font-size: 16px;
    padding: 10px 10px 10px 0px;
    margin-right: 20px;
    outline: none;
    color: #3F3D56;
    background-color: #F2F2F2;
    font-family: "Playfair Display", serif;

} */

.EasyStay figure {
    width: 100%;
    height: 100%;
}

.EasyStay figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-left: 90px;
}

/* ========= End of 1.8. EasyStay section ========= */
/* ========= 1.9. NewsEvents section ========= */
.NewsEvents {
    background-color: #ffffff;
    padding: 100px 0px;
}

.NewsEvents h4 {
    color: #252335;
}

.NewsEvents p {
    color: #3F3D56;
    padding-right: 108px;
}

.NewsEvents .text-center hr {
    width: 60px;
    margin: 0;
    opacity: 1;
    color: #C5A56F;
}

.NewsEvents figure {
    width: 100%;
    overflow: hidden;
}

.NewsEvents figure img {
    width: 100%;
    transition: all 0.3s ease-in;
}

.NewsEvents h6 {
    padding: 0px 10px 0px 10px;
    color: #C5A56F;
}

.NewsEvents span {
    color: #C5A56F;
    font-size: 14px;
    line-height: 22px;
}

.NewsEvents .p-0 i {
    font-size: 12px;
    color: #C5A56F;
}

.NewsEvents .gap-md-3 hr {
    flex-grow: 1;
    color: #C5A56F;
    margin: 0;
    opacity: 1;
}

.NewsEvents .flex-column:hover figure img {
    transform: scale(1.1);
}

/* =========  End of 1.9. NewsEvents section ========= */
/* ========= 1.11. Newsletter section ========= */
.Newsletter {
    background-color: #ffffff;
    padding: 100px 0px;
}

.Newsletter h6 {
    padding: 0px 10px 0px 10px;
    color: #C5A56F;
}

.Newsletter h2 {
    color: #252335;
    padding-right: 15px;
}

.Newsletter hr {
    width: 60px;
    margin: 0;
    opacity: 1;
    color: #C5A56F;
}

.Newsletter p {
    color: #3F3D56;
    font-size: 14px;
    line-height: 22px;
}

.Newsletter form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.Newsletter .pb-0 {
    padding-top: 58px;
}

.Newsletter input:focus {
    outline: none;
}

.Newsletter .w-100 input::placeholder {
    color: #3F3D56;
}

.Newsletter .w-100 input {
    width: 100%;
    border: none;
    padding-bottom: 8px;
    font-size: 14px;
    line-height: 22px;
    color: #3F3D56;
}

.Newsletter button {
    border: none;
    color: #C5A56F;
    padding: 0px 0px 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.Newsletter button:hover i {
    transform: rotate(50deg);
}

.Newsletter button i {
    font-size: 16px;
    line-height: 22px;
    transition: all 0.3s ease-in;
}

.Newsletter .w-100 {
    border-bottom: 1px solid #3F3D56;
}

/* ========= End of 1.11. Newsletter section ========= */
/* ========= 1.13. Footer section ========= */
footer {
    background-color: #3F3D56;
    padding-top: 100px;
}

footer ul {
    gap: 25px;
}

footer ul li a {
    color: #ffffff;
    font-family: "Gilroy", sans-serif;
}

footer .px-0 {
    gap: 40px;
}

footer .gap-1 hr {
    width: 100%;
    margin: 0;
    opacity: 1;
    flex-grow: 1;
    color: #ffffff;
}

footer a img {
    max-width: 250px;
    padding: 0px 20px 0px 20px;
}

footer .gap-lg-4 a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    transition: all 0.3s ease-in;
}

footer ul li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width .3s;

}

footer ul li a:hover::after {
    width: 100%;
    transition: width .3s;
}

footer .gap-lg-4 a i {
    font-size: 18px;
    line-height: 24px;
}

footer .m-0 {
    padding: 0px 102px 42px;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}

footer .gap-lg-4 a:hover {
    background: #C5A56F;
}


footer .text-center h5 {
    color: #ffffff;
    margin-bottom: 0px;
}

footer .text-center p {
    color: #ffffff;
    font-family: "Gilroy", sans-serif;
    margin-bottom: 0px;
}

footer .text-center a {
    color: #ffffff;
    font-size: 16px;
    line-height: 22px;
    font-family: "Gilroy", sans-serif;
}

footer .mb-0 {
    background: #252335;
    text-align: center;
    margin-bottom: 0px;
}

footer .mb-0 p {
    color: #ffffff;
}

footer .text-center p i {
    font-size: 12px;
    color: #ffffff;
}

/* ========= End of 1.13. Footer section ========= */
/* ========= 2.1. SubPagesHero section ========= */
.SubPagesHero {
    width: 100%;
    background-image: linear-gradient(rgba(63, 61, 86, 0.7), rgba(63, 61, 86, 0.7)), url("/img/pages/gallery/bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 200px 0px;
    position: relative;
}

.SubPagesHero h1 {
    color: #ffffff;
}

.SubPagesHero a {
    color: #ffffff;
    font-family: "Gilroy", sans-serif;
    font-size: 12px;
    line-height: 12px;
}

.SubPagesHero a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #ffffff;
    transition: width .3s;
}

.SubPagesHero a:hover::after {
    width: 100%;
    transition: width .3s;
}

.SubPagesHero hr {
    color: #ffffff;
    opacity: 1;
    margin: 0px;
    width: 60px;
}

.SubPagesHero i {
    font-size: 10px;
    color: #ffffff;

}

/* ========= End of 2.1. SubPagesHero section ========= */

/* ========= 3.1. Glimpse section ========= */
.Glimpse {
    padding: 100px 0px;
}

.Glimpse h6 {
    color: #C5A56F;
}

.Glimpse hr {
    color: #C5A56F;
    opacity: 1;
    margin: 0px;
    width: 80px;
}

.Glimpse figure {
    width: 100%;
    /* height: 100%;
    overflow: hidden; */
}

.Glimpse figure img {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.Glimpse figure:hover img {
    transform: scale(1.1);
}

/* ========= End of 3.1. Glimpse section ========= */
/* ========= 4.1. Rates section ========= */
.Rates {
    padding: 100px 0px;
    background: #ffffff;
}

.Rates h6 {
    color: #C5A56F;
}

.Rates h2 {
    color: #252335;
}

.Rates p {
    color: #3F3D56;
}

.Rates hr {
    width: 60px;
    color: #C5A56F;
    margin: 0px;
    opacity: 1;
}

.Rates .gap-4 {
    padding-right: 130px;
}

.Rates .gap-4 h2 {
    padding-right: 50px;
}

.Rates .mt-0 .gap-3 {
    padding: 38px 34px;
    border: 1px solid #252335
}

.Rates .mt-0 {
    left: 10px;
    background: #ffffff;
}

.Rates .mt-0 .gap-2 {
    background: #252335;
    padding: 38px 34px;
}

.Rates .mb-0 .gap-2 {
    background: #3F3D56;
    padding: 38px 34px;
}

.Rates .mt-0 h2 {
    color: #ffffff;
}

.Rates .mt-0 p {
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
}

.Rates ul li {
    display: flex;
    gap: 20px;
}

.Rates ul li i {
    font-size: 16px;
    color: #C5A56F;
}

.Rates ul li p {
    font-size: 14px;
    line-height: 22px;
    color: #3F3D56 !important;
}

/* ========= End of 4.1. Rates section ========= */
/* ========= 4.2. Facilities section ========= */
.Facilities {
    background: #252335;
    padding: 35px 0px;
}

.Facilities figure {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    box-shadow: 0px 5px 15px 0px #3F3D5626;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Facilities h5 {
    color: #ffffff;
}

.Facilities p {
    color: #ffffff;
    font-size: 14px;
    line-height: 22px;
}

.Facilities .gap-lg-4 {
    padding: 0px 30px;
}

.Facilities .gap-1 {
    margin-top: 10px;
}

.Facilities img[alt="spa"] {
    width: 50px;
}

.Facilities img[alt="island"] {
    width: 46px;
}

.Facilities img[alt="dine"] {
    width: 37px;
}

.Facilities figure img {
    transition: all 0.3s ease-in;
}

.Facilities .gap-lg-4:hover figure img {
    transform: rotate(10deg);
}

/* ========= End of 4.2. Facilities section ========= */
/* ========= 9.1. SpecialMenu section ========= */
.SpecialMenu {
    padding: 100px 0px;
}

.SpecialMenu h2 {
    color: #3F3D56;
    width: 70%;
}

.SpecialMenu span {
    color: #C5A56F;
    font-size: 14px;
    line-height: 22px;
}

.SpecialMenu p {
    color: #3F3D56;
    padding-right: 60px;
}

.SpecialMenu h4 {
    color: #252335;
}

.SpecialMenu figure {
    width: 100%;
    overflow: hidden;
}

.SpecialMenu figure img {
    width: 100%;
    transition: all 0.3s ease-in;
}

.SpecialMenu figure:hover img {
    transform: scale(1.1);
}

.SpecialMenu .ps-0 {
    gap: 20px;
}

.SpecialMenu hr {
    color: #C5A56F;
    margin: 40px 0px 30px;
    opacity: 1;
    width: 100%;
    flex-grow: 1;
}

.SpecialMenu .pt-3 hr {
    margin: 0;
    width: 50%;
}

.SpecialMenu textarea {
    width: 100%;
    height: 170px;
    color: #3F3D56;
    border: 1px solid #3F3D56;
    font-family: "Josefin Sans", serif;
    padding: 15px 20px;
    resize: none;
}

.SpecialMenu input:focus,
.SpecialMenu textarea:focus {
    outline: none;
}

.SpecialMenu input::placeholder,
.SpecialMenu textarea::placeholder {
    color: #3F3D56;
}

.SpecialMenu .w-100 {
    gap: 30px;
}

.SpecialMenu .pt-0 p {
    font-size: 14px;
    line-height: 22px;
}

.SpecialMenu .w-100 {
    gap: 30px;
}

.SpecialMenu form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.SpecialMenu input {
    width: 50%;
    border: none;
    color: #3F3D56;
    font-family: "Josefin Sans", serif;
    border-bottom: 1px solid #3F3D56;
    padding: 15px 0px;
    resize: none;
}

.SpecialMenu input[type="checkbox"] {
    width: 12px;
    margin-top: 2px;
}

.SpecialMenu button {
    background: transparent;
}

.SpecialMenu .mt-0 form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.SpecialMenu .mt-0 form input {
    width: 100%;
    padding: 0px 0px 10px;
}

.SpecialMenu .mt-0 label {
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    font-family: "Playfair Display", sans-serif;
}

.SpecialMenu .mt-0 button {
    background: transparent;
    border: none;
    color: #3F3D56;
    font-size: 16px;
    padding: 0px;
    position: absolute;
    right: 0px;
}

.SpecialMenu .mt-0 hr {
    width: unset;
    margin: 0px;
}

.SpecialMenu .pb-0 {
    padding-top: 50px;
}

.SpecialMenu h3 {
    width: 100%;
    color: #ffffff;
    position: absolute;
    left: 60%;
    top: 65%;
    transform: translate(-50%) rotate(-10deg);

}

.SpecialMenu .p-0 i {
    color: #C5A56F;
    font-size: 12px;
    position: relative;
    top: -1px;
}



/* ========= End of 9.1. SpecialMenu section ========= */
/* ========= 10.1. OurServices section ========= */
.OurServices {
    background: linear-gradient(to bottom, #3F3D56 90%, #ffffff 10%);
    margin: 200px 0px 0px;
}

.OurServices h2 {
    color: #ffffff;
}

.OurServices hr {
    color: #ffffff;
    width: 60px;
    margin: 0px;
    opacity: 1;
}

.OurServices h6 {
    color: #ffffff;
}

.OurServices p {
    color: #ffffff;
    padding-right: 115px;
}

.OurServices .gap-md-4 {
    padding-top: 80px;
}

.OurServices figure {
    width: 100%;
    padding-top: 30px;
}

.OurServices figure img {
    width: 100%;
}

.OurServices .position-relative {
    top: -100px
}

/* ========= End of 10.1. OurServices section ========= */
/* ========= 10.2. Amenities section ========= */
.Amenities {
    padding: 100px 0px;
    background: #ffffff;
}

.Amenities hr {
    color: #C5A56F;
    width: 60px;
    margin: 0px;
    opacity: 1;
}

.Amenities h6 {
    color: #C5A56F;
}

.Amenities h2 {
    color: #252335;
}

.Amenities h5 {
    color: #252335;
}

.Amenities p {
    color: #3F3D56;
    font-size: 14px;
    line-height: 22px;
}

.Amenities .m-0 {
    height: 100%;
    flex-grow: 1;
    padding: 44px;
    border: 1px solid #000000;
    gap: 16px;
    transition: all 0.3s ease-in;
}

.Amenities .m-0:hover {
    border: 1px solid #C5A56F;
    background: #D4D2E9;
}

.Amenities .m-0:hover figure {
    transform: translateY(-10px);
}

.Amenities figure {
    width: 62px;
    height: 62px;
    border: 1px solid #3F3D56;
    box-shadow: 0px 5px 15px 0px #3F3D5626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in;
}

.Amenities figure img {
    width: 34px;
}

.Amenities .row {
    row-gap: 30px;
    padding-top: 70px;
}

/* ========= End of 10.2. Amenities section ========= */
/* ========= 11.1. Map section ========= */
.Map {
    filter: grayscale(100%) invert(70%) contrast(83%);
    width: 100%;
}

/* ========= End of 11.1. Map section ========= */
/* ========= 11.2. Contact section ========= */
.Contact {
    background: #f9f9f9;
    width: 100%;
    padding: 100px 0px;
}

.Contact h6 {
    padding: 0px 10px 0px 10px;
    color: #C5A56F;
}

.Contact .gap-md-4 hr {
    width: 60px;
    margin: 0;
    opacity: 1;
    color: #C5A56F;
}

.Contact .justify-content-lg-center {
    padding-right: 90px;
}

.Contact hr {
    width: 80%;
    margin: 20px 0px;
    opacity: 1;
    color: #3F3D56;
}

.Contact p {
    color: #3F3D56;
}

.Contact a {
    color: #3F3D56;
    font-size: 16px;
    line-height: 22px;
    font-family: "Playfair Display", serif;
}

.Contact .ms-0 a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--heading-color);
    border-radius: 50%;
    border: 1px solid #3F3D56;
    box-shadow: 0px 5px 15px 0px #3F3D5626;
    transition: all 0.3s ease-in;

}

.Contact .ms-0 a:hover {
    color: #ffffff;
    background-color: #C5A56F;
}

.Contact .pt-lg-3 a:hover {
    color: #C5A56F;
}

.Contact figure {
    width: 100%;
}

.Contact figure img {
    width: 100%;
}

/* ========= End of 11.2. Contact section ========= */
/* ========= 11.3. Staff section ========= */
.Staff {
    padding: 100px 0px;
    background-color: #F2F2F2;
}

.Staff h6 {
    padding: 0px 10px 0px 10px;
    color: #C5A56F;
}

.Staff h5,
.Staff h2 {
    color: #252335;
}

.Staff p {
    color: #3F3D56;
    padding-right: 120px;
}

.Staff hr {
    width: 60px;
    margin: 0;
    opacity: 1;
    color: #C5A56F;
}

.Staff .pt-lg-5 {
    gap: 35px;
}

.Staff .gap-1 a {
    color: #3F3D56;
    font-size: 14px;
    line-height: 22px;
    transition: all 0.3s ease-in;
}

.Staff .gap-3:hover .gap-1 a {
    color: #C5A56F;
}

.Staff .gap-3 img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    transition: all 0.3s ease-in;
}

.Staff .gap-3:hover img {
    transform: rotate(10deg);
}

.Staff form {
    width: 100%;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.Staff input {
    width: 100%;
    font-size: 14px;
    line-height: 22px;
    color: #3F3D56;
    border: 1px solid #3F3D56;
    padding: 10px 25px 10px 12px;
    background: transparent;
}

.Staff textarea {
    width: 100%;
    height: 150px;
    font-size: 14px;
    line-height: 22px;
    color: #3F3D56;
    border: 1px solid #3F3D56;
    padding: 10px 25px 10px 12px;
    background: transparent;
    resize: none;
}

.Staff textarea:focus,
.Staff input:focus {
    outline: none;
}

.Staff textarea::placeholder,
.Staff input::placeholder {
    color: #3F3D56;
}

/* =========  End of 11.3. Staff section ========= */