:root {
    --clr-white-100: #ffffff;

    --clr-grey-100: #d9d9d9;
    --clr-grey-200: #cbcecc;
    --clr-grey-300: #615757;

    --clr-yellow-100: #ffcc00;

    --clr-green-100: #a4e7a4;
    --clr-green-200: #003400;

    --clr-brown-100: #bea383;
    --clr-brown-150: #c6ab8b;
    --clr-brown-200: #917e67;

    --bg-clr-brown: #221204;
    --bg-clr-brown-100: #bea383;
    --bg-clr-grey-100: #d9d9d9;
    --bg-clr-grey-150: #cdc5c5;
    --bg-clr-grey-200: #d1cfcf;
    --bg-clr-yellow-200: #f1c24a;
    --bg-clr-green: #4dbc65;
    --bg--clr-black-100: #1e1e1e;

    --btn-color-primary: #a53605;
    --btn-color-secondary: #ef672b;

    --fw-light: 300;
    --fw-medium: 500;
    --fw-bold: 700;

    --fs-vsm: 0.5rem; /*8px*/
    --fs-xxsm: 0.625rem; /*10px*/
    --fs-xsm: 0.75rem; /*12px*/
    --fs-sm: 0.875rem; /*14px*/
    --fs-xmedium: 0.9375rem; /*15px*/
    --fs-regular: 1rem; /*16px*/
    --fs-medium: 1.25rem; /*20px*/
    --fs-semi-large: 1.5rem; /*24px*/
    --fs-large: 2rem; /*32px*/
    --fs-xlarge: 3rem; /*48px*/

    --padding-inline-sm: 0.75em;
    --padding-top-btm: 1.75em; /*28px*/
    --margin-sm: 0.625em; /*10px*/
    --margin-xsm: 0.3125em; /*5px*/

    /* typography scales */
    --step-7: clamp(1.5rem, calc(0.67rem + 4.13vw), 3.88rem);
    --step-4: clamp(1rem, calc(0.83rem + 0.87vw), 1.5rem);
    --step-5: clamp(1.25rem, calc(0.99rem + 1.3vw), 2rem);
    --step-2: clamp(0.88rem, calc(0.83rem + 0.22vw), 1rem);
    --step-3: clamp(1rem, calc(0.91rem + 0.43vw), 1.25rem);
    --step-1: clamp(0.75rem, calc(0.66rem + 0.43vw), 1rem);
    --step-6: clamp(1.5rem, calc(1.33rem + 0.87vw), 2rem);

    --step-0-service-icons: clamp(2rem, calc(1.52rem + 2.39vw), 3.38rem);
    --step-0-social-icons: clamp(2rem, calc(1.65rem + 1.74vw), 3rem);
    --step-0-overlay-close-icon: clamp(2rem, calc(0.99rem + 1.3vw), 3.5rem);
}

/************Reset styles************* */
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box ;
}

/* Remove default margin */
* {
    margin: 0 ;
    padding: 0 ;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
    list-style: none ;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth ;
}

/* Set core body defaults */
html,
body {
    height: 100% ;
    font-family: "Open Sans", sans-serif ;
    text-rendering: optimizeSpeed ;
    line-height: 1.4 ;
}

a {
    text-decoration: none ;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100% ;
    display: block ;
}

button {
    cursor: pointer ;
}

/***********end of reset styles*****************/

/* ****************Start of utility classes***************************** */

/* font colors */
.text-white {
    color: var(--clr-white-100) ;
}
.text-grey-100 {
    color: var(--clr-grey-100) ;
}
.text-grey-200 {
    color: var(--clr-grey-200) ;
}
.text-grey-300 {
    color: var(--clr-grey-100) ;
}
.text-yellow {
    color: var(--clr-yellow-100) ;
}
.text-green-100 {
    color: var(--clr-green-100) ;
}
.text-green-200 {
    color: var(--clr-green-200) ;
}
.text-brown-100 {
    color: var(--clr-brown-100) ;
}
.text-brown-150 {
    color: var(--clr-brown-150) ;
}
.text-brown-200 {
    color: var(--clr-brown-200) ;
}

