/*=========================================================
SREYA PALACE
Luxury Hotel Landing Page
Version 2.0
=========================================================*/

/*==============================
GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:ital,wght@0,100..900;1,100..900&family=Marcellus&display=swap');


/*==============================
ROOT VARIABLES
==============================*/

:root {

    /* Fonts */

    --ff-heading: "Bebas Neue", sans-serif;

    --ff-body: "Marcellus", serif;

    --ff-para: "Jost", sans-serif;

    /* Luxury Colors */

    --white: #ffffff;

    --cream: #FFFDF8;

    --cream-light: #FFF8EE;

    --gold: #C8A044;

    --gold-light: #E7C76C;

    --gold-dark: #9C6E23;

    --text: #222222;

    --text-light: #666666;

    --border: #ECD9A2;

    --shadow:

        0 20px 50px rgba(0, 0, 0, .08);

    --shadow-hover:

        0 25px 60px rgba(0, 0, 0, .12);

    --radius: 22px;

    --transition: .35s ease;

    --container: 1380px;

}

/*==============================
RESET
==============================*/

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: var(--ff-body);

    background: var(--cream);

    color: var(--text);

    overflow-x: hidden;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}

/*==============================
SELECTION
==============================*/

::selection {

    background: var(--gold);

    color: #fff;

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #F5F5F5;

}

::-webkit-scrollbar-thumb {

    background: var(--gold);

    border-radius: 50px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--gold-dark);

}

/*==============================
IMAGES
==============================*/

img {

    max-width: 100%;

    display: block;

}

picture {

    display: block;

}

/*==============================
LINKS
==============================*/

a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}

ul {

    list-style: none;

}

button {

    border: none;

    background: none;

    cursor: pointer;

    font-family: inherit;

}

/*==============================
CONTAINER
==============================*/

.container {

    width: min(var(--container), 92%);

    margin: auto;

}

/*==============================
SECTION
==============================*/

section {

    position: relative;

}

.section-padding {

    padding: 100px 0;

}

/*==============================
HEADINGS
==============================*/

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--ff-heading);

    color: var(--text);

    line-height: 1.1;

    font-weight: 700;

}

h1 {

    font-size: clamp(58px, 8vw, 110px);

}

h2 {

    font-size: clamp(42px, 5vw, 68px);

}

h3 {

    font-size: clamp(30px, 3vw, 44px);

}

h4 {

    font-size: 24px;

}

p {

    color: var(--text-light);

    font-size: 16px;

}

/*==============================
UTILITY
==============================*/

.text-center {

    text-align: center;

}

.mt-30 {

    margin-top: 30px;

}

.mt-50 {

    margin-top: 50px;

}

.mb-50 {

    margin-bottom: 50px;

}

/*==============================
BUTTON BASE
==============================*/

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 16px 34px;

    border-radius: 999px;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .8px;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}

.btn:hover {

    transform: translateY(-4px);

}

/*==============================
GOLD BUTTON
==============================*/

.btn-gold {

    background: linear-gradient(135deg,
            var(--gold-dark),
            var(--gold),
            var(--gold-light));

    color: #fff;

    box-shadow:
        0 10px 30px rgba(200, 160, 68, .35);

}

.btn-gold:hover {

    box-shadow:
        0 18px 40px rgba(200, 160, 68, .45);

}

/*==============================
WHITE BUTTON
==============================*/

.btn-white {

    background: #fff;

    color: var(--text);

    border: 1px solid var(--border);

}

.btn-white:hover {

    border-color: var(--gold);

}

/*==============================
GLASS CARD
==============================*/

.glass {

    background: rgba(255, 255, 255, .65);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .6);

    box-shadow: var(--shadow);

    border-radius: var(--radius);

}

/*==============================
SHINE EFFECT
==============================*/

.shine {

    position: relative;

    overflow: hidden;

}

.shine::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 45%;

    height: 100%;

    background:

        linear-gradient(110deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    transform: skewX(-25deg);

}

.shine:hover::before {

    animation: shineMove 1s linear;

}

@keyframes shineMove {

    from {

        left: -120%;

    }

    to {

        left: 160%;

    }

}

/*=========================================================
HEADER
=========================================================*/

.header {

    position: fixed;

    top: 0;
    left: 0;
    width: 100%;

    z-index: 9999;

    transition: .4s ease;


}

/* .header.scrolled {

   
    background:
        linear-gradient(110deg,
            #FFFDF8 0%,
            #FFF8EF 40%,
            #FFF5E5 70%,
            #FFF0D8 100%);

    backdrop-filter: blur(18px);

    box-shadow: 0 10px 35px rgba(0, 0, 0, .08);

    border-bottom: 1px solid rgba(200, 160, 68, .15);

} */

.header.scrolled {

    background: rgba(255, 250, 242, .96);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(184, 135, 45, .18);

    box-shadow: 0 12px 35px rgba(0, 0, 0, .08);

}

/*=========================================================
NAVBAR
=========================================================*/

.navbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 92px;

    transition: .4s;

}

.site-loader {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #fffdf8;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999999;

    transition: all .6s ease;

}

.loader-logo img {

    width: 340px;

    animation: logoPulse 1.5s infinite ease-in-out;

}

@keyframes logoPulse {

    0% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.08);

        opacity: .8;

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}

.site-loader.hide {

    opacity: 0;

    visibility: hidden;

}


/*=========================================================
LOGO
=========================================================*/

.logo {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-shrink: 0;

}

.logo img {

    width: 120px;

    transition: .4s;

}

.header.scrolled .logo img {

    width: 120px;

}


.logo-text {

    display: flex;

    flex-direction: column;

}

.logo-text h3 {

    font-family: var(--ff-heading);

    font-size: 24px;

    color: var(--gold-dark);

    line-height: 1;

    letter-spacing: 2px;

    font-weight: 800;

}

.logo-text span {

    margin-top: 5px;

    font-size: 11px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #777;

}

/*=========================================================
LOGO HOVER
=========================================================*/

.logo:hover img {

    transform: rotate(-5deg) scale(1.05);

}

.logo:hover h3 {

    color: var(--gold);

}

/*=========================================================
HEADER RIGHT
=========================================================*/

.nav-right {

    display: flex;

    align-items: center;

    gap: 20px;

}

/*=========================================================
BOOK BUTTON
=========================================================*/

.book-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 34px;

    border-radius: 999px;

    background:

        linear-gradient(135deg,

            var(--gold-dark),

            var(--gold),

            var(--gold-light));

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    position: relative;

    overflow: hidden;

    box-shadow:

        0 12px 30px rgba(200, 160, 68, .35);

    transition: .35s;

}

.book-btn:hover {

    transform: translateY(-4px);

    box-shadow:

        0 20px 40px rgba(200, 160, 68, .45);

}

/* Gold Shine */

.book-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 45%;

    height: 100%;

    background:

        linear-gradient(110deg,

            transparent,

            rgba(255, 255, 255, .5),

            transparent);

    transform: skewX(-25deg);

}

.book-btn:hover::before {

    animation: goldShine .9s linear;

}

@keyframes goldShine {

    from {

        left: -120%;

    }

    to {

        left: 180%;

    }

}

/*=========================================================
MENU TOGGLE
=========================================================*/

.menu-toggle {

    width: 48px;

    height: 48px;

    display: none;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;

}

.menu-toggle span {

    width: 28px;

    height: 2px;

    background: var(--gold-dark);

    transition: .35s;

    border-radius: 20px;

}

.menu-toggle.active span:nth-child(1) {

    transform: rotate(45deg) translate(6px, 6px);

}

.menu-toggle.active span:nth-child(2) {

    opacity: 0;

}

.menu-toggle.active span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}

/*=========================================================
DESKTOP NAVIGATION
=========================================================*/

.nav-menu {

    display: flex;
    align-items: center;
    gap: 6px;

    margin-left: auto;
    margin-right: 35px;

}

.nav-menu li {

    position: relative;

}

.nav-menu li a {

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px 18px;

    font-size: 14px;
    font-weight: 600;

    color: var(--text);

    letter-spacing: .6px;

    text-transform: uppercase;

    transition: .35s;

}

/*---------------------------------
Underline Animation
---------------------------------*/

.nav-menu li a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background:

        linear-gradient(90deg,
            var(--gold-dark),
            var(--gold-light));

    transition: .35s;

    border-radius: 20px;

}

.nav-menu li:hover>a {

    color: var(--gold-dark);

}

.nav-menu li:hover>a::after {

    width: 70%;

}

/*---------------------------------
Active Menu
---------------------------------*/

.nav-menu li.active>a {

    color: var(--gold-dark);

    font-weight: 700;

}

.nav-menu li.active>a::after {

    width: 70%;

}

/*---------------------------------
Luxury Hover Background
---------------------------------*/

.nav-menu li a::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 40px;

    background:

        linear-gradient(135deg,
            rgba(200, 160, 68, .08),
            rgba(231, 199, 108, .16));

    transform: scale(.7);

    opacity: 0;

    transition: .35s;

    z-index: -1;

}

.nav-menu li:hover>a::before {

    opacity: 1;

    transform: scale(1);

}

/*=========================================================
NAVBAR RIGHT
=========================================================*/

.nav-right {

    display: flex;
    align-items: center;
    gap: 18px;

}

/*=========================================================
BOOK BUTTON
=========================================================*/

.book-btn {

    min-width: 160px;

    height: 52px;

    border-radius: 60px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

/*=========================================================
HEADER SCROLL EFFECT
=========================================================*/

.header.scrolled .nav-menu li a {

    color: #333;

}

.header.scrolled .book-btn {

    box-shadow:

        0 12px 28px rgba(200, 160, 68, .28);

}

/*=========================================================
DESKTOP ONLY
=========================================================*/

@media(min-width:992px) {

    .menu-toggle {

        display: none;

    }

    .mobile-sidebar {

        display: none;

    }

    .sidebar-overlay {

        display: none;

    }

}

/*=========================================================
MOBILE SIDEBAR
=========================================================*/

.sidebar-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .45);

    backdrop-filter: blur(6px);

    opacity: 0;

    visibility: hidden;

    transition: .45s ease;

    z-index: 9998;

}

.sidebar-overlay.active {

    opacity: 1;

    visibility: visible;

}

/*=========================================================
SIDEBAR
=========================================================*/

.mobile-sidebar {

    position: fixed;

    top: 0;

    right: -420px;

    width: 380px;

    max-width: 90%;

    height: 100vh;

    background: linear-gradient(180deg,
            #FFFDF8 0%,
            #FFF8EE 100%);

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    transition: .45s cubic-bezier(.4, 0, .2, 1);

    box-shadow:
        -20px 0 60px rgba(0, 0, 0, .18);

    z-index: 9999;

}

.mobile-sidebar.active {

    right: 0;

}

/*=========================================================
SIDEBAR HEADER
=========================================================*/

.sidebar-header {

    position: relative;

    padding: 28px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid rgba(200, 160, 68, .18);

    background: #fff;

}

.sidebar-header img {

    width: 150px;

    height: auto;

}

/*=========================================================
CLOSE BUTTON
=========================================================*/

.sidebar-close {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #FFF4D9;

    color: var(--gold-dark);

    font-size: 20px;

    cursor: pointer;

    transition: .35s;

}

.sidebar-close:hover {

    background: var(--gold);

    color: #fff;

    transform: rotate(90deg);

}

/*=========================================================
CUSTOM SCROLLBAR
=========================================================*/

.mobile-sidebar::-webkit-scrollbar {

    width: 7px;

}

.mobile-sidebar::-webkit-scrollbar-thumb {

    background: var(--gold);

    border-radius: 30px;

}

.mobile-sidebar::-webkit-scrollbar-track {

    background: #f5f5f5;

}

/*=========================================================
BACKGROUND DECORATION
=========================================================*/

.mobile-sidebar::before {

    content: "";

    position: absolute;

    top: -120px;

    right: -120px;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(200, 160, 68, .15),
            transparent 70%);

    pointer-events: none;

}

.mobile-sidebar::after {

    content: "";

    position: absolute;

    bottom: -100px;

    left: -100px;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(231, 199, 108, .12),
            transparent 70%);

    pointer-events: none;

}

/*=========================================================
SIDEBAR MENU
=========================================================*/

.mobile-sidebar ul {

    padding: 30px 22px 10px;

}

.mobile-sidebar ul li {

    margin-bottom: 8px;

}

.mobile-sidebar ul li a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    border-radius: 16px;

    background: #fff;

    color: var(--text);

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .5px;

    transition: .35s;

    box-shadow:

        0 6px 18px rgba(0, 0, 0, .05);

}

.mobile-sidebar ul li a::after {

    content: "\f105";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    color: var(--gold);

    transition: .35s;

}

.mobile-sidebar ul li a:hover {

    background: linear-gradient(135deg,
            var(--gold-dark),
            var(--gold));

    color: #fff;

    transform: translateX(8px);

    box-shadow:

        0 12px 28px rgba(200, 160, 68, .30);

}

.mobile-sidebar ul li a:hover::after {

    color: #fff;

    transform: translateX(5px);

}

/*=========================================================
ACTIVE MENU
=========================================================*/

.mobile-sidebar ul li.active a {

    background: linear-gradient(135deg,
            var(--gold-dark),
            var(--gold));

    color: #fff;

}

.mobile-sidebar ul li.active a::after {

    color: #fff;

}


/*=========================================================
BUTTON AREA
=========================================================*/

