header {
    width: 100%;
    position: absolute;
    top: 0;
    padding: 15px 0;

    .logo {
        img {
            filter: drop-shadow(5px 1px 2px #222)
        }
    }

    .main-header {
        display: flex;
        justify-content: space-between;
        color: #fff;
        align-items: center
    }

    nav ul {
        display: flex;
        gap: 10px
    }

    li {
        a {
            color: #fff;
            font-size: 18px;
            padding: 5px 15px;
            background: #ffffff30;
            border-radius: 50px
        }
    }

    .menu-toggle {
        font-size: 28px;
        z-index: 99
    }
}

header.sticky {
    li {
        a {
            box-shadow: 2px 3px #222
        }
    }
}

.side-bar {
    display: block;
    flex-direction: column;
    padding: 150px 20px;
    position: fixed;
    background: #141414;
    width: 100%;
    max-width: 300px;
    right: -100%;
    top: 0;
    transition: all .4s ease-in;
    z-index: 1;
    height: 100vh;
    transition: .5s;
    color: #fff
}

.side-nav {
    display: none;

    ul {
        display: flex;
        flex-direction: column;
        gap: 15px;

        a {
            color: #fff
        }
    }
}

.side-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 18px;

    a {
        color: #fff
    }
}

.side-bar.active {
    right: 0%;
    z-index: 8;
    text-align: center
}

.hero-section {
    background: linear-gradient(rgb(0 0 0 / .5), #fff0), url(../uploads/banner/hero.webp);
    background-position: center;
    background-size: cover;
    padding: 300px 0 220px;
    color: #fff;

    .banner-tagline {
        display: block;
        font-family: fraunce;
        font-size: 58px;
        font-weight: 600
    }

    .banner-title {
        font-family: fraunce;
        font-size: 100px;
        font-weight: 600
    }
}

.popular-view {
    padding: 80px 0;
    background: url(../uploads/other/shape.webp);
    background-repeat: no-repeat;
    background-position: bottom;

    .popular-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            width: 30%
        }

        .text-btn {
            display: block;
            font-size: 20px;
            font-weight: 600;
            text-transform: capitalize;
            margin-top: 15px;

            a {
                color: #000;
                text-decoration: underline
            }
        }
    }

    .section-title {
        width: 40%;
        font-size: 62px
    }

    .main-popular {
        display: flex;
        gap: 40px;
        margin-top: 40px;

        .img-box {
            position: relative;
            overflow: hidden;
            border-radius: 190px 190px 20px 20px;
            display: flex
        }

        img {
            transform: scale(1);
            transition: all .4s linear
        }

        img:hover {
            transform: scale(1.1)
        }

        .box:nth-child(2) {
            transform: translateY(-50px)
        }

        .box {
            position: relative
        }

        .content-box {
            position: absolute;
            bottom: 0;
            background-color: #fff;
            width: 90%;
            padding: 20px;
            margin: 30px 30px;
            border-radius: 10px;
            text-align: center
        }
    }
}

.about-section {
    padding: 80px 0;
    background: url(../uploads/banner/overlay-img-01.webp);
    background-position: center;
    background-size: cover;

    h3 {
        position: relative
    }

    h3::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 40%;
        height: 2px;
        color: #000
    }

    .about-content {
        margin-top: 50px;
        display: flex;
        align-items: center;
        gap: 40px;

        .img-box {
            width: 50%;
            display: flex;

            img {
                border-radius: 10px
            }
        }

        .box-content {
            width: 50%
        }
    }
}