/* background colors */
.bg-white {
    background-color: var(--clr-white-100) ;
}
.bg-brown {
    background-color: var(--bg-clr-brown) ;
}
.bg-brown-100 {
    background-color: #bea383 ;
}
.bg-grey-100 {
    background-color: var(--bg-clr-grey-100) ;
}
.bg-grey-150 {
    background-color: var(--bg-clr-grey-150) ;
}
.bg-grey-200 {
    background-color: var(--bg-clr-grey-200) ;
}
.bg-yellow {
    background-color: var(--bg-clr-yellow-200) ;
}
.bg-black-100 {
    background-color: var(--bg--clr-black-100) ;
}

/* font weights */
.fw-light {
    font-weight: var(--fw-light) ;
}
.fw-medium {
    font-weight: var(--fw-medium) ;
}
.fw-bold {
    font-weight: var(--fw-bold) ;
}

/* alignments */
.flex {
    display: flex ;
    align-items: center ;
    justify-content: center ;
}
.flex-colum {
    flex-direction: column ;
}
.grid {
    display: grid ;
    align-items: center ;
    justify-content: center ;
}
.outline {
    border: 5px solid black ;
}
.full-width {
    width: 100% ;
}
.padding-block {
    padding: var(--margin-sm) 0 ;
}
.position-rel {
    position: relative ;
}

.overlay-container {
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    cursor: pointer ;
}
.overlay-img {
    height: 100% ;
    width: 100% ;
    object-fit: cover ;
    filter: brightness(0.7) ;
}
.overlay-info {
    position: absolute ;
    bottom: 0 ;
    padding-inline: var(--padding-inline-sm) ;
    padding-block: var(--padding-top-btm) ;
    width: 100% ;
    color: white ;
}
.position-center {
    position: absolute ;
    left: 0 ;
    right: 0 ;
    top: 0 ;
    bottom: 0 ;
    margin: auto ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    flex-direction: column ;
}
.darkoverlay {
    filter: brightness(0.55) ;
}
/* ****************end of utility classes***************************** */

/* nav menue styles */
.main-container {
    position: relative ;
}
.nav-toggle span {
    cursor: pointer ;
    background-color: var(--clr-yellow-100) ;
    box-shadow: 1px 5px 8px #3a3737 ;
    display: block ;
    width: 2em ;
    height: var(--margin-xsm) ;
    margin-bottom: var(--margin-xsm) ;
    transform-origin: 2px 3px ;
    transition: all 0.4s ease-in-out ;
}
.open-nav span:first-child {
    transform: rotate(45deg) ;
    box-shadow: 1px 1px 1px #3a3737 ;
}
.open-nav span:nth-child(2) {
    opacity: 0 ;
}
.open-nav span:last-child {
    transform: rotate(-45deg) ;
    box-shadow: 1px 1px 1px #3a3737 ;
}

.nav-header {
    display: flex ;
    align-items: center ;
    justify-content: space-between ;
}
.hidelogo.header-logo {
    opacity: 0 ;
}
.links li {
    padding: 1.5rem 0 ;
    transition: all 0.3s ease-in ;
}
.links li:hover {
    border-bottom: 1px solid black ;
    padding-inline: 10px ;
    color: var(--clr-white-100) ;
}
.links .book-now {
    border: 1px solid black !important;
    padding: var(--margin-sm) ;
    transition: all 0.3s ease-in ;
}
.book-now:hover {
    border-radius: 10px ;
    padding-inline: 20px ;
    background-color: black ;
    color: var(--clr-white-100) !important;
}
.links-container {
    height: 0 ;
    overflow: hidden ;
    border-radius: 5px ;
    z-index: 3 ;
    text-align: center ;
    transition: all 0.2s linear ;
    background-color: var(--clr-white-100) ;
}
.links-container a {
    color: black ;
}