.sidebar-buttons {

    margin-top: auto;

    padding: 28px 22px;

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.sidebar-buttons a {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    height: 56px;

    border-radius: 50px;

    font-size: 15px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: .35s;

}

/*=========================================================
BOOK NOW
=========================================================*/

.btn-book {

    background: linear-gradient(135deg,
            var(--gold-dark),
            var(--gold),
            var(--gold-light));

    color: #fff;

    box-shadow:

        0 10px 30px rgba(200, 160, 68, .30);

}

.btn-book:hover {

    transform: translateY(-3px);

    box-shadow:

        0 18px 40px rgba(200, 160, 68, .40);

}

/*=========================================================
WHATSAPP
=========================================================*/

.btn-whatsapp {

    background: #25D366;

    color: #fff;

}

.btn-whatsapp:hover {

    background: #1fb85a;

    transform: translateY(-3px);

}

/*=========================================================
CALL
=========================================================*/

.btn-call {

    background: #fff;

    color: var(--text);

    border: 2px solid var(--border);

}

.btn-call:hover {

    border-color: var(--gold);

    color: var(--gold-dark);

    background: #FFF9EE;

    transform: translateY(-3px);

}

/*=========================================================
SIDEBAR FOOTER
=========================================================*/

.sidebar-footer {

    padding: 20px 22px 30px;

    text-align: center;

    border-top: 1px solid rgba(200, 160, 68, .15);

}

.sidebar-footer p {

    font-size: 13px;

    color: #777;

    margin-bottom: 15px;

}

/*=========================================================
SOCIAL ICONS
=========================================================*/

.sidebar-social {

    display: flex;

    justify-content: center;

    gap: 12px;

}

.sidebar-social a {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #FFF4D9;

    color: var(--gold-dark);

    transition: .35s;

}

.sidebar-social a:hover {

    background: var(--gold);

    color: #fff;

    transform: translateY(-4px);

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media (max-width:1200px) {

    .container {

        max-width: 1140px;

    }

    .nav-menu {

        gap: 18px;

    }

}

/*=========================================================
TABLET
=========================================================*/

@media (max-width:991px) {

    /* Header */

    .header {

        padding: 0;

    }

    .navbar {

        height: 82px;

    }

    /* Desktop Menu */

    .nav-menu {

        display: none;

    }

    .book-btn {

        display: none;

    }

    /* Hamburger */

    .menu-toggle {

        display: flex;

    }

    /* Logo */

    .logo img {

        width: 128px;
        padding-top: 40px;

    }

    .logo-text h3 {

        font-size: 22px;

    }

    .logo-text span {

        font-size: 10px;

    }

    /* Hero */

    .hero {

        padding-top: 82px;

    }

    .hero-content {

        padding: 45px 30px;

        text-align: center;

        align-items: center;

    }

    .hero-buttons {

        justify-content: center;

    }

    .restaurant-card {

        max-width: 500px;

        margin: auto;

    }

    .hero-offer {

        flex-direction: column;

        gap: 18px;

        align-items: center;

    }

    .offer-timer {

        justify-content: center;

    }

    .floating-buttons {

        display: none;

    }

}

/*=========================================================
MOBILE
=========================================================*/

@media (max-width:768px) {

    .container {

        width: 92%;

    }

    .navbar {

        height: 72px;

    }

    .header.scrolled .logo img {
        width: 83px;
        padding-top: 0px;
    }

    .hero {

        padding-top: 72px;

    }

    .hero-content {

        padding: 30px 15px 50px;

    }

    .hero-tag {

        font-size: 15px;
        letter-spacing: 2px;
        gap: 10px;
        margin-top: 20px;

    }

    .hero h1 {

        font-size: 56px;

        line-height: .95;

    }

    .hero-subtitle {

        font-size: 35px;

    }

    .restaurant-card {

        padding: 18px;

    }

    .restaurant-icons {

        gap: 8px;

    }

    .restaurant-icons div {

        width: 42px;

        height: 42px;

        font-size: 16px;

    }

    .hero-buttons {

        flex-direction: column;

        width: 100%;

        gap: 12px;

    }

    .hero-buttons a {

        width: 100%;

        justify-content: center;

    }

    .hero-offer {

        padding: 18px;

    }

    .offer-left-box {

        text-align: center;

    }

    .offer-timer {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

        width: 100%;

    }

    .timer-box {

        padding: 16px;

    }

    .timer-box span {

        font-size: 30px;

    }

    .hero-feature-strip {

        padding: 25px 0;

    }

    .feature-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .feature-item {

        justify-content: flex-start;

    }

    .mobile-sidebar {

        width: 320px;

    }

    .sidebar-buttons {

        padding-bottom: 40px;

    }

}

/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width:480px) {

    .hero h1 {

        font-size: 44px;

    }

    .header.scrolled .logo img {
        width: 83px;
        padding-top: 0px;
    }

    .logo img {

        width: 128px;
        padding-top: 40px;

    }

    .logo-text h3 {

        font-size: 18px;

    }

    .logo-text span {

        font-size: 9px;

        letter-spacing: 2px;

    }

    .hero-subtitle {

        font-size: 35px;

    }

    .restaurant-text h3 {

        font-size: 40px;

    }

    .restaurant-text p {

        font-size: 20px;

    }

    .timer-box span {

        font-size: 24px;

    }

    .timer-box small {

        font-size: 11px;

    }

    .mobile-sidebar {

        width: 100%;

        max-width: 100%;

    }

    .sidebar-header {

        padding: 20px;

    }

}

/*=========================================================
IPHONE SAFE AREA
=========================================================*/

@supports(padding:max(0px)) {

    .mobile-sidebar {

        padding-bottom: max(20px, env(safe-area-inset-bottom));

    }

}

/*=========================================================
SIDEBAR ANIMATION
=========================================================*/

.mobile-sidebar {

    will-change: right;

}

.sidebar-overlay {

    will-change: opacity;

}

/*=========================================================
HAMBURGER
=========================================================*/

.menu-toggle {

    transition: .35s;

}

.menu-toggle:hover {

    transform: scale(1.08);

}

.menu-toggle.active {

    transform: rotate(180deg);

}


/*=========================================================
HERO SECTION
=========================================================*/

/* .hero {

    position: relative;

    overflow: hidden;

    min-height: 100vh;

    padding-top: 92px;

    background:
        linear-gradient(110deg,
            #FFFDF8 0%,
            #FFF8EF 40%,
            #FFF5E5 70%,
            #FFF0D8 100%);

} */

/*==========================================
HERO
==========================================*/

.hero {

    position: relative;

    overflow: hidden;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: 100px;

    background: url("../img/hero.webp") no-repeat;

    background-position: center center;

    background-size: cover;

    padding-bottom: 100px;

}

/*==========================================
LEFT FADE
==========================================*/

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,

            rgba(255, 253, 248, .98) 0%,

            rgba(255, 253, 248, .96) 18%,

            rgba(255, 253, 248, .90) 35%,

            rgba(255, 253, 248, .72) 48%,

            rgba(255, 253, 248, .25) 58%,

            rgba(255, 253, 248, 0) 68%);

    z-index: 1;

}

/*==========================================
CONTAINER
==========================================*/

.hero .container {

    position: relative;

    z-index: 2;

    width: 100%;

}

/*==========================================
CONTENT
==========================================*/

.hero-content {

    width: 46%;

    max-width: 650px;

    position: relative;
    margin-left: 150px;

}

/*==========================================
TEXT
==========================================*/

.hero h1 {

    font-size: 136px;

    line-height: .9;
    letter-spacing: 30px;

}


.hero h1 span {

    display: block;

    font-size: clamp(72px, 8vw, 136px);

    font-weight: 900;

    letter-spacing: 30px;

    background:

        linear-gradient(135deg,
            #8A5B18 0%,
            #C8A044 35%,
            #E7C76C 60%,
            #FFF2C2 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-shadow:

        0 3px 12px rgba(200, 160, 68, .18);

}

/*==========================================
TABLET
==========================================*/

@media(max-width:991px) {

    .hero {

        min-height: auto;

        padding-top: 90px;

        padding-bottom: 70px;

        background-position: 72% center;

    }

    .hero-content {

        width: 100%;

        max-width: 100%;

        text-align: center;

        margin: auto;

    }

    .hero-overlay {

        background:

            linear-gradient(180deg,

                rgba(255, 253, 248, .92),

                rgba(255, 253, 248, .78));

    }

}

/*==========================================
MOBILE
==========================================*/

@media(max-width:768px) {

    .hero {

        background-position: 75% center;

        padding-top: 80px;

        padding-bottom: 60px;

    }

    .hero h1 {

        font-size: 60px;

    }

}

/*=========================================================
HERO TAG
=========================================================*/

.hero-tag {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 28px;

    color: var(--gold-dark);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
    justify-content: center;

}

.hero-tag span {

    flex: 1;

    max-width: 70px;

    height: 2px;

    background:

        linear-gradient(90deg,
            transparent,
            var(--gold),
            transparent);

}


/*=========================================================
LAUNCHING SOON
=========================================================*/

.launching {

    display: flex;

    align-items: center;

    gap: 18px;

    margin: 12px 0;

}

.launching .line {

    flex: 1;

    height: 2px;

    background:

        linear-gradient(90deg,
            transparent,
            var(--gold),
            transparent);

}

.launching {

    font-style: italic;

    font-family: cursive;

    font-size: 35px;

    font-style: italic;

    color: #B22B2B;

    font-weight: 700;

    animation: launchGlow 2.5s ease-in-out infinite;

}

@keyframes launchGlow {

    0% {

        text-shadow:
            0 0 0 rgba(178, 43, 43, .2);

    }

    50% {

        text-shadow:
            0 0 15px rgba(178, 43, 43, .35);

    }

    100% {

        text-shadow:
            0 0 0 rgba(178, 43, 43, .2);

    }

}

/*=========================================================
SUBTITLE
=========================================================*/

.hero-subtitle {

    font-size: 35px;
    color: #000000;
    line-height: 1.2;
    max-width: 650px;
    margin-bottom: 28px;
    text-align: center;
    font-weight: 500;
    font-family: 'Playfair Display';

}

.hero-subtitle strong {

    display: block;

    margin-top: 8px;

    color: var(--gold-dark);

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 1px;

}

/*=========================================================
DECORATIVE GOLD DOT
=========================================================*/

.hero-subtitle strong::before {

    content: "✦";

    color: var(--gold);

    margin-right: 10px;

}

/*=========================================================
TEXT ANIMATION
=========================================================*/

.hero-content>* {

    animation: fadeUp .9s ease forwards;

    opacity: 0;

}

.hero-tag {

    animation-delay: .1s;

}

.hero h1 {

    animation-delay: .25s;

}

.launching {

    animation-delay: .45s;

}

.hero-subtitle {

    animation-delay: .6s;

}

@keyframes fadeUp {

    from {

        transform: translateY(30px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}

/*=========================================================
TABLET
=========================================================*/

@media(max-width:991px) {

    .hero-tag {

        justify-content: center;

    }

    .hero h1 {

        text-align: center;

    }

    .hero-subtitle {

        margin: auto;

        text-align: center;

        margin-bottom: 35px;

    }

    .launching {

        justify-content: center;

    }

}

/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px) {

    .hero-tag {

        font-size: 11px;

        letter-spacing: 2px;

        gap: 10px;

    }

    .hero-tag span {

        max-width: 35px;

    }

    .hero h1 span {

        font-size: 90px;

    }

    .hero h1 {

        font-size: 90px;

        letter-spacing: 18px;

    }

    .launching {

        font-size: 24px;

        margin: 22px 0;

    }

    .hero-subtitle {

        font-size: 35px;

    }

    .hero-subtitle strong {

        font-size: 35px;

    }

}

@media(max-width:480px) {

    .hero h1 span {

        font-size: 90px;

    }

    .hero h1 {

        font-size: 90px;
        letter-spacing: 18px;

    }

    .launching {

        font-size: 20px;

    }

    .hero-subtitle {

        font-size: 35px;

    }

}


/*=========================================================
RESTAURANT CARD
=========================================================*/

.restaurant-card {

    position: relative;

    display: block;

    align-items: center;

    text-align: center;

    gap: 20px;

    padding: 15px;

    margin-bottom: 35px;

    border-radius: 30px;

    /* background: rgba(255, 255, 255, .82); */

    backdrop-filter: blur(18px);

    border: 1px solid rgba(231, 199, 108, .28);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .08);

    overflow: hidden;

    transition: .4s ease;

}

/* .restaurant-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 5px;

    height: 100%;

    background: linear-gradient(180deg,
            var(--gold-light),
            var(--gold-dark));

}

.restaurant-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transform: translateX(-120%);

    transition: .8s;

} */

.restaurant-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 24px 55px rgba(200, 160, 68, .18);

}

.restaurant-card:hover::after {

    transform: translateX(120%);

}

/*=========================================================
RESTAURANT ICON
=========================================================*/

.restaurant-icon {

    width: 72px;

    height: 72px;

    min-width: 72px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,
            var(--gold-dark),
            var(--gold),
            var(--gold-light));

    color: #fff;

    font-size: 30px;

    box-shadow:
        0 10px 25px rgba(200, 160, 68, .35);

}

/*=========================================================
RESTAURANT TEXT
=========================================================*/

.restaurant-text {

    flex: 1;

}

.restaurant-text h3 {
    margin: 0 0 8px;
    font-size: 34px;
    font-family: var(--ff-heading);
    color: #cea64c;
    text-transform: uppercase;
    letter-spacing: 10px;
}

.restaurant-text p {

    margin: 0;

    font-size: 20px;

    color: #666;

    line-height: 1.7;

}

/*=========================================================
FEATURE ICONS
=========================================================*/

.restaurant-icons {

    display: flex;

    flex-wrap: wrap;

    gap: 50px;

    margin-top: 16px;
    justify-content: center;

}

.restaurant-icons div {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FFF7E8;

    color: var(--gold-dark);

    border: 1px solid rgba(200, 160, 68, .25);

    transition: .35s;

    cursor: pointer;
    box-shadow: 0px 0px 3px 2px rgba(200, 160, 68, .25);

}

.restaurant-icons div:hover {

    background: linear-gradient(135deg,
            var(--gold-dark),
            var(--gold));

    color: #fff;

    transform: translateY(-5px) rotate(8deg);

}

.restaurant-icons i {
    font-size: 20px;
}

/*=========================================================
CTA BUTTON GROUP
=========================================================*/

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 38px;
    margin-top: 10px;
    justify-content: center;
}

.hero-buttons .btn {

    min-width: 190px;

    height: 58px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 28px;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .6px;

    text-transform: uppercase;

    transition: .35s;

}

/*=========================================================
PRIMARY BUTTON
=========================================================*/

.btn-primary {

    color: #fff;

    background: linear-gradient(135deg,
            var(--gold-dark),
            var(--gold),
            var(--gold-light));

    box-shadow:
        0 12px 30px rgba(200, 160, 68, .30);

}

.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(200, 160, 68, .40);

}

/*=========================================================
OUTLINE BUTTON
=========================================================*/

.btn-outline {

    background: #fff;

    color: var(--gold-dark);

    border: 2px solid var(--gold);

}

.btn-outline:hover {

    color: #fff;

    background: linear-gradient(135deg,
            var(--gold-dark),
            var(--gold));

    transform: translateY(-4px);

}

/*=========================================================
BUTTON ICON
=========================================================*/

.hero-buttons .btn i {

    font-size: 18px;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .restaurant-card {

        max-width: 620px;

        margin: 0 auto 35px;

    }

    .hero-buttons {

        justify-content: center;

    }

}

@media(max-width:768px) {

    .restaurant-card {

        flex-direction: column;

        text-align: center;

        padding: 22px;

    }

    .restaurant-icons {

        justify-content: center;

    }

    .hero-buttons {

        flex-direction: column;

        width: 100%;
        gap: 25px;

    }

    .hero-buttons .btn {

        width: 100%;

        min-width: 100%;

    }

}

@media(max-width:480px) {

    .restaurant-icon {

        width: 64px;

        height: 64px;

        min-width: 64px;

        font-size: 26px;

    }

    .hero-buttons {

        flex-direction: column;

        width: 100%;
        gap: 25px;

    }

    .restaurant-text h3 {

        font-size: 40px;

    }

    .restaurant-text p {

        font-size: 20px;

    }

}

/* Hero End */

/*=========================================================
LUXURY INFO STRIP
=========================================================*/

.hero-info-strip {

    position: relative;

    margin-top: -45px;

    z-index: 30;

}

.info-strip-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(231, 199, 108, .08);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(201, 159, 69, .28);

    border-radius: 22px;

    overflow: hidden;

    box-shadow:

        0 20px 45px rgba(0, 0, 0, .08);

}

/*=========================================================
COUNTDOWN
=========================================================*/

.offer-strip {

    width: 46%;

    display: flex;

    align-items: center;

    padding: 18px 22px;

    border-right: 1px solid rgba(201, 159, 69, .18);

}

.offer-left {

    min-width: 160px;

}

.offer-label {

    display: block;

    color: #8d5b18;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

}

.offer-left strong {

    display: block;

    margin-top: 8px;

    color: #333;

    font-size: 20px;

    font-family: var(--ff-heading);

}

.offer-countdown {

    display: flex;

    gap: 14px;

    margin-left: 20px;

}

/*=========================================================
COUNT BOX
=========================================================*/

.count-box {

    width: 82px;

    height: 82px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border-radius: 16px;

    background: #fffdf8;

    border: 1px solid rgba(201, 159, 69, .25);

    transition: .35s;

    position: relative;

    overflow: hidden;

}

.count-box::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .55),
            transparent);

    transform: translateX(-120%);

    transition: .8s;

}

.count-box:hover::before {

    transform: translateX(120%);

}

.count-box:hover {

    transform: translateY(-6px);

    box-shadow:

        0 18px 35px rgba(201, 159, 69, .20);

}

.count-box span {

    font-size: 40px;

    font-family: var(--ff-heading);

    color: #222;

    line-height: 1;

}

.count-box small {

    margin-top: 8px;

    color: #777;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1px;

}

/*=========================================================
FEATURES
=========================================================*/

.strip-features {

    width: 54%;

    display: flex;

    justify-content: space-evenly;

    align-items: center;

}

.strip-item {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 24px 18px;

    flex: 1;

    transition: .35s;

    position: relative;

}

