/* raleway-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v36-latin-regular.woff2') format('woff2'); 
}
/* raleway-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/raleway-v36-latin-500.woff2') format('woff2'); 
}
/* raleway-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v36-latin-700.woff2') format('woff2'); 
}

/* expletus-sans-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Expletus Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/expletus-sans-v30-latin-regular.woff2') format('woff2'); 
}
/* expletus-sans-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Expletus Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/expletus-sans-v30-latin-500.woff2') format('woff2'); 
}
/* expletus-sans-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Expletus Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/expletus-sans-v30-latin-700.woff2') format('woff2'); 
}

#cc-main .cm__btn {
    background: var(--cc-btn-secondary-bg);
    border-color: var(--cc-btn-secondary-border-color);
    color: var(--cc-btn-secondary-color);
}
#cc-main .cm__btn[data-role="all"] {
  background: #000;
  border-color: #000;
  color: #fff;
}

#page {
	width:100%;
	max-width:100%;
	position: relative;
	overflow:hidden;
}
* {
	margin:0;
	padding:0;
}





/* ROOT */

    :root {
      --deep-purple: #5c04ff;   /* Deep Purple */
      --purple: #a704ff;        /* Purple */
      --pink: #ff12b8;          /* Pink */
      --blue: #20b2f1;          /* Blue */
      --yellow: #ffbf2a;        /* Yellow *//* rgba(255, 191, 42, 1) */
      --white: #fffaf6;         /* Off White - BG */
      --text-color: #333;       /* Off Black - TEXT */
      --header-height: 60px;    /* Menu height */
    }

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

    body {
      font-family: 'Raleway', sans-serif;
      color: var(--text-color);
      background: var(--deep-purple);
      line-height: 1.5;
    

        /* Fade-in for the whole page */
    
      opacity: 0;
      animation: fadeIn 2s ease-in-out forwards;
    }

    @keyframes fadeIn {
      to { opacity: 1; }
    }

/* MENU */
    
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-height);
      background: var(--white);
      box-shadow: 0 3px 8px rgba(51,51,51,0.3); 
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5rem 0 5rem;
      z-index: 999;
    }
   
    .logo-container {
        text-decoration: none; /* Removes underline */
        color: inherit;        /* Uses the parent’s text color */
        display: flex;         /* Keeps layout like your original div */
        align-items: center;   /* Centers image and text vertically */
        cursor: pointer;
    }

    .logo-container:hover {
        text-decoration: none; /* Prevent underline on hover */
    }







    .logo-container-legal {
        text-decoration: none; /* Removes underline */
        color: inherit;        /* Uses the parent’s text color */
        display: flex;         /* Keeps layout like your original div */
        align-items: center;   /* Centers image and text vertically */
        cursor: pointer;
    }

    .logo-container-legal:hover {
        text-decoration: none; /* Prevent underline on hover */
    }










    body.welcome .logo-container-legal {
        cursor: default;
    }

    .logo-img {
      width: 50px;
      height: 50px;
      margin-right: 0.3rem;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .logo-text .main-title {
      font-family: "Expletus Sans", sans-serif;
      font-optical-sizing: auto;
      font-style: normal;
      font-weight: 700;
      font-size: 2.0rem;
      margin-top: -2px;
    }

    .logo-text .sub-title {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      margin-top: -3px;
      margin-left: 2px;
    }
   
    nav.desktop-nav {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    nav.desktop-nav ul {
      list-style: none;
      display: flex;
    }

    nav.desktop-nav ul li {
      margin: 0 1.0rem;
    }








    nav.desktop-nav ul li a {
      text-decoration: none;
      color: var(--text-color);
      font-weight: 500;
      transition: all 0.2s ease-in-out; /* Added font-weight transition */
      position: relative; /* For active indicator */
      padding-bottom: 4px; /* Space for indicator */
    }
    nav.desktop-nav ul li a::after { /* Active indicator line */
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--deep-purple);
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.2s ease-in-out;
    }
    nav.desktop-nav ul li a:hover::after,
    nav.desktop-nav ul li a.active::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }
    nav.desktop-nav ul li a:hover,
    nav.desktop-nav ul li a.active {
      color: var(--deep-purple);
      font-weight: 700;
    }








    .header-right-group {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    .header-special {
      color: var(--deep-purple);
      display: inline-block;
      padding-top: 65px;
      padding-right: 15px;
    }

    .header-special svg {
      width: 90px;
      height: 90px;
      transition: all 0.2s ease-in-out;
    }

    .header-special:hover svg,
    .header-special.active svg {
      width: 100px;
      height: 100px;
      color: var(--pink);
    }

    .lang-toggle {
      background: none;
      border: none;
      cursor: pointer;
    }

    .lang-toggle img {
      width: 30px;
      height: auto;
      outline: 2px solid var(--white);
      outline-offset: -2px;
      border-radius: 50%;
      filter: drop-shadow(0px 0px 1px var(--text-color));
      transition: all 0.2s ease-in-out;
    }

    .lang-toggle img:hover {
      transform: scale(1.2);
      outline: 2px solid var(--white);
      outline-offset: -2px;
      border-radius: 50%;
      filter: drop-shadow(0px 0px 3px var(--pink));
    }









    /* Burger Menu (Mobile Only) */
    .burger-menu {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.5rem;
      margin-right: 1rem;
      z-index: 1002; /* Above mobile menu */
    }
    .burger-menu span {
      display: block;
      width: 25px;
      height: 3px;
      background: var(--text-color);
      margin: 4px 0;
      transition: all 0.3s ease; /* Added transition for burger icon */
    }



    
    /* Style for active burger menu (X shape) */
    .burger-menu.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .burger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .burger-menu.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }







/* Mobile Menu Dropdown */
    .mobile-menu-dropdown {
      display: block; /* Keep it in the DOM */
      position: fixed; /* Change to fixed */
      top: 44px;                 /* DIFFERENT TO ORIGINAL var(--header-height) (60px)*/
      left: 0;
      right: 0;
      background: var(--white);
      /*box-shadow: 0 4px 8px rgba(0,0,0,0.15);*/
      padding: 0rem 1rem 1rem; /* Adjusted padding */
      z-index: 10; /* Below header but above content ORIGINAL WAS 999*/
      max-height: 0; /* Start hidden */
      overflow: hidden; /* Hide content when collapsed */
      transition: max-height 0.5s ease-out, padding 0.5s ease-out; /* Smooth transition */
    }
    .mobile-menu-dropdown.active {
      max-height: 100vh; /* Allow full height */
      padding: 1.5rem 1rem 1rem;
    }
    .mobile-menu-dropdown ul {
      list-style: none;
      margin-bottom: 1rem; /* Space before buttons */
    }
    .mobile-menu-dropdown ul li {
      margin-bottom: 1rem;
      text-align: center; /* Center mobile links */
    }
    .mobile-menu-dropdown ul li a {
      text-decoration: none;
      color: var(--text-color);
      font-size: 1.2rem; /* Slightly larger font */
      font-weight: 500;
      display: block; /* Make entire area clickable */
      padding: 0.5rem 0;
    }
    .mobile-menu-dropdown ul li a:hover {
        color: var(--deep-purple);
        font-weight: 700;
    }
    .mobile-menu-dropdown .mobile-special,
    .mobile-menu-dropdown .mobile-cta {
      display: block;
      margin-top: 1rem;
      text-decoration: none;
      text-align: center;
      padding: 0.8rem; /* Increased padding */
      border-radius: 5px;
      font-weight: 700;
      transition: all 0.2s ease, transform 0.2s ease;
    }
    
    .mobile-menu-dropdown .mobile-cta:hover {
      color: var(--white);
      background-color: var(--deep-purple);
      transform: scale(1.03); /* Hover effect */
    }
    .mobile-menu-dropdown .mobile-special:hover {
      color: var(--white);
      background-color: var(--deep-purple);
      transform: scale(1.03); /* Hover effect */
    }

    .mobile-menu-dropdown .mobile-special {
      background-color: var(--pink);
      color: var(--white);
    }
    .mobile-menu-dropdown .mobile-cta {
      background-color: var(--yellow);
      color: var(--text-color); /* Changed text color for better contrast */
    }