.links-container .service-links a {
    color: #ffffff !important;
}
/* header styles */
header {
    position: relative ;
    min-height: 60vh ;
}
@media screen and (min-width: 46.875em) {
    header {
        height: 100vh ;
    }
}
.nav-center {
    position: fixed ;
    width: 100% ;
    z-index: 3 ;
    padding-top: var(--padding-inline-sm) ;
    padding-inline: var(--padding-top-btm) ;
    transition: all 0.4s ease-in-out ;
}
@media screen and (min-width: 53.125em) {
    .nav-header {
        display: none ;
    }
}
.bg-nav.nav-center {
    background-color: white ;
}
.logo {
    width: 4.375em ;
}
.header-logo p {
    text-align: center ;
    font-family: "Italianno", cursive ;
    font-size: var(--fs-medium) ;
    width: 5em ;
    color: var(--clr-yellow-100) ;
    line-height: 1 ;
    padding: var(--margin-xsm) ;
    background-color: black ;
    border-radius: 5px ;
}
.header-carousel {
    position: absolute ;
    top: 0 ;
    width: 100% ;
    height: 100% ;
    overflow: hidden ;
    z-index: -2 ;
}
.slider {
    display: grid ;
    grid-auto-flow: column ;
    grid-auto-columns: 100% ;
    height: 100% ;
    transition: all 1s ease-in ;
}

.slide-btns {
    position: absolute !important;
    bottom: 20%;
    z-index: 2 !important;

    font-size: var(--fs-large) !important;
}
.left,
.right {
    cursor: pointer ;
    transition: all 0.6s ease-in-out ;
}
.left {
    margin-right: 100px ;
}
.left:hover,
.right:hover {
    padding-inline: 2.25em ;
    background-color: var(--clr-white-100) ;
    color: black ;
}
.slider img {
    height: 100% ;
    width: 100% ;
    filter: brightness(0.5) ;
    object-fit: cover ;
}
.nav-header-info {
    width: 80% ;
    padding-top: 90px;
    z-index: -2 ;
    margin: auto ;
}
.nav-header-title {
    text-align: center ;
    padding-bottom: var(--padding-top-btm) ;
    font-size: var(--step-7) ;
}
.nav-header-info p {
    font-size: var(--step-4) ;
    max-width: 56.25em ;
    margin-inline: auto ;
    text-align: center ;
}
/* booking overlay styles */
.booking-overlay {
    width: 100vw ;
    height: 100vh ;
    top: 0 ;
    z-index: 100 ;
    position: fixed ;
    overflow: hidden ;
    display: none ;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
        url(/assets/owl-bg.jpg) ;
    background-size: cover ;
    background-position-x: center ;
    background-position-y: 100% ;
    background-repeat: no-repeat ;
    /* background-color: grey;
    background-blend-mode: multiply; */
}

.open-book-overlay {
    display: grid ;
    justify-content: center ;
    align-content: center ;
}
.booking-overlay a {
    font-weight: 600 ;
    color: #ea2a2a ;
}

.close-overlay {
    position: absolute ;
    top: 0 ;
    right: 0 ;
    color: var(--clr-white-100) ;
    cursor: pointer ;
    font-size: var(--step-5) ;
}

.main-wrapper {
    position: relative ;
    display: grid ;
    width: 90vw ;
    height: 85vh ;
    overflow-x: hidden ;
    margin: auto ;
    border-radius: 10px ;
    background: #c4c4c4 ;
    box-shadow: 0px 0px 30px #000000 ;
    margin: auto ;
}
.booking-info-container {
    overflow-y: scroll ;
}
@media screen and (min-width: 45em) {
    .main-wrapper {
        display: grid ;
        height: 60vh ;
        max-width: 65em ;
        grid-template-columns: repeat(2, 1fr) ;
        grid-auto-rows: 1fr ;
    }
    .overlay-header img {
        height: 100% ;
        object-fit: cover ;
        object-position: center ;
    }
}

.company-title {
    text-align: center ;
    font-family: "Italianno", cursive ;
    font-size: var(--fs-large) ;
    padding-block: var(--margin-xsm) ;
}