.strip-item:not(:last-child) {

    border-right: 1px solid rgba(201, 159, 69, .15);

}

.strip-item:hover {

    background: #fffcf8;

}

/*=========================================================
ICON
=========================================================*/

.strip-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg,
            #fffaf0,
            #fff4df);

    border: 1px solid rgba(201, 159, 69, .22);

    transition: .35s;

}

.strip-icon i {

    font-size: 28px;

    color: #c89f45;

}

.strip-item:hover .strip-icon {

    background: linear-gradient(135deg,
            #b8872d,
            #d8b45a);

    transform: rotate(8deg);

}

.strip-item:hover .strip-icon i {

    color: #fff;

}

/*=========================================================
TEXT
=========================================================*/

.strip-text h4 {

    margin: 0;
    font-size: 30px;
    color: #222;
    font-family: var(--ff-heading);
    -webkit-text-stroke: .1px #fff;

}

.strip-text p {

    margin-top: 5px;

    color: #000;

    font-size: 14px;

    line-height: 1.6;

}

/*=========================================================
TOP BORDER
=========================================================*/

.info-strip-wrapper::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg,
            #b8872d,
            #f3de9d,
            #b8872d);

}

/*=========================================================
SHINE
=========================================================*/

.info-strip-wrapper::after {

    content: "";

    position: absolute;

    top: 0;

    left: -140%;

    width: 40%;

    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transform: skewX(-25deg);

    animation: stripShine 7s linear infinite;

}

@keyframes stripShine {

    from {

        left: -140%;

    }

    to {

        left: 160%;

    }

}

/*=========================================================
FLOAT ICON
=========================================================*/

.strip-icon {

    animation: floatIcon 4s ease-in-out infinite;

}

@keyframes floatIcon {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-4px);

    }

    100% {

        transform: translateY(0);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .info-strip-wrapper {

        flex-direction: column;

    }

    .offer-strip {

        width: 100%;

        border-right: none;

        border-bottom: 1px solid rgba(201, 159, 69, .18);

    }

    .strip-features {

        width: 100%;

    }

}

@media(max-width:991px) {

    .offer-strip {

        flex-direction: column;

        align-items: center;

        gap: 18px;

    }

    .offer-left {
        text-align: center;
        min-width: 160px;
    }

    .offer-countdown {

        margin-left: 0;

    }

    .strip-features {

        display: grid;

        grid-template-columns: repeat(1, 1fr);

    }

    .strip-item {

        border: none !important;

        justify-content: center;

        text-align: center;

        flex-direction: column;

    }

}

@media(max-width:768px) {

    .hero-info-strip {

        margin-top: -25px;

    }

    .offer-countdown {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        width: 100%;

    }

    .count-box {

        width: 100%;

        height: 75px;

    }

    .strip-features {

        display: grid;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

    }

    .strip-item {

        min-width: 250px;

        scroll-snap-align: start;

    }

}

@media(max-width:480px) {

    .offer-left strong {

        font-size: 36px;

    }

    .offer-label {

        font-size: 33px;

    }

    .count-box span {

        font-size: 28px;

    }

    .strip-icon {

        width: 72px;

        height: 72px;

    }

    .strip-icon i {

        font-size: 32px;

    }

    .strip-text h4 {

        font-size: 28px;

    }

    .strip-text p {

        font-size: 23px;

    }

}

/*luxury-services */

/*==========================================
LUXURY SERVICES
==========================================*/

.luxury-services {

    padding: 80px 0;

    background: #fffdf8;

}

.services-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

}

.service-card {

    position: relative;

    overflow: hidden;

    border-radius: 18px;

    height: 240px;

    display: block;

    text-decoration: none;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .10);

    transition: .4s;

}

.service-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 1s;

}

.overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(180deg,

            rgba(0, 0, 0, 0) 35%,

            rgba(0, 0, 0, .15) 55%,

            rgba(0, 0, 0, .78) 100%);

    transition: .4s;

}

.service-content {

    position: absolute;

    left: 24px;

    right: 24px;

    bottom: 22px;

    z-index: 5;

}

.service-content h3 {

    color: #fff;

    margin: 0;

    font-size: 26px;

    font-family: 'Cormorant Garamond', serif;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    line-height: 1.1;

    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);

}

/* Hover */

.service-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 22px 55px rgba(0, 0, 0, .18);

}

.service-card:hover img {

    transform: scale(1.12);

}

.service-card:hover .overlay {

    background:

        linear-gradient(180deg,

            rgba(0, 0, 0, .05),

            rgba(0, 0, 0, .18),

            rgba(0, 0, 0, .85));

}

/* Gold Line */

.service-content::before {

    content: "";

    display: block;

    width: 70px;

    height: 3px;

    margin-bottom: 14px;

    border-radius: 50px;

    background: linear-gradient(90deg,

            #c89f45,

            #f7d97d);

}

/* Responsive */

@media(max-width:1100px) {

    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .luxury-services {

        padding: 50px 0;

    }

    .services-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .service-card {

        height: 260px;

    }

    .service-content h3 {

        font-size: 22px;

    }

}

/*=========================================================
SREYA PALACE INFORMATION SECTION
=========================================================*/

.sp-info-section {

    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #FFFDF8 0%,
            #FFF9F0 40%,
            #FFF6EA 100%);

}

/*=========================================================
BACKGROUND DECORATION
=========================================================*/

.sp-info-section::before {

    content: "";

    position: absolute;

    top: -180px;

    left: -180px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(231, 199, 108, .18),
            transparent 72%);

    pointer-events: none;

}

.sp-info-section::after {

    content: "";

    position: absolute;

    right: -150px;

    bottom: -150px;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(200, 160, 68, .12),
            transparent 75%);

    pointer-events: none;

}

/*=========================================================
GRID
=========================================================*/

.sp-info-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;

    align-items: stretch;

}

/*=========================================================
COMMON CARD
=========================================================*/

.sp-card {

    position: relative;

    overflow: hidden;

    border-radius: 26px;

    background: rgba(255, 255, 255, .86);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(200, 160, 68, .22);

    padding: 34px;

    min-height: 360px;

    transition: .45s ease;

    box-shadow:

        0 12px 35px rgba(0, 0, 0, .08);

}

/*=========================================================
TOP GOLD BORDER
=========================================================*/

.sp-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background:

        linear-gradient(90deg,

            #B8872D,

            #D8B45A,

            #F5E4A6,

            #D8B45A,

            #B8872D);

}

/*=========================================================
GOLD SHINE
=========================================================*/

.sp-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    transform: skewX(-25deg);

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .55),

            transparent);

    transition: 1s;

}

.sp-card:hover::after {

    left: 160%;

}

/*=========================================================
CARD HOVER
=========================================================*/

.sp-card:hover {

    transform: translateY(-10px);

    box-shadow:

        0 28px 60px rgba(200, 160, 68, .18);

}

/*=========================================================
FLOATING GOLD PARTICLES
=========================================================*/

.sp-card .gold-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}

.gold-circle-1 {

    width: 180px;

    height: 180px;

    top: -90px;

    right: -90px;

    background:

        radial-gradient(circle,

            rgba(231, 199, 108, .16),

            transparent 70%);

}

.gold-circle-2 {

    width: 140px;

    height: 140px;

    bottom: -60px;

    left: -60px;

    background:

        radial-gradient(circle,

            rgba(200, 160, 68, .10),

            transparent 70%);

}

/*=========================================================
SECTION ANIMATION
=========================================================*/

.sp-card {

    animation: cardFadeUp .9s ease both;

}

.sp-card:nth-child(2) {

    animation-delay: .15s;

}

.sp-card:nth-child(3) {

    animation-delay: .3s;

}

@keyframes cardFadeUp {

    from {

        opacity: 0;

        transform: translateY(50px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .sp-info-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .contact-card {

        grid-column: 1/-1;

    }

}

@media(max-width:991px) {

    .sp-info-section {

        padding: 70px 0;

    }

    .sp-info-grid {

        gap: 22px;

    }

    .sp-card {

        padding: 28px;

        min-height: auto;

    }

}

@media(max-width:768px) {

    .sp-info-grid {

        grid-template-columns: 1fr;

    }

    .contact-card {

        grid-column: auto;

    }

    .sp-card {

        border-radius: 22px;

        padding: 24px;

    }

}

@media(max-width:480px) {

    .sp-info-section {

        padding: 50px 0;

    }

    .sp-card {

        padding: 20px;

    }

}


/*=========================================================
LOCATION CARD
=========================================================*/

.location-card {

    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg,
            #fffdf8 0%,
            #fff9ef 55%,
            #fff6e8 100%);

    border: 2px solid rgba(201, 159, 69, .22);

    border-radius: 26px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .08);

    transition: .45s;

}

.location-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 28px 60px rgba(201, 159, 69, .20);

}

/*=========================================================
TOP SHINE
=========================================================*/

.location-card::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 40%;

    height: 100%;

    transform: skewX(-25deg);

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .55),

            transparent);

    transition: 1s;

}

.location-card:hover::before {

    left: 160%;

}

/*=========================================================
CONTENT
=========================================================*/

.location-content {

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;

    min-height: 100%;

}

.location-left {

    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 18px;

    padding: 40px;

    height: 100%;

}

.location-heading {

    display: flex;

    align-items: center;

    gap: 12px;

}

.location-heading span {

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #b8872d;

}

.location-icon {

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg, #b8872d, #e7c96d);

    color: #fff;

    font-size: 24px;

    box-shadow: 0 10px 25px rgba(184, 135, 45, .25);

}

.location-left h2 {

    margin: 0;

    font-size: 72px;

    line-height: 1;

    font-family: var(--ff-heading);

    color: #8b5a17;

}

.location-left h2 small {

    display: block;

    margin-top: 8px;

    font-size: 20px;

    color: #b8872d;

    font-weight: 500;

}

.location-left p {

    margin: 0;

    font-size: 18px;

    color: #666;

}

.location-left p strong {

    color: #b8872d;

}

.location-left h3 {

    margin: 0;

    font-size: 28px;

    line-height: 1.5;

    color: #3f2b14;

    font-family: var(--ff-heading);

}

@media (max-width:991px) {

    .location-left {

        padding: 30px;

        gap: 16px;

        text-align: center;

        align-items: center;

    }

    .location-left h2 {

        font-size: 56px;

    }

    .location-left h3 {

        font-size: 24px;

    }

}

@media (max-width:768px) {

    .location-left {

        padding: 25px 20px;

    }

    .location-left h2 {

        font-size: 46px;

    }

    .location-left h3 {

        font-size: 20px;

    }

    .location-left p {

        font-size: 16px;

    }

}

@media (max-width:480px) {

    .location-left {

        padding: 20px 18px;

        gap: 14px;

    }

    .location-left h2 {

        font-size: 48px;

    }

    .location-left h2 small {

        font-size: 26px;

    }

    .location-left h3 {

        font-size: 28px;

    }

    .location-icon {

        width: 48px;

        height: 48px;

        font-size: 30px;

    }

}

/*=========================================================
RIGHT
=========================================================*/

.location-right {

    position: relative;

    height: 100%;

    overflow: hidden;

}

/*=========================================================
TEMPLE IMAGE
=========================================================*/

.temple-image {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}

.temple-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: bottom center;

    transition: 1.2s;

    animation: templeFloat 6s ease-in-out infinite;

}

.location-card:hover .temple-image img {

    transform: scale(1.06);

}

/*=========================================================
LEFT FADE
=========================================================*/

.location-right::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 180px;

    height: 100%;

    background: linear-gradient(90deg,
            #fffaf2 0%,
            rgba(255, 250, 242, .9) 35%,
            rgba(255, 250, 242, .15) 100%);

    z-index: 2;

}

/*=========================================================
BOTTOM FADE
=========================================================*/

.location-right::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100px;

    background: linear-gradient(180deg,
            transparent,
            rgba(255, 249, 240, .95));

}

/*=========================================================
GLOW
=========================================================*/

.location-glow {

    position: absolute;

    right: -120px;

    bottom: -120px;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(231, 199, 108, .20),
            transparent 72%);

}

/*=========================================================
PARTICLES
=========================================================*/

.location-particle {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #e7c76c;

    box-shadow:
        0 0 12px #e7c76c;

    animation: particleFloat linear infinite;

}

.particle-1 {

    left: 12%;

    top: 16%;

    animation-duration: 8s;

}

.particle-2 {

    left: 35%;

    bottom: 18%;

    animation-duration: 10s;

}

.particle-3 {

    right: 14%;

    top: 20%;

    animation-duration: 9s;

}

/*=========================================================
KEYFRAMES
=========================================================*/

@keyframes locationPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.08);

    }

    100% {

        transform: scale(1);

    }

}

@keyframes templeFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes particleFloat {

    0% {

        transform: translateY(20px);

        opacity: 0;

    }

    20% {

        opacity: 1;

    }

    100% {

        transform: translateY(-80px);

        opacity: 0;

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .location-content {

        grid-template-columns: 1fr;

    }

    .location-right {

        height: 320px;

    }

    .location-right::before {

        display: none;

    }

}

@media(max-width:768px) {


    .location-right {

        height: 260px;

    }

}

@media(max-width:480px) {

    .location-card {

        border-radius: 20px;

    }

    .location-right {

        height: 220px;

    }

}

/*=========================================================
COMING SOON CARD
=========================================================*/

.comingsoon-card {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    background: linear-gradient(135deg,
            #fffdf8 0%,
            #fff9ef 55%,
            #fff6e8 100%);

    border: 2px solid rgba(201, 159, 69, .22);

    border-radius: 26px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .08);

    transition: .45s;

}

/*=========================================================
HEADER
=========================================================*/

.coming-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;

}

.coming-header i {

    font-size: 26px;

    color: #C89F45;

    animation: starTwinkle 2.5s ease-in-out infinite;

}

.coming-header h3 {

    margin: 0;

    font-size: 34px;

    font-family: var(--ff-heading);

    color: #8A5B18;

    letter-spacing: 1px;

}

/*=========================================================
COMING LIST
=========================================================*/

.coming-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.coming-list li {

    position: relative;

    padding-left: 24px;

    font-size: 18px;

    color: #333;

    line-height: 1.6;

    transition: .35s;
    font-weight: 600;
}

.coming-list li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 11px;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #B8872D,
            #F5E4A6);

    box-shadow:
        0 0 12px rgba(200, 159, 69, .35);

}

.coming-list li:hover {

    color: #B8872D;

    transform: translateX(6px);

}

/*=========================================================
COMING SOON STAMP
=========================================================*/

.coming-stamp {

    position: absolute;

    right: 22px;

    bottom: 28px;

    width: 140px;

    height: 140px;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: .92;

    transform: rotate(-18deg);

    animation: stampFloat 5s ease-in-out infinite;

}

.coming-stamp img {

    width: 100%;

    height: auto;

    display: block;

    filter: drop-shadow(0 10px 25px rgba(184, 135, 45, .25));

}

/*=========================================================
STAMP GLOW
=========================================================*/

.coming-stamp::before {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(245, 228, 166, .18),
            transparent 70%);

    z-index: -1;

}

/*=========================================================
SHINE EFFECT
=========================================================*/

.shine {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

}

.shine::before {

    content: "";

    position: absolute;

    top: -20%;

    left: -50%;

    width: 35%;

    height: 140%;

    transform: rotate(20deg);

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    animation: shineMove 8s linear infinite;

}

/*=========================================================
BOTTOM DECORATION
=========================================================*/

.comingsoon-card::after {

    content: "";

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 18px;

    height: 3px;

    border-radius: 20px;

    background: linear-gradient(90deg,
            transparent,
            #D8B45A,
            transparent);

}

/*=========================================================
ANIMATIONS
=========================================================*/

@keyframes starTwinkle {

    0% {

        transform: rotate(0deg) scale(1);

        opacity: .9;

    }

    50% {

        transform: rotate(18deg) scale(1.15);

        opacity: 1;

    }

    100% {

        transform: rotate(0deg) scale(1);

        opacity: .9;

    }

}

