:root {
        --color1: #e6def6; 
        --color2: #ffe2f4; 
        --color3: #980800; 
        --color4: #ad4b00; 
        --color5: #b8b812; 

        --font-primary: "Inter", sans-serif; 
        --font-serif: "Georgia", "Times New Roman", serif;
      }

      
      body {
        background-color: var(--color1);
        color: #333;
        font-family: var(--font-primary);
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: var(--font-serif);
        color: var(--color3);
      }

      
      .parallax-bg-container {
        position: relative;
        overflow: hidden;
        z-index: 0;
      }

      .parallax-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 150%; 
        object-fit: cover;
        z-index: -1;
        
      }

      
      .reveal-on-scroll {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition-delay: 0.2s;
      }

      .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      
      .deco-shape-1 {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: var(--color2);
        opacity: 0.5;
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        animation: morph 15s ease-in-out infinite;
        z-index: -1;
      }

      @keyframes morph {
        0% {
          border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
          transform: rotate(0deg) scale(1);
        }
        50% {
          border-radius: 50% 50% 30% 70% / 70% 50% 50% 30%;
          transform: rotate(180deg) scale(1.1);
        }
        100% {
          border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
          transform: rotate(360deg) scale(1);
        }
      }

      
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
      }

      .faq-question.active + .faq-answer {
        
      }

      
      .faq-question::after {
        content: "+";
        font-size: 1.5rem;
        color: var(--color4);
        transition: transform 0.3s ease;
        float: right;
      }

      .faq-question.active::after {
        content: "−"; 
        transform: rotate(180deg);
      }

      
      .horizontal-scroll-container {
        display: flex;
        overflow-x: auto;
        padding: 1.5rem 0;
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: thin; 
        scrollbar-color: var(--color5) var(--color1); 
      }

      .horizontal-scroll-container::-webkit-scrollbar {
        height: 8px;
      }

      .horizontal-scroll-container::-webkit-scrollbar-track {
        background: var(--color1);
      }

      .horizontal-scroll-container::-webkit-scrollbar-thumb {
        background-color: var(--color5);
        border-radius: 4px;
      }

      .horizontal-scroll-item {
        flex: 0 0 300px; 
        margin-right: 1.5rem;
      }

      
      #burger-btn span {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px 0;
        background-color: var(--color3);
        transition: all 0.3s ease-in-out;
      }

      #burger-btn.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
      }
      #burger-btn.open span:nth-child(2) {
        opacity: 0;
      }
      #burger-btn.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
      }

      
      .notification {
        position: fixed;
        bottom: 30px;
        right: 30px;
        padding: 16px 24px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        max-width: 400px;
        font-size: 16px;
        line-height: 1.5;
      }

      .notification.show {
        opacity: 1;
        transform: translateY(0);
      }

      .notification.success {
        background-color: var(--color5);
        color: white;
      }

      .notification.error {
        background-color: var(--color3);
        color: white;
      }