.booking-overlay-title button {
    color: var(--clr-white-100) ;
    font-size: 1rem ;
    padding-block: var(--margin-sm) ;
    font-weight: var(--fw-bold) ;
    transition: all 0.3s ease-in-out ;
}
.booking-overlay-title button:hover {
    background-color: green ;
    padding-inline: 1em ;
}
.booking-overlay-title {
    margin-bottom: -25px ;
    text-align: center ;
}
.book-wrapper-title {
    margin-bottom: 5px ;
    font-weight: bold ;
    border-bottom: 0.1px solid var(--clr-grey-100) ;
}
@media screen and (min-width: 45em) {
    .booking-overlay-title {
        margin-bottom: var(--margin-sm) ;
    }
    .booking-overlay-title button {
        width: 80% ;
        margin: auto ;
    }
    .close-overlay {
        color: red ;
    }
}
.booking-wrapper {
    width: 90% ;
    margin: auto ;
    margin-bottom: 1.5em ;
    border-radius: 5px ;
    background-color: var(--bg-clr-grey-100) ;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25) ;
    padding-bottom: 1.2em ;
    text-align: center ;
    font-weight: var(--fw-medium) ;
}
.booking-wrapper.first {
    padding-top: 1.5em ;
}

.inquiry-icon,
.phone-icon {
    color: red ;
}
.phone-icon {
    margin-bottom: var(--margin-xsm) ;
}
.email-icon {
    color: blue ;
}
.phone-icon,
.email-icon,
.inquiry-icon {
    text-align: center ;
    font-size: var(--fs-large) ;
}
/* overview style */

.overview-info-container {
    padding-block: 4rem ;
}
.overview-info {
    width: 75% ;
}
.overview-info h3 {
    text-align: center ;
    font-size: var(--step-5) ;
    margin-bottom: var(--margin-sm) ;
}
.overview-info p {
    font-size: var(--step-2) ;
}
@media screen and (min-width: 46.875em) {
    .overview {
        display: grid ;
        grid-template-columns: repeat(2, 1fr) ;
    }
    .overview-image img {
        object-fit: cover ;
        height: 100% ;
    }
    .overview:nth-of-type(even).overview div:nth-of-type(even) {
        order: 1 ;
    }
    .overview:nth-of-type(odd).overview div:nth-of-type(odd) {
        order: 2 ;
    }
}
@media screen and (min-width: 60em) {
    .overview {
        width: 98% ;
        max-width: 81.25em ;
        margin: auto ;
    }
}

/* accomodation */
.accomodation-title {
    text-align: center ;
    padding-block: var(--padding-top-btm) ;
}
.accomodation h2 {
    margin-bottom: var(--margin-sm) ;
    font-size: var(--step-5) ;
}
.accomodation-title p {
    text-align: center ;
    font-size: var(--step-4) ;
    padding-inline: var(--padding-inline-sm) ;
}
@media screen and (min-width: 53.125em) {
    .accomodation-title p {
        width: 70% ;
        margin: auto ;
    }
}

/* accomodation gallery */
.gallery-info {
    position: relative ;
    min-height: 60vh ;
}
.sub-1,
.sub-2 {
    display: none ;
}
@media screen and (min-width: 45em) {
    .accomodation img {
        object-fit: cover ;

        width: 100% ;
        height: 100% ;
    }
    .accomodation-gallery {
        max-width: 81.25em ;
        margin: auto ;
        height: 60vh ;
        padding-inline: var(--padding-inline-sm) ;
        display: grid ;
        grid-template-columns: repeat(2, 1fr) ;
        gap: var(--margin-xsm) ;
        grid-template-areas:
            "one two"
            "one two"
            "one three"
            "one three" ;
    }
    .gallery-sub-image {
        border-radius: 1em ;
        overflow: hidden ;
    }
    .gallery-info {
        grid-area: one ;
    }
    .sub-1 {
        display: block ;
        grid-area: two ;
    }
    .sub-2 {
        display: block ;
        grid-area: three ;
    }
}
.accomodation-info {
    padding-inline: var(--padding-inline-sm) ;
}
.accomodation-details,
.accomodationbtn .less-word {
    display: none ;
}
.show-accomodation-info .less-word {
    display: inline ;
}
.show-accomodation-info .more-word {
    display: none ;
}
.show-accomodation-info .accomodation-details {
    display: block ;
}

.show-accomodation-info {
    display: block ;
}
.ac-info-title {
    font-size: var(--step-5) ;
    padding-block: var(--padding-inline-sm) ;
    text-align: center ;
}
.ac-details-info .details-wrapper {
    margin-top: var(--margin-sm) ;
}
.ac-details-info {
    counter-reset: count ;
}

