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

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@font-face {
  font-family: "Garet Regular";
  src: url("/fonts/GaretRegular.woff2") format("woff2"),
       url("/fonts/GaretRegular.woff") format("woff"),
       url("/fonts/GaretRegular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Giflika-Regular";
  src: url("/fonts/Giflika-Regular.woff2") format("woff2"),
       url("/fonts/Giflika-Regular.woff") format("woff"),
       url("/fonts/Giflika-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Officiallyfunky";
  src: url("/fonts/OfficiallyFunkyRegular.woff2") format("woff2"),
       url("/fonts/OfficiallyFunkyRegular.woff") format("woff"),
       url("/fonts/Officiallyfunky.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "The Seasons Regular";
  src: url("/fonts/TheSeasonsRegular.woff2") format("woff2"),
       url("/fonts/TheSeasonsRegular.woff") format("woff"),
       url("/fonts/TheSeasonsRegular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Sesoress Signature";
  src: url("/fonts/SesoressSignature.woff2") format("woff2"),
       url("/fonts/SesoressSignature.woff") format("woff"),
       url("/fonts/SesoressSignature.otf") format("opentype"),
       url("/fonts/SesoressSignature.ttf") format("truetype");
  font-display: swap;
}

:root {
	--page-padding: 1.5rem;
	--color-bg-1: #C65951;
	--color-bg-2: #0F606B;
	--color-bg-3: var(--color-bg-1);
	--color-bg-4: var(--color-bg-2);
	--color-bg-5: var(--color-bg-1);
	--color-bg-6: var(--color-bg-2);
}

body, html {
  margin: 0;
  padding: 0;
  font-family: Garet Regular, sans-serif;
  scroll-behavior: smooth;
  background-color: #EFE9E4;
  color: #0F606B;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.section1 {
  background-color: #0F606B;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.video-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  padding: 0;
  border-radius: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  background-color: #0F606B;
}

/* Video removed - background color used instead */
/* Video removed - using background color instead */
/* Video element can be re-added here if needed in the future */

.svg-container {
  position: absolute;
  width: 50%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}

/* Hamburger Menu Toggle */
.menu-toggle {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1000;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(-10px);
}

.menu-toggle.active {
  display: flex;
  animation: bounceFadeIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes bounceFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-15px) scale(0.85);
  }
  50% {
    opacity: 0.9;
    transform: translateY(3px) scale(1.05);
  }
  70% {
    opacity: 1;
    transform: translateY(-1px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-toggle.dark span {
  background-color: #522E38;
}

/* Case study pages - always brown hamburger menu */
body.no_scroll .menu-toggle span,
body.case-studies-page .menu-toggle span {
  background-color: #522E38;
}

/* Scroll Prompt */
.scroll-prompt {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 50;
  opacity: 0;
}

.scroll-prompt.active {
  display: flex;
  animation: bounceFadeInUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes bounceFadeInUp {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(15px) scale(0.85);
  }
  50% {
    opacity: 0.9;
    transform: translateX(-50%) translateY(-3px) scale(1.05);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) translateY(1px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.scroll-icon {
  width: 50px;
  height: 50px;
  display: block;
}

.scroll-text {
  color: #ffffff;
  font-family: "Garet Regular", sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: lowercase;
}

/* Menu Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.menu-overlay.active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.menu-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.menu-left {
  width: 66.666%;
  background-color: #0F606B;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  will-change: transform;
}

.menu-overlay.active .menu-left {
  transform: translateX(0);
}

.menu-logo-container {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease 0.3s, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
}

.menu-overlay.active .menu-logo-container {
  opacity: 1;
  transform: scale(1);
}

.menu-logo-container svg {
  width: 100%;
  height: auto;
}

.menu-logo-container .menu-logo-path {
  fill: #ffffff;
  stroke: none;
}

.menu-right {
  width: 33.333%;
  background-color: #522E38;
  display: flex;
  flex-direction: column;
  padding: 40px;
  position: relative;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  will-change: transform;
}

.menu-overlay.active .menu-right {
  transform: translateX(0);
}

.menu-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
  transition: opacity 0.3s ease 0.5s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}

.menu-overlay.active .menu-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.menu-close span {
  position: absolute;
  width: 24px;
  height: 3px;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.menu-close span:first-child {
  transform: rotate(45deg);
}

.menu-close span:last-child {
  transform: rotate(-45deg);
}

.menu-close:hover span {
  opacity: 0.7;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 80px;
  flex: 1;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #ffffff;
  text-decoration: none;
  font-family: "Garet Regular", sans-serif;
  font-size: 32px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.menu-overlay.active .menu-item {
  opacity: 1;
  transform: translateX(0);
}

.menu-overlay.active .menu-item:nth-child(1) {
  transition-delay: 0.4s;
}

.menu-overlay.active .menu-item:nth-child(2) {
  transition-delay: 0.5s;
}

.menu-overlay.active .menu-item:nth-child(3) {
  transition-delay: 0.6s;
}

.menu-overlay.active .menu-item:nth-child(4) {
  transition-delay: 0.7s;
}

.menu-overlay.active .menu-item:nth-child(5) {
  transition-delay: 0.8s;
}

.menu-item:hover {
  opacity: 0.7;
}

.menu-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.menu-icon-path {
  fill: #ffffff;
}

.menu-socials {
  margin-top: auto;
  padding-top: 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease 0.8s, transform 0.4s ease 0.8s;
}

.menu-overlay.active .menu-socials {
  opacity: 1;
  transform: translateY(0);
}

.menu-socials-label {
  color: #ffffff;
  font-family: "Garet Regular", sans-serif;
  font-size: 18px;
  margin-bottom: 20px;
  text-transform: lowercase;
}

.menu-social-icons {
  display: flex;
  gap: 20px;
}

.menu-social-icons a {
  color: #ffffff;
  font-size: 32px;
  transition: opacity 0.3s ease;
}

.menu-social-icons a:hover {
  opacity: 0.7;
}

svg .svg-elem-1 {
  stroke-dashoffset: 1298.22900390625px;
  stroke-dasharray: 1298.22900390625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.8s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.8s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}

svg .svg-elem-2 {
  stroke-dashoffset: 433.4239501953125px;
  stroke-dasharray: 433.4239501953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.12s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.9s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.12s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.9s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}

svg .svg-elem-3 {
  stroke-dashoffset: 1109.2886962890625px;
  stroke-dasharray: 1109.2886962890625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.24s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.24s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}

svg .svg-elem-4 {
  stroke-dashoffset: 1032.4114990234375px;
  stroke-dasharray: 1032.4114990234375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.36s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.1s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.36s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.1s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}

svg .svg-elem-5 {
  stroke-dashoffset: 1882.843505859375px;
  stroke-dasharray: 1882.843505859375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.48s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.2s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.48s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.2s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}

svg .svg-elem-6 {
  stroke-dashoffset: 955.4685668945312px;
  stroke-dasharray: 955.4685668945312px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.6s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.3s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.6s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.3s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}

svg .svg-elem-7 {
  stroke-dashoffset: 220.0648956298828px;
  stroke-dasharray: 220.0648956298828px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.72s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.4s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.72s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.4s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}

svg .svg-elem-8 {
  stroke-dashoffset: 483.2966613769531px;
  stroke-dasharray: 483.2966613769531px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.84s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.5s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.84s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.5s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}

svg .svg-elem-9 {
  stroke-dashoffset: 220.065673828125px;
  stroke-dasharray: 220.065673828125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.96s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.6s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.96s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.6s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}

svg .svg-elem-10 {
  stroke-dashoffset: 483.279296875px;
  stroke-dasharray: 483.279296875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.08s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.7s;
  transition: stroke-dashoffset 4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.08s, fill 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.7s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill: rgba(255, 255, 255, 0.725);
}


.section2 {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Prevent overflow */
  position: relative; /* Ensure proper positioning of children */
  padding: 80px 0;
}

/* CSS Grid for side-by-side containers */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  width: 100%;
  height: 100%; /* Ensure the grid container takes the full height of the section */
  padding: 20px;
  box-sizing: border-box;
}

.grid-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align items to the top */
  align-items: flex-start; /* Align items to the top */
  padding: 10px; /* Add padding for content spacing */
  box-sizing: border-box;
}

.left-container {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Ensure content is centered vertically */
}

.right-container {
  height: 90vh; /* Ensure the right container takes the full height of the section */
  border-radius: 15px;
  background-color: #FEFBF6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 20px;
}

/* Additional styles for the text */
.text-container {
  font-size: 144px; /* Larger font size for BINDAAS text */
  font-family: Giflika-Regular, sans-serif;
  text-align: left; /* Left align the text */
  width: 100%; /* Ensure the text container takes the full width */
  padding: 10px; /* Add some padding for better spacing */
  box-sizing: border-box; /* Include padding in the element's total width and height */
}

.adj, .description {
  position: relative; /* Ensure proper positioning */
  white-space: normal; /* Ensure the text wraps */
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word; /* Ensure text wraps correctly */
  opacity: 0;
  transition: all 1.2s ease;
}

.adj {
  font-family: Garet Regular, sans-serif;
  font-size: 54px;
  left: 0; /* Start from the left */
}

.adj.slide-in {
  left: 10px; /* Move it slightly to the right */
  opacity: 1;
  animation-duration: 3s;
}

.description {
  font-family: Garet Regular, sans-serif;
  font-weight: 100;
  font-size: 30px;
  letter-spacing: 2px;
  top: 0; /* Start from the top */
}

.description.slide-in {
  top: 10px; /* Move it slightly down */
  opacity: 1;
  animation-duration: 3s;
}

/* Styles for the right container text */
.right-text {
  font-size: 36px;
  line-height: 1.5;
  color: #522E38;
  z-index: 1;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* Highlight Animation */
.right-text .highlight {
  color: #ffffff;
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom; /* Ensure it aligns with the baseline */
  line-height: 1.5; /* Match line height to ensure proper alignment */
}

.right-text .highlight::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 95%;
  background: #C65951;
  display: inline;
  transition: left 0.6s ease-in, width 1s ease-out 0.5s;
  z-index: -1;
}

.right-text .highlight-animate::after {
  left: 0;
  width: 100%;
}

/* Parallax effect for the image inside the left container */
.left-container .parallax-wrapper {
  width: 100%; /* Ensure it stays within the container */
  max-width: 100%; /* Ensure it stays within the container */
  height: 500px; /* Set the desired height */
  margin-top: 40px; /* Add space between the text and the image */
  overflow: hidden; /* Ensure the image does not overflow */
  position: relative;
  left: 0; /* Align to the left */
  border-radius: 15px;
}

.left-container .parallax {
  background-image: url('../assets/images/lady.jpg');
  height: 140%;
  width: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: -25%;
  left: 0;
  will-change: transform;
}


/* Styles for section3 */
.section3 {
  background-color: #522E38;
  width: 100%;
  max-width: 100%;
  min-height: 75vh; /* Set a minimum height for section 3, allow it to expand */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Changed from center - prevents centering that causes scroll */
  box-sizing: border-box;
  padding: 80px 0; /* Equal padding top and bottom */
  position: relative;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  box-sizing: border-box;
  align-items: center; /* Center items vertically within the grid */
  overflow-x: hidden; /* Prevent horizontal overflow */
}

.grid-child2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}

.founder {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.founder-image {
  width: 100%;
  height: auto;
  max-width: 500px;
  border-radius: 15px;
}

.blurb {
  padding: 20px;
  padding-bottom: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #ffffff;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.blurb-header {
  font-family: Giflika-Regular, sans-serif;
  font-size: 120px;
  margin-bottom: 20px;
  line-height: 1.1;
  white-space: normal;
}

.blurb-paragraph {
  font-size: 24px;
  margin-bottom: 20px;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  box-sizing: border-box;
}

.blurb-paragraph.bold-text {
  font-weight: 700;
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor, 0 0.5px 0 currentColor, 0 -0.5px 0 currentColor;
  letter-spacing: 0.02em;
}

.blurb-signature {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 2rem;
  padding-right: 5%;
  box-sizing: border-box;
}

/* Animated SVG Signature */
.signature-svg {
  width: 320px;
  height: auto;
  transform: rotate(-12deg);
  transform-origin: center center;
}

.signature-svg .sig-letter {
  stroke: #ffffff;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill-opacity: 0;
}

/* Handwritten animation keyframes */
@keyframes handwrite {
  0% {
    stroke-dashoffset: var(--path-length);
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fillIn {
  0% {
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 0.9;
  }
}

/* Initial state - paths hidden until animation triggers */
.signature-svg .sig-A {
  --path-length: 742px;
  stroke-dasharray: 742px;
  stroke-dashoffset: 742px;
}

.signature-svg .sig-a1 {
  --path-length: 152px;
  stroke-dasharray: 152px;
  stroke-dashoffset: 152px;
}

.signature-svg .sig-s {
  --path-length: 201px;
  stroke-dasharray: 201px;
  stroke-dashoffset: 201px;
}

.signature-svg .sig-h {
  --path-length: 270px;
  stroke-dasharray: 270px;
  stroke-dashoffset: 270px;
}

.signature-svg .sig-n {
  --path-length: 150px;
  stroke-dasharray: 150px;
  stroke-dashoffset: 150px;
}

.signature-svg .sig-a2 {
  --path-length: 152px;
  stroke-dasharray: 152px;
  stroke-dashoffset: 152px;
}

/* Animations trigger when .animate class is added */
.signature-svg.animate .sig-A {
  animation: handwrite 1.0s cubic-bezier(0.4, 0, 0.2, 1) 0s forwards,
             fillIn 1.0s cubic-bezier(0.4, 0, 0.2, 1) 0.05s forwards;
}

.signature-svg.animate .sig-a1 {
  animation: handwrite 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards,
             fillIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

.signature-svg.animate .sig-s {
  animation: handwrite 0.3s cubic-bezier(0.4, 0, 0.2, 1) 1.0s forwards,
             fillIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) 1.0s forwards;
}

.signature-svg.animate .sig-h {
  animation: handwrite 0.4s cubic-bezier(0.4, 0, 0.2, 1) 1.25s forwards,
             fillIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 1.25s forwards;
}

.signature-svg.animate .sig-n {
  animation: handwrite 0.25s cubic-bezier(0.4, 0, 0.2, 1) 1.55s forwards,
             fillIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) 1.55s forwards;
}

.signature-svg.animate .sig-a2 {
  animation: handwrite 0.25s cubic-bezier(0.4, 0, 0.2, 1) 1.75s forwards,
             fillIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) 1.75s forwards;
}

/* Legacy text signature (kept for fallback) */
.signature-text {
  font-family: 'Sesoress Signature', cursive;
  font-size: 72px;
  font-weight: normal;
  color: #ffffff;
  margin: 0;
  padding: 0;
  line-height: 1;
  opacity: 0.9;
}

.blurb-svg-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blurb-svg {
  width: 100%;
  height: auto;
  max-width: 300px;
}

/* Styles for the sticky sections */
.section4 {
  background-color: #522E38;
}

.case-study {
  font-size: 24px;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: #ffffff;
  white-space: nowrap; /* Prevent text from wrapping */
}

.case-study::before,
.case-study::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

.case-study::before {
  background-color: #C65951;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

.case-study::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
  color: #C65951;
  white-space: nowrap; /* Prevent replacement text from wrapping */
}

.case-study:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

.case-study:hover::after {
  transform: translate3d(0, 0, 0);
}

.case-study span {
  width: 190px;
  display: inline-block;
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
  white-space: nowrap; /* Prevent the span text from wrapping */
}

.case-study:hover span {
  transform: translate3d(-200%, 0, 0);
}

.demo-9 {
	--color-bg-1: #C65951;
	--color-bg-2: #C65951;
	--color-bg-3: #C65951;
	--color-bg-4: var(--color-bg-1);
	--color-bg-5: var(--color-bg-2);
	--color-bg-6: var(--color-bg-3);
}

.content {
	padding: var(--page-padding);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.content--perspective {
	perspective-origin: 50% 0%;
	perspective: 1000px;
}

.text-large {
	font-size: clamp(1.5rem,5vw,3rem);
	max-width: 900px;
	margin: 0 0 0.85em 0;
	line-height: 1.2;
	font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500, "INKT" 100;
}


.content--grid,
.content--grid .content__inner {
	display: grid;
	overflow: hidden;
	grid-column-gap: 5vw;
	grid-row-gap: 2vh;
	align-content: center;
	grid-template-areas: 'content-img' 'content-title' 'content-text';
	justify-items: center;
}

.content--grid:has(.content__inner) {
	display: block;
	padding: 0;
}

.content__inner {
	width: 100%;
	height: 100%;
	border-radius: 0 0 2rem 2rem;
}

.content--card {
	display: flex;
	flex-direction: column;
	height: 80vh;
	width: 95vw;
	max-width: 500px;
	aspect-ratio: 0.8;
	top: 10vh;
	margin: auto;
	border-radius: 14px;
	gap: 3vh;
	text-align: center;
	margin-bottom: 5vh;
}

.content--card .content__title {
	font-size: clamp(1.5rem,4vw,3.5rem);
}

.content--card .content__title i {
	display: block;
}

.content--half {
	display: flex;
	flex-direction: column;
	gap: 3vh;
	text-align: center;
}

.content--half:nth-child(odd) {
	margin-left: auto;
}

.content__img {
	grid-area: content-img;
	width: 50%;
	max-width: 300px;
	height: auto;
}

.content__img--large {
	width: 60%;
	height: auto;
}

.content__img--small {
	height: 35%;
	width: auto;
}

.spacer {
	margin-top: 20vh;
}

.content__title {
  font-family: Giflika-Regular, sans-serif;
	grid-area: content-title;
	text-transform: capitalize;
	line-height: 1;
	font-weight: normal;
	font-size: 48px;
	margin: 0;
  color: #ffffff;
}

.content__text {
	margin: 0;
	max-width: 500px;
	grid-area: content-text;
  font-size: 18px;
	text-align: center;
	line-height: 1.5;
  letter-spacing: 1px;;
	padding: 0 1rem;
	backface-visibility: hidden;
  color: #ffffff;
}

.content__text--narrow {
	max-width: 610px;
}

.bg-1 { background: var(--color-bg-1); }
.bg-2 { background: var(--color-bg-2); }
.bg-3 { background: var(--color-bg-3); }
.bg-4 { background: var(--color-bg-4); }
.bg-5 { background: var(--color-bg-5); }
.bg-6 { background: var(--color-bg-6); }


/* Connections Section */
.content--outro {
	padding-top: 10vh;
	padding-bottom: 10vh;
}

.section5 {
  background-color: #EFE9E4;
  padding: 80px 20px;
}

.connections-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px; /* Adjust the gap between the quote and the container as needed */
}

.connections-quote {
  text-align: center;
  width: 100%; /* Ensure it spans the full width */
}

.connections-quote-text {
  font-family: "Giflika-Regular", sans-serif;
  font-size: 40px;
  font-weight: 600;
  color: #0F606B;
}

.connections-container {
  background-color: #FEFBF6;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 600px; /* Adjust the width as needed to keep it centered */
  width: 100%; /* Make it responsive */
}

.connections-profile-picture {
  width: 100px;
  height: auto;
  border-radius: 50%;
  margin-bottom: 10px;
  background-color: #0F606B;
  padding: 10px;
}

.connections-tagline {
  font-family: "Giflika-Regular", sans-serif;
  font-size: 36px;
  color: #0F606B;
  margin-bottom: 20px;
}

.connections-subheading {
  font-family: "The Seasons Regular", sans-serif;
  font-size: 40px;
  color: #0F606B;
  margin: 10px 0;
}

.connections-divider {
  width: 80%;
  margin: 10px auto;
  border: none;
  border-top: 2px dotted #522E38;
}

.connections-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.connections-social a {
  font-size: 30px;
  color: #0F606B;
}

.connections-newsletter-container {
  display: flex;
  align-items: center;
  background-color: #0F606B;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  margin-bottom: 10px;
}

.connections-newsletter-image {
  width: 50px;
  height: 50px;
  background-color: #EFE9E4;
  border-radius: 50%;
  margin-right: 20px;
}

.connections-newsletter-text{
  font-family: "Garet Regular", sans-serif;
  font-size: 18px;
}

.hide {
  display:inline;
}

/* Style for the email link button */


.connections-actions {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Space between the two sections */
  width: 100%;
  margin-top: 20px; /* Space between the socials and the actions */
}

.connections-action-item {
  flex: 1; /* Make both items take up equal space */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ensure the buttons are aligned properly */
.connections-newsletter-container,
.connections-email-link {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 30px 20px;
  background: rgba(15, 96, 107, 0.85);
  backdrop-filter: blur(12px) saturate(200%) contrast(120%);
  -webkit-backdrop-filter: blur(12px) saturate(200%) contrast(120%);
  color: #ffffff;
  border-radius: 10px;
  text-decoration: none;
  font-family: "Garet Regular", sans-serif;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 50px; /* Set a fixed height */
  display: flex;
  align-items: center; /* Center the text vertically */
  justify-content: center; /* Center the text horizontally */
  box-sizing: border-box; /* Ensure padding is included in the height */
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  isolation: isolate;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
               0 0 1px rgba(0, 0, 0, 0.2);
}

.connections-newsletter-container::before,
.connections-email-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.connections-newsletter-container:hover::before,
.connections-email-link:hover::before {
  left: 100%;
}

.connections-newsletter-container::after,
.connections-email-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 50%
  );
  border-radius: 10px;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

.connections-email-link:hover,
.connections-newsletter-container:hover {
  background: rgba(15, 96, 107, 0.99);
  backdrop-filter: blur(14px) saturate(220%) contrast(130%);
  -webkit-backdrop-filter: blur(14px) saturate(220%) contrast(130%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.mobile {
  display: none;
}

/* Footer */

footer {
  background-color: #0F606B;
  color: #ffffff; /* White text */
  padding: 0;
  font-family: "Garet Regular", sans-serif;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px; /* Adjust the padding to control the space at the ends */
  box-sizing: border-box;
}

.footer-left {
  flex: 1;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-social {
  display: flex;
  gap: 15px;
  align-items: center;
}

.footer-social a {
  position: relative;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px) saturate(100%) contrast(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%) contrast(100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(100%) contrast(100%);
  -webkit-backdrop-filter: blur(12px) saturate(100%) contrast(100%);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.footer-right {
  flex: 1;
  text-align: right;
}

.footer-logo {
  height: 40px; /* Adjust the size of your logo */
}

.footer-right p {
  margin: 0;
  font-size: 14px;
}

.footer-right a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  margin: 0 5px;
}

.footer-right a:hover {
  color: #C65951; /* Add hover color to match the theme */
}

/* Ensure elements are as far to the sides as possible */
.footer-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* Contact Form Styles */
.contact-form-container {
  background-color: #0F606B;
  padding: 40px 40px;
  margin-top: 0;
  border-top: none;
}

.contact-form-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  width: 100%;
  margin: 0;
  align-items: start;
}

.contact-form-left {
  min-width: 0;
}

.contact-form-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-top: 0;
  height: 100%;
  min-height: 500px;
}

.contact-form-title {
  font-family: "Giflika-Regular", sans-serif;
  font-size: 80px;
  color: #ffffff;
  margin: 0 0 15px 0;
  font-weight: 400;
}

.contact-form-intro {
  font-family: "Garet Regular", sans-serif;
  font-size: 18px;
  color: #ffffff;
  margin: 0 0 25px 0;
  line-height: 1.6;
  opacity: 0.95;
}

.contact-form-tagline {
  font-family: "Giflika-Regular", sans-serif;
  font-size: 90px;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

.contact-form {
  max-width: 100%;
  margin: 0;
  text-align: left;
}

.form-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  gap: 20px;
}

.form-row-wide {
  display: flex;
  align-items: flex-start;
}

.form-row-message {
  align-items: flex-start;
}

.form-label {
  font-family: "Garet Regular", sans-serif;
  font-size: 16px;
  color: #ffffff;
  min-width: 120px;
  padding-top: 12px;
  text-align: left;
}

.form-input {
  flex: 1;
  padding: 12px 16px;
  background-color: #FEFBF6;
  border: none;
  border-radius: 50px;
  font-family: "Garet Regular", sans-serif;
  font-size: 16px;
  color: #522E38;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-textarea {
  flex: 1;
  padding: 12px 16px;
  background-color: #FEFBF6;
  border: none;
  border-radius: 15px;
  font-family: "Garet Regular", sans-serif;
  font-size: 16px;
  color: #522E38;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  background-color: #ffffff;
}

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

.form-submit-btn {
  position: relative;
  background: rgba(254, 251, 246, 0.35);
  backdrop-filter: blur(20px) saturate(160%) contrast(105%);
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(105%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 14px 32px;
  border-radius: 50px;
  font-family: "Garet Regular", sans-serif;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 10px;
  margin-left: 140px; /* Align with input fields */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
               0 0 1px rgba(0, 0, 0, 0.2);
}

.form-submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.form-submit-btn:hover::before {
  left: 100%;
}

.form-submit-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 50%
  );
  border-radius: 50px;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

.form-submit-btn:hover {
  background: rgba(254, 251, 246, 0.45);
  backdrop-filter: blur(24px) saturate(180%) contrast(110%);
  -webkit-backdrop-filter: blur(24px) saturate(180%) contrast(110%);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.form-submit-btn:active {
  transform: translateY(0);
}

.form-message {
  display: none;
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: "Garet Regular", sans-serif;
  font-size: 14px;
  margin-left: 140px;
}

.form-message-success {
  background-color: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

.form-message-error {
  background-color: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.4);
}

.form-message-loading {
  background-color: rgba(33, 150, 243, 0.2);
  color: #2196F3;
  border: 1px solid rgba(33, 150, 243, 0.4);
}

/* Responsive styles for contact form */
@media (max-width: 768px) {
  .contact-form-container {
    padding: 40px 20px;
  }
  
  .contact-form-left {
    text-align: center;
  }
  
  .contact-form-title {
    font-size: 60px;
    text-align: center;
  }
  
  .contact-form-intro {
    font-size: 16px;
    text-align: center;
  }
  
  .contact-form-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .contact-form-right {
    padding-top: 0;
    order: -1;
    min-height: auto;
  }
  
  .contact-form-tagline {
    font-size: 48px;
    text-align: center;
  }
  
  .contact-form {
    text-align: left;
  }
  
  .form-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .form-label {
    min-width: auto;
    padding-top: 0;
  }
  
  .form-input,
  .form-textarea {
    width: 100%;
  }
  
  .form-submit-btn {
    margin-left: 0;
    width: 100%;
  }
  
  .form-message {
    margin-left: 0;
  }
  
  /* Footer mobile styles */
  .footer-container {
    flex-direction: column;
    gap: 25px;
    padding: 30px 20px;
    text-align: center;
  }
  
  .footer-left {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .footer-right {
    text-align: center;
  }
  
  .footer-right p {
    line-height: 1.8;
  }
}

/* Privacy and Terms of Use */

.privacy-terms-text {
  color: black !important;
}

.privacy-terms-header, .privacy-terms-section {
  background-color: #EFE9E4; /* Ensure a consistent background */
  color: black;
}

.privacy-terms-logo {
  width: 60px;
  height: auto;
  margin-bottom: 20px;
}

.scroll-down-arrow {
  position: absolute;
  bottom: 40%; /* Position near the bottom of the section */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.scroll-down-arrow span {
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
  transform: rotate(45deg);
  margin: -2px;
  animation: bounce 2s infinite;
}

.scroll-down-arrow span:nth-child(1) {
  animation-delay: 0s;
}

.scroll-down-arrow span:nth-child(2) {
  animation-delay: 0.2s;
}

.scroll-down-arrow span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) rotate(45deg);
  }
  40% {
    transform: translateY(10px) rotate(45deg);
  }
  60% {
    transform: translateY(5px) rotate(45deg);
  }
}

/* Menu open state */
body.menu-open {
  overflow: hidden;
}

body.menu-open .menu-toggle {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.menu-open .scroll-prompt {
  display: none !important;
  opacity: 0 !important;
}

body.menu-open .section1 {
  overflow: visible;
}

/* Responsive Menu Styles */
@media (max-width: 1024px) {
  .menu-left {
    width: 60%;
  }
  
  .menu-right {
    width: 40%;
  }
}

@media (max-width: 768px) {
  .menu-content {
    flex-direction: column;
  }
  
  .menu-left {
    width: 100%;
    height: 50%;
    min-height: 50vh;
  }
  
  .menu-right {
    width: 100%;
    height: 50%;
    min-height: 50vh;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }
  
  .menu-nav {
    margin-top: 40px;
  }
  
  .menu-item {
    font-size: 28px;
  }
  
  .menu-logo-container {
    max-width: 400px;
  }
}

/* Responsive design for smaller viewports */
@media screen and (min-width: 63em) {
	body {
		--page-padding: 2rem 3rem;
	}
  .section3 {
    min-height: 120vh; /* Allow section to expand if content is taller */
  }
	.content--grid .content__title {
		align-self: end;
	}
	.content--grid,
	.content--grid .content__inner {
		grid-template-areas: 'content-img content-title' 'content-img content-text';
		grid-template-columns: 30% 1fr;
		justify-items: start;
	}
	.content__img--large {
		width: 160%;
	}
	.content__img--left {
		justify-self: end;
	}
	.content__text--left {
		text-align: left;
		align-self: start;
	}
	.content--card {
		width: 50vw;
	}
	.content--half {
		width: 50%;
	}

  .left-container .parallax {
    background-size: cover;
    background-position: center top;
    height: 140%;
    top: -25%;
  }
}

@media screen and (max-height: 800px) {
.section3 {
    min-height: 150vh; /* Allow section to expand if content is taller */
  }
  .right-text {
    font-size: 24px;
  }
  .text-container {
    font-size: 120px;
  }
  .adj {
    font-size: 32px;
  }
  .description {
    font-size: 24px;
  }
  .right-container {
    height: 106vh;
  }
}

@media screen and (max-height: 600px) {
  .section3 {
    min-height: 200vh; /* Allow section to expand if content is taller */
  }
  .right-text {
    font-size: 24px;
    margin-top: 0;
  }
.text-container {
  font-size: 120px;
}
.adj {
  font-size: 32px;
}
.description {
  font-size: 24px;
}
.right-container {
  height: 142vh;
}
.left-container .parallax {
  background-size: cover;
  background-position: center center;
  height: 120%;
  top: -10%;
}
}

@media (min-width: 820px) and (max-width: 1024px) and (min-height: 801px){
  .video-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    transform-origin: center top;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svg-container {
    width: 80%; /* Adjust width to ensure visibility */
    height: auto;
    top: 50%; /* Keep it centered vertically */
    transform: translate(-50%, -50%);
}

.video-container.scrolled {
    height: 90vh; /* Slightly increase height when scrolled */
    transform: scale(1); /* Reduce scale effect */
    transition: height 0.3s ease, transform 0.3s ease;
}

  .grid-container {
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
  
  .left-container, .right-container {
    width: 100%;
    height: auto;
  }

  .text-container {
    font-size: 72px;
  }

  .adj {
    font-size: 32px;
  }

  .description {
    font-size: 24px;
  }

  .right-text {
    font-size: 18px;
  }
  

.section2 .parallax-wrapper {
    margin-top: 40px; /* Adjust the space above the parallax effect */
}

.left-container .parallax {
  background-size: cover;
  background-position: center top;
  height: 140%;
  top: -25%;
}


.section3 .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  padding: 20px; /* Add padding to create space inside the grid */
  margin-bottom: 0; /* Remove bottom margin */
}

.section3 .grid-child2 {
  margin-bottom: 20px; /* Ensure there's space between grid items */
  text-align: center;
  align-items: center;
  padding: 0 10px; /* Add some padding to make it look better */
}

.section3 .founder-image {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}

.section3 .blurb {
  align-items: center;
}

.section3 .blurb-header {
  font-size: 120px;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
}

.section3 .blurb-paragraph {
  font-size: 24px;
  line-height: 1.6;
  text-align: left;
}

.section3 .signature-text {
  font-size: 60px;
}

.section3 .signature-svg {
  width: 280px;
}


.content__title {
  font-size: 65px;
}

.content__text {
  text-align: center;
  font-size: 28px;
}


.case-study {
  font-size: 40px;
}

.case-study span {
  width: 280px;
}

.content {
  padding-bottom: 90px;
  padding-top: 160px;
}

.content__img {
	max-width: 500px;
}

.footer-right {
  text-wrap: nowrap;
}

.footer-right p{
  font-size: 15px;
}

.footer-right a{
  font-size: 15px;
}

.hide {
  display: contents;
}
}

@media (max-width: 820px) {

  .video-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    transform-origin: center top;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svg-container {
    width: 80%; /* Adjust width to ensure visibility */
    height: auto;
    top: 50%; /* Keep it centered vertically */
    transform: translate(-50%, -50%);
}

.video-container.scrolled {
    height: 90vh; /* Slightly increase height when scrolled */
    transform: scale(1); /* Reduce scale effect */
    transition: height 0.3s ease, transform 0.3s ease;
}

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

  .left-container, .right-container {
    width: 100%;
    height: auto;
  }

  .section2 {
    padding-top: 10px; /* Further reduced padding at the top of section2 */
    margin-bottom: 80px; /* Add margin-bottom to create space between section 2 and 3 */
}

  .text-container {
    font-size: 48px;
  }

  .adj {
    font-size: 24px;
  }

  .description {
    font-size: 18px;
  }

  .right-text {
    font-size: 16px;
  }


  .content__title {
    margin-top: 0;
    padding-top: 0;
  }

  .parent {
    padding-bottom: 20px;
  }

  /* Section 3 - Our Founder centering for tablet/mobile layouts */
  .section3 .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .section3 .grid-child2 {
    text-align: center;
    align-items: center;
  }

  .section3 .blurb {
    align-items: center;
  }

  .section3 .blurb-header {
    text-align: center;
    width: 100%;
  }

  .section3 .blurb-paragraph {
    text-align: left;
  }

  /* Privacy and Terms pages - center text on mobile/tablet */
  .privacy-terms-header {
    text-align: center;
  }

  .privacy-terms-header .text-large {
    text-align: center;
  }

  .privacy-terms-section .content {
    text-align: center;
  }

  .privacy-terms-section .content__title {
    text-align: center;
  }

  .privacy-terms-section .content__text {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .video-container {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      position: relative;
      transform-origin: center top;
  }

  .video-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .svg-container {
      width: 80%; /* Adjust width to ensure visibility */
      height: auto;
      top: 50%; /* Keep it centered vertically */
      transform: translate(-50%, -50%);
  }

  .video-container.scrolled {
      height: 90vh; /* Slightly increase height when scrolled */
      transform: scale(1); /* Reduce scale effect */
      transition: height 0.3s ease, transform 0.3s ease;
  }

  .section {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }

  .section1 {
      padding: 0;
      margin: 0;
  }

  .section2 {
      padding-top: 10px; /* Further reduced padding at the top of section2 */
      margin-bottom: 80px; /* Add margin-bottom to create space between section 2 and 3 */
  }

  .grid-container {
      padding: 0; /* Remove the grid container padding */
      margin: 0; /* Remove any unnecessary margins */
  }

  .left-container {
      padding-top: 0; /* Remove padding inside the left container */
  }

  .right-container {
    border-radius: 0;
  }

  .text-container {
      margin-top: 5px; /* Reduce the top margin of the text container */
      font-size: 48px;
      text-align: left; /* Align text to the left */
      padding-left: 20px; /* Add padding to create space from the left edge */
      padding-right: 20px; /* Optional: Add padding on the right for balance */
  }


.section2 .parallax-wrapper {
    margin-top: 40px; /* Adjust the space above the parallax effect */
}

.left-container .parallax {
  background-size: cover;
  background-position: center center;
  height: 120%;
  top: -10%;
  position: absolute;
}

.right-text {
    margin-top: 5px; /* Reduce the top margin of the right text */
}

.adj {
    font-size: 24px;
    margin-top: 10px; /* Add margin to create space below "BINDAAS" */
}

.description {
    font-size: 18px;
    margin-top: 10px; /* Add margin to create space below the adjective */
}

.section3 {
  width: 100%;
  max-width: 100%;
  /* No overflow restrictions - allows signature to extend below */
}

.section3 .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  padding: 20px; /* Add padding to create space inside the grid */
  margin-bottom: 0; /* Remove bottom margin */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.section3 .grid-child2 {
  margin-bottom: 20px; /* Ensure there's space between grid items */
  text-align: center;
  align-items: center;
  padding: 0 10px; /* Add some padding to make it look better */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.section3 .founder-image {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}

  .section3 .blurb {
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .section3 .blurb-header {
    font-size: 60px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.1;
    white-space: normal;
  }

  .section3 .blurb-paragraph {
    font-size: 20px;
    line-height: 1.6;
    text-align: left;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

.section3 .signature-text {
  font-size: 60px;
}

.section3 .signature-svg {
  width: 160px;
}

.section3 .blurb-signature {
  padding-right: 1.5rem;
}

.content {
  padding-bottom: 90px;
  padding-top: 50px;
}

.content--outro {
  padding-left: 0;
  padding-right: 0;
}

.connections-quote-text {
  padding: 3rem;
}

.parent {
  padding-bottom: 90px;
  margin-top: 120px;
}

.content__title {
  font-size: 30px;
}

.content__text {
  text-align: left;
  font-size: 18px;
}



  .connections-container {
    border-radius: 0;
  }

  .connections-subheading {
    font-size: 28px;
  }

  .connections-newsletter-text {
    font-size: 15px;
  }

  .footer-right p{
    font-size: 12px;
  }

  .footer-right a{
    font-size: 12px;
  }

  .hide {
    display: none;
  }

  .mobile {
    display: contents;
  }
  
  /* Contact form mobile adjustments */
  .contact-form-left {
    text-align: center;
  }
  
  .contact-form-title {
    font-size: 48px;
    text-align: center;
  }
  
  .contact-form-intro {
    text-align: center;
  }
  
  .contact-form-tagline {
    font-size: 36px;
    text-align: center;
  }
  
  .contact-form-wrapper {
    gap: 30px;
  }
  
  .contact-form {
    text-align: left;
  }
  
  /* Footer mobile adjustments */
  .footer-container {
    flex-direction: column;
    gap: 20px;
    padding: 25px 15px;
    text-align: center;
  }
  
  .footer-left {
    flex-direction: column;
    gap: 12px;
  }
  
  .footer-logo {
    height: 35px;
  }
  
  .footer-social {
    justify-content: center;
  }
}

/* Specific fix for 390px viewport */
@media (max-width: 390px) {
  .section3 .grid-container {
    padding: 10px;
  }
  
  .section3 .grid-child2 {
    padding: 0 5px;
  }
  
  .section3 .blurb {
    padding: 15px 5px 20px 5px;
  }
  
  .section3 .blurb-paragraph {
    font-size: 18px;
    padding-left: 0;
    padding-right: 0;
  }
  
  .section3 .blurb-header {
    font-size: 60px;
    line-height: 1.1;
    white-space: normal;
  }
}

@media (max-width: 400px) {
  .video-container {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      position: relative;
      transform-origin: center top;
  }

  .video-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .svg-container {
      width: 80%; /* Adjust width to ensure visibility */
      height: auto;
      top: 50%; /* Keep it centered vertically */
      transform: translate(-50%, -50%);
  }

  .video-container.scrolled {
      height: 90vh; /* Slightly increase height when scrolled */
      transform: scale(1); /* Reduce scale effect */
      transition: height 0.3s ease, transform 0.3s ease;
  }

  .section {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }

  .section1 {
      padding: 0;
      margin: 0;
  }

  .section2 {
      padding-top: 10px; /* Further reduced padding at the top of section2 */
      margin-bottom: 80px; /* Add margin-bottom to create space between section 2 and 3 */
  }

  .grid-container {
      padding: 0; /* Remove the grid container padding */
      margin: 0; /* Remove any unnecessary margins */
  }

  .left-container {
      padding-top: 0; /* Remove padding inside the left container */
  }

  .right-container {
    border-radius: 0;
  }

  .text-container {
      margin-top: 5px; /* Reduce the top margin of the text container */
      font-size: 48px;
      text-align: left; /* Align text to the left */
      padding-left: 20px; /* Add padding to create space from the left edge */
      padding-right: 20px; /* Optional: Add padding on the right for balance */
  }

  .section2 .parallax-wrapper {
      margin-top: 40px; /* Adjust the space above the parallax effect */
  }

  .left-container .parallax {
    background-size: cover;
    background-position: center center;
    height: 120%;
    top: -10%;
    position: absolute;
  }

  .right-text {
      margin-top: 5px; /* Reduce the top margin of the right text */
  }

  .adj {
      font-size: 24px;
      margin-top: 10px; /* Add margin to create space below "BINDAAS" */
  }

  .description {
      font-size: 18px;
      margin-top: 10px; /* Add margin to create space below the adjective */
  }

  .section3 {
    width: 100%;
    max-width: 100%;
    /* No overflow restrictions - allows signature to extend below */
  }

  .section3 .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    padding: 15px; /* Reduced padding for smaller screens */
    margin-bottom: 0; /* Remove bottom margin */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .section3 .grid-child2 {
    margin-bottom: 20px; /* Ensure there's space between grid items */
    text-align: center;
    align-items: center;
    padding: 0 5px; /* Reduced padding for smaller screens */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .section3 .founder-image {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
  }

  .section3 .blurb {
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 15px 5px 20px 5px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .section3 .blurb-header {
    font-size: 60px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding: 0;
    line-height: 1.1;
    white-space: normal;
  }

  .section3 .blurb-paragraph {
    font-size: 20px;
    line-height: 1.6;
    text-align: left;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

.section3 .signature-text {
  font-size: 60px;
}

.section3 .signature-svg {
  width: 120px;
}

.section3 .blurb-signature {
  padding-right: 1rem;
}

.content {
    padding-bottom: 90px;
    padding-top: 50px;
  }

  .content--outro {
    padding-left: 0;
    padding-right: 0;
  }

  .connections-quote-text {
    padding: 3rem;
}

  .parent {
    padding-bottom: 90px;
    margin-top: 120px;
  }

  .content__title {
    font-size: 28px;
  }

  .content__text {
    text-align: left;
    font-size: 15px;
  }



  .connections-container {
    border-radius: 0;
  }

  .connections-subheading {
    font-size: 28px;
  }

  .connections-newsletter-text {
    font-size: 15px;
  }

  /* Footer 400px adjustments */
  .footer-container {
    flex-direction: column;
    gap: 20px;
    padding: 25px 15px;
    text-align: center;
  }
  
  .footer-left {
    flex-direction: column;
    gap: 12px;
  }
  
  .footer-social {
    justify-content: center;
  }

  .footer-right {
    text-align: center;
  }

  .footer-right p{
    font-size: 12px;
    line-height: 1.8;
  }

  .footer-right a{
    font-size: 12px;
  }

  .hide {
    display: none;
  }

  .mobile {
    display: contents;
  }
}

/* Styles for the services section */
.services-section {
  background-color: #C65951;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
  padding: 80px 40px;
  position: relative;
}

.services-wrapper {
  max-width: 1200px;
  width: 100%;
  text-align: center;
}

.services-main-title {
  font-family: "Giflika-Regular", sans-serif;
  font-size: 120px;
  color: #ffffff;
  margin-bottom: 30px;
  opacity: 0;
}

.services-intro {
  font-family: "Garet Regular", sans-serif;
  font-size: 24px;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 60px;
  max-width: 825px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
}

.services-tags-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.service-tag {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px) saturate(100%) contrast(100%);
  -webkit-backdrop-filter: blur(12px) saturate(100%) contrast(100%);
  color: #ffffff;
  font-family: "Garet Regular", sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 28px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  gap: 8px;
}

.service-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.service-tag:hover::before {
  left: 100%;
}

.service-tag::after {
  display: none;
}

.service-tag:hover {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(14px) saturate(100%) contrast(100%);
  -webkit-backdrop-filter: blur(14px) saturate(100%) contrast(100%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.service-tag-text {
  text-align: center;
}

.service-tag-icon {
  font-size: 20px;
  font-weight: 300;
  transition: transform 0.3s ease;
}

/* Service tag wrapper for accordion */
.service-tag-wrapper {
  display: flex;
  flex-direction: column;
}

.service-tag-wrapper .service-tag {
  width: 100%;
  border-radius: 50px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.1s ease;
}

.service-tag-wrapper.active .service-tag {
  border-radius: 25px 25px 0 0;
  box-shadow: none !important;
  border-bottom: none;
}

.service-tag-wrapper.active .service-tag:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px) saturate(100%) contrast(100%);
  -webkit-backdrop-filter: blur(12px) saturate(100%) contrast(100%);
  border-left-color: rgba(255, 255, 255, 0.4);
  border-right-color: rgba(255, 255, 255, 0.4);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom: none;
}

.service-tag-wrapper.active .service-tag:hover::before {
  left: -100%;
}

.service-tag-content {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px) saturate(100%) contrast(100%);
  -webkit-backdrop-filter: blur(12px) saturate(100%) contrast(100%);
  border-radius: 0 0 25px 25px;
  overflow: hidden;
  height: 0;
  border: none;
  box-shadow: none;
}

.service-tag-wrapper.active .service-tag-content {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  border-top: none;
}

.service-tag-content p {
  padding: 0 24px 20px;
  margin: 0;
  font-family: "Garet Regular", sans-serif;
  font-size: 15px;
  color: #ffffff;
  line-height: 1.6;
  text-align: left;
}

/* Responsive adjustments */
@media (max-width: 820px) {
  .services-tags-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  /* Center the last item if it's alone in its row (odd position) */
  .service-tag-wrapper:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
  
  .services-main-title {
    font-size: 90px;
  }
  
  .services-intro {
    font-size: 21px;
    padding: 0 20px;
  }
  
  .service-tag {
    padding: 15px 24px;
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .services-tags-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .services-main-title {
    font-size: 72px;
  }
  
  .services-intro {
    font-size: 18px;
  }
  
  .service-tag {
    padding: 14px 20px;
    font-size: 16px;
  }
  
  .service-tag-content {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .service-tag-content p {
    padding: 12px 18px 14px;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
  }
  
  .service-tag-wrapper.active .service-tag-content {
    border-radius: 0 0 20px 20px;
  }
  
  .service-tag-wrapper.active .service-tag {
    border-radius: 20px 20px 0 0;
  }
  
  /* Ensure content doesn't overflow on very small screens */
  .service-tag-wrapper {
    max-width: 100%;
  }
}

/* Styles for the case studies section */
.case-studies-section {
  background-color: #EFE9E4;
  min-height: auto; /* Remove fixed min-height to eliminate gap */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  position: relative;
  transition: background-color 0.3s ease;
}

.case-studies-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  text-align: left;
}

.case-studies-main-title {
  font-family: "Giflika-Regular", sans-serif;
  font-size: 120px;
  color: #0F606B;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
  transition: color 0.3s ease;
}

.case-study-link-compact {
  margin-bottom: 40px;
}

.case-studies-featured-title {
  font-family: "Giflika-Regular", sans-serif;
  font-size: 48px;
  color: #0F606B;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
  transition: color 0.3s ease;
}

.case-studies-featured-subtext {
  font-family: "Garet Regular", sans-serif;
  font-size: 24px; /* Match services-intro font size */
  font-weight: 700;
  color: #0F606B;
  margin-bottom: 30px;
  text-align: center;
  width: 100%;
  opacity: 0.8;
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor, 0 0.5px 0 currentColor, 0 -0.5px 0 currentColor;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

/* Featured Videos Grid - Two videos side by side */
.featured-videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 2rem auto;
}

.featured-video-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Case Studies Featured Video */
.case-studies-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

.case-studies-video {
  width: 100%;
  height: auto;
  display: block;
}

.video-mute-indicator {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(180%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(198, 89, 81);
  font-size: 18px;
  z-index: 3;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.video-mute-indicator.unmuted {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px) saturate(200%) brightness(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(200%) brightness(1.15);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}

.video-mute-indicator.unmuted i::before {
  content: "\f028";
}

.case-studies-video-wrapper:hover .video-mute-indicator {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

/* Video hover effects - change section background and text colors */
.case-studies-section:has(.case-studies-video:hover) {
  background-color: #0050c3 !important;
}

.case-studies-section:has(.case-studies-video:hover) .case-studies-main-title,
.case-studies-section:has(.case-studies-video:hover) .case-studies-featured-title,
.case-studies-section:has(.case-studies-video:hover) .case-studies-featured-subtext {
  color: #efe9e4;
}

.case-studies-section:has(.case-studies-video:hover) .case-study-green {
  color: #efe9e4;
  border-color: #efe9e4;
}

/* Mute button stays unchanged - no styles needed */

/* Homepage Case Studies Grid */
.homepage-case-studies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin: 40px 0;
}

.homepage-case-study-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 16/7;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.homepage-case-study-card:hover {
  transform: translateY(-10px);
}

.homepage-case-study-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.homepage-case-study-card:hover img {
  transform: scale(1.05);
}

.homepage-case-study-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(15, 96, 107, 0.9), transparent);
  padding: 1.5rem;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


.homepage-case-study-title {
  font-family: "Giflika-Regular", sans-serif;
  font-size: 1.75rem;
  margin-bottom: 0.4rem;
  margin-top: 0;
}

.homepage-case-study-services {
  display: none !important;
}

.service-tag-small {
  position: relative;
  background: rgba(254, 251, 246, 0.2);
  backdrop-filter: blur(12px) saturate(200%) contrast(120%);
  -webkit-backdrop-filter: blur(12px) saturate(200%) contrast(120%);
  color: #ffffff;
  font-family: "Garet Regular", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
               0 0 1px rgba(0, 0, 0, 0.2);
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

.service-tag-small::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.service-tag-small:hover::before {
  left: 100%;
}

.service-tag-small::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 50%
  );
  border-radius: 20px;
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}

.service-tag-small:hover {
  background: rgba(254, 251, 246, 0.3);
  backdrop-filter: blur(14px) saturate(220%) contrast(130%);
  -webkit-backdrop-filter: blur(14px) saturate(220%) contrast(130%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.view-case-study {
  display: inline-block;
  font-family: "Garet Regular", sans-serif;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 2px solid #C65951;
  padding-bottom: 4px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  margin-top: 0.5rem;
}

.view-case-study:hover {
  color: #C65951;
}

/* Show view-case-study links on homepage case study cards */
.homepage-case-study-card:hover .view-case-study {
  opacity: 1;
  transform: translateY(0);
}


/* Tablet Styles */
@media (max-width: 820px) {
  .case-studies-section {
    min-height: 60vh;
    padding: 60px 20px;
  }
  
  .case-studies-container {
    max-width: 90%;
  }
  
  .case-studies-main-title {
    font-size: 90px;
  }
  
  .case-studies-featured-title {
    font-size: 36px;
  }
  
  .case-studies-featured-subtext {
    font-size: 21px; /* Match services-intro tablet font size */
  }
  
  .case-studies-video-wrapper {
    max-width: 100%;
  }
  
  .featured-videos-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 600px;
  }
  
  .homepage-case-studies-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 30px 0;
  }
  
  .homepage-case-study-overlay {
    padding: 1.5rem;
  }
}

/* Mobile Styles */
@media (max-width: 480px) {
  .case-studies-section {
    min-height: 50vh;
    padding: 40px 15px;
  }
  
  .case-studies-container {
    max-width: 100%;
    align-items: center;
  }
  
  .case-studies-main-title {
    font-size: 72px;
  }
  
  .case-study-link-compact {
    margin-bottom: 25px;
  }
  
  .case-studies-featured-title {
    font-size: 28px;
    margin-bottom: 8px;
  }
  
  .case-studies-featured-subtext {
    font-size: 18px; /* Match services-intro mobile font size */
    margin-bottom: 20px;
  }
  
  .featured-videos-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 100%;
  }
  
  .video-mute-indicator {
    width: 36px;
    height: 36px;
    font-size: 14px;
    bottom: 15px;
    right: 15px;
  }
  
  .homepage-case-studies-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 20px 0;
  }
  
  .homepage-case-study-title {
    font-size: 1.5rem;
  }
  
  .homepage-case-study-overlay {
    padding: 1rem;
  }
  
  .case-logo {
    margin-left: 10px;
  }
  
  .studies-logo {
    margin-right: 10px;
  }
}

/* Extra Small Devices */
@media (max-width: 370px) {
  .case-text, .studies-text {
    font-size: 48px;
  }
  
  .case-logo, .studies-logo {
    width: 30px;
  }
}

.case-study-link {
  margin-top: 40px;
  text-align: center;
  width: 100%;
}

.case-study-green {
  font-size: 32px;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: #0F606B;
  white-space: nowrap;
  padding: 12px 24px; /* Add padding for the border */
  border: 2px solid #0F606B; /* Add rounded outline border */
  border-radius: 50px; /* Round radius */
  background-color: transparent; /* Ensure no fill */
  transition: color 0.3s ease, border-color 0.3s ease;
}

.case-study-green::before,
.case-study-green::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

.case-study-green::before {
  display: none; /* Remove underline animation */
}

.case-study-green::after {
  content: attr(data-replace);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
  color: #0F606B;
  white-space: nowrap;
  line-height: 1.2; /* Match span line-height */
  font-size: inherit; /* Match font size */
}

.case-study-green:hover::after {
  transform: translate3d(0, 0, 0);
}

.case-study-green span {
  width: 230px;
  display: inline-block;
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
  white-space: nowrap;
  line-height: 1.2; /* Set consistent line-height */
  vertical-align: baseline; /* Align to baseline */
}

.case-study-green:hover span {
  transform: translate3d(-200%, 0, 0);
}

@media (max-width: 480px) {
  .case-study-link {
    margin-top: 30px;
  }
  
  .case-study-green {
    font-size: 24px;
  }
  
  .case-study-green span {
    width: 180px;
  }
}

/* Page Transition Styles */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999; /* Increased to ensure it's above everything */
  pointer-events: none;
  visibility: hidden;
  background-color: transparent; /* Ensure overlay itself doesn't block */
}

.page-transition-overlay.active {
  visibility: visible;
  pointer-events: all;
}

.page-transition-panel {
  width: 100%;
  height: 100%;
  background-color: #0F606B;
  transform: translateY(100%);
  will-change: transform;
}