@keyframes stampFloat {

    0% {

        transform: rotate(-18deg) translateY(0);

    }

    50% {

        transform: rotate(-18deg) translateY(-10px);

    }

    100% {

        transform: rotate(-18deg) translateY(0);

    }

}

@keyframes shineMove {

    from {

        left: -50%;

    }

    to {

        left: 150%;

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .coming-header h3 {

        font-size: 30px;

    }

    .coming-list li {

        font-size: 17px;

    }

    .coming-stamp {

        width: 120px;

        height: 120px;

    }

}

@media(max-width:768px) {

    .coming-header {

        justify-content: center;

    }

    .coming-header h3 {

        font-size: 26px;

        text-align: center;

    }

    .coming-list {

        margin-top: 10px;

    }

    .coming-list li {

        font-size: 16px;

    }

    .coming-stamp {

        position: relative;

        right: auto;

        bottom: auto;

        margin: 30px auto 0;

        transform: rotate(-12deg);

    }

}

@media(max-width:480px) {

    .coming-header h3 {

        font-size: 32px;

    }

    .coming-list li {

        font-size: 25px;

        padding-left: 28px;

    }

    .coming-list li::before {

        width: 8px;

        height: 8px;

        top: 10px;

    }

    .coming-stamp {

        width: 100px;

        height: 100px;

    }

}

/*=========================================================
ROOM SHOWCASE CARD
=========================================================*/

.room-showcase-card {

    position: relative;

    overflow: hidden;

    border-radius: 26px;

    background: linear-gradient(180deg,
            #fffdf8 0%,
            #fff8ef 100%);

    border: 1px solid rgba(201, 159, 69, .22);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .08);

    transition: .4s;

}

.room-showcase-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 30px 65px rgba(201, 159, 69, .18);

}

/*=========================================================
TOP GOLD LINE
=========================================================*/

.room-showcase-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg,
            #b8872d,
            #f3de9d,
            #b8872d);

}

/*=========================================================
SHINE
=========================================================*/

.room-showcase-card::after {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 40%;

    height: 100%;

    transform: skewX(-25deg);

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: 1.1s;

}

.room-showcase-card:hover::after {

    left: 150%;

}

/*=========================================================
HEADER
=========================================================*/

.room-card-header {

    padding: 28px 30px 18px;

    text-align: center;

}

.room-subtitle {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    background: #fff3df;

    color: #b8872d;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.room-card-header h2 {

    margin: 18px 0 10px;

    font-size: 34px;

    color: #8b5a17;

    font-family: var(--ff-heading);

}

.room-card-header p {

    margin: 0 auto;

    max-width: 360px;

    color: #666;

    line-height: 1.8;

}

.room-card-header strong {

    color: #b8872d;

}

/*=========================================================
SWIPER
=========================================================*/

.roomSwiper {

    padding: 0 25px 10px;

}

/*=========================================================
ROOM CARD
=========================================================*/

.room-slide {

    display: block;

    border-radius: 22px;

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(201, 159, 69, .18);

    box-shadow:

        0 15px 35px rgba(0, 0, 0, .08);

    transition: .4s;

}

.room-slide:hover {

    transform: translateY(-8px);

}

/*=========================================================
IMAGE
=========================================================*/

.room-image {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    height: 300px;
    background: #000;
}

.room-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s ease;
}

.room-slide:hover .room-image img {
    transform: scale(1.08);
}

/*=========================================================
OVERLAY
=========================================================*/

.room-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .92) 0%,
            rgba(0, 0, 0, .70) 25%,
            rgba(0, 0, 0, .35) 55%,
            rgba(0, 0, 0, .10) 75%,
            rgba(0, 0, 0, 0) 100%);
}

/*=========================================================
PRICE
=========================================================*/

.room-price {

    position: absolute;

    top: 18px;

    right: 18px;

    z-index: 3;

    padding: 10px 18px;

    border-radius: 40px;

    background: linear-gradient(135deg,
            #b8872d,
            #e7c96d);

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(184, 135, 45, .35);

}

/*=========================================================
CONTENT
=========================================================*/

.room-content {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 2;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}

.room-content h3 {

    margin: 0;

    color: #fff;

    font-size: 28px;

    font-family: var(--ff-heading);

    text-shadow: 0 4px 12px rgba(0, 0, 0, .45);

}

.room-content p {

    margin: 12px 0 20px;

    color: rgba(255, 255, 255, .92);

    line-height: 1.7;

    font-size: 15px;

}

/*=========================================================
BOOK BUTTON
=========================================================*/

.room-book {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: max-content;

    padding: 12px 22px;

    border-radius: 40px;

    background: linear-gradient(135deg,
            #b8872d,
            #e7c96d);

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    transition: .35s;

    cursor: pointer;

    box-shadow:
        0 10px 20px rgba(184, 135, 45, .35);

}

.room-book i {

    transition: .35s;

}

.room-slide:hover .room-book {

    transform: translateY(-3px);

}

.room-slide:hover .room-book i {

    transform: translateX(6px);

}


/*=========================================================
PAGINATION
=========================================================*/

.roomSwiper .swiper-pagination {

    position: relative;

    margin-top: 25px;

}

.roomSwiper .swiper-pagination-bullet {

    width: 12px;

    height: 12px;

    background: #d8b45a;

    opacity: .4;

}

.roomSwiper .swiper-pagination-bullet-active {

    width: 34px;

    border-radius: 20px;

    background: #b8872d;

    opacity: 1;

}

/*=========================================================
HOVER GLOW
=========================================================*/

.room-slide:hover {

    box-shadow:

        0 25px 50px rgba(184, 135, 45, .20);

}

/*=========================================================
IMAGE SHINE
=========================================================*/

.room-image::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 40%;

    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: 1s;

    z-index: 2;

}

.room-slide:hover .room-image::before {

    left: 150%;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media (max-width:991px) {

    .room-card-header h2 {

        font-size: 30px;

    }

    .room-image {
        height: 300px;
    }

    .room-content {
        padding: 22px;
    }

    .room-content h3 {
        font-size: 24px;
    }
}

@media(max-width:768px) {

    .roomSwiper {

        padding: 0 18px 28px;

    }

    .room-image {
        height: 260px;
    }

    .room-content {
        padding: 20px;
    }

    .room-card-header {

        padding: 22px 20px;

    }

    .room-card-header h2 {

        font-size: 26px;

    }

    .room-content h3 {
        font-size: 22px;
    }

    .room-content p {
        font-size: 14px;
        margin: 10px 0 16px;
    }

    .room-book {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width:480px) {

    .room-image {
        height: 250px;
    }

    .room-content {
        padding: 16px;
    }

    .room-content h3 {
        font-size: 30px;
        padding-bottom: 10px;
    }

    .room-content p {
        display: none;
    }

    .room-price {

        top: 12px;

        right: 12px;

        padding: 8px 14px;

        font-size: 12px;

    }

    .room-book {

        width: auto;

        justify-content: center;

        padding: 11px 18px;

        font-size: 20px;

    }

}

/*=========================================================
SCROLL REVEAL
=========================================================*/

.room-showcase-card {

    opacity: 0;

    transform: translateY(50px);

    transition: .9s ease;

}

.room-showcase-card.show {

    opacity: 1;

    transform: translateY(0);

}

/*=========================================================
PRICE SHIMMER
=========================================================*/

.room-price.active {

    animation: priceGlow .8s ease;

}

@keyframes priceGlow {

    0% {

        box-shadow: 0 0 0 rgba(184, 135, 45, 0);

    }

    50% {

        box-shadow: 0 0 25px rgba(184, 135, 45, .45);

    }

    100% {

        box-shadow: 0 0 0 rgba(184, 135, 45, 0);

    }

}

/*=========================================================
SCROLL REVEAL
=========================================================*/

.sp-card {

    opacity: 0;

    transform: translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.sp-card.show {

    opacity: 1;

    transform: translateY(0);

}


/*=========================================================
SCROLL REVEAL
=========================================================*/

.location-card {

    opacity: 0;

    transform: translateY(50px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.location-card.show {

    opacity: 1;

    transform: translateY(0);

}

/*=========================================================
FLOATING GOLD PARTICLES
=========================================================*/

.sp-info-particles {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}

.sp-info-particles span {

    position: absolute;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #E7C76C;

    box-shadow:

        0 0 10px #E7C76C,

        0 0 25px rgba(231, 199, 108, .70);

    animation: particleFloat linear infinite;

}

.sp-info-particles span:nth-child(1) {

    left: 6%;

    top: 12%;

    animation-duration: 8s;

}

.sp-info-particles span:nth-child(2) {

    left: 24%;

    top: 70%;

    animation-duration: 10s;

}

.sp-info-particles span:nth-child(3) {

    left: 42%;

    top: 24%;

    animation-duration: 12s;

}

.sp-info-particles span:nth-child(4) {

    left: 60%;

    top: 78%;

    animation-duration: 9s;

}

.sp-info-particles span:nth-child(5) {

    left: 82%;

    top: 35%;

    animation-duration: 11s;

}

.sp-info-particles span:nth-child(6) {

    left: 92%;

    top: 16%;

    animation-duration: 8.5s;

}

/*=========================================================
DECORATIVE RINGS
=========================================================*/

.sp-ring {

    position: absolute;

    border-radius: 50%;

    border: 2px solid rgba(231, 199, 108, .15);

    pointer-events: none;

    animation: ringRotate 30s linear infinite;

}

.sp-ring.one {

    width: 420px;

    height: 420px;

    top: -160px;

    right: -140px;

}

.sp-ring.two {

    width: 260px;

    height: 260px;

    left: -80px;

    bottom: -80px;

    animation-direction: reverse;

}

/*=========================================================
CARD HOVER GLOW
=========================================================*/

.sp-card:hover {

    border-color: rgba(231, 199, 108, .40);

}

.sp-card:hover .gold-circle-1 {

    transform: scale(1.15);

}

.sp-card:hover .gold-circle-2 {

    transform: scale(1.15);

}

.gold-circle {

    transition: .5s ease;

}

/*=========================================================
ICON FLOAT
=========================================================*/

.location-icon,

.contact-icon,

.offer-title-icon {

    animation: iconFloat 4s ease-in-out infinite;

}

/*=========================================================
KEYFRAMES
=========================================================*/

@keyframes particleFloat {

    0% {

        transform: translateY(40px) scale(.4);

        opacity: 0;

    }

    20% {

        opacity: 1;

    }

    80% {

        opacity: .9;

    }

    100% {

        transform: translateY(-140px) scale(1.5);

        opacity: 0;

    }

}

@keyframes ringRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes iconFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-6px);

    }

    100% {

        transform: translateY(0);

    }

}

/*=========================================================
REDUCE MOTION SUPPORT
=========================================================*/

@media (prefers-reduced-motion:reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}

/*=========================================================
TABLET
=========================================================*/

@media(max-width:991px) {

    .sp-ring {

        display: none;

    }

}

/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px) {

    .sp-info-particles {

        display: none;

    }

}

/*=========================================================
SMALL MOBILE
=========================================================*/

@media(max-width:480px) {

    .sp-card {

        border-radius: 18px;

    }

}

/*=========================================================
LIMITED TRIAL OFFER SECTION
=========================================================*/

.offer-section {

    position: relative;

    padding: 40px 0;

    overflow: hidden;

    background: linear-gradient(180deg,
            #FFFDF9 0%,
            #FFF8EE 45%,
            #FFF5E8 100%);

}

/*=========================================================
BACKGROUND DECORATION
=========================================================*/

.offer-section::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    top: -260px;

    left: -220px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(231, 199, 108, .14),
            transparent 72%);

}

.offer-section::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -150px;

    bottom: -150px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(200, 160, 68, .10),
            transparent 75%);

}

/*=========================================================
SECTION HEADING
=========================================================*/

.offer-heading {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    margin-bottom: 55px;

}

.offer-heading h2 {

    margin: 0;

    color: #7C5314;

    font-size: 48px;

    font-family: var(--ff-heading);

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.heading-line {

    position: relative;

    width: 160px;

    height: 2px;

    background: linear-gradient(90deg,
            transparent,
            #C89F45,
            #F6E3A0,
            #C89F45,
            transparent);

}

.heading-line::before {

    content: "✦";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: #C89F45;

    font-size: 18px;

    background: #FFF9F2;

    padding: 0 8px;

}

/*=========================================================
MAIN GRID
=========================================================*/

.offer-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:

        1.25fr 1.25fr .75fr;

    gap: 28px;

    align-items: start;

}

/*=========================================================
COMMON CARD
=========================================================*/

.offer-card {

    position: relative;

    overflow: hidden;

    /* background: rgba(255, 255, 255, .88); */

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-radius: 26px;

    border: 1px solid rgba(200, 160, 68, .20);

    box-shadow:

        0 14px 40px rgba(0, 0, 0, .08);

    transition: .45s ease;

}

/*=========================================================
TOP GOLD BORDER
=========================================================*/

.offer-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg,
            #B8872D,
            #D8B45A,
            #F5E4A6,
            #D8B45A,
            #B8872D);

}

/*=========================================================
HOVER
=========================================================*/

.offer-card:hover {

    transform: translateY(-10px);

    box-shadow:

        0 25px 60px rgba(200, 160, 68, .18);

}

/*=========================================================
SHINE EFFECT
=========================================================*/

.offer-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 55%;

    height: 100%;

    transform: skewX(-22deg);

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .55),

            transparent);

    transition: 1s;

}

.offer-card:hover::after {

    left: 160%;

}

/*=========================================================
PRICING CARD
=========================================================*/

.pricing-card {

    padding: 26px;

}

/*=========================================================
SIDEBAR
=========================================================*/

.offer-sidebar {

    display: flex;

    flex-direction: column;

    gap: 24px;

}

/*=========================================================
ENTRANCE ANIMATION
=========================================================*/

.offer-card {

    opacity: 0;

    transform: translateY(45px);

    animation: offerFade .9s ease forwards;

}

.offer-card:nth-child(2) {

    animation-delay: .15s;

}

.offer-sidebar .offer-card:nth-child(1) {

    animation-delay: .25s;

}

.offer-sidebar .offer-card:nth-child(2) {

    animation-delay: .40s;

}

.offer-sidebar .offer-card:nth-child(3) {

    animation-delay: .55s;

}