.ac-details-info li {
    counter-increment: count ;
    border-bottom: 2px solid var(--bg-clr-grey-150) ;
}

.ac-details-info .details-wrapper {
    display: grid ;
    column-gap: 1em ;
    align-items: center ;
    grid-template-columns: min-content 1fr  ;
}
.details-wrapper h3 {
    font-size: var(--step-3) ;
    font-weight: var(--fs-medium) ;
}
.details-wrapper p {
    font-size: var(--step-1) ;
}

.prices-section p:not(:first-child) {
    font-weight: var(--fw-bold) ;
}
.details-wrapper div {
    margin-block: var(--margin-sm) ;
    grid-column: 1 / -1 ;
}
.ac-details-info .details-wrapper::before {
    content: "0" counter(count) ;
    background-color: var(--bg-clr-brown) ;
    color: var(--clr-green-100) ;
    padding: 4px 2em ;
    border-radius: 8px ;
    font-size: var(--fs-xsm) ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
}
@media screen and (min-width: 53.125em) {
    .ac-details-info {
        width: 90% ;
        margin: auto ;
        display: grid ;
        column-gap: 3em ;
        row-gap: 1em ;
        grid-template-columns: repeat(2, 1fr) ;
    }
}
@media screen and (min-width: 60em) {
    .accomodation-gallery {
        width: 98% ;
        max-width: 81.25% ;
        margin: auto ;
    }
}
/* offer */
.offer-banner {
    min-height: 45vh ;
}

.offer-title h2 {
    font-size: var(--fs-large) ;
}
.secondary-button {
    background-color: var(--btn-color-secondary) ;
}
.offer-details {
    display: none ;
    padding-top: var(--padding-top-btm) ;
}
.show-offer-details .offer-details {
    display: block ;
}
.show-offer-details .explore-btn {
    display: none ;
}
.offer-details p {
    text-align: center ;
    font-size: var(--fs-sm) ;
    font-weight: var(--fw-medium) ;
    padding-block: var(--padding-inline-sm) ;
}

/* offer table */
.price-table {
    border-collapse: collapse ;
    background-color: var(--clr-white-100) ;
    filter: drop-shadow(4px 5px 4px rgba(0, 0, 0, 0.25)) ;
    width: 90% ;
    margin: auto ;
}
.price-table thead th {
    font-size: var(--fs-xsm) ;
    font-weight: var(--fw-medium) ;
    background-color: var(--bg-clr-green) ;
    padding: var(--margin-sm) ;
    text-align: center ;
}
.price-table tbody {
    font-size: var(--fs-xxsm) ;
    text-align: center ;
}
.price-table tbody td {
    padding: 0.75em 0 ;
}

.price-table tbody tr td:nth-child(1) {
    background-color: rgba(77, 188, 101, 0.5) ;
    box-shadow: 0px 9px 11px -6px rgba(0, 0, 0, 0.47) ;
    -webkit-box-shadow: 0px 9px 11px -6px rgba(0, 0, 0, 0.47) ;
    -moz-box-shadow: 0px 9px 11px -6px rgba(0, 0, 0, 0.47) ;
}
.price-table tbody tr:nth-of-type(even) {
    background-color: #e7e1e1 ;
}