/* BUTTONS */

    .btn-menu:hover {
      background-color: var(--deep-purple);
      color: var(--white);
      transform: scale(1.05);
    }

    button {
      background-color: var(--yellow);
      color: var(--text-color);
      font-weight: 700;
      padding: 0.8rem 1.5rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      box-shadow: 0px 0px 0px rgba(255, 191, 42, 1);
      transition: all 0.2s ease-in-out;
    }

    .btn-purple {
      background-color: var(--white);
      margin-left: 2rem;
    }

 

    .btn-deep-purple:hover,
    .btn-purple:hover,
    .btn-purple-2:hover,
    .btn-pink:hover,
    .btn-blue:hover {
      color: var(--white);
      box-shadow: -5px 5px 0px rgba(255, 191, 42, 1);
    }

    .btn-deep-purple:hover {
      background-color: var(--deep-purple);
    }

    .btn-purple:hover {
      background-color: var(--purple);
    }

    .btn-purple-2:hover {
      background-color: var(--purple);
    }

    .btn-pink:hover {
      background-color: var(--pink);
    }

 

    .btn-blue:hover {
      background-color: var(--blue);
    }


/* HERO */

    .section-hero {
      height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .section-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('../img/tom-in-paradise.jpg') center/cover no-repeat;
      filter: grayscale(70%);
      z-index: 1;
    }

    .section-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, var(--pink) 50%, var(--deep-purple) 70%);
      mix-blend-mode: multiply;
      z-index: 2;
    }

    .bottom-fade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 0%);
      z-index: 3;
      pointer-events: none;
    }

    .hero-blur {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(5px);
      z-index: 4;
    }

    .hero-content {
      z-index: 5;
      max-width: 100%;
      display: block;
      align-items: left;
      justify-content: center;
      text-align: center;
    }

    #heroSub {
      transition: opacity 0.5s ease;
    }

/* ABOUT */

.section-about-hero {
      height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .section-about-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('../img/tom-in-paradise.jpg') center/cover no-repeat;
      z-index: 1;
    }

    body#about #hero .btn-deep-purple {
     margin-top: 2.5rem;
    }


/* FONT SIZES */

    p {
      font-size: 1rem;
    }

    .section-hero p {
      color: var(--white);
      width: 650px;
      max-width: 100%;
      margin: 0 auto 2rem;
    }

    .card p {
      margin: 1rem auto 0;
    }

    .review-card p {
      font-size: 0.9rem;
      padding-top: 1.0rem;
      text-align: left;
    }

    h1 {
      font-weight: 700;
      line-height: 1.1;
      font-size: 4.5rem;
      color: var(--white);
      margin-top: 3rem;
    }
    
    .section-hero h2 {
      line-height: 1.2;
      font-size: 1.7rem;
      font-weight: 300;
      color: var(--white);
      width: 650px;
      max-width: 100%;
      margin: 1rem auto 2rem;
    }

    section h2 {
      font-weight: 700;
      font-size: 3.5rem;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }

    h3 {
      font-size: 1.2rem;
      font-weight: 300;
      margin-bottom: 2.5rem;
      text-align: center;
      max-width: auto;
    }

    h4 {
      font-size: 1.5rem;
      line-height: 1.2;
      margin-bottom: 1rem;
    }

    .review-info h4 {
      text-align: left;
    }

    .section-who .card h4 {
      margin-top: 1rem;
      margin-bottom: 0.3rem;
    }

/* LEGAL */




/* Legal page specific styles */
body.legal #legal.section-legal {
  min-height: auto; /* override any 100vh height */
  height: auto !important;
  box-sizing: border-box;
  padding-left: 2.5rem;
}







body.legal #legal main h1 {
  color: inherit; /* match paragraph color */
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 1rem;
}


