/* ==================== CSS VARIABLES ==================== */

 :root {

   --background: hsl(38, 35%, 97%);

   --foreground: hsl(20, 25%, 12%);

   --card: hsl(38, 30%, 95%);

   --primary: hsl(24, 75%, 42%);

   --primary-fg: hsl(40, 40%, 97%);

   --secondary: hsl(38, 25%, 88%);

   --muted: hsl(38, 18%, 91%);

   --muted-fg: hsl(20, 12%, 40%);

   --accent: hsl(15, 80%, 48%);

   --border: hsl(32, 20%, 82%);

   --gold: hsl(38, 85%, 52%);

   --warm-brown: hsl(20, 35%, 22%);

   --cream: hsl(40, 45%, 93%);

   --saffron: hsl(24, 90%, 55%);

   --radius: 0.75rem;

 }



 /* ==================== RESET & BASE ==================== */

 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {

   font-family: 'Jost', sans-serif;

   background: var(--background);

   color: var(--foreground);

   -webkit-font-smoothing: antialiased;

   overflow-x: hidden;

 }

 h1,
 h2,
 h3,
 h4 {

   font-family: 'Cormorant Garamond', Georgia, serif;

   letter-spacing: 0.05em;

 }

 img {
   display: block;
   max-width: 100%;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 ul {
   list-style: none;
 }

 button,
 input,
 textarea {
   font-family: inherit;
 }



 /* ==================== UTILITIES ==================== */

 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
 }

 .ornament-line {

   display: inline-block;

   width: 60px;
   height: 2px;

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

 }

 .text-gradient-saffron {

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

   -webkit-background-clip: text;

   -webkit-text-fill-color: transparent;

   background-clip: text;

 }

 .section-label {

   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;

   margin-bottom: 1rem;

 }

 .section-label span {

   font-family: 'Jost', sans-serif;

   font-size: 0.7rem;
   font-weight: 500;

   letter-spacing: 0.3em;
   text-transform: uppercase;

   color: var(--gold);

 }



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

 nav {

   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 50;

   background: hsla(38, 35%, 97%, 0.9);

   backdrop-filter: blur(12px);

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

 }

 .nav-inner {

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

   padding: 0.75rem 1rem;

 }

 .nav-logo img {

   height: 70px;
   width: auto;

 }

 .nav-links {

   display: flex;
   align-items: center;
   gap: 2rem;

 }

 .nav-links a {

   font-family: 'Jost', sans-serif;

   font-size: 0.8rem;
   font-weight: 500;

   letter-spacing: 0.2em;
   text-transform: uppercase;

   color: hsla(20, 25%, 12%, 0.7);

   transition: color 0.2s;

 }

 .nav-links a:hover {
   color: var(--primary);
 }

 .nav-actions {

   display: flex;
   align-items: center;
   gap: 1rem;

 }

 .nav-phone {

   display: flex;
   align-items: center;
   gap: 0.4rem;

   font-size: 0.8rem;
   color: var(--muted-fg);

   transition: color 0.2s;

 }

 .nav-phone:hover {
   color: var(--primary);
 }

 .nav-phone svg {
   width: 14px;
   height: 14px;
 }

 .btn {

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

   font-family: 'Jost', sans-serif;

   font-size: 0.7rem;
   font-weight: 500;

   letter-spacing: 0.2em;
   text-transform: uppercase;

   padding: 0.5rem 1.5rem;

   border-radius: 9999px;

   border: none;
   cursor: pointer;

   transition: opacity 0.2s, transform 0.1s;

 }

 .btn:active {
   transform: scale(0.97);
 }

 .btn-primary {
   background: var(--primary);
   color: var(--primary-fg);
 }

 .btn-primary:hover {
   opacity: 0.9;
 }

 .btn-outline {

   background: transparent;

   border: 1px solid hsla(40, 40%, 97%, 0.4);

   color: var(--primary-fg);

 }

 .btn-outline:hover {
   background: hsla(40, 40%, 97%, 0.1);
 }

 .btn-lg {
   padding: 1rem 2.5rem;
   font-size: 0.75rem;
 }

 .btn-full {
   width: 100%;
 }



 /* Mobile hamburger */

 .nav-toggle {

   display: none;
   background: none;
   border: none;
   cursor: pointer;

   color: var(--foreground);

 }

 .nav-toggle svg {
   width: 24px;
   height: 24px;
 }

 .nav-mobile {

   display: none;

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

   padding: 1rem 1rem 1.5rem;

 }

 .nav-mobile.open {
   display: block;
 }

 .nav-mobile ul {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .nav-mobile ul a {

   font-family: 'Jost', sans-serif;

   font-size: 0.7rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;

   color: hsla(20, 25%, 12%, 0.7);

 }

 .nav-mobile .btn {
   margin-top: 1rem;
   border-radius: 9999px;
 }



 @media (max-width: 768px) {

   .nav-links,
   .nav-actions {
     display: none;
   }

   .nav-toggle {
     display: block;
   }

 }



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

 #home {

   position: relative;
   min-height: 100vh;

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

   overflow: hidden;

 }

 .hero-bg {

   position: absolute;
   inset: 0;

 }

 .hero-bg img {

   width: 100%;
   height: 100%;
   object-fit: cover;

 }

 .hero-overlay {

   position: absolute;
   inset: 0;

   background: linear-gradient(to bottom, hsla(20, 25%, 12%, 0.7), hsla(20, 25%, 12%, 0.4), hsla(20, 25%, 12%, 0.8));

 }

 .hero-content {

   position: relative;
   z-index: 10;

   text-align: center;
   padding: 0 1rem;

   max-width: 900px;
   margin: 0 auto;

 }

 .hero-logo {

   margin-bottom: 1.5rem;

   animation: fadeScale 1s ease forwards;

 }

 .hero-logo img {

   height: 112px;
   width: auto;
   margin: 0 auto;

   filter: brightness(0) invert(1) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));

 }

 .hero-location {

   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;

   margin-bottom: 1.5rem;

   animation: fadeUp 0.8s ease 0.5s both;

 }

 .hero-location span:not(.ornament-line) {

   font-family: 'Jost', sans-serif;

   font-size: 0.65rem;
   letter-spacing: 0.4em;
   text-transform: uppercase;

   color: var(--gold);

 }

 .hero-title {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: clamp(2.5rem, 8vw, 5rem);

   font-weight: 700;
   color: var(--primary-fg);

   letter-spacing: 0.15em;
   line-height: 1.1;

   margin-bottom: 1rem;

   animation: fadeUp 0.8s ease 0.3s both;

 }

 .hero-subtitle {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: clamp(1rem, 2.5vw, 1.4rem);

   font-style: italic;
   color: hsla(40, 40%, 97%, 0.8);

   max-width: 600px;
   margin: 0 auto 2.5rem;

   line-height: 1.6;

   animation: fadeUp 0.8s ease 0.6s both;

 }

 .hero-ctas {

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

   gap: 1rem;

   animation: fadeUp 0.8s ease 0.8s both;

 }

 .hero-scroll {

   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);

   animation: bounce 2s infinite;

 }

 .hero-scroll-indicator {

   width: 24px;
   height: 40px;

   border: 2px solid hsla(40, 40%, 97%, 0.4);
   border-radius: 9999px;

   display: flex;
   justify-content: center;
   padding-top: 8px;

 }

 .hero-scroll-dot {

   width: 6px;
   height: 12px;

   background: var(--gold);
   border-radius: 9999px;

 }



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

 #about {

   padding: 6rem 0;
   background: var(--background);
   overflow: hidden;

 }

 .about-header {
   text-align: center;
   margin-bottom: 5rem;
 }

 .about-header h2 {

   font-size: clamp(1.8rem, 4vw, 3.2rem);
   font-weight: 700;

   color: var(--foreground);

 }

 .about-header p {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 1.1rem;
   font-style: italic;

   color: var(--muted-fg);
   margin-top: 0.75rem;

 }

 .about-grid {

   display: grid;
   grid-template-columns: 1fr 1fr;

   gap: 5rem;
   align-items: center;

   margin-bottom: 5rem;

 }

 @media (max-width: 900px) {

   .about-grid {
     grid-template-columns: 1fr;
     gap: 4rem;
   }

 }

 .about-image-wrap {

   position: relative;

   opacity: 0;
   transform: translateX(-40px);

   transition: opacity 0.8s, transform 0.8s;

 }

 .about-image-wrap.visible {
   opacity: 1;
   transform: translateX(0);
 }

 .about-image {

   border-radius: var(--radius);
   overflow: hidden;

   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

 }

 .about-image img {

   width: 100%;
   height: 400px;
   object-fit: cover;

 }

 .about-image-overlay {

   position: absolute;
   inset: 0;

   background: linear-gradient(to top, hsla(20, 25%, 12%, 0.3), transparent);

   border-radius: var(--radius);

 }

 .about-rating-card {

   position: absolute;
   bottom: -2rem;
   right: 1rem;

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

   border-radius: var(--radius);
   padding: 1.25rem;

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

   display: flex;
   align-items: center;
   gap: 1rem;

 }

 .about-rating-icon {

   width: 48px;
   height: 48px;

   border-radius: 50%;
   background: hsla(24, 90%, 55%, 0.1);

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

 }

 .about-rating-icon svg {
   width: 24px;
   height: 24px;
   fill: var(--saffron);
   color: var(--saffron);
 }

 .about-rating-num {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 1.5rem;
   font-weight: 700;
   color: var(--foreground);

 }

 .about-rating-label {
   font-size: 0.7rem;
   color: var(--muted-fg);
 }



 .about-text-side {

   opacity: 0;
   transform: translateX(40px);

   transition: opacity 0.8s, transform 0.8s;

 }

 .about-text-side.visible {
   opacity: 1;
   transform: translateX(0);
 }

 .about-text-side h3 {

   font-size: clamp(1.4rem, 2.5vw, 2rem);

   font-weight: 600;
   color: var(--foreground);

   line-height: 1.3;
   margin-bottom: 1.5rem;

 }

 .about-text-side p {

   font-size: 0.9rem;
   color: var(--muted-fg);

   line-height: 1.8;
   margin-bottom: 1.25rem;

 }

 .stats-row {

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

   gap: 1rem;
   margin-top: 2rem;

 }

 .stat-item {
   text-align: center;
 }

 .stat-value {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 1.8rem;
   font-weight: 700;
   color: var(--primary);

 }

 .stat-label {

   font-size: 0.65rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;

   color: var(--muted-fg);
   margin-top: 0.25rem;

 }



 .features-header {
   text-align: center;
   margin-bottom: 2.5rem;
 }

 .features-header h3 {

   font-size: 1.5rem;
   font-weight: 600;
   color: var(--foreground);

 }

 .features-grid {

   display: grid;

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

   gap: 1.25rem;

 }

 @media (max-width: 1024px) {

   .features-grid {
     grid-template-columns: repeat(3, 1fr);
   }

 }

 @media (max-width: 600px) {

   .features-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .stats-row {
     grid-template-columns: repeat(2, 1fr);
   }

 }

 .feature-card {

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

   border-radius: var(--radius);
   padding: 1.25rem;

   text-align: center;

   transition: border-color 0.2s, box-shadow 0.2s;

   opacity: 0;
   transform: translateY(20px);

   transition: opacity 0.4s, transform 0.4s, border-color 0.2s, box-shadow 0.2s;

 }

 .feature-card.visible {
   opacity: 1;
   transform: translateY(0);
 }

 .feature-card:hover {
   border-color: hsla(24, 90%, 55%, 0.4);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .feature-icon {

   width: 48px;
   height: 48px;
   border-radius: 50%;

   background: hsla(24, 90%, 55%, 0.1);

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

   margin: 0 auto 0.75rem;

   transition: background 0.2s;

 }

 .feature-card:hover .feature-icon {
   background: hsla(24, 90%, 55%, 0.2);
 }

 .feature-icon svg {
   width: 20px;
   height: 20px;
   color: var(--saffron);
 }

 .feature-card h4 {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 0.85rem;
   font-weight: 600;

   color: var(--foreground);
   margin-bottom: 0.35rem;

 }

 .feature-card p {
   font-size: 0.7rem;
   color: var(--muted-fg);
   line-height: 1.5;
 }



 /* ==================== ROOMS ==================== */

 #rooms {

   padding: 6rem 0;

   background: var(--cream);

 }

 .rooms-header {
   text-align: center;
   margin-bottom: 4rem;
 }

 .rooms-header h2 {

   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 700;

 }

 .rooms-header p {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 1.1rem;
   font-style: italic;
   color: var(--muted-fg);
   margin-top: 0.75rem;

 }

 .rooms-grid {

   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;

 }

 @media (max-width: 900px) {

   .rooms-grid {
     grid-template-columns: repeat(2, 1fr);
   }

 }

 @media (max-width: 600px) {

   .rooms-grid {
     grid-template-columns: 1fr;
   }

 }

 .room-card {

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

   border-radius: var(--radius);
   overflow: hidden;

   transition: box-shadow 0.3s;

   opacity: 0;
   transform: translateY(30px);

   transition: opacity 0.5s, transform 0.5s, box-shadow 0.3s;

 }

 .room-card.visible {
   opacity: 1;
   transform: translateY(0);
 }

 .room-card:hover {
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }

 .room-image {

   position: relative;
   height: 220px;
   overflow: hidden;

 }

 .room-image img {

   width: 100%;
   height: 100%;
   object-fit: cover;

   transition: transform 0.5s;

 }

 .room-card:hover .room-image img {
   transform: scale(1.05);
 }

 .room-price {

   position: absolute;
   top: 1rem;
   right: 1rem;

   background: var(--primary);
   color: var(--primary-fg);

   font-family: 'Jost', sans-serif;

   font-size: 0.85rem;
   font-weight: 700;

   padding: 0.3rem 1rem;
   border-radius: 9999px;

 }

 .room-price span {
   font-weight: 400;
   font-size: 0.7rem;
 }

 .room-body {
   padding: 1.5rem;
 }

 .room-body h3 {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 1.1rem;
   font-weight: 600;

   color: var(--foreground);
   margin-bottom: 0.5rem;

 }

 .room-meta {

   display: flex;
   gap: 1rem;

   font-size: 0.8rem;
   color: var(--muted-fg);
   margin-bottom: 0.75rem;

 }

 .room-meta span {
   display: flex;
   align-items: center;
   gap: 0.3rem;
 }

 .room-meta svg {
   width: 16px;
   height: 16px;
 }

 .room-desc {

   font-size: 0.8rem;
   color: var(--muted-fg);

   line-height: 1.7;
   margin-bottom: 1rem;

 }

 .room-amenities {

   display: flex;
   gap: 0.75rem;
   flex-wrap: wrap;

   margin-bottom: 1.25rem;

 }

 .room-amenity {

   display: flex;
   align-items: center;
   gap: 0.25rem;

   font-size: 0.65rem;
   color: var(--muted-fg);

 }

 .room-amenity svg {
   width: 14px;
   height: 14px;
   color: var(--saffron);
 }



 /* ==================== TESTIMONIALS ==================== */

 #testimonials {

   padding: 6rem 0;
   background: var(--background);

 }

 .testimonials-header {
   text-align: center;
   margin-bottom: 4rem;
 }

 .testimonials-header h2 {

   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 700;

 }

 .testimonials-header p {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 1.1rem;
   font-style: italic;
   color: var(--muted-fg);
   margin-top: 0.75rem;

 }

 .testimonials-grid {

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

   gap: 2rem;
   max-width: 1000px;
   margin: 0 auto;

 }

 @media (max-width: 900px) {

   .testimonials-grid {
     grid-template-columns: 1fr;
     max-width: 480px;
   }

 }

 .testimonial-card {

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

   border-radius: var(--radius);
   padding: 2rem;

   position: relative;

   transition: box-shadow 0.3s;

   opacity: 0;
   transform: translateY(20px);

   transition: opacity 0.5s, transform 0.5s, box-shadow 0.3s;

 }

 .testimonial-card.visible {
   opacity: 1;
   transform: translateY(0);
 }

 .testimonial-card:hover {
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .testimonial-quote-icon {

   position: absolute;
   top: 1.5rem;
   right: 1.5rem;

   width: 32px;
   height: 32px;
   color: hsla(24, 90%, 55%, 0.2);

 }

 .stars {
   display: flex;
   gap: 0.2rem;
   margin-bottom: 1rem;
 }

 .star {
   width: 16px;
   height: 16px;
 }

 .star.filled {
   fill: var(--saffron);
   color: var(--saffron);
 }

 .star.empty {
   color: var(--border);
 }

 .testimonial-text {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 1.1rem;
   font-style: italic;

   color: var(--muted-fg);
   line-height: 1.6;

   margin-bottom: 1.5rem;

 }

 .testimonial-name {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 1rem;
   font-weight: 600;
   color: var(--foreground);

 }

 .testimonial-location {

   font-size: 0.75rem;
   color: var(--muted-fg);
   margin-top: 0.2rem;

 }



 /* ==================== CONTACT ==================== */

 #contact {

   padding: 6rem 0;
   background: var(--cream);

 }

 .contact-header {
   text-align: center;
   margin-bottom: 4rem;
 }

 .contact-label {

   font-size: 0.75rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;

   color: var(--gold);
   display: block;
   margin-bottom: 0.75rem;

 }

 .contact-header h2 {

   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 700;

 }

 .contact-grid {

   display: grid;
   grid-template-columns: 1fr 1fr;

   gap: 3rem;
   max-width: 1000px;
   margin: 0 auto;

 }

 @media (max-width: 768px) {

   .contact-grid {
     grid-template-columns: 1fr;
   }

 }

 .contact-info h3 {

   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 1.5rem;

 }

 .contact-info-list {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }

 .contact-info-item {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
 }

 .contact-info-icon {

   width: 40px;
   height: 40px;
   border-radius: 50%;

   background: hsla(24, 75%, 42%, 0.1);

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

 }

 .contact-info-icon svg {
   width: 20px;
   height: 20px;
   color: var(--primary);
 }

 .contact-info-label {
   font-size: 0.75rem;
   color: var(--muted-fg);
 }

 .contact-info-value {
   font-size: 0.9rem;
   color: var(--foreground);
 }

 .contact-map {

   margin-top: 2rem;
   border-radius: var(--radius);

   overflow: hidden;
   border: 1px solid var(--border);
   height: 192px;

 }

 .contact-map iframe {
   width: 100%;
   height: 100%;
   border: 0;
 }



 .contact-form {

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

   border-radius: var(--radius);
   padding: 2rem;

   opacity: 0;
   transform: translateX(30px);

   transition: opacity 0.6s, transform 0.6s;

 }

 .contact-form.visible {
   opacity: 1;
   transform: translateX(0);
 }

 .contact-form h3 {

   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 1.5rem;

 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
 }

 @media (max-width: 480px) {

   .form-row {
     grid-template-columns: 1fr;
   }

 }

 .form-group {
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
   margin-bottom: 1rem;
 }

 .form-group label {

   font-size: 0.75rem;
   color: var(--muted-fg);

 }

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

   width: 100%;

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

   border-radius: calc(var(--radius) - 2px);

   padding: 0.6rem 0.75rem;

   font-size: 0.875rem;
   color: var(--foreground);

   outline: none;
   transition: border-color 0.2s;

 }

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

   border-color: var(--primary);

 }

 .form-group textarea {
   resize: vertical;
 }

 .toast-container {

   position: fixed;
   bottom: 1.5rem;
   right: 1.5rem;
   z-index: 999;

 }

 .toast {

   background: var(--foreground);
   color: var(--primary-fg);

   padding: 1rem 1.5rem;
   border-radius: var(--radius);

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

   display: none;

   animation: slideIn 0.3s ease;

 }

 .toast.show {
   display: block;
 }

 .toast-title {
   font-weight: 600;
   margin-bottom: 0.25rem;
 }

 .toast-desc {
   font-size: 0.8rem;
   opacity: 0.8;
 }



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

 footer {

   background: var(--warm-brown);
   color: var(--cream);

   padding: 4rem 0;

 }

 .footer-grid {

   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

   gap: 3rem;
   margin-bottom: 3rem;

 }

 @media (max-width: 768px) {

   .footer-grid {
     grid-template-columns: 1fr;
     gap: 2rem;
   }

 }

 .footer-brand img {

   height: 91px;
   width: auto;
   margin-bottom: 1rem;
   display: flex;
    justify-self: center;

 }

 .footer-brand p {

   font-size: 0.8rem;
   color: hsla(40, 45%, 93%, 0.7);
   line-height: 1.7;

 }

 .footer-col h4 {

   font-family: 'Cormorant Garamond', Georgia, serif;

   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 1rem;

 }

 .footer-links {
   display: contents;
   flex-direction: column;
   gap: 0.5rem;
 }

 .footer-links a {

   font-size: 0.8rem;
   color: hsla(40, 45%, 93%, 0.7);

   transition: color 0.2s;

 }

 .footer-links a:hover {
   color: var(--gold);
 }

 .footer-contact-list {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }

 .footer-contact-item {

   display: flex;
   align-items: flex-start;
   gap: 0.75rem;

   font-size: 0.8rem;
   color: hsla(40, 45%, 93%, 0.7);

 }

 .footer-contact-item svg {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   color: var(--gold);
   margin-top: 2px;
 }

 .footer-divider {

   border: none;
   border-top: 1px solid hsla(40, 45%, 93%, 0.2);

   margin-bottom: 2rem;

 }

 .footer-bottom {

   text-align: center;

   font-size: 0.8rem;
   color: hsla(40, 45%, 93%, 0.5);

 }



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

 @keyframes fadeScale {

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

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

 }

 @keyframes fadeUp {

   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }

 }

 @keyframes bounce {

   0%,
   100% {
     transform: translateX(-50%) translateY(0);
   }

   50% {
     transform: translateX(-50%) translateY(10px);
   }

 }

 @keyframes slideIn {

   from {
     opacity: 0;
     transform: translateX(20px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }

 }