.table-wrapper {
    padding-bottom: var(--padding-inline-sm) ;
}
@media screen and (min-width: 53.125em) {
    .price-table {
        width: 90% ;
        margin: auto ;
    }
    .price-table thead th {
        font-size: var(--fs-medium) ;
    }
    .price-table tbody {
        font-size: var(--fs-regular) ;
    }
}
@media screen and (min-width: 60em) {
    .offer {
        min-height: 30vh ;
    }
    .offer {
        display: grid ;
        grid-template-columns: repeat(2, 1fr) ;
    }

    .offer-details {
        padding-top: 0 ;
        display: grid ;
        align-items: center ;
    }
    .secondary-button,
    .offerbtn {
        display: none ;
    }
}
/* about section */
.about-us {
    max-width: 81.25em ;
    margin: auto ;
    padding-bottom: var(--padding-top-btm) ;
    padding-inline: var(--padding-inline-sm) ;
}
.about-title {
    text-align: center ;
    font-size: var(--step-5) ;
    padding-block: var(--padding-top-btm) ;
}
.about-us-info .p-lg {
    font-size: var(--fs-xlarge) ;
    line-height: 1.2 ;
    width: 60% ;
}
.about-us-info .p-sm {
    font-size: var(--step-3) ;
    padding-block: var(--padding-inline-sm) ;
}
.aboutus-banner {
    min-height: 50vh ;
    margin-bottom: var(--margin-sm) ;
}
.banner-image {
    width: 100% ;
    height: 50vh ;
    object-fit: cover ;
}
.aboutus-sub-gallery {
    display: grid ;
    grid-template-columns: repeat(2, 1fr) ;

    grid-column-gap: var(--margin-xsm) ;
    margin-bottom: var(--margin-xsm) ;
}
@media screen and (min-width: 53.125em) {
    .about-title {
        padding-bottom: 0 ;
    }
    .about-us-info .p-lg {
        width: 100% ;
        text-align: center ;
    }
    .about-us-info .p-sm,
    .catering-subtext {
        width: 80% ;
        margin: auto ;
    }
}
/* food section */
.catering-title {
    text-align: center ;
    font-size: var(--step-5) ;
    margin-top: var(--padding-top-btm) ;
    text-transform: capitalize ;
}
.catering-subtext {
    padding-block: var(--padding-top-btm) ;
    font-size: var(--step-3) ;
}
/*services  */
.services {
    max-width: 81.25em ;
    margin: auto ;
    padding-bottom: var(--padding-top-btm) ;
    padding-inline: var(--padding-inline-sm) ;
}

.service-header-title {
    text-align: center ;
    padding-block: var(--padding-inline-sm) ;
    font-size: var(--step-6) ;
}
.service-header-subtext {
    text-align: center ;
    font-size: var(--step-3) ;
    text-transform: capitalize ;
}
.services-header p:last-child {
    padding-bottom: var(--padding-inline-sm) ;
}
.service-gallery-info {
    min-height: 9.375em ;
    text-transform: capitalize ;
    border-radius: 10px ;
    overflow: hidden ;
}

.services-info a {
    border: 1px solid var(--clr-white-100) ;
    padding: 5px ;
    color: var(--clr-white-100) ;
    font-size: var(--step-3) ;
    border-radius: 10px ;
    transition: all 0.3s ease-in-out ;
}
.services-info a:hover {
    background-color: var(--clr-white-100) ;
    color: black ;
    padding: 8px ;
}
.service-icon {
    font-size: var(--step-0-service-icons) ;
}
.services-info .overlay-info {
    inset: 0 ;
    margin: auto ;
}
.services-gallery {
    display: grid ;
    grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr)) ;
    gap: 5px ;
}
@media screen and (min-width: 53.125em) {
    .services-gallery {
        grid-template-columns: repeat(2, 1fr) ;
        grid-auto-rows: minmax(12.5em, 1fr) ;
    }
}
@media screen and (min-width: 60em) {
    .services-gallery {
        grid-auto-rows: minmax(15.625em, 1fr) ;
    }
}

/* reviews */
.client-reviews {
    padding-inline: var(--padding-inline-sm) ;
}
.client-review {
    position: relative ;
    font-size: var(--step-2) ;
}
.quoteicon {
    position: absolute ;
    top: -10px ;
    left: -15px ;
}
.review-header {
    text-align: center ;
    padding-block: var(--padding-top-btm) ;
}
.review-title {
    font-size: var(--fs-medium) ;
    padding-bottom: var(--padding-inline-sm) ;
}
.review-container {
    display: grid ;
    width: 100% ;
    max-width: 43.75em ;
    margin-inline: auto ;
    display: grid ;
    border-radius: 10px ;
    grid-auto-flow: column ;
    grid-auto-columns: minmax(45%, 100%) ;
    gap: var(--margin-sm) ;
    scroll-snap-type: inline mandatory ;
    overflow: auto ;
    scroll-behavior: smooth ;
    padding-bottom: var(--padding-inline-sm) ;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.review-container::-webkit-scrollbar {
    display: none ;
}

/* Hide scrollbar for IE, Edge and Firefox */
.review-container {
    -ms-overflow-style: none ; /* IE and Edge */
    scrollbar-width: none ; /* Firefox */
}
.review-card {
    min-height: 18.75em ;
    overflow-y: scroll ;
    overflow-x: hidden ;
    border-radius: 10px ;
    scroll-snap-align: start ;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5)) ;
}
.review-overlay .review-card {
    margin-block: var(--padding-top-btm) ;
}
.review-overlay {
    width: 90% ;
    max-width: 37.5em ;
    margin: auto ;
}
.review-overlay-container {
    z-index: 3 ;
    min-height: 25em ;
    height: 90vh ;
    display: none ;
    cursor: default ;
}