/* Impressum Main Content */
    main {
      margin: calc(var(--header-height) + 2rem) auto 8rem auto;
      text-align: left;
      max-width: 532px;
    }
    main h1 {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    main h2 {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 1.3rem;
      margin: 1.5rem 0 0.2rem;
    }
    main p {
      font-size: 1rem;
      margin-bottom: 1rem;
      line-height: 1.5;
    }
    main p strong {
      font-weight: 700;
    }    


body.legal ul {
  list-style-position: outside; /* bullet outside the text block */
  padding-left: 1.5em;          /* indent the whole list for bullets */
  margin-bottom: 1em;
}

body.legal ul li {
  text-indent: -0em;          /* pulls first line bullet back */
  padding-left: 0em;          /* ensures wrapped lines align with text */
}





/* LINE DIVIDER */

    hr.solid {
      border-top: 2px solid var(--deep-purple);
    }

/* SECTIONS */

    section {
      height: 100vh;
      display: flex;

      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 7.3rem;
    }

 

    section a {
      color: var(--deep-purple);
      text-decoration: underline;
    }

    section a:hover {
      font-weight: 700;
    }

    .section-why { background-color: var(--deep-purple); color: var(--white);}
    .section-what { background-color: var(--purple); color: var(--white);}
    .section-reviews { background-color: var(--blue); color: var(--white);}
    .section-who { background-color: var(--pink); color: var(--white);}
    .section-special { background-color: var(--deep-purple); color: var(--white);}
    .section-contact { background-color: var(--white); color: var(--text-color);}
    .section-legal { background-color: var(--white); color: var(--text-color);}
    .section-imprint { background-color: var(--white); color: var(--text-color);}

/* CARDS */

    .cards-container {
      display: flex;
      justify-content: center;
      color: var(--text-color);
      gap: 2.5rem;
      width: 1100px;
      max-width: auto;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-bottom: 3rem;
    }

    .card {
      background: var(--white);
      text-align: left;
      border-radius: 10px;
      flex: 1 1 calc(33.333% - 1rem);
      padding: 1.4rem 2rem 1.5rem 2rem;
      box-shadow: -8px 8px 0px rgba(255, 191, 42, 1);
    }

    .card2 {
      background: var(--white);
      text-align: left;
      border-radius: 10px;
      flex: 1 1 calc(50% - 1rem);
      padding: 1.4rem 2rem 1.5rem 2rem;
      box-shadow: -8px 8px 0px rgba(255, 191, 42, 1);
    }

    .card2 ul {
      list-style: disc inside;
      padding: 0 0 0 1.2rem;
      text-indent: -1.4em;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .card2 ul li {
      margin-bottom: 0;
    }

    .section-who .card {
      text-align: center;
      align-items: center;
    }

/* REVIEW */

    .carousel-container {
      display: flex;
      justify-content: center;
      color: var(--text-color);
      gap: 2.5rem;
      width: auto;
      max-width: auto;
      margin-bottom: 3rem;
      position: relative;
      align-items: center;
    }

    button.carousel-btn {
      background-color: var(--blue);
      color: var(--white);
      border: none;
      padding: 0rem 0rem;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      font-size: 1.5rem;
      cursor: pointer;
      transition: color 0.2s ease-in-out;
      z-index: 1;
    }

    button.carousel-btn:hover {
      color: var(--yellow);
    }

    .carousel-wrapper {
      overflow: hidden;
      width: 450px;
      margin: 0 10px 0 10px;
    }

    .carousel-slider {
      display: flex;
      transition: transform 0.3s ease-in-out;
    }

    .review-card {
      min-width: 95%;
      box-sizing: border-box;
      padding: 2rem 2rem 2rem 2rem;
      margin-left: 2.5%;
      margin-right: 2.5%;
      margin-bottom: 10px;
      color: var(--text-color);
      background-color: var(--white);
      display: inline-block;
      border-radius: 15px;
      box-shadow: -8px 8px 0px rgba(255, 191, 42, 1);
    }

    .review-header {
      display: flex;
      align-items: left;
      margin-bottom: 1.0rem;
    }

    #avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 1rem;
      outline-offset: -2px;
    }

    .review-f {
      color: var(--pink);
      outline: 2px solid var(--pink);
    }

    .review-m {
      color: var(--blue);
      outline: 2px solid var(--blue);
    }

    .review-rating span {
      color: var(--yellow);
      font-size: 1.2rem;
      padding: 1px;
    }

/* WHO */ 

    .card img {
      max-width: 100%;
      height: auto;
      padding-top: 2px;
    }

/* CONTACT */

    .contact-form {
      width: 450px;
      text-align: center;
    }
   
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form select,
    .contact-form textarea {
      width: 100%;
      margin-bottom: 1.2rem;
      padding: 0.8rem 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1rem;
      font-family: 'Raleway', sans-serif;
      transition: border-color 0.2s ease;
    }

    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      border-color: var(--deep-purple);
      outline: none;
    }

    .contact-form textarea {
      min-height: 120px;
      resize: vertical;
    }

    .privacy-policy-container {
      display: block;
      align-items: center;
      margin-bottom: 1.5rem;
      font-size: 0.9rem;
      clear: both;
    }

    .privacy-policy-container .error-message {
      margin: 5px 0 0;
    }

    .privacy-policy-container input[type="checkbox"] {
      margin-right: 0.5rem;
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    .privacy-policy-container input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid var(--deep-purple);
      border-radius: 3px;
      width: 18px;
      height: 18px;
      cursor: pointer;
      position: relative;
    }

    .privacy-policy-container input[type="checkbox"]:hover {
      border: 2px solid var(--deep-purple);
    }

    .privacy-policy-container input[type="checkbox"]:checked {
      background-color: var(--white);
      border-color: var(--deep-purple);
      border: 2px solid var(--deep-purple);
    }

    .privacy-policy-container input[type="checkbox"]:checked::after {
      content: "✔";
      position: absolute;
      left: 75%;
      top: 45%;
      transform: translate(-50%, -50%);
      color: var(--deep-purple);
      font-size: 22px;
      font-weight: bold;
    }

    .privacy-policy-container label {
      margin-bottom: 0;
      color: var(--text-color);
      font-weight: 400;
    }
    
    .privacy-policy-container a {
      color: var(--deep-purple);
      text-decoration: underline;
    }

    .privacy-policy-container a:hover {
      font-weight: 700;
    }

  .error {
    border-color: red !important;
  }

  .error-message {
    color: red;
    font-size: 0.9rem;
    margin: -15px 0 15px;
    float: right;
  }

  #formResponse, .privacy-policy-container .error-message {
    float: none;
    margin: 20px 0 0;
  }



  .textarea.error-message {
    margin: -22px 0 10px;
  }
  
  .success-message {
    color: green;
    margin-top: 10px;
    font-weight: bold;
  }

  

