/*!
Theme Name: devixio
Theme URI: http://devixio.com.me/
Author: devixio.com.me
Author URI: http://devixio.com.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: devixio
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

devixio is based on devixio.com https://devixio.com.me/, (C) 2012-2020 Automattic, Inc.
devixio.com is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: "Red Hat Display", sans-serif;
}
.container {
  max-width: 1440px;
  margin: 0 auto;
}
/* Header overlay, transparent background */
.site-header.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0; /* adjust to match design */
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 24px;
  height: 56px;
  background: linear-gradient(
    93.66deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(54, 44, 44, 0.2) 100%
  );
  border: 2px solid #ffffff;
  backdrop-filter: blur(3px);
  border-radius: 28px;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 33px;
  color: #ffffff;
}

.header-cta__icon {
  position: relative;
  width: 26px; /* match arrow size */
  height: 26px;
  overflow: hidden;
}

.header-cta__icon .arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease;
}

.header-cta__icon .arrow--top {
  transform: translateY(0);
}

.header-cta__icon .arrow--bottom {
  transform: translate(-25px, 25px);
}

.header-cta:hover .header-cta__icon .arrow--top {
  transform: translate(25px, -25px);
}

.header-cta:hover .header-cta__icon .arrow--bottom {
  transform: translateY(0);
}
.portfolio-cta:hover .header-cta__icon .arrow--top {
  transform: translate(25px, -25px);
}

.portfolio-cta:hover .header-cta__icon .arrow--bottom {
  transform: translateY(0);
}

/* Hamburger button (round) */
.header-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Hide nav by default on mobile; show when active */
.main-navigation {
  display: none;
}

.main-navigation.is-open {
  display: block;
}

/* Desktop: show nav normally if you want in addition to burger
   (or keep it as an overlay – up to you) */
@media (min-width: 992px) {
  .main-navigation {
    display: block;
  }
}

/* Overlay container - UPDATED: Fixed position relative to header */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  visibility: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20px;
}

.menu-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* White splash circle that morphs into menu shape */
.menu-splash {
  position: fixed;
  width: 60px;
  height: 60px;
  background: #ffffff;
  border-radius: 50%;
  top: var(--menu-origin-y, 60px);
  right: var(--menu-origin-x, 60px);
  transform: translate(50%, -50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    height 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, border-radius 0.4s ease 0.15s,
    top 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    right 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, opacity 0.2s ease 0.4s;
  z-index: 999;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.15);
}

.menu-overlay.is-open .menu-splash {
  width: min(1360px, calc(100vw - 40px));
  height: 730px;
  border-radius: 50px;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%) scale(1);
  opacity: 0;
}

.menu-overlay.is-closing .menu-splash {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: var(--menu-origin-y, 60px);
  right: var(--menu-origin-x, 60px);
  transform: translate(50%, -50%) scale(0);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.25s,
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, border-radius 0.2s ease 0.1s,
    top 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    right 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, opacity 0.01s ease;
}

/* Ripple effects */
.menu-splash::before,
.menu-splash::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.menu-overlay.is-open .menu-splash::before {
  animation: ripple-out 0.6s ease-out forwards;
}

.menu-overlay.is-open .menu-splash::after {
  animation: ripple-out 0.6s ease-out 0.1s forwards;
}

@keyframes ripple-out {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(8);
    opacity: 0;
  }
}

/* Main menu panel - UPDATED: Fixed position at top */
.menu-panel {
  position: fixed;
  width: min(1440px, calc(100% - 40px));
  top: 20px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  height: 730px;
  background: #161616;
  border-radius: 50px;
  padding: 40px 36px 40px 50px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s ease;
}

.menu-overlay.is-open .menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  transition-delay: 0.3s;
}

.menu-overlay.is-closing .menu-panel {
  opacity: 0;
  transform: translateX(-50%) scale(0.9);
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.2s ease, visibility 0.15s ease;
  transition-delay: 0s;
}

