.glouf-modal {
	  display: none;
	  position: fixed;
	  inset: 0;
	  z-index: 99999;
	  background: rgba(0, 0, 0, 0.65);
	  align-items: center;
	  justify-content: center;
	  padding: 20px;
	}

	.glouf-modal.show {
	  display: flex;
	}

	.glouf-modal-content {
	  background: #fff;
	  width: 100%;
	  max-width: 420px;
	  padding: 35px 25px;
	  border-radius: 12px;
	  text-align: center;
	  position: relative;
	  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
	}

	.glouf-modal-content h3 {
	  margin-bottom: 12px;
	  color: #222;
	}

	.glouf-modal-content p {
	  color: #666;
	  line-height: 1.7;
	}

	.glouf-modal-close {
	  position: absolute;
	  top: 8px;
	  right: 14px;
	  border: 0;
	  background: none;
	  font-size: 28px;
	  cursor: pointer;
	}

	.glouf-modal-button {
	  background: #347AF0;
	  color: white;
	  border: 0;
	  border-radius: 5px;
	  padding: 12px 28px;
	  margin-top: 12px;
	  cursor: pointer;
	}

	/* ---------- Responsive text only (no layout changes) ---------- */

	/* Stop long words from overflowing their boxes */
	.rs-feature h1,
	.rs-feature h2,
	.rs-feature h3,
	.rs-feature h4,
	.rs-feature p,
	.rs-banner h1,
	.rs-banner h2,
	.rs-banner p,
	.card-header a,
	.card-body {
	  overflow-wrap: anywhere;
	  word-break: normal;
	  hyphens: auto;
	}

	/* Tablets and below */
	@media (max-width: 991.98px) {
	  .display-2 {
	    font-size: clamp(1.9rem, 7vw, 3.5rem) !important;
	    letter-spacing: -1px !important;
	    /* overrides the inline -2px */
	    line-height: 1.05 !important;
	  }

	  .display-3 {
	    font-size: clamp(1.6rem, 6vw, 3rem) !important;
	  }

	  .rs-banner h1.title,
	  .features-manage h1.title {
	    font-size: clamp(1.5rem, 5.5vw, 2.5rem) !important;
	    line-height: 1.15;
	  }
	}

	/* Phones */
	@media (max-width: 767.98px) {

	  .rs-banner h2,
	  .rs-banner h3,
	  .features-manage h3 {
	    font-size: clamp(1.05rem, 4.5vw, 1.4rem) !important;
	    line-height: 1.3;
	  }

	  /* Card titles (Who Glouf is for, Our goals, step titles) */
	  .rs-feature h3.h4,
	  .rs-feature h4.title,
	  .rs-feature h4 {
	    font-size: clamp(1rem, 4.2vw, 1.3rem) !important;
	    line-height: 1.25;
	  }

	  /* Body text inside cards and sections */
	  .fs-5,
	  .rs-feature p,
	  .description,
	  .desc {
	    font-size: clamp(0.9rem, 3.8vw, 1.05rem) !important;
	    line-height: 1.5 !important;
	  }

	  /* Step number inside the blue arrows */
	  .rs-feature .fs-2 {
	    font-size: 1.4rem !important;
	  }

	  /* FAQ */
	  .faq-style2 .title {
	    font-size: clamp(1.4rem, 6vw, 2rem) !important;
	  }

	  .card-header a {
	    font-size: 0.95rem !important;
	    line-height: 1.35;
	  }

	  .card-body {
	    font-size: 0.9rem !important;
	  }

	  /* Buttons text */
	  .banner-btn .btn-text {
	    font-size: 0.95rem;
	  }
	}

	/* Small phones */
	@media (max-width: 380px) {
	  .display-2 {
	    font-size: 1.7rem !important;
	  }

	  .display-3 {
	    font-size: 1.5rem !important;
	  }
	}

	/* 1. Base State (Mobile and Desktop default) */
	.custom-btn-hover {
	  /* Create a double-width background gradient (Left half is dark hover color, Right half is original yellow) */
	  background-image: linear-gradient(to right, #212529 50%, #ffcc00 50%) !important;
	  background-size: 200% 100% !important;
	  /* Push the background to the right so only the original yellow shows by default */
	  background-position: right bottom !important;

	  color: #212529 !important;
	  transition: background-position 0.4s ease-out, color 0.3s ease-out !important;
	}

	/* While pressed down on mobile (Keeps layout clean, no slide effect on tap) */
	.custom-btn-hover:active {
	  background-image: none !important;
	  background-color: #e6b800 !important;
	  /* Slightly darker shade while holding press */
	  color: #212529 !important;
	}

	/* 2. Desktop-Only Hover State (Sliding from left) */
	@media (hover: hover) {
	  .custom-btn-hover:hover {
	    /* Pull the background back to the left to slide the dark color into view */
	    background-position: left bottom !important;
	    color: #ffcc00 !important;
	    /* Transition text color to match desktop design */
	  }
	}