@keyframes offerFade {

    from {

        opacity: 0;

        transform: translateY(45px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .offer-grid {

        grid-template-columns: 1fr 1fr;

    }

    .offer-sidebar {

        grid-column: 1/-1;

        display: grid;

        grid-template-columns: repeat(3, 1fr);

    }

}

@media(max-width:991px) {

    .offer-section {

        padding: 60px 0;

    }

    .offer-heading {

        flex-direction: column;

        gap: 15px;

    }

    .heading-line {

        width: 120px;

    }

    .offer-heading h2 {

        font-size: 40px;

        text-align: center;

    }

    .offer-grid {

        grid-template-columns: 1fr;

    }

    .offer-sidebar {

        grid-template-columns: 1fr;

    }

}

@media(max-width:768px) {

    .offer-section {

        padding: 60px 0;

    }

    .offer-heading h2 {

        font-size: 32px;

        letter-spacing: 1px;

    }

    .heading-line {

        display: none;

    }

    .pricing-card {

        padding: 20px;

    }

    .offer-card {

        border-radius: 20px;

    }

}

@media(max-width:480px) {

    .offer-heading h2 {

        font-size: 36px;

    }

    .pricing-card {

        padding: 16px;

    }

}

/*=========================================================
OFFER TITLE
=========================================================*/

.offer-title {

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: -20px auto 48px;
    width: 90%;
    min-height: 18px;
    padding: 5px 24px;
    border-radius: 100px;
    background: linear-gradient(135deg, #B8872D, #D8B45A, #F5E4A6, #D8B45A, #B8872D);
    color: #000000;
    font-family: var(--ff-heading);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(184, 135, 45, .30);

}

/*=========================================================
PRICING TABLE
=========================================================*/

.pricing-table {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

/*=========================================================
PRICE ROW
=========================================================*/

.price-row {

    display: grid;

    grid-template-columns: 170px 1fr;

    gap: 22px;

    align-items: center;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(200, 160, 68, .18);

    transition: .35s ease;

}

.price-row:last-child {

    border-bottom: none;

    padding-bottom: 0;

}

.price-row:hover {

    transform: translateX(6px);

}

/*=========================================================
PRICE TAG
=========================================================*/

.price-tag {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 62px;

    font-family: var(--ff-heading);

    font-size: 30px;

    font-weight: 700;

    color: #000;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #B8872D);

    clip-path: polygon(12% 0,
            88% 0,
            100% 50%,
            88% 100%,
            12% 100%,
            0 50%);

    box-shadow:
        0 12px 24px rgba(184, 135, 45, .28);

    transition: .35s ease;

}

.price-row:hover .price-tag {

    transform: scale(1.06);

    box-shadow:
        0 18px 36px rgba(184, 135, 45, .38);

}

/*=========================================================
PRICE DETAILS
=========================================================*/

.price-details {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.detail-row {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    color: #333;

    font-size: 17px;

    line-height: 1.6;

}

.detail-row i {

    width: 26px;

    min-width: 26px;

    text-align: center;

    margin-top: 2px;

    color: #B8872D;

    font-size: 20px;

}

/*=========================================================
ICON HOVER
=========================================================*/

.price-row:hover .detail-row i {

    transform: scale(1.15);

    transition: .35s;

}

/*=========================================================
PRICE TAG SHINE
=========================================================*/

.price-tag::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 45%;

    height: 100%;

    transform: skewX(-22deg);

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent);

    transition: .8s;

}

.price-row:hover .price-tag::before {

    left: 150%;

}

/*=========================================================
PRICE GLOW
=========================================================*/

.price-row:hover {

    background: rgba(245, 228, 166, .10);

    border-radius: 18px;

    padding: 10px;

    margin: -10px;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .price-row {

        grid-template-columns: 150px 1fr;

    }

    .price-tag {

        height: 66px;

        font-size: 32px;

    }

}

@media(max-width:991px) {

    .offer-title {

        font-size: 20px;

        margin: -38px auto 24px;

    }

    .price-row {

        grid-template-columns: 140px 1fr;

        gap: 18px;

    }

    .price-tag {

        font-size: 30px;

        height: 62px;

    }

    .detail-row {

        font-size: 16px;

    }

}

@media(max-width:768px) {

    .offer-title {

        width: 100%;

        font-size: 18px;

        padding: 12px 16px;

    }

    .price-row {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .price-tag {

        width: 180px;

        margin: auto;

    }

    .price-details {

        align-items: center;

    }

    .detail-row {

        justify-content: center;

        text-align: center;

    }

}

@media(max-width:480px) {

    .offer-title {

        font-size: 20px;
        margin-top: -15px;

    }

    .pricing-table {
        padding-top: 20px;
    }

    .price-tag {

        width: 160px;

        height: 56px;

        font-size: 36px;

    }

    .detail-row {

        font-size: 20px;

        gap: 10px;

    }

    .detail-row i {

        font-size: 20px;

    }

}

/*=========================================================
WEEKDAY CARD
=========================================================*/

.pricing-card.weekday-card {

    position: relative;

    overflow: hidden;

}

/*=========================================================
FEATURED RIBBON
=========================================================*/

/* .pricing-card.weekday-card::before {

    display:none; 

    content: "MOST POPULAR";

    position: absolute;

    top: 22px;

    right: -42px;

    width: 180px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,
            #C89F45,
            #F6E3A0,
            #B8872D);

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    transform: rotate(45deg);

    z-index: 20;

    box-shadow:
        0 10px 20px rgba(184, 135, 45, .30);

} */

/*=========================================================
TITLE COLOR
=========================================================*/

.weekday-card .offer-title {

    background: linear-gradient(135deg,
            #A87422,
            #C89F45,
            #F5E4A6,
            #C89F45,
            #A87422);

}

/*=========================================================
ROW HOVER
=========================================================*/

.weekday-card .price-row:hover {

    background:

        linear-gradient(90deg,
            rgba(245, 228, 166, .15),
            rgba(255, 255, 255, .9));

}

/*=========================================================
FEATURED PRICE
=========================================================*/

.weekday-card .price-row:first-child .price-tag {

    animation: priceGlow 3s infinite;

}

@keyframes priceGlow {

    0% {

        box-shadow:
            0 10px 20px rgba(184, 135, 45, .25);

    }

    50% {

        box-shadow:
            0 18px 35px rgba(184, 135, 45, .45);

    }

    100% {

        box-shadow:
            0 10px 20px rgba(184, 135, 45, .25);

    }

}

/*=========================================================
ICON COLOR
=========================================================*/

.weekday-card .detail-row i {

    color: #B8872D;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:768px) {

    .pricing-card.weekday-card::before {

        display: none;

    }

}

/*=========================================================
SIDEBAR CARDS
=========================================================*/

.offer-sidebar .offer-card {

    padding: 28px;

}

/*=========================================================
CARD HEADING
=========================================================*/

.offer-sidebar h4 {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0 0 22px;

    font-size: 22px;

    font-family: var(--ff-heading);

    color: #8A5B18;

    letter-spacing: 1px;

}

.offer-sidebar h4 i {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #F5E4A6);

    color: #000;

    font-size: 18px;

    box-shadow:

        0 8px 20px rgba(184, 135, 45, .25);

}

/*=========================================================
OFFER PERIOD
=========================================================*/

.offer-date {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    text-align: center;

}

.offer-date strong {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 92px;

    height: 92px;

    border-radius: 22px;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #F5E4A6);

    color: #000;

    font-family: var(--ff-heading);

    font-size: 24px;

    box-shadow:

        0 12px 24px rgba(184, 135, 45, .28);

}

.offer-date span {

    font-size: 18px;

    font-weight: 700;

    color: #777;

}

.offer-date small {

    width: 100%;

    margin-top: 10px;

    font-size: 13px;

    letter-spacing: 2px;

    color: #999;

}

/*=========================================================
COUNTDOWN
=========================================================*/

.countdown {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

}

.counters h4 {
    padding: 20px;
}

.countdown div {

    position: relative;

    padding: 18px;

    text-align: center;

    border-radius: 20px;

    background: linear-gradient(180deg,
            #FFFDF8,
            #FFF7EC);

    border: 1px solid rgba(200, 160, 68, .15);

    transition: .35s;

}

.countdown div:hover {

    transform: translateY(-6px);

    box-shadow:

        0 18px 35px rgba(200, 160, 68, .18);

}

.countdown span {

    display: block;

    font-family: var(--ff-heading);

    font-size: 40px;

    line-height: 1;

    color: #8A5B18;

}

.countdown small {

    display: block;

    margin-top: 8px;

    font-size: 12px;

    letter-spacing: 2px;

    color: #777;

}

/*=========================================================
BENEFITS
=========================================================*/

.benefits {

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.benefits div {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    border-radius: 18px;

    background: #FFFDF8;

    border: 1px solid rgba(200, 160, 68, .15);

    transition: .35s;

}

.benefits div:hover {

    transform: translateX(6px);

    background: #FFF8EE;

}

.benefits i {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #F5E4A6);

    color: #fff;

    font-size: 20px;

    flex-shrink: 0;

}

.benefits span {

    font-size: 16px;

    font-weight: 600;

    color: #333;

    line-height: 1.5;

}

/*=========================================================
ICON ANIMATION
=========================================================*/

.offer-sidebar h4 i,

.benefits i {

    animation: offerIconFloat 4s ease-in-out infinite;

}

@keyframes offerIconFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-5px);

    }

    100% {

        transform: translateY(0);

    }

}

.counters {
    margin-top: 30px;
}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .offer-sidebar {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 24px;

    }

}

@media(max-width:991px) {

    .offer-sidebar {

        grid-template-columns: 1fr;

    }

    .countdown {

        grid-template-columns: repeat(4, 1fr);

    }

}

@media(max-width:768px) {

    .offer-sidebar .offer-card {

        padding: 22px;

    }

    .offer-sidebar h4 {

        font-size: 30px;

    }

    .offer-date strong {

        width: 78px;

        height: 78px;

        font-size: 20px;

    }

    .countdown {

        grid-template-columns: repeat(2, 1fr);

    }

    .countdown span {

        font-size: 30px;

    }

    .benefits span {

        font-size: 15px;

    }

}

@media(max-width:480px) {

    .offer-date {

        flex-direction: row;

    }

    .offer-date span {

        display: none;

    }

    .countdown {

        grid-template-columns: 1fr 1fr;

        gap: 12px;

    }

    .countdown div {

        padding: 14px;

    }

    .countdown span {

        font-size: 26px;

    }

    .offer-sidebar h4 {

        font-size: 25px;

    }

}

/*=========================================================
FLOATING GOLD PARTICLES
=========================================================*/

.offer-particles {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}

.offer-particles span {

    position: absolute;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #E7C76C;

    box-shadow:

        0 0 12px #E7C76C,

        0 0 24px rgba(231, 199, 108, .70);

    animation: offerParticle linear infinite;

}

.offer-particles span:nth-child(1) {
    left: 6%;
    top: 16%;
    animation-duration: 9s;
}

.offer-particles span:nth-child(2) {
    left: 18%;
    top: 72%;
    animation-duration: 11s;
}

.offer-particles span:nth-child(3) {
    left: 34%;
    top: 28%;
    animation-duration: 8s;
}

.offer-particles span:nth-child(4) {
    left: 48%;
    top: 82%;
    animation-duration: 10s;
}

.offer-particles span:nth-child(5) {
    left: 64%;
    top: 20%;
    animation-duration: 12s;
}

.offer-particles span:nth-child(6) {
    left: 78%;
    top: 65%;
    animation-duration: 9.5s;
}

.offer-particles span:nth-child(7) {
    left: 90%;
    top: 30%;
    animation-duration: 8.5s;
}

.offer-particles span:nth-child(8) {
    left: 96%;
    top: 70%;
    animation-duration: 11s;
}

/*=========================================================
DECORATIVE GOLD RINGS
=========================================================*/

.offer-ring {

    position: absolute;

    border-radius: 50%;

    border: 2px solid rgba(231, 199, 108, .16);

    pointer-events: none;

    animation: ringRotate 30s linear infinite;

}

.offer-ring.one {

    width: 520px;

    height: 520px;

    top: -220px;

    right: -180px;

}

.offer-ring.two {

    width: 320px;

    height: 320px;

    left: -120px;

    bottom: -120px;

    animation-direction: reverse;

}

/*=========================================================
GLOW EFFECT
=========================================================*/

.offer-glow {

    position: absolute;

    width: 340px;

    height: 340px;

    border-radius: 50%;

    background: radial-gradient(circle,

            rgba(231, 199, 108, .18),

            transparent 72%);

    pointer-events: none;

}

.offer-glow.left {

    top: 0;

    left: -120px;

}

.offer-glow.right {

    bottom: -80px;

    right: -80px;

}

/*=========================================================
CARD GLOW
=========================================================*/

.offer-card:hover {

    border-color: rgba(231, 199, 108, .35);

}

.offer-card:hover::before {

    height: 5px;

}

/*=========================================================
PRICE TAG PULSE
=========================================================*/

.price-tag {

    animation: pricePulse 4s ease-in-out infinite;

}

@keyframes pricePulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.03);

    }

    100% {

        transform: scale(1);

    }

}

/*=========================================================
HEADING SHIMMER
=========================================================*/

.offer-heading h2 {

    background: linear-gradient(90deg,

            #8A5B18,

            #C89F45,

            #F5E4A6,

            #C89F45,

            #8A5B18);

    background-size: 250% auto;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: headingShimmer 6s linear infinite;

}

@keyframes headingShimmer {

    from {

        background-position: 0 0;

    }

    to {

        background-position: 250% 0;

    }

}

/*=========================================================
SCROLL REVEAL
=========================================================*/

.offer-card {

    opacity: 0;

    transform: translateY(45px);

}

.offer-card.reveal {

    opacity: 1;

    transform: translateY(0);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

/*=========================================================
PARTICLE KEYFRAME
=========================================================*/

@keyframes offerParticle {

    0% {

        transform: translateY(40px) scale(.4);

        opacity: 0;

    }

    20% {

        opacity: 1;

    }

    80% {

        opacity: .9;

    }

    100% {

        transform: translateY(-120px) scale(1.4);

        opacity: 0;

    }

}

@keyframes ringRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/*=========================================================
REDUCED MOTION
=========================================================*/

@media(prefers-reduced-motion:reduce) {

    * {

        animation: none !important;

        transition: none !important;

    }

}

/*=========================================================
TABLET
=========================================================*/

@media(max-width:991px) {

    .offer-ring {

        display: none;

    }

}

/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px) {

    .offer-particles {

        display: none;

    }

    .offer-glow {

        display: none;

    }

}

/*=========================================================
SMALL MOBILE
=========================================================*/

@media(max-width:480px) {

    .offer-heading {

        margin-bottom: 35px;

    }

    .offer-card {

        border-radius: 18px;

    }

}

/*=========================================================
ADDITIONAL SERVICES SECTION
=========================================================*/

.sp-services-section {

    position: relative;

    padding: 40px 0;

    overflow: hidden;

    background: linear-gradient(180deg,
            #FFFDF8 0%,
            #FFF9F1 45%,
            #FFF5EA 100%);

}

/*=========================================================
BACKGROUND DECORATION
=========================================================*/

.sp-services-section::before {

    content: "";

    position: absolute;

    left: -220px;

    top: -220px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(231, 199, 108, .14),
            transparent 72%);

    pointer-events: none;

}

.sp-services-section::after {

    content: "";

    position: absolute;

    right: -180px;

    bottom: -180px;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(200, 160, 68, .10),
            transparent 75%);

    pointer-events: none;

}

/*=========================================================
SECTION TITLE
=========================================================*/

.sp-services-section .section-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    margin-bottom: 55px;

    position: relative;

    z-index: 5;

}

.sp-services-section .section-title h2 {

    margin: 0;

    font-family: var(--ff-heading);

    font-size: 48px;

    font-weight: 700;

    color: #8A5B18;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.sp-services-section .title-line {

    width: 170px;

    height: 2px;

    position: relative;

    background: linear-gradient(90deg,
            transparent,
            #C89F45,
            #F6E3A0,
            #C89F45,
            transparent);

}

.sp-services-section .title-line::before {

    content: "✦";

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    font-size: 18px;

    color: #C89F45;

    background: #FFF9F1;

    padding: 0 8px;

}

/*=========================================================
MAIN CONTAINER
=========================================================*/

.services-wrapper {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    overflow: hidden;

    border-radius: 28px;

    /* background: rgba(255, 255, 255, .90); */

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(200, 160, 68, .20);

    box-shadow:

        0 18px 45px rgba(0, 0, 0, .08);

}

/*=========================================================
TOP GOLD BORDER
=========================================================*/

.services-wrapper::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg,
            #B8872D,
            #D8B45A,
            #F5E4A6,
            #D8B45A,
            #B8872D);

}

/*=========================================================
SHINE EFFECT
=========================================================*/

.services-wrapper::after {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 45%;

    height: 100%;

    transform: skewX(-25deg);

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: 1.2s;

}

.services-wrapper:hover::after {

    left: 150%;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .services-wrapper {

        grid-template-columns: repeat(4, 1fr);

    }

}