.menu-panel__inner {
  display: flex;
  gap: 40px;
  height: 100%;
}

/* Close button - UPDATED: Position to match hamburger exactly */
.menu-close {
  position: fixed;
  top: 33px;
  right: 27px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: #ffffff;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
  transition: opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1001;
  padding: 0;
}

.menu-close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-overlay.is-open .menu-close {
  opacity: 1;
  transform: rotate(0) scale(1);
  transition-delay: 0.5s;
}

.menu-overlay.is-closing .menu-close {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
  transition: opacity 0.1s ease, transform 0.15s ease;
  transition-delay: 0s;
}

/* Left column */
.menu-panel__left {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  gap: 47.5px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.menu-overlay.is-open .menu-panel__left {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

.menu-overlay.is-closing .menu-panel__left {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  transition-delay: 0s;
}

.menu-panel__logo-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.menu-logo {
  width: 54px;
  height: auto;
}

.menu-tagline {
  width: 263px;
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 29px;
  display: flex;
  align-items: center;
  color: #ababab;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 600;
  font-size: 56px;
  line-height: 65px;
  color: #ffffff;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.3s ease, transform 0.35s ease;
}

.menu-list li a {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.menu-list li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.menu-list li a:hover::after {
  width: 100%;
}

.menu-overlay.is-open .menu-list li:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.5s;
}
.menu-overlay.is-open .menu-list li:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.55s;
}
.menu-overlay.is-open .menu-list li:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s;
}
.menu-overlay.is-open .menu-list li:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.65s;
}
.menu-overlay.is-open .menu-list li:nth-child(5) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.7s;
}

.menu-overlay.is-closing .menu-list li {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.1s ease, transform 0.1s ease;
  transition-delay: 0s !important;
}

.menu-plus {
  display: none;
  font-size: 24px;
  color: #ffffff;
}

/* Right column */
.menu-panel__right {
  flex: 1;
  display: flex;
  gap: 24px;
  background: #202020;
  border-radius: 16px;
  max-height: 583px;
  margin-top: 50px;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.menu-overlay.is-open .menu-panel__right {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.5s;
}

.menu-overlay.is-closing .menu-panel__right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  transition-delay: 0s;
}

