
.text-theme {
    background: linear-gradient(90deg, #c68346, #ffb347);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


  
       .text-aquablue{
          color: #007575;
       } 
        .cursor {
            background:#ffb347;
  width: 20px;
  height: 20px;
  border: 2px solid #ffb347;
  border-radius: 50%;
  position: fixed;
  pointer-events: none; /* Essential: allows clicking "through" the circle */
  z-index: 9999;
  
  /* Centering the circle on the mouse tip */
  transform: translate(-50%, -50%);
  
  /* This creates the "trailing" animation effect */
  transition: transform 0.1s ease-out;
}



.highlight {
    background-color: #007575; /* Soft blue highlight from image */
    padding: 2px 5px;
}


 :root {
           
            --accent-gold: #c79538;
           
           
            
            --brand-blue :#222;
             --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.15);
            --glass-blur: blur(20px);
            --bg-color: #fff;
            --card-grey: #f4f4f4;
            --accent-black: #222;
            --radius: 32px;
            --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            --primary-green: #e08002; 
            --accent-gold: #c5a059;
            --map-bg: #8ba8b1;
            --accent: #b57a44;
            --dark-accent: #7d4d23;
            --gold: #e08002;
            --white: #ffffff;
            --dark-overlay: rgba(0, 0, 0, 0.4);
             --primary-teal: #5b8a97;
            --accent-gold: #e08002;
            --glass: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2);
            --dark-bg: #1a1a1a;
            --header-bg-color: #eeebe7;
            --header-text-dark: #1a1a1a;
            --header-btn-dark: #3d3935;
            --header-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }



    html,body{
    overflow-x: hidden;
    }
        body {
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            background-color: #fff;
        }

/* Main Button Style */
.btn-book-main {
    display: inline-flex;
    align-items: center;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: white;
    text-decoration: none;
    padding: 8px 8px 8px 24px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    transition: 0.3s;
}

.arrow-circle {
    background: white;
    color: black;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 15px;
}
/* Base state of the button */
.btn-book-main {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

/* Base state of the icon circle */
.arrow-circle {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Base state of the icon itself */
.arrow-circle i {
    transition: transform 0.4s ease;
    display: inline-block;
}

/* HOVER EFFECTS */
.btn-book-main:hover {
    background: rgba(255, 255, 255, 0.2); /* Lighten the glass effect */
    color: #ffffff;
    padding-right: 10px; /* Expands the button slightly */
}

.btn-book-main:hover .arrow-circle {
    background: #000; /* Darken circle or change to a brand color */
    color: #fff;
    transform: scale(1.1); /* Slightly enlarge the circle */
}

.btn-book-main:hover .arrow-circle i {
    /* Rotates the arrow to point straight right or gives it a 'kick' */
    transform: rotate(45deg) translate(2px, -2px); 
}
.btn-book-main:hover .arrow-circle i {
    animation: arrow-slide 0.4s forwards;
}

@keyframes arrow-slide {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    45% {
        transform: translate(15px, -15px);
        opacity: 0;
    }
    46% {
        transform: translate(-15px, 15px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}