@media(max-width:991px) {

    .sp-services-section {

        padding: 70px 0;

    }

    .sp-services-section .section-title {

        flex-direction: column;

        gap: 15px;

    }

    .sp-services-section .title-line {

        width: 120px;

    }

    .sp-services-section .section-title h2 {

        font-size: 38px;

        text-align: center;

    }

    .services-wrapper {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .sp-services-section {

        padding: 55px 0;

    }

    .sp-services-section .section-title h2 {

        font-size: 30px;

        letter-spacing: 1px;

    }

    .sp-services-section .title-line {

        display: none;

    }

    .services-wrapper {

        grid-template-columns: 1fr;

        border-radius: 20px;
        display:grid;

    }

}

@media(max-width:480px) {

    .sp-services-section .section-title h2 {

        font-size: 24px;

    }

    .services-wrapper {

        grid-template-columns: 1fr;

        border-radius: 20px;

    }

}

/*=========================================================
SERVICE CARD
=========================================================*/

.service-box {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 23px 18px;

    min-height: 200px;

    transition: .4s ease;

    overflow: hidden;

    cursor: pointer;

    border-right: 1px solid rgba(200, 160, 68, .15);

}

.service-box:last-child {

    border-right: none;

}

/*=========================================================
WIDE CARD
=========================================================*/

.service-box.wide {

    grid-column: span 2;

}

/*=========================================================
TOP SHINE
=========================================================*/

.service-box::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    transform: skewX(-25deg);

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .55),

            transparent);

    transition: 1s;

}

.service-box:hover::before {

    left: 150%;

}

/*=========================================================
BOTTOM GOLD LINE
=========================================================*/

.service-box::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%) scaleX(0);

    width: 65%;

    height: 3px;

    border-radius: 20px;

    background: linear-gradient(90deg,

            #B8872D,

            #F5E4A6,

            #B8872D);

    transition: .35s;

}

.service-box:hover::after {

    transform: translateX(-50%) scaleX(1);

}

/*=========================================================
ICON
=========================================================*/

.service-icon {

    width: 92px;

    height: 92px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    background: linear-gradient(135deg,

            #FFFDF8,

            #FFF5E8);

    border: 2px solid rgba(200, 160, 68, .18);

    box-shadow:

        0 10px 24px rgba(200, 160, 68, .12);

    transition: .4s;

}

.service-icon i {

    font-size: 42px;

    color: #B8872D;

    transition: .35s;

}

/*=========================================================
TITLE
=========================================================*/

.service-box h3 {

    margin: 0;

    font-family: var(--ff-heading);

    font-size: 24px;

    color: #2F2F2F;

    line-height: 1.3;

    transition: .35s;

}

.service-box p {

    margin: 10px 0 0;

    font-size: 15px;

    color: #666;

    line-height: 1.7;

}

/*=========================================================
HOVER
=========================================================*/

.service-box:hover {

    background: linear-gradient(180deg,

            rgba(255, 255, 255, .95),

            rgba(255, 248, 236, .95));

    transform: translateY(-8px);

}

.service-box:hover .service-icon {

    transform: translateY(-8px) rotate(8deg);

    background: linear-gradient(135deg,

            #B8872D,

            #D8B45A,

            #F5E4A6);

    box-shadow:

        0 20px 40px rgba(184, 135, 45, .28);

}

.service-box:hover .service-icon i {

    color: #fff;

    transform: scale(1.15);

}

.service-box:hover h3 {

    color: #8A5B18;

}

/*=========================================================
ICON FLOAT
=========================================================*/

.service-icon {

    animation: serviceFloat 4s ease-in-out infinite;

}

@keyframes serviceFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-6px);

    }

    100% {

        transform: translateY(0);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .service-box {

        min-height: 210px;

    }

    .service-box.wide {

        grid-column: span 2;

    }

}

@media(max-width:991px) {

    .service-box {

        padding: 30px 15px;

        min-height: 190px;

    }

    .service-icon {

        width: 80px;

        height: 80px;

    }

    .service-icon i {

        font-size: 34px;

    }

    .service-box h3 {

        font-size: 20px;

    }

}

@media(max-width:768px) {

    .service-box {

        border-right: none;

        border-bottom: 1px solid rgba(200, 160, 68, .15);

    }

    .service-box:last-child {

        border-bottom: none;

    }

    .service-box.wide {

        grid-column: auto;

    }

    .service-icon {

        width: 72px;

        height: 72px;

        margin-bottom: 18px;

    }

    .service-icon i {

        font-size: 30px;

    }

    .service-box h3 {

        font-size: 28px;

    }

    .service-box p {

        font-size: 14px;

    }

}

@media(max-width:480px) {

    .service-box {

        padding: 24px 15px;

    }

    .service-icon {

        width: 64px;

        height: 64px;

    }

    .service-icon i {

        font-size: 26px;

    }

    .service-box h3 {

        font-size: 25px;

    }

}

/*=========================================================
TABLET OPTIMIZATION
=========================================================*/

@media (max-width:1200px) {

    .services-wrapper {

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: 0;

    }

    .service-box {

        min-height: 210px;

    }

    .service-box:nth-child(4n) {

        border-right: none;

    }

    .service-box.wide {

        grid-column: span 2;

    }

}

/*=========================================================
TABLET
=========================================================*/

@media (max-width:991px) {

    .services-wrapper {

        grid-template-columns: repeat(2, 1fr);

        border-radius: 22px;

    }

    .service-box {

        min-height: 190px;

        padding: 30px 20px;

    }

    .service-box:nth-child(even) {

        border-right: none;

    }

    .service-box {

        border-bottom: 1px solid rgba(200, 160, 68, .12);

    }

    .service-box.wide {

        grid-column: span 2;

    }

}

/*=========================================================
MOBILE SLIDER
=========================================================*/

@media (max-width:768px) {

    .services-wrapper {

        display: grid;

        overflow-x: auto;

        overflow-y: hidden;

        scroll-snap-type: x mandatory;

        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        border-radius: 20px;

        padding: 0;

    }

    .services-wrapper::-webkit-scrollbar {

        height: 7px;

    }

    .services-wrapper::-webkit-scrollbar-thumb {

        background: #C89F45;

        border-radius: 50px;

    }

    .services-wrapper::-webkit-scrollbar-track {

        background: #F8F4EC;

    }

    .service-box {

        flex: 0 0 280px;

        scroll-snap-align: center;

        border-right: 1px solid rgba(200, 160, 68, .15);

        border-bottom: none;

        min-height: 240px;

        padding: 35px 20px;

    }

    .service-box.wide {

        flex: 0 0 320px;

        grid-column: auto;

    }

}

/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width:480px) {

    .service-box {

        flex: 0 0 240px;

        min-height: 210px;

        padding: 26px 18px;

    }

    .service-box.wide {

        flex: 0 0 270px;

    }

    .service-icon {

        width: 62px;

        height: 62px;

    }

    .service-icon i {

        font-size: 26px;

    }

    .service-box p {

        font-size: 13px;

    }

}

/*=========================================================
SCROLL REVEAL
=========================================================*/

.service-box {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.service-box.show {

    opacity: 1;

    transform: translateY(0);

}

/*=========================================================
HOVER GLOW
=========================================================*/

.service-box:hover {

    z-index: 5;

}

.service-box:hover .service-icon {

    filter:

        drop-shadow(0 0 15px rgba(200, 160, 68, .35));

}

/*=========================================================
ICON POP
=========================================================*/

.service-box:hover i {

    animation: iconPop .45s ease;

}

@keyframes iconPop {

    0% {

        transform: scale(.8);

    }

    50% {

        transform: scale(1.18);

    }

    100% {

        transform: scale(1);

    }

}

/*=========================================================
REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce) {

    .service-box,

    .service-icon {

        animation: none !important;

        transition: none !important;

    }

}

/*=========================================================
LUXURY DECORATIVE PARTICLES
=========================================================*/

.sp-services-particles {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}

.sp-services-particles span {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #E7C76C;

    opacity: .7;

    box-shadow:

        0 0 12px #E7C76C,

        0 0 24px rgba(231, 199, 108, .65);

    animation: serviceParticle 10s linear infinite;

}

.sp-services-particles span:nth-child(1) {
    left: 5%;
    top: 15%;
    animation-duration: 9s;
}

.sp-services-particles span:nth-child(2) {
    left: 18%;
    top: 75%;
    animation-duration: 12s;
}

.sp-services-particles span:nth-child(3) {
    left: 36%;
    top: 25%;
    animation-duration: 10s;
}

.sp-services-particles span:nth-child(4) {
    left: 52%;
    top: 70%;
    animation-duration: 11s;
}

.sp-services-particles span:nth-child(5) {
    left: 68%;
    top: 18%;
    animation-duration: 8s;
}

.sp-services-particles span:nth-child(6) {
    left: 82%;
    top: 62%;
    animation-duration: 13s;
}

.sp-services-particles span:nth-child(7) {
    left: 94%;
    top: 32%;
    animation-duration: 9s;
}

/*=========================================================
DECORATIVE GOLD RINGS
=========================================================*/

.service-ring {

    position: absolute;

    border-radius: 50%;

    border: 2px solid rgba(231, 199, 108, .15);

    pointer-events: none;

    animation: ringRotate 32s linear infinite;

}

.service-ring.one {

    width: 520px;

    height: 520px;

    top: -240px;

    right: -200px;

}

.service-ring.two {

    width: 320px;

    height: 320px;

    bottom: -120px;

    left: -120px;

    animation-direction: reverse;

}

/*=========================================================
SECTION GLOW
=========================================================*/

.service-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    background: radial-gradient(circle,

            rgba(231, 199, 108, .18),

            transparent 72%);

}

.service-glow.left {

    width: 340px;

    height: 340px;

    left: -120px;

    top: 0;

}

.service-glow.right {

    width: 280px;

    height: 280px;

    right: -100px;

    bottom: -60px;

}

/*=========================================================
CARD SHADOW
=========================================================*/

.service-box {

    position: relative;

}

.service-box:hover {

    box-shadow:

        inset 0 0 0 1px rgba(200, 160, 68, .15),

        0 20px 40px rgba(200, 160, 68, .12);

}

/*=========================================================
GOLD SHIMMER
=========================================================*/

.service-box::before {

    background-size: 220% auto;

    animation: serviceShimmer 6s linear infinite;

}

@keyframes serviceShimmer {

    from {

        background-position: 0 0;

    }

    to {

        background-position: 220% 0;

    }

}

/*=========================================================
ICON GLOW
=========================================================*/

.service-icon {

    position: relative;

}

.service-icon::after {

    content: "";

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    background: radial-gradient(circle,

            rgba(231, 199, 108, .18),

            transparent 70%);

    opacity: 0;

    transition: .35s;

    z-index: -1;

}

.service-box:hover .service-icon::after {

    opacity: 1;

}

/*=========================================================
FLOAT ANIMATION
=========================================================*/

@keyframes serviceParticle {

    0% {

        transform:

            translateY(40px) scale(.4);

        opacity: 0;

    }

    20% {

        opacity: 1;

    }

    80% {

        opacity: .8;

    }

    100% {

        transform:

            translateY(-120px) scale(1.4);

        opacity: 0;

    }

}

@keyframes ringRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .service-ring {

        display: none;

    }

}

@media(max-width:768px) {

    .sp-services-particles,

    .service-glow {

        display: none;

    }

}

@media(prefers-reduced-motion:reduce) {

    .sp-services-particles span,

    .service-ring,

    .service-icon,

    .service-box {

        animation: none !important;

        transition: none !important;

    }

}

/*=========================================================
ABOUT | BOOKING | ENQUIRY SECTION
=========================================================*/

.sp-booking-section {

    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background: linear-gradient(180deg,
            #FFFDF8 0%,
            #FFF8EE 45%,
            #FFF5E8 100%);

}

/*=========================================================
BACKGROUND GLOW
=========================================================*/

.sp-booking-section::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    top: -260px;

    left: -240px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(231, 199, 108, .14),
            transparent 72%);

    pointer-events: none;

}

.sp-booking-section::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -160px;

    bottom: -160px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(200, 160, 68, .10),
            transparent 75%);

    pointer-events: none;

}

/*=========================================================
GRID
=========================================================*/

.booking-grid {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        1.1fr 1fr 1.05fr;

    gap: 28px;

    align-items: stretch;

}

/*=========================================================
COMMON CARD
=========================================================*/

.booking-card {

    position: relative;

    overflow: hidden;

    /* background: rgba(255, 255, 255, .90); */

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-radius: 28px;

    border: 1px solid rgba(200, 160, 68, .18);

    box-shadow:

        0 18px 45px rgba(0, 0, 0, .08);

    transition: .45s ease;

}

/*=========================================================
TOP GOLD BORDER
=========================================================*/

.booking-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg,
            #B8872D,
            #D8B45A,
            #F5E4A6,
            #D8B45A,
            #B8872D);

}

/*=========================================================
SHINE EFFECT
=========================================================*/

.booking-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 45%;

    height: 100%;

    transform: skewX(-25deg);

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: 1.1s;

}

.booking-card:hover::after {

    left: 150%;

}

/*=========================================================
CARD HOVER
=========================================================*/

.booking-card:hover {

    transform: translateY(-10px);

    box-shadow:

        0 28px 60px rgba(200, 160, 68, .18);

}

/*=========================================================
DEFAULT PADDING
=========================================================*/

.about-card,
.confidence-card,
.enquiry-card {

    padding: 30px;

}

/*=========================================================
TITLE STYLE
=========================================================*/

.booking-card h2 {

    margin: 0 0 18px;

    font-family: var(--ff-heading);

    font-size: 34px;

    font-weight: 700;

    color: #8A5B18;

    line-height: 1.2;

}

.card-subtitle {

    display: inline-block;

    margin-bottom: 12px;

    padding: 8px 16px;

    border-radius: 50px;

    background: #FFF5E8;

    border: 1px solid rgba(200, 160, 68, .18);

    color: #B8872D;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

/*=========================================================
ENTRANCE ANIMATION
=========================================================*/

.booking-card {

    opacity: 0;

    transform: translateY(45px);

    animation: bookingFade .9s ease forwards;

}

.booking-card:nth-child(2) {

    animation-delay: .15s;

}

.booking-card:nth-child(3) {

    animation-delay: .30s;

}

@keyframes bookingFade {

    from {

        opacity: 0;

        transform: translateY(45px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .booking-grid {

        grid-template-columns: 1fr 1fr;

    }

    .enquiry-card {

        grid-column: 1/-1;

    }

}

@media(max-width:991px) {

    .sp-booking-section {

        padding: 80px 0;

    }

    .booking-grid {

        grid-template-columns: 1fr;

    }

    .enquiry-card {

        grid-column: auto;

    }

    .booking-card {

        border-radius: 24px;

    }

}

@media(max-width:768px) {

    .sp-booking-section {

        padding: 60px 0;

    }

    .about-card,
    .confidence-card,
    .enquiry-card {

        padding: 24px;

    }

    .booking-card h2 {

        font-size: 28px;

    }

}

@media(max-width:480px) {

    .booking-card {

        border-radius: 20px;

    }

    .booking-card h2 {

        font-size: 24px;

    }

    .card-subtitle {

        font-size: 11px;

        letter-spacing: 1px;

    }

}

/*=========================================================
ABOUT CARD
=========================================================*/

.about-card {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    position: relative;
    background: url('../img/tiruvannamalai.webp');
    background-size: cover;
    background-position: center;

}

/*=========================================================
ABOUT CONTENT
=========================================================*/

.about-content {

    position: relative;

    z-index: 2;

    margin-bottom: 28px;

}

.about-content p {

    margin: 0 0 18px;

    color: #fff;

    font-size: 18px;

    line-height: 1.9;
    font-weight: 600;

}

.about-content strong {

    color: #8A5B18;

    font-weight: 700;

}

/*=========================================================
READ MORE BUTTON
=========================================================*/

.gold-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 30px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .5px;

    color: #fff;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #B8872D);

    box-shadow:
        0 12px 25px rgba(184, 135, 45, .28);

    transition: .35s;

}

.gold-btn i {

    transition: .35s;

}

.gold-btn:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(184, 135, 45, .35);

}

.gold-btn:hover i {

    transform: translateX(6px);

}


.green-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 30px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .5px;

    color: #fff;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #B8872D);

    box-shadow:
        0 12px 25px rgba(184, 135, 45, .28);

    transition: .35s;

}