.room-section {
    padding: 80px 0;
    background: url(../uploads/other/shape-2.webp);
    background-color: #f6f6f6;
    background-position: center left;
    background-repeat: no-repeat;

    .rooms-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            width: 30%
        }

        .text-btn {
            display: block;
            font-size: 20px;
            font-weight: 600;
            text-transform: capitalize;
            margin-top: 15px;

            a {
                color: #000;
                text-decoration: underline
            }
        }

        .section-title {
            width: 40%;
            font-size: 62px
        }
    }

    .main-rooms {
        .item {
            position: relative;
            margin-top: 50px
        }

        .img-box {
            overflow: hidden;
            border-radius: 100px;
            display: flex;

            img {
                height: 535px;
                object-fit: cover;
                transform: scale(1.1);
                transition: .8s all
            }
        }

        img:hover {
            transform: scale(1)
        }

        .content-box {
            position: absolute;
            display: flex;
            align-items: center;
            top: 0;
            right: 80px;
            left: auto;
            bottom: 0;
            margin: auto 0;

            .prt-featured-content {
                background: #fff;
                border-radius: 190px 190px 20px 20px;
                display: flex;
                flex-direction: column;
                gap: 15px;
                text-align: center;
                margin: 0 auto;
                padding: 50px 30px;
                width: 380px
            }
        }

        h4 {
            font-size: 28px;
            text-transform: capitalize
        }

        .prt-featured-content {
            display: flex;
            flex-direction: column;
            gap: 20px
        }

        .room-title {
            text-align: center;

            ul {
                display: flex;
                gap: 15px;
                justify-content: center;
                margin-top: 10px
            }
        }
    }

    .owl-nav {
        position: absolute;
        top: 50%;
        display: flex;
        justify-content: space-between;
        width: 100%
    }
}

.why-choose {
    padding: 80px 0;
    background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .5)), url(../uploads/other/why-choose.webp);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: #fff;

    h3 {
        text-align: center
    }

    .main-choose {
        margin-top: 60px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        grid-gap: 30px;

        .number {
            padding: 15px;
            display: inline-block;
            border: 1px solid #fff;
            border-radius: 10px;
            transition: all .3s ease-in
        }
    }

    .item {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: self-start
    }

    .item:hover .number {
        background-color: #fff;
        color: #000;
        font-weight: 600
    }
}

.testimonial-section {
    padding: 80px 0;

    .testimonial-heading {
        text-align: center
    }

    .main-testimonial {
        margin-top: 40px;
        display: flex;
        gap: 30px;

        .item {
            flex: 1;
            z-index: 2;
            background: #F6F6F7;
            padding: 39px 50px;
            padding-right: 40px;
            position: relative;

            p {
                font-size: 18px;
                line-height: 1.5;
                color: #74787c
            }

            .author {
                display: inline-block;
                margin-top: 15px;
                font-size: 20px;
                font-weight: 600
            }

            img {
                width: 100px
            }
        }
    }

    .primary-btn {
        text-align: center;
        margin-top: 40px
    }
}

footer {
    background-color: #1f1f1f;
    background-repeat: no-repeat;

    .footer-main {
        padding: 50px 0 30px;
        display: flex;
        gap: 20px;
        justify-content: space-around;
        color: #fff;
        flex-wrap: wrap
    }

    a {
        color: #d6d4d4
    }

    ul {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px
    }

    .contact-link {
        li a {
            display: flex;
            align-items: center;
            gap: 10px
        }
    }

    .social-icon {
        ul {
            display: flex;
            flex-direction: row;
            font-size: 22px;
            gap: 20px
        }

        img {
            width: 32px
        }
    }

    .copy-right {
        border-top: 1px solid #d1d1d171;
        padding: 20px 0;
        text-align: center;
        color: #fff;
        font-size: 12px;

        img {
            width: 100px;
            margin-top: 10px
        }
    }
}

.main-about-content {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.main-amenities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-items: center;
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    text-align: center
}

.amenities-img {
    background: #ededed;
    padding: 20px;
    border-radius: 15px;

    img {
        width: 80px
    }
}

.gallery-section {
    .main-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-gap: 20px;
        align-items: stretch
    }

    .gallery-img {
        overflow: hidden;
        transition: all .2s ease-in-out;
        display: flex;
        border-radius: 10px
    }

    .gallery-img:hover img {
        transform: scale(1.1);
        transition: all .2s ease-in-out
    }
}