/* FOOTER */

    footer {
      background-color: var(--white);
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
      font-size: 0.9rem;
    }

    footer a {
      color: var(--deep-purple);
      text-decoration: underline;
      font-weight: 500;
    }

    footer a:hover {
      font-weight: 700;
    }











/* RESPONSIVE */





/* Responsive styling */
    @media (max-width: 1070px) {

      /* Header adjustments */
      header {
        padding: 0 1rem; /* Reduce padding */
      }

      .logo-container {
          /* Ensure logo doesn't get too small, adjust as needed */
          transform: scale(0.9);
          transform-origin: left center;
      }

      .logo-container-legal {
          /* Ensure logo doesn't get too small, adjust as needed */
          transform: scale(0.9) translate(-50%);
          position: absolute;
          left: 48%;
      }

      /* Hide desktop nav and special button */
      nav.desktop-nav { display: none; }

      .header-right-group .header-special { display: none; }

      /* Show burger menu */
      .burger-menu { display: block; }

      /* Adjust header-right-group */
      .header-right-group { gap: 0.5rem; }

  /* Stack cards earlier on medium screens */
  .cards-container {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0 1rem;
    gap: 1.5rem;
  }

  .card,
  .card2 {
    flex: 1 1 100%;
    max-width: 100%;
  }

  section:not(.section-hero):not(.section-about-hero):not(.section-reviews) {
    height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  section.section-reviews {
    height: auto !important; 
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

}






/* Contact section always at least full viewport height */
.section-contact {
  min-height: 100vh;
}

.section-reviews {
  min-height: 100vh;
}






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

@media (max-width: 1024px) {
  header {
    padding: 0 2rem;
  }
  section {
    padding: 0 2rem;
  }
}







@media (max-width: 768px) {

  /* Show burger menu, hide desktop nav */
  .burger-menu {
    display: block;
  }

  nav.desktop-nav {
    display: none;
  }
  
  /* Header spacing */
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 0 1rem;
  }

  .logo-container {
    /* Ensure logo doesn't get too small, adjust as needed */
    transform: scale(0.7);
    transform-origin: left center;
    position: absolute;
    left: 110px;
  }

  .logo-container-legal {
    /* Ensure logo doesn't get too small, adjust as needed */
    transform: scale(0.7);
    transform-origin: left center;
    position: absolute;
    left: 110px;
  }



  .header-right-group { 
    display: none;
  }

  .mobile-menu-dropdown {
    top: 30px;
  }

  /* Hero section: always full height, text scaled */
  .section-hero h1,
  .section-about-hero h1 {
    font-size: clamp(3rem, 6vw, 3rem);
  }

  .section-hero h2,
  .section-about-hero h2 {
    font-size: clamp(1rem, 4vw, 1.4rem);
  }

  .section-hero p {
    width: 100%;
    font-size: 0.95rem;
    padding: 0 1rem;
  }

  /* Section headings */
  section h2 {
    font-size: clamp(1.8rem, 5vw, 3.2rem);
  }

  .section-reviews h2 {
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    white-space: normal;   /* allow wrapping */
    word-break: break-word; /* break long words if needed */
    overflow-wrap: break-word; /* alternative for better browser support */
    text-align: center;
  }

  /* also allow the span inside h2 to wrap */
  h2 span {
    white-space: normal;
  }

  section h3 {
    font-size: clamp(1rem, 3.5vw, 1.2rem);
    margin-bottom: 1.5rem;
  }

  /* Cards stack vertically */
  .cards-container {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0 1rem;
    gap: 1.5rem;
  }

  .card,
  .card2 {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Buttons full width on mobile (except header/nav) */
  button:not(.btn-menu):not(.burger-menu) {
    width: 100%;
    max-width: 100%;
    display: block;
  }

  /* Fix stacked buttons gap in section-why */
  .section-why .btn-purple {
    margin-left: 0;      /* Remove horizontal gap from desktop style */
    margin-top: 1rem;    /* Add vertical spacing when stacked */
  }

  /* Reviews section: remove arrows, allow swipe */
  .carousel-btn {
    display: none !important;
  }

  .reviews-slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
  }

  .reviews-slider::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers */
  }

  .review-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  /* Section height: auto for non-hero */
  section:not(.section-hero):not(.section-about-hero) {
    height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section-reviews {
    max-width: 100%;
    overflow: hidden;
  }

  .carousel-container {
    width: 100%;
  }

  .carousel-wrapper {
    overflow: scroll;
    width: 40%;
  }

  .contact-form {
    width: 100%;
  }


  body.legal #legal.section-legal {
    padding-top: 0rem;
  }

}




















@media (max-width: 480px) {
  /* Reduce header height for very small screens */
  :root {
    --header-height: 50px;
  }
  header {
    padding: 0 0.8rem;
  }

  /* Further shrink hero text */
  .section-hero h1,
  .section-about-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
  .section-hero h2,
  .section-about-hero h2 {
    font-size: clamp(0.95rem, 4.5vw, 1.2rem);
  }
  .section-hero p {
    font-size: 0.9rem;
  }

  /* Smaller cards padding */
  .card,
  .card2 {
    padding: 1rem;
  }
}