.green-btn i {

    transition: .35s;

}

.green-btn:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(184, 135, 45, .35);

}

.green-btn:hover i {

    transform: translateX(6px);

}


.white-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 30px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .5px;

    color: #fff;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #B8872D);

    box-shadow:
        0 12px 25px rgba(184, 135, 45, .28);

    transition: .35s;

}

.white-btn i {

    transition: .35s;

}

.white-btn:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(184, 135, 45, .35);

}

.white-btn:hover i {

    transform: translateX(6px);

}

/*=========================================================
TEMPLE IMAGE
=========================================================*/

.about-image {

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    height: 420px;

    background: #f8f5ef;

}

.about-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center bottom;

    transition: 1.2s ease;

    animation: templeFloat 8s ease-in-out infinite;

}

/*=========================================================
OVERLAY
=========================================================*/

.image-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, .05) 0%,
            rgba(255, 255, 255, .10) 35%,
            rgba(0, 0, 0, .12) 70%,
            rgba(0, 0, 0, .30) 100%);

    pointer-events: none;

}

/*=========================================================
BOTTOM FADE
=========================================================*/

.about-image::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100px;

    background: linear-gradient(180deg,
            transparent,
            rgba(255, 253, 248, .95));

    z-index: 2;

}

/*=========================================================
TOP GLOW
=========================================================*/

.about-image::after {

    content: "";

    position: absolute;

    right: -80px;

    top: -60px;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(255, 255, 255, .25),
            transparent 70%);

    pointer-events: none;

}

/*=========================================================
HOVER
=========================================================*/

.about-card:hover .about-image img {

    transform: scale(1.08);

}

.about-card:hover .image-overlay {

    background: linear-gradient(180deg,
            rgba(255, 255, 255, .02),
            rgba(0, 0, 0, .08),
            rgba(0, 0, 0, .35));

}

/*=========================================================
DECORATIVE GOLD LINE
=========================================================*/

.about-content::after {

    content: "";

    display: block;

    width: 90px;

    height: 4px;

    margin-top: 24px;

    border-radius: 30px;

    background: linear-gradient(90deg,
            #B8872D,
            #F5E4A6);

}

/*=========================================================
FLOATING GOLD CIRCLES
=========================================================*/

.about-card::after {

    content: "";

    position: absolute;

    top: -80px;

    right: -80px;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(231, 199, 108, .14),
            transparent 72%);

    pointer-events: none;

}

/*=========================================================
ANIMATION
=========================================================*/

@keyframes templeFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .about-image {

        height: 360px;

    }

}

@media(max-width:768px) {

    .about-content {

        text-align: center;

    }

    .about-content::after {

        margin: 24px auto 0;

    }

    .about-image {

        height: 320px;

    }

    .gold-btn, .green-btn, .white-btn {

        margin: auto;
        font-size: 24px;

    }

}

@media(max-width:480px) {

    .about-image {

        height: 260px;

        border-radius: 18px;

    }

    .about-content p {

        font-size: 15px;

        line-height: 1.8;

    }

    .gold-btn, .green-btn, .white-btn {

        padding: 12px 24px;

        font-size: 24px;

    }

}

/*=========================================================
BOOK WITH CONFIDENCE
=========================================================*/

.confidence-card {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: start;

}

/*=========================================================
HEADER
=========================================================*/

.confidence-header {

    margin-bottom: 28px;

}

.confidence-header p {

    margin: 10px 0 0;

    color: #666;

    font-size: 15px;

    line-height: 1.8;

}

/*=========================================================
BODY
=========================================================*/

.confidence-body {

    display: grid;

    grid-template-columns: 1fr;

    align-items: center;

    gap: 24px;

    margin-bottom: 28px;

}

/*=========================================================
FEATURE LIST
=========================================================*/

.confidence-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.feature-item {

    display: flex;

    align-items: center;

    gap: 14px;

    color: #333;

    font-size: 18px;

    font-weight: 600;

    transition: .35s;

}

.feature-item i {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #F5E4A6);

    color: #fff;

    font-size: 15px;

    box-shadow:

        0 8px 18px rgba(184, 135, 45, .25);

}

.feature-item:hover {

    transform: translateX(8px);

    color: #8A5B18;

}

.feature-item:hover i {

    transform: rotate(10deg) scale(1.1);

}

/*=========================================================
MOBILE MOCKUP
=========================================================*/

.mobile-preview {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}

.mobile-preview img {

    width: 250px;

    max-width: 100%;

    display: block;

    filter:

        drop-shadow(0 18px 35px rgba(0, 0, 0, .18));

    animation: phoneFloat 6s ease-in-out infinite;

}

/*=========================================================
PAYMENT BOX
=========================================================*/

.payment-box {

    padding-top: 24px;

    border-top: 1px solid rgba(200, 160, 68, .15);

}

.payment-box h4 {

    margin: 0 0 18px;

    text-align: center;

    font-size: 22px;

    font-family: var(--ff-heading);

    color: #8A5B18;

}

.payment-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 12px;

}

.payment-grid img {

    width: 100%;

    max-width: 70px;

    margin: auto;

    transition: .35s;

    filter: grayscale(10%);

}

.payment-grid img:hover {

    transform: translateY(-6px) scale(1.08);

    filter: none;

}

/*=========================================================
HOVER EFFECT
=========================================================*/

.confidence-card:hover .mobile-preview img {

    transform: scale(1.05);

}

.confidence-card:hover .secure-badge {

    transform: rotate(8deg);

}

/*=========================================================
ANIMATIONS
=========================================================*/

@keyframes phoneFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes badgePulse {

    0% {

        box-shadow: 0 12px 30px rgba(0, 0, 0, .25);

    }

    50% {

        box-shadow: 0 20px 45px rgba(216, 180, 90, .35);

    }

    100% {

        box-shadow: 0 12px 30px rgba(0, 0, 0, .25);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .confidence-body {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .confidence-list {

        align-items: left;

    }

    .mobile-preview {

        margin-top: 25px;

    }

    .payment-grid {

        grid-template-columns: repeat(5, 1fr);

    }

}

@media(max-width:768px) {

    .mobile-preview img {

        width: 150px;

    }

    .secure-badge {

        width: 95px;

        height: 95px;

        right: 5px;

        bottom: 0;

    }

    .secure-badge strong {

        font-size: 26px;

    }

    .payment-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}

@media(max-width:480px) {

    .feature-item {

        font-size: 25px;

    }

    .feature-item i {

        width: 30px;

        height: 30px;

        font-size: 13px;

    }

    .payment-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .payment-box h4 {

        font-size: 20px;

    }

}

/*=========================================================
ENQUIRY CARD
=========================================================*/

.enquiry-card {

    position: relative;

}

/*=========================================================
FORM
=========================================================*/

.hotel-form {

    margin-top: 10px;

}

.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 22px;

}

/*=========================================================
FORM GROUP
=========================================================*/

.form-group {

    position: relative;

}

.form-group.full {

    grid-column: 1/-1;

}

/*=========================================================
INPUTS
=========================================================*/

.form-group input,
.form-group textarea,
.form-group number,
.form-group date {

    width: 100%;

    padding: 18px 18px 16px;

    border-radius: 18px;

    border: 1px solid rgba(200, 160, 68, .18);

    background: #FFFDF8;

    font-size: 15px;

    color: #333;

    outline: none;

    transition: .35s;

    resize: none;

    font-family: inherit;

}

.form-group textarea {

    min-height: 140px;

}

/*=========================================================
PLACEHOLDER LABEL
=========================================================*/

.form-group label {

    position: absolute;

    left: 18px;

    top: 18px;

    color: #888;

    font-size: 14px;

    pointer-events: none;

    transition: .25s ease;

    background: #FFFDF8;

    padding: 0 6px;

}

/*=========================================================
FLOATING LABEL
=========================================================*/

.form-group input:focus,
.form-group textarea:focus,

.form-group input:valid,
.form-group textarea:valid {

    border-color: #C89F45;

    box-shadow:

        0 0 0 4px rgba(200, 159, 69, .10);

    background: #fff;

}

.form-group input:focus+label,
.form-group textarea:focus+label,

.form-group input:valid+label,
.form-group textarea:valid+label {

    top: -10px;

    left: 14px;

    font-size: 12px;

    color: #B8872D;

    font-weight: 700;

}

/*=========================================================
SUBMIT BUTTON
=========================================================*/

.submit-btn {

    margin-top: 30px;

    width: 100%;

    height: 60px;

    border: none;

    border-radius: 60px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #F5E4A6);

    color: #fff;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

    box-shadow:

        0 15px 35px rgba(184, 135, 45, .28);

    transition: .35s;

}

.submit-btn i {

    transition: .35s;

}

.submit-btn:hover {

    transform: translateY(-5px);

    box-shadow:

        0 22px 45px rgba(184, 135, 45, .35);

}

.submit-btn:hover i {

    transform: translateX(6px);

}

/*=========================================================
INPUT ICON GLOW
=========================================================*/

.form-group::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 18px;

    pointer-events: none;

    opacity: 0;

    transition: .35s;

    box-shadow:

        0 0 25px rgba(200, 159, 69, .15);

}

.form-group:focus-within::after {

    opacity: 1;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .form-grid {

        grid-template-columns: 1fr;

    }

    .form-group.full {

        grid-column: auto;

    }

}

@media(max-width:768px) {

    .form-group input,
    .form-group textarea {

        padding: 16px;

        font-size: 14px;

    }

    .submit-btn {

        height: 56px;

        font-size: 15px;

    }

}

@media(max-width:480px) {

    .submit-btn {

        height: 52px;

        font-size: 14px;

        letter-spacing: .5px;

    }

    .form-group label {

        font-size: 13px;

    }

}

/*=========================================================
LUXURY PARTICLES
=========================================================*/

.sp-booking-particles {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}

.sp-booking-particles span {

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #E7C76C;

    opacity: .75;

    box-shadow:

        0 0 12px #E7C76C,

        0 0 26px rgba(231, 199, 108, .65);

    animation: bookingParticle 11s linear infinite;

}

.sp-booking-particles span:nth-child(1) {
    left: 6%;
    top: 15%;
    animation-duration: 8s;
}

.sp-booking-particles span:nth-child(2) {
    left: 18%;
    top: 75%;
    animation-duration: 11s;
}

.sp-booking-particles span:nth-child(3) {
    left: 34%;
    top: 25%;
    animation-duration: 9s;
}

.sp-booking-particles span:nth-child(4) {
    left: 50%;
    top: 80%;
    animation-duration: 12s;
}

.sp-booking-particles span:nth-child(5) {
    left: 68%;
    top: 18%;
    animation-duration: 10s;
}

.sp-booking-particles span:nth-child(6) {
    left: 82%;
    top: 58%;
    animation-duration: 13s;
}

.sp-booking-particles span:nth-child(7) {
    left: 95%;
    top: 32%;
    animation-duration: 8.5s;
}

/*=========================================================
DECORATIVE RINGS
=========================================================*/

.booking-ring {

    position: absolute;

    border-radius: 50%;

    border: 2px solid rgba(231, 199, 108, .15);

    pointer-events: none;

    animation: bookingRotate 34s linear infinite;

}

.booking-ring.one {

    width: 520px;

    height: 520px;

    top: -220px;

    right: -180px;

}

.booking-ring.two {

    width: 320px;

    height: 320px;

    bottom: -120px;

    left: -120px;

    animation-direction: reverse;

}

/*=========================================================
CORNER GLOW
=========================================================*/

.booking-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    background: radial-gradient(circle,

            rgba(231, 199, 108, .16),

            transparent 72%);

}

.booking-glow.left {

    width: 340px;

    height: 340px;

    left: -120px;

    top: 0;

}

.booking-glow.right {

    width: 280px;

    height: 280px;

    right: -90px;

    bottom: -80px;

}

/*=========================================================
IMAGE SHINE
=========================================================*/

.about-image {

    position: relative;

}

.about-image::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 40%;

    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    transition: 1s;

}

.about-card:hover .about-image::after {

    left: 160%;

}

/*=========================================================
PAYMENT LOGO EFFECT
=========================================================*/

.payment-grid img {

    transition: .35s;

}

.payment-grid img:hover {

    filter:

        drop-shadow(0 8px 16px rgba(200, 160, 68, .25));

}

/*=========================================================
BUTTON SHIMMER
=========================================================*/

.gold-btn,

.submit-btn {

    position: relative;

    overflow: hidden;

}

.gold-btn::before,

.submit-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 45%;

    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    transition: .8s;

}

.gold-btn:hover::before,

.submit-btn:hover::before {

    left: 150%;

}

/*=========================================================
SCROLL REVEAL
=========================================================*/

.booking-card {

    opacity: 0;

    transform: translateY(50px);

}

.booking-card.show {

    opacity: 1;

    transform: translateY(0);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

/*=========================================================
KEYFRAMES
=========================================================*/

@keyframes bookingParticle {

    0% {

        transform: translateY(40px) scale(.5);

        opacity: 0;

    }

    25% {

        opacity: 1;

    }

    80% {

        opacity: .85;

    }

    100% {

        transform: translateY(-130px) scale(1.5);

        opacity: 0;

    }

}

@keyframes bookingRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .booking-ring {

        display: none;

    }

}

@media(max-width:768px) {

    .sp-booking-particles,

    .booking-glow {

        display: none;

    }

}

@media(prefers-reduced-motion:reduce) {

    .booking-card,

    .booking-ring,

    .sp-booking-particles span,

    .gold-btn,

    .submit-btn {

        animation: none !important;

        transition: none !important;

    }

}

.btn-ripple {

    position: absolute;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .55);

    transform: translate(-50%, -50%) scale(0);

    animation: ripple .6s ease-out forwards;

    pointer-events: none;

}

@keyframes ripple {

    to {

        transform: translate(-50%, -50%) scale(18);

        opacity: 0;

    }

}

/*=========================================================
SREYA PALACE FOOTER
=========================================================*/

.sp-footer {

    position: relative;

    overflow: hidden;

    background: linear-gradient(180deg,
            #FFFDF8 0%,
            #FFF9F1 55%,
            #FFF5E8 100%);

    border-top: 1px solid rgba(200, 160, 68, .20);

}

/*=========================================================
BACKGROUND GLOW
=========================================================*/

.sp-footer::before {

    content: "";

    position: absolute;

    top: -220px;

    left: -220px;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(231, 199, 108, .15),
            transparent 72%);

    pointer-events: none;

}

.sp-footer::after {

    content: "";

    position: absolute;

    right: -180px;

    bottom: -180px;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(200, 160, 68, .12),
            transparent 75%);

    pointer-events: none;

}

/*=========================================================
MAIN WRAPPER
=========================================================*/

.footer-wrapper {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:

        1.25fr .95fr 1fr .95fr;

    overflow: hidden;

    border-radius: 28px;

    background: rgba(255, 255, 255, .92);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(200, 160, 68, .20);

    box-shadow:

        0 18px 45px rgba(0, 0, 0, .08);

}

/*=========================================================
TOP GOLD BORDER
=========================================================*/

.footer-wrapper::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg,
            #B8872D,
            #D8B45A,
            #F5E4A6,
            #D8B45A,
            #B8872D);

}

/*=========================================================
SHINE EFFECT
=========================================================*/

.footer-wrapper::after {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 42%;

    height: 100%;

    transform: skewX(-25deg);

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: 1.1s;

}

.footer-wrapper:hover::after {

    left: 160%;

}

/*=========================================================
COMMON COLUMN
=========================================================*/

.footer-brand,
.footer-links,
.footer-contact,
.footer-social {

    position: relative;

    padding: 40px 35px;

    min-height: 330px;

}