.menu-contact-card {
  padding: 70px 0 70px 80px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.menu-contact-card h3 {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 65px;
  letter-spacing: -2px;
  color: #ffffff;
}

.menu-contact-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-contact-block .label {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  display: flex;
  align-items: center;
  color: #999999;
  text-transform: capitalize;
}

.menu-contact-block .value {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.menu-image-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.menu-image-wrap img {
  width: 100%;
  object-fit: cover;
}

.social-row {
  display: flex;
  gap: 7px;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  transition: background 0.3s ease; /* smooth bg change */
}

.social-icon svg path {
  transition: fill 0.3s ease; /* smooth icon color change */
}

.social-icon:hover {
  background: linear-gradient(90deg, #3954fe 0%, #04d3fb 100%);
}

.social-icon:hover svg path {
  fill: #fff;
}


/* ========================================
   CONTACT POPUP STYLES - SLIDE FROM RIGHT
   ======================================== */
.contact-popup-overlay {
  position: fixed;
  top: 0;
  right: -600px;
  width: 520px;
  height: 100vh;
  z-index: 9999;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-popup-overlay.is-open {
  right: 20px;
}

.contact-popup {
  position: relative;
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 26px;
  padding: 40px;
  margin-top: 20px;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}

.contact-popup__close {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
}

.contact-popup__close:hover {
  transform: scale(1.1);
}

.contact-popup__close svg {
  width: 32px;
  height: 32px;
}

.contact-popup__title {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 43px;
  color: #161616;
  margin-top: 40px;
  margin-bottom: 32px;
}

.contact-popup__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Responsive */
@media (max-width: 600px) {
  .contact-popup-overlay {
    width: 100%;
    right: -100%;
  }
  
  .contact-popup-overlay.is-open {
    right: 0;
  }
  
  .contact-popup {
    margin-top: 0;
    height: 100vh;
    border-radius: 0;
    padding: 24px;
  }
  
  .contact-popup__title {
    font-size: 22px;
    margin-top: 32px;
    margin-bottom: 24px;
  }
  
  .contact-popup__close {
    top: 16px;
    left: 16px;
  }
}
.contact-popup__field {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #DDE3E5;
  border-radius: 50px;
  padding: 0 16px;
  height: 56px;
  transition: border-color 0.2s ease;
}

.contact-popup__field:focus-within {
  border-color: #2563eb;
}

.contact-popup__field--textarea {
  height: auto;
  align-items: flex-start;
  padding: 16px;
  border-radius: 20px;
}

.contact-popup__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  flex-shrink: 0;
}

.contact-popup__field--textarea .contact-popup__icon {
  margin-top: 2px;
}

.contact-popup__field input,
.contact-popup__field textarea {
  flex: 1;
  border: none;
  outline: none;
  font-family: "Red Hat Display", sans-serif;
  font-size: 16px;
  color: #333;
  background: transparent;
}

.contact-popup__field input::placeholder,
.contact-popup__field textarea::placeholder {
  color: #999;
}

.contact-popup__field textarea {
  resize: none;
  min-height: 80px;
}

.contact-popup__recaptcha {
  margin-top: 8px;
}

.contact-popup__submit {
  margin-top: 8px;
  width: fit-content;
  padding: 16px 32px;
  background: #0F55DC;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  font-family: "Red Hat Display", sans-serif;
 font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 33px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.contact-popup__submit:hover {
  background: #1d4ed8;
}

body.popup-open {
  overflow: hidden;
}

/* Responsive tweaks */
@media (max-width: 960px) {
  .footer-bottom-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .menu-panel {
    height: auto;
    padding: 24px;
    border-radius: 32px;
    top: 20px;
  }

  .menu-panel__inner {
    flex-direction: column;
    gap: 20px;
  }
  .menu-list li {
    font-size: 30px;
    line-height: 20px;
  }
  .menu-contact-card {
    padding: 20px 0 20px 20px;
  }
  .menu-contact-card h3 {
    font-size: 32px;
  }
  .menu-contact-block .label,
  .menu-contact-block .value {
    font-family: 14px;
  }
  .menu-tagline {
    font-size: 14px;
    line-height: 20px;
  }
  .menu-panel__logo-row {
    gap: 8px;
  }
  
  .contact-popup {
    padding: 24px;
    max-width: calc(100% - 40px);
  }
  
  .contact-popup__title {
    font-size: 22px;
    margin-top: 32px;
    margin-bottom: 24px;
  }
  
  .contact-popup__close {
    top: 16px;
    left: 16px;
  }
}

/* ========================================
   DARK HEADER STYLES
   ======================================== */

/* Dark Header - Button */
.header-cta--dark {
  background: transparent;
  border: 2px solid #1d0055;
  color: #1d0055;
}

.header-cta--dark .header-cta__text {
  color: #1d0055;
}

/* Dark Header - Hamburger */
.header-burger--dark {
  background-color: #1d0055;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.header-burger--dark svg {
  width: 29px;
  height: 14px;
}
.arrow-dark{
    width: 18px !important;
    height: 18px !important;
}
.site-header--dark {
  margin-bottom: 130px;
}

@media (max-width: 467px) {
  .site-header__inner {
    padding: 20px;
  }
  .header-cta {
    display: none;
  }
  .brands {
    margin: 40px 0 !important;
    margin-bottom: 0 !important;
  }

  .brands .brand-section {
    gap: 30px !important;
  }

  .brands .startup-pill-wrapper {
    justify-content: center !important;
  }

  .brands .startup-pill-line {
    display: none !important;
  }

  .brands .startup-pill {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }

  .brands .logo-grid {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .brands .logo {
    width: 28% !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .brands .logo h2 {
    font-size: 16px !important;
  }
  .marquee-section{
    padding: 70px 0 !important;
  }
  .marquee-item{
    font-size: 50px !important;
    line-height: 80px !important;
  }
  .marquee-star{
    width: 50px;
    height: 50px;
  }
  .container{
    padding: 20px;
  }
}
/* CF7 Form Container */
.contact-popup .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-popup .wpcf7-form p {
    display: flex;
    align-items: flex-start;
    margin: 0;
}

.contact-popup .wpcf7-form br {
    display: none;
}

/* Field wrapper */
.contact-popup__field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid #E5E7EB;
}

.contact-popup__field--textarea {
    align-items: flex-start;
}

/* Icon */
.contact-popup__icon {
    flex-shrink: 0;
}

.contact-popup__icon svg {
    width: 18px;
    height: 18px;
}

/* Input fields */
.contact-popup__field .wpcf7-form-control-wrap {
    flex: 1;
    width: 100%;
}

.contact-popup__field input[type="text"],
.contact-popup__field input[type="email"],
.contact-popup__field input[type="tel"],
.contact-popup__field textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Funnel Display', sans-serif;
    font-size: 15px;
    color: #111112;
    padding: 0;
}

.contact-popup__field input::placeholder,
.contact-popup__field textarea::placeholder {
    color: #9CA3AF;
}

.contact-popup__field textarea {
    resize: none;
    min-height: 120px;
    line-height: 1.5;
}

/* Validation */
.contact-popup .wpcf7-not-valid-tip {
    font-size: 12px;
    color: #dc3545;
    margin-top: 5px;
}

.contact-popup .wpcf7-response-output {
    margin: 15px 0 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}

.contact-popup .wpcf7-spinner {
    margin: 10px auto;
}
/* Submit button wrapper */
.contact-popup .wpcf7-form p:has(.wpcf7-submit) {
    position: relative;
    margin: 0;
}

/* Submit button */
.contact-popup .wpcf7-submit {
    width: 100%;
    max-width: 221px;
    padding: 0;
    background: #2563EB;
    color: white;
    border: none;
    border-radius: 50px;
    font-family: 'Funnel Display', sans-serif;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
}

.contact-popup .wpcf7-submit:hover {
    background: #1d4ed8;
}

/* Hide default spinner */
.contact-popup .wpcf7 .wpcf7-spinner {
    display: none !important;
    visibility: hidden !important;
}

/* Button loading state - when disabled */
.contact-popup .wpcf7-submit:disabled {
    background: #2563EB;
    color: transparent;
    pointer-events: none;
}

.contact-popup .wpcf7-submit:disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -11px;
    margin-left: -11px;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success state */
.contact-popup .wpcf7-form.sent .wpcf7-submit {
    background: #10B981;
    color: white;
    pointer-events: none;
}

.contact-popup .wpcf7-form.sent .wpcf7-submit::after {
    display: none;
}

/* Success/Error messages */
.contact-popup .wpcf7-response-output {
    order: -1;
    margin: 0 0 10px 0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    font-family: 'Funnel Display', sans-serif;
    border: none;
}

/* Hide empty message */
.contact-popup .wpcf7-response-output:empty {
    display: none;
    padding: 0;
    margin: 0;
}

/* Success message */
.contact-popup .wpcf7-form.sent .wpcf7-response-output {
    background: #ECFDF5;
    border: 1px solid #10B981;
    color: #065F46;
    margin: 0;
}

/* Error/Invalid message */
.contact-popup .wpcf7-form.failed .wpcf7-response-output,
.contact-popup .wpcf7-form.invalid .wpcf7-response-output {
    background: #FEF2F2;
    border: 1px solid #EF4444;
    color: #991B1B;
}

/* Field validation */
.contact-popup .wpcf7-not-valid-tip {
    font-size: 12px;
    color: #EF4444;
    margin-top: 6px;
}
.menu-overlay.is-open .menu-list li:nth-child(6) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.75s;
}