.contact {
    background: url(../uploads/banner/about.webp);
    background-position: center;
    background-size: cover;

    .main-contact {
        display: flex;
        align-items: center;
        gap: 40px;

        .tagline {
            margin-top: 10px
        }
    }

    .contact-form {
        width: 50%;

        img {
            width: 30px
        }
    }

    .contact-details {
        width: 50%;
        display: flex;
        justify-content: center;

        .main-details {
            width: 60%;
            background-color: #fff;

            a {
                color: #242424
            }

            span.title {
                font-size: 16px;
                font-weight: 500
            }

            .heading {
                background-color: #000;
                padding: 15px;
                color: #fff
            }

            .box {
                padding: 25px 15px;
                border-bottom: 1px solid #ccc
            }

            span {
                display: inline-block
            }

            .icon-text {
                font-size: 24px;
                color: #a9b912;
                margin-right: 10px
            }

            .text {
                color: #444;
                font-weight: 600
            }

            h5 {
                text-wrap: wrap;
                font-size: 18px
            }
        }
    }

    .icon {
        margin-bottom: 10px
    }
}

.map {
    display: flex;

    iframe {
        width: 100%;
        height: 350px
    }
}

form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    input,
    textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: none
    }

    .box {
        display: flex;
        gap: 20px
    }

    .submit {
        width: 170px;
        background-color: #000;
        font-size: 16px;
        cursor: pointer;
        color: #fff
    }

    select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px
    }

    label {
        display: block;
        margin-bottom: 10px
    }
}

.blog-page {

    .blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
        grid-gap: 30px;
        align-items: stretch;
    }

    .date {
        padding: 3px 10px;
        background: #8c9913;
        color: #fff;
    }

    .blog-item {
        background: #e6e6e6;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 12px #2222225b;
        .item-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: self-start;
            .read-more a {
                color: #795902;
                font-size: 18px
            }
            a{
                color: #000;
            }
        }
    }

    .main-blog-detail {
        display: flex;
        gap: 30px;
        .blog-detail-content {
            display: flex;
            flex-direction: column;
            align-items: self-start;
            gap: 20px;
            width: 70%;
            .blog-title {
                font-size: 32px
            }

            .content-box {
                display: flex;
                flex-direction: column;
                gap: 15px
            }
        }
    }

    .blog-sidebar {
        width: 30%;
        background-color: #e2e2e2;
        padding: 20px;
        border-radius: 10px;
        position: relative;
        h5 {
            font-size: 26px
        }

        .sidebar-items {
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            position: sticky;
            top: 50px
        }

        .item {
            display: flex;
            align-items: center;
            gap: 15px;
            background-color: #fff;
            padding: 0 10px 10px;
            box-shadow: 0 0 7px #34343436
        }

        .item-img {
            width: 200px;
            display: flex
        }

        .item-content {
            .date {
                font-size: 14px
            }

            p {
                font-size: 14px;
                line-height: 1.5;
                margin-top: 10px
            }

            a {
                color: #000
            }
        }
    }
}


.main-blog-detail {
    display: flex;
    gap: 30px;
    .blog-detail-content {
        display: flex;
        flex-direction: column;
        align-items: self-start;
        gap: 20px;
        width: 70%;
        .blog-title {
            font-size: 32px
        }

        .content-box {
            display: flex;
            flex-direction: column;
            gap: 15px
        }
    }
}

.blog-sidebar {
    width: 30%;
    background-color: #e2e2e2;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    h5 {
        font-size: 26px
    }

    .sidebar-items {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: sticky;
        top: 50px
    }

    .item {
        display: flex;
        align-items: center;
        gap: 15px;
        background-color: #fff;
        padding: 0 10px 10px;
        box-shadow: 0 0 7px #34343436
    }

    .item-img {
        width: 200px;
        display: flex
    }

    .item-content {
        .date {
            font-size: 14px;
            background: #8c9913;
            padding: 5px;
            color: #fff;
        }

        p {
            font-size: 14px;
            line-height: 1.5;
            margin-top: 10px
        }

        a {
            color: #000
        }
    }
}

.seo-heading{
    display: none;
}



.suspend-sec {
  position: fixed;
  top: 175px;
  z-index: 999;
  background: #fff;
  width: 100%;
  padding: 20px 30px;
  text-align:center;
}



.suspend-sec {
  position: fixed;
  top: 175px;
  z-index: 999;
  background: #dddfc5;
  width: 100%;
  padding: 20px 30px;
  text-align:center;
}

.content-sec-suspend h2{ color:red; font-size:25px;}
.content-sec-suspend p{ color:#000;}
.logo-sec img{ width:16%;}