.footer-links,
.footer-contact,
.footer-social {

    border-left: 1px solid rgba(200, 160, 68, .12);

}

/*=========================================================
SECTION TITLE
=========================================================*/

.footer-links h3,
.footer-contact h3,
.footer-social h3 {

    margin: 0 0 28px;

    color: #8A5B18;

    font-size: 30px;

    font-family: var(--ff-heading);

    font-weight: 700;

    position: relative;

}

.footer-links h3::after,
.footer-contact h3::after,
.footer-social h3::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 70px;

    height: 3px;

    border-radius: 20px;

    background: linear-gradient(90deg,
            #B8872D,
            #F5E4A6);

}

/*=========================================================
CARD HOVER
=========================================================*/

.footer-brand,
.footer-links,
.footer-contact,
.footer-social {

    transition: .35s ease;

}

.footer-brand:hover,
.footer-links:hover,
.footer-contact:hover,
.footer-social:hover {

    background: rgba(255, 255, 255, .45);

}

/*=========================================================
ENTRANCE ANIMATION
=========================================================*/

.footer-brand,
.footer-links,
.footer-contact,
.footer-social {

    opacity: 0;

    transform: translateY(40px);

    animation: footerFade .9s ease forwards;

}

.footer-links {

    animation-delay: .15s;

}

.footer-contact {

    animation-delay: .3s;

}

.footer-social {

    animation-delay: .45s;

}

.footer-social {
    background: url(../img/temple.webp);
    background-position: bottom;
    background-size: cover;
}

@keyframes footerFade {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .footer-wrapper {

        grid-template-columns:

            1fr 1fr;

    }

    .footer-social {

        grid-column: 1/-1;

    }

}

@media(max-width:991px) {

    .footer-wrapper {

        grid-template-columns: 1fr;

    }

    .footer-brand,
    .footer-links,
    .footer-contact,
    .footer-social {

        border-left: none;

        border-bottom: 1px solid rgba(200, 160, 68, .12);

        min-height: auto;

    }

    .footer-social {

        border-bottom: none;

    }

}

@media(max-width:768px) {

    .footer-brand,
    .footer-links,
    .footer-contact,
    .footer-social {

        padding: 28px 22px;

    }

    .footer-links h3,
    .footer-contact h3,
    .footer-social h3 {

        font-size: 24px;

    }

    .footer-wrapper {

        border-radius: 22px;

    }

}

@media(max-width:480px) {

    .footer-wrapper {

        border-radius: 18px;

    }

    .footer-links h3,
    .footer-contact h3,
    .footer-social h3 {

        font-size: 22px;

    }

}

/*=========================================================
LEFT BRAND PANEL
=========================================================*/

.footer-brand {

    position: relative;

    background: linear-gradient(135deg,
            #B8872D 0%,
            #C89F45 40%,
            #D8B45A 70%,
            #B8872D 100%);

    color: #fff;

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}

/* Decorative Glow */

.footer-brand::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    top: -120px;

    right: -120px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(255, 255, 255, .18),
            transparent 70%);

}

.footer-brand::after {

    content: "";

    position: absolute;

    left: -80px;

    bottom: -80px;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(255, 255, 255, .12),
            transparent 70%);

}

/*=========================================================
LOGO
=========================================================*/

.footer-logo {

    position: relative;

    z-index: 2;

    margin-bottom: 22px;
    background: #fff;
    border-radius: 100%;
    padding: 20px;

}

.footer-logo img {

    width: 230px;

    transition: .4s;

}

.footer-brand:hover .footer-logo img {

    transform: scale(1.08) rotate(-2deg);

}

.footer-brand:hover p {
    color: #000;
}

.footer-brand:hover .brand-divider {
    width: 180px;
    height: 2px;
    margin: 20px auto;
    background: linear-gradient(90deg, transparent, rgb(200 159 69 / 95%), transparent);
}

/*=========================================================
HOTEL NAME
=========================================================*/

.footer-brand h2 {

    margin: 0;

    color: #fff;

    font-family: var(--ff-heading);

    font-size: 42px;

    font-weight: 700;

    letter-spacing: 2px;

}

.footer-brand span {

    display: block;

    margin-top: 6px;

    font-size: 14px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #FFF6D5;

}

/*=========================================================
DIVIDER
=========================================================*/

.brand-divider {

    width: 180px;

    height: 2px;

    margin: 20px auto;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .95),
            transparent);

}

/*=========================================================
TAGLINES
=========================================================*/

.footer-brand p {

    margin: 8px 0;

    font-size: 17px;

    line-height: 1.8;

    color: #FFFDF8;

}

.footer-brand p span {

    display: inline;

    margin: 0 10px;

    color: #FFE08A;

    font-size: 16px;

}

/*=========================================================
QUICK LINKS
=========================================================*/

.footer-menu {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}

.footer-menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-menu li {

    margin-bottom: 16px;

}

.footer-menu a {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #444;

    text-decoration: none;

    font-size: 16px;

    transition: .35s;

}

.footer-menu a i {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FFF6E8;

    color: #B8872D;

    font-size: 13px;

    transition: .35s;

}

.footer-menu a:hover {

    color: #8A5B18;

    transform: translateX(8px);

}

.footer-menu a:hover i {

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A);

    color: #fff;

    transform: rotate(360deg);

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .footer-brand {

        padding: 45px 30px;

    }

    .footer-brand h2 {

        font-size: 34px;

    }

    .footer-logo img {

        width: 110px;

    }

}

@media(max-width:768px) {

    .footer-menu {

        grid-template-columns: 1fr;

        gap: 10px;

    }

    .footer-brand h2 {

        font-size: 28px;

    }

    .footer-brand p {

        font-size: 15px;

    }

    .brand-divider {

        width: 140px;

    }

}

@media(max-width:480px) {

    .footer-logo img {

        width: 90px;

    }

    .footer-brand h2 {

        font-size: 24px;

        letter-spacing: 1px;

    }

    .footer-brand span {

        font-size: 12px;

        letter-spacing: 2px;

    }

    .footer-menu a {

        font-size: 15px;

    }

}

/*=========================================================
CONTACT LIST
=========================================================*/

.footer-contact ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 24px;

    transition: .35s;

}

/*=========================================================
CONTACT ICON
=========================================================*/

.footer-contact li i {

    width: 52px;

    height: 52px;

    min-width: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #F5E4A6);

    color: #fff;

    font-size: 18px;

    box-shadow:
        0 10px 22px rgba(184, 135, 45, .25);

    transition: .35s;

}

.footer-contact li:hover i {

    transform: rotate(10deg) scale(1.08);

}

.footer-contact li:hover {

    transform: translateX(8px);

}

/*=========================================================
CONTACT TEXT
=========================================================*/

.footer-contact a {

    color: #444;

    text-decoration: none;

    transition: .3s;

}

.footer-contact span {

    color: #555;

    line-height: 1.8;

}

.footer-contact a:hover {

    color: #8A5B18;

}

/*=========================================================
SOCIAL ICONS
=========================================================*/

.social-icons {

    display: flex;

    flex-wrap: balance;

    gap: 14px;

    margin-bottom: 28px;

}

.social-icons a {

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FFF6E8;

    border: 1px solid rgba(200, 160, 68, .15);

    color: #B8872D;

    text-decoration: none;

    font-size: 22px;

    transition: .35s;

    position: relative;

    overflow: hidden;

}

/* Shine */

.social-icons a::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 45%;

    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .5),
            transparent);

    transition: .7s;

}

.social-icons a:hover::before {

    left: 150%;

}

.social-icons a:hover {

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #F5E4A6);

    color: #fff;

    transform: translateY(-6px);

    box-shadow:
        0 18px 35px rgba(184, 135, 45, .30);

}

/*=========================================================
TEMPLE IMAGE
=========================================================*/

.footer-temple {

    position: relative;

    margin-top: 25px;

    text-align: center;

}

.footer-temple img {

    width: 100%;

    max-width: 240px;

    display: block;

    margin: auto;

    opacity: .95;

    transition: 1s;

    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, .12));

}

.footer-social:hover .footer-temple img {

    transform: translateY(-8px) scale(1.05);

}

/*=========================================================
GLOW
=========================================================*/

.footer-temple::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -10px;

    transform: translateX(-50%);

    width: 170px;

    height: 35px;

    border-radius: 50%;

    background: radial-gradient(ellipse,
            rgba(200, 160, 68, .25),
            transparent 70%);

    filter: blur(8px);

}

/*=========================================================
FLOATING ICON
=========================================================*/

.footer-contact li i,

.social-icons a {

    animation: footerFloat 4s ease-in-out infinite;

}

@keyframes footerFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-4px);

    }

    100% {

        transform: translateY(0);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .footer-contact li {

        margin-bottom: 20px;

    }

    .footer-temple img {

        max-width: 220px;

    }

}

@media(max-width:768px) {

    .footer-contact li {

        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 12px;

    }

    .social-icons {

        justify-content: center;

    }

    .footer-temple {

        margin-top: 20px;

    }

    .footer-temple img {

        max-width: 180px;

    }

}

@media(max-width:480px) {

    .social-icons a {

        width: 48px;

        height: 48px;

        font-size: 18px;

    }

    .footer-contact li i {

        width: 46px;

        height: 46px;

        font-size: 16px;

    }

    .footer-temple img {

        max-width: 150px;

    }

}

/*=========================================================
FOOTER BOTTOM
=========================================================*/

.footer-bottom {

    position: relative;

    margin-top: 40px;

    padding: 22px 0;

    background: linear-gradient(135deg,
            #8A5B18,
            #B8872D,
            #C89F45);

    overflow: hidden;

}

.footer-bottom::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .08),
            transparent);

    animation: footerShine 8s linear infinite;

}

.footer-bottom-wrap {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}

/*=========================================================
COPYRIGHT
=========================================================*/

.footer-bottom p {

    margin: 0;

    color: #fff;

    font-size: 15px;

    letter-spacing: .5px;

}

.footer-bottom p strong {

    color: #FFE9A5;

}

/*=========================================================
POLICY LINKS
=========================================================*/

.footer-policy {

    display: flex;

    align-items: center;

    gap: 16px;

}

.footer-policy span {

    color: rgba(255, 255, 255, .45);

}

.footer-policy a {

    position: relative;

    color: #fff;

    text-decoration: none;

    font-size: 15px;

    transition: .35s;

}

.footer-policy a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -4px;

    width: 0;

    height: 2px;

    background: #FFE9A5;

    transition: .35s;

}

.footer-policy a:hover {

    color: #FFE9A5;

}

.footer-policy a:hover::after {

    width: 100%;

}

/*=========================================================
FOOTER PARTICLES
=========================================================*/

.footer-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

}

.footer-particles span {

    position: absolute;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #FFE39A;

    box-shadow:

        0 0 10px #FFE39A,

        0 0 22px rgba(255, 227, 154, .55);

    animation: footerParticle linear infinite;

}

.footer-particles span:nth-child(1) {
    left: 8%;
    top: 20%;
    animation-duration: 9s;
}

.footer-particles span:nth-child(2) {
    left: 26%;
    top: 70%;
    animation-duration: 11s;
}

.footer-particles span:nth-child(3) {
    left: 48%;
    top: 30%;
    animation-duration: 8s;
}

.footer-particles span:nth-child(4) {
    left: 66%;
    top: 78%;
    animation-duration: 10s;
}

.footer-particles span:nth-child(5) {
    left: 82%;
    top: 18%;
    animation-duration: 12s;
}

.footer-particles span:nth-child(6) {
    left: 95%;
    top: 58%;
    animation-duration: 9.5s;
}

/*=========================================================
DECORATIVE RINGS
=========================================================*/

.footer-ring {

    position: absolute;

    border-radius: 50%;

    border: 2px solid rgba(255, 233, 165, .15);

    pointer-events: none;

    animation: ringRotate 35s linear infinite;

}

.footer-ring.one {

    width: 420px;

    height: 420px;

    top: -180px;

    right: -160px;

}

.footer-ring.two {

    width: 260px;

    height: 260px;

    bottom: -100px;

    left: -100px;

    animation-direction: reverse;

}

/*=========================================================
KEYFRAMES
=========================================================*/

@keyframes footerParticle {

    0% {

        transform: translateY(35px) scale(.4);

        opacity: 0;

    }

    25% {

        opacity: 1;

    }

    80% {

        opacity: .8;

    }

    100% {

        transform: translateY(-110px) scale(1.4);

        opacity: 0;

    }

}

@keyframes footerShine {

    from {

        transform: translateX(-120%);

    }

    to {

        transform: translateX(220%);

    }

}

@keyframes ringRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .footer-bottom-wrap {

        flex-direction: column;

        text-align: center;

    }

    .footer-policy {

        justify-content: center;

        flex-wrap: wrap;

    }

    .footer-ring {

        display: none;

    }

}

@media(max-width:768px) {

    .footer-bottom {

        padding: 20px 0;

    }

    .footer-bottom p {

        font-size: 14px;

    }

    .footer-policy a {

        font-size: 14px;

    }

    .footer-particles {

        display: none;

    }

}

@media(max-width:480px) {

    .footer-policy {

        gap: 10px;

    }

    .footer-policy a {

        font-size: 13px;

    }

    .footer-bottom p {

        font-size: 13px;

    }

}

/*=============================
BACK TO TOP
=============================*/

.back-to-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,
            #B8872D,
            #D8B45A,
            #F5E4A6);

    color: #fff;

    font-size: 20px;

    text-decoration: none;

    box-shadow:

        0 15px 35px rgba(184, 135, 45, .30);

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .35s;

    z-index: 9999;

}

.back-to-top.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.back-to-top:hover {

    transform: translateY(-6px);

    box-shadow:

        0 25px 45px rgba(184, 135, 45, .40);

}

/*==============================
FLOATING CONTACT
===============================*/

.floating-contact {

    position: fixed;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 14px;

    z-index: 9999;

}

/*==============================
BUTTON
===============================*/

.float-btn {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    color: #fff;

    position: relative;

    box-shadow:

        0 15px 35px rgba(0, 0, 0, .25);

    transition: .35s;

    border: 4px solid rgba(255, 255, 255, .25);

}

.float-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:

        linear-gradient(rgba(255, 255, 255, .18),

            transparent);

}

/*==============================
ICONS
===============================*/

.float-btn .icon {

    font-size: 24px;

    margin-bottom: 3px;

    position: relative;

    z-index: 2;

}

.float-btn span {

    font-size: 12px;

    font-weight: 700;

    position: relative;

    z-index: 2;
    display: none;

}

/*==============================
COLORS
===============================*/

.whatsapp {

    background: linear-gradient(180deg, #27d366, #138f3c);

}

.call {

    background: linear-gradient(180deg, #d79a1f, #9b6200);

}

.book {

    background: linear-gradient(180deg, #c1272d, #8c0d14);

}

/*==============================
HOVER
===============================*/

.float-btn:hover {

    transform: scale(1.08);

    box-shadow:

        0 20px 40px rgba(0, 0, 0, .35);

}

.float-btn:hover .icon {

    animation: bounce .6s;

}

/*==============================
ANIMATION
===============================*/

@keyframes bounce {

    0% {

        transform: translateY(0);

    }

    30% {

        transform: translateY(-8px);

    }

    60% {

        transform: translateY(2px);

    }

    100% {

        transform: translateY(0);

    }

}

/*==============================
RESPONSIVE
===============================*/

@media(max-width:768px) {

    .floating-contact {

        right: 12px;

        gap: 12px;

    }

    .float-btn {

        width: 74px;

        height: 74px;

    }

    .float-btn .icon {

        font-size: 24px;

        margin-bottom: 5px;

    }

    .float-btn span {

        font-size: 11px;

    }

}

@media(max-width:480px) {

    .float-btn {

        width: 66px;

        height: 66px;

    }

    .float-btn .icon {

        font-size: 20px;

    }

    .float-btn span {

        font-size: 10px;

    }

}