.close-review-btn {
    position: absolute ;
    top: 0 ;
    right: 0 ;
    z-index: 3 ;
    margin: 1em ;
    color: red ;
    cursor: pointer ;
    font-size: var(--step-0-overlay-close-icon) ;
}
.open-review {
    display: grid ;
}

.review {
    width: 75% ;
    display: grid ;
    align-items: center ;
    min-height: 14.25em ;
    max-height: 14.25em ;
    margin-inline: auto ;
    font-size: var(--fs-sm) ;
    margin-block: var(--padding-top-btm) ;
}
.review-overlay .review {
    padding-top: 1em ;
    max-height: max-content ;
}
.read-more {
    color: var(--btn-color-primary) ;
    font-weight: var(--fw-bold) ;
    cursor: pointer ;
}

.client-name {
    text-align: center ;
    text-transform: capitalize ;
    padding-bottom: var(--padding-inline-sm) ;
}
.review-btns {
    font-size: var(--fs-large) ;
    padding-block: var(--padding-inline-sm) ;
}
.review-btns p {
    transition: all 0.3s ease-in ;
}
.review-btns p:hover {
    border: 1px solid var(--clr-grey-200) ;
    border-radius: 10px ;
    padding-inline: 20px ;
    background-color: var(--clr-grey-300) ;
    color: var(--clr-white-100) ;
}
.review-btns.flex {
    gap: 5em ;
}
/* button */
.btn-wrapper {
    padding-block: var(--padding-top-btm) ;
}
button {
    padding: 0.5em 1.4375em ;
    background-color: var(--btn-color-primary) ;
    color: var(--clr-white-100) ;
    border: none ;
    border-radius: 5px !important;
    font-weight: var(--fw-bold) ;
    font-size: var(--fs-sm) !important;
}
/* FAQ */
.faqs {
    padding-block: var(--padding-top-btm) ;
}
.faqs h3 {
    padding-block: var(--padding-inline-sm) ;
    text-align: center ;
}
.question {
    width: 90% ;
    max-width: 56.25em ;
    border-radius: 10px ;
    margin: var(--margin-sm) auto 2rem auto ;
    padding-inline: var(--padding-inline-sm) ;
    font-size: var(--fs-sm) ;
}
.question-title {
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
    padding-block: 10px ;
}
.plus-icon,
.minus-icon {
    cursor: pointer ;
    font-size: var(--fs-large) ;
    font-weight: 400 ;
}
.question-btn {
    margin-left: var(--margin-sm) ;
}
.answer {
    border-top: 1px solid var(--bg-clr-grey-100) ;
    padding-block: var(--padding-top-btm) ;
}
.show-price-list {
    font-weight: bold ;
    color: var(--btn-color-secondary) ;
}
.minus-icon {
    display: none ;
}
/* hide faq text */
.answer {
    display: none ;
}
.minus-icon {
    display: none ;
}
.show-text .answer {
    display: block ;
}
.show-text .minus-icon {
    display: inline ;
}
.show-text .plus-icon {
    display: none ;
}
/* footer styles */
.footer {
    text-align: center ;
}
.footer-logo,
.booking-footer-info,
.social-media {
    padding-top: var(--padding-top-btm) ;
}
.logo-wrapper {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    overflow: hidden ;
}
.logo-wrapper img {
    width: 6.5em ;
    aspect-ratio: 1/1 ;
    border-radius: 100% ;
}
footer p {
    padding: var(--margin-sm) ;
}

.footer a {
    color: var(--clr-yellow-100) ;
    font-weight: var(--fw-bold) ;
    transition: all 0.3s ease-in-out ;
}
footer a:hover {
    border: 1px solid white ;
    background-color: black ;
    padding: 5px 0.75em ;
    margin-left: 10px ;
    color: var(--clr-white-100) ;
}
.general-info i,
.booking-footer-info i {
    margin-right: 6px ;
    font-size: 1.2rem ;
}
.social-media ul p {
    padding-top: 0 ;
    padding-bottom: var(--margin-xsm) ;
    font-size: 2rem ;
}
.social-media-gallery {
    width: 70% ;
    max-width: 22em ;
    margin: auto ;
    display: grid ;
    grid-template-columns: repeat(2, 1fr) ;
    grid-auto-rows: 100px ;
    gap: 5px ;
}
.social-media-gallery img {
    border-radius: 5px ;
    border: 2px solid white ;
    height: 100% ;
    width: 100% ;
    object-fit: cover ;
    object-position: center ;
}

.website-developer {
    margin-top: 30px ;
}

.gold-color {
    color: gold ;
}

@media screen and (min-width: 69.6875em) {
    .contact-info {
        width: 95% ;
        margin: auto ;
        display: flex ;
        justify-content: space-evenly ;
        align-items: flex-start ;
        margin-bottom: var(--padding-top-btm) ;
    }
}
.date p {
    padding-top: var(--margin-sm) ;
    font-size: var(--fs-sm) ;
}
@media screen and (min-width: 850px) {
    nav {
        background: transparent ;
    }
    .nav-center {
        width: 100vw ;
        display: flex ;
        background-color: transparent ;
        align-items: center ;
        justify-content: center ;
    }
    .bg-nav.nav-center {
        background-color: transparent ;
    }
    .nav-toggle {
        display: none ;
    }
    .links-container {
        height: auto ;
    }
    .links {
        display: flex ;
        align-items: center ;
    }
    .links a {
        background: transparent ;
        text-transform: capitalize ;
        display: block ;
        margin: 0 1rem ;

        padding: 0 ;
        color: #000000 !important;
    }
}

/* services offered details page styles */
/* hide header banner from main page */
.service-detail-page #home {
    min-height: 0 ;
    max-height: 0 ;
    margin: 0 ;
}

/* book button border */
.service-detail-page .book-now {
    border-color: var(--clr-white-100) ;
}

.service-detail-page .s-banner-image {
    width: 98% ;
    margin: auto ;
    padding-top: 5em ;
}
.s-info-section,
.s-info-section-2 {
    width: 90% ;
    margin: auto ;
}

@media screen and (min-width: 1020px) {
    .s-info-section,
    .s-info-section-2 {
        max-width: 50em ;
    }
}
.s-title {
    padding: 3em 0 1em 0 ;
    text-align: center ;
}
.s-info-section p {
    padding-block: 10px ;
}
.s-info-section-2 ul {
    font-size: var(--fs-sm) ;
}
.s-info-section-2 li {
    padding-block: 12px ;
}
.s-info-section-2 li span {
    color: var(--clr-white-100) ;
    font-size: 1rem ;
}
@media screen and (min-width: 640px) {
    .s-banner-image {
        width: 100% ;
        max-width: 62.5em ;

        margin: auto ;
    }
    .service-detail-page .links-container {
        background-color: transparent ;
    }
}
@media screen and (min-width: 53.125em) {
    .service-detail-page .links-container {
        border-radius: 5px ;
        background: hsl(0 0% 0% /0.7) ;
    }
    .service-detail-page .links-container a {
        color: var(--clr-white-100) ;
    }
}

/* community page styles */
.community-page p {
    font-size: var(--fs-regular) ;
}
.community-sub-list {
    list-style-type: disc ;
    width: 90% ;
    margin: 5px auto ;
}
.community-sub-list li {
    padding-block: 5px ;
}

/* Helper Classes */
.text-decoration-none {
    text-decoration: none ;
}

.bold-text {
    font-weight: bold;
}

.no-bold {
    font-weight: normal;
}