/* ================= PARTNER WITH US PAGE MOBILE RESPONSIVE STYLES ================= */

/* ================= MOBILE RESPONSIVE STYLES (max-width: 767px) ================= */

@media (max-width: 767px) {
  
  /* ========== MOBILE TYPOGRAPHY SCALE ========== */
  :root {
    /* Section Titles & Headings */
    --mobile-title-primary: clamp(1.3rem, 4.2vw, 1.7rem);       /* Main section titles */
    --mobile-title-secondary: clamp(1rem, 3.5vw, 1.3rem);     /* Sub-section titles */
    --mobile-title-tertiary: clamp(0.9rem, 3vw, 1.1rem);      /* Card/component titles */
    --mobile-hero-title: clamp(2rem, 8vw, 2.8rem);            /* Hero main title */
    
        /* Body Text & Content */
        --mobile-text-large: clamp(0.9rem, 2.8vw, 1rem);           /* Large body text */
        --mobile-text-base: clamp(0.8rem, 2.4vw, 0.9rem);          /* Standard body text */
        --mobile-text-small: clamp(0.7rem, 2.1vw, 0.8rem);         /* Small text, captions */
        --mobile-subtitle: clamp(1rem, 3.5vw, 1.3rem);             /* Section subtitles */
    
    /* Interactive Elements */
    --mobile-button-text: clamp(0.7rem, 2.4vw, 0.8rem);       /* Button text */
    --mobile-form-text: clamp(0.75rem, 2.2vw, 0.85rem);       /* Form inputs */
    
    /* Decorative & UI Elements */
    --mobile-svg-small: clamp(12px, 3vw, 16px);               /* Small SVGs/icons */
    --mobile-svg-medium: clamp(16px, 4vw, 20px);              /* Medium SVGs */
    
    /* Spacing Scale */
    --mobile-spacing-xs: clamp(0.25rem, 1vw, 0.4rem);         /* Extra small spacing */
    --mobile-spacing-sm: clamp(0.4rem, 1.5vw, 0.6rem);        /* Small spacing */
    --mobile-spacing-md: clamp(0.6rem, 2.5vw, 0.8rem);        /* Medium spacing */
    --mobile-spacing-lg: clamp(0.8rem, 3.5vw, 1.2rem);        /* Large spacing */
    --mobile-spacing-xl: clamp(1rem, 4.5vw, 1.6rem);          /* Extra large spacing */
    --mobile-spacing-xxl: clamp(1.5rem, 6vw, 2.5rem);         /* Section spacing */
    
    /* Container & Layout */
    --mobile-container-padding: clamp(16px, 4vw, 24px);       /* Side padding */
    --mobile-section-padding: clamp(2rem, 8vw, 3.5rem);       /* Section padding */
  }
  
  /* ========== GLOBAL MOBILE CONTAINER SYSTEM ========== */
  .container {
    width: calc(100% - (var(--mobile-container-padding) * 2)) !important;
    max-width: none !important;
    padding: 0 var(--mobile-container-padding) !important;
    margin: 0 auto !important;
  }
  
  .partnerWithUs-hero__container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: clamp(3rem, 6vw, 4.5rem) !important;
    flex-wrap: nowrap !important;
  }
  
  /* ========== SECTION SPACING ========== */
  section {
    padding: var(--mobile-section-padding) 0 !important;
  }
}

/* ================= PARTNER WITH US HERO SECTION MOBILE OPTIMIZATION ================= */

@media (max-width: 767px) {
  
  .partnerWithUs-hero {
    padding: var(--mobile-section-padding) 0 !important;
    overflow: hidden !important;
    background-color: #fff !important;
  }
  
  .partnerWithUs-hero__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: clamp(3rem, 6vw, 4.5rem) !important;
    flex-wrap: nowrap !important;
    padding: 0 var(--mobile-container-padding) !important;
  }
  
  /* ========== CONTENT ORDER & LAYOUT ========== */
  .partnerWithUs-hero__left {
    order: 1 !important;
    width: 100% !important;
    flex: none !important;
    min-width: unset !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }
  
  .partnerWithUs-hero__right {
    order: 2 !important;
    width: 100% !important;
    flex: none !important;
    min-width: unset !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* ========== TYPOGRAPHY & TEXT CONTENT ========== */
  .partnerWithUs-hero__tagline {
    font-size: var(--mobile-subtitle) !important;
    font-weight: 600 !important;
    color: var(--color-secondary) !important;
    margin-bottom: var(--mobile-spacing-md) !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }
  
  .partnerWithUs-hero__title {
    font-size: var(--mobile-hero-title) !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
    margin-bottom: var(--mobile-spacing-lg) !important;
    padding: 0 !important;
  }
  
  .partnerWithUs-hero__divider {
    margin-top: var(--mobile-spacing-lg) !important;
    margin-bottom: var(--mobile-spacing-xxl) !important;
    display: flex !important;
    align-items: center !important;
    max-width: clamp(240px, 70vw, 320px) !important;
    width: 100% !important;
    padding: 0 !important;
  }
  
  .partnerWithUs-hero__divider-svg {
    width: 100% !important;
    height: auto !important;
  }
  
  .partnerWithUs-hero__desc {
    font-family: "Jost", Arial, Helvetica, sans-serif;
    font-size: var(--mobile-text-base) !important;
    color: #232323 !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    padding: 0 !important;
  }
  
  .partnerWithUs-hero__subtitle-group {
    margin-top: var(--mobile-spacing-xxl) !important;
    width: 100% !important;
    padding: 0 !important;
  }
  
  .partnerWithUs-hero__subtitle-group .partnerWithUs-hero__subtitle {
    font-size: var(--mobile-title-secondary) !important;
    font-weight: 700 !important;
    margin-bottom: var(--mobile-spacing-md) !important;
    color: #232323 !important;
  }
  
  .partnerWithUs-hero__partners {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: var(--mobile-spacing-sm) !important;
    flex-wrap: nowrap !important;
    gap: clamp(8px, 2vw, 12px) !important;
  }
  
  .partnerWithUs-hero__partner-logo {
    max-width: clamp(70px, 20vw, 90px) !important;
    max-height: clamp(35px, 10vw, 45px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    flex: 1 !important;
  }
  
  /* ================= FORM CARD MOBILE OPTIMIZATION ================= */
  
  .partnerWithUs-hero__form-card {
    position: relative !important;
    background: #fff !important;
    border: clamp(12px, 3vw, 16px) solid #282828 !important;
    border-radius: 0 !important;
    padding: clamp(1.2rem, 5vw, 1.8rem) clamp(1rem, 4vw, 1.4rem) !important;
    max-width: 90% !important;
    width: 90% !important;
    z-index: 1 !important;
    margin: 0 auto !important;
  }
  
  .partnerWithUs-hero__form-card::before {
    content: '' !important;
    position: absolute !important;
    box-shadow: none !important;
    bottom: -12px !important;
    right: -13px !important;
    width: 13px !important;
    height: 13px !important;
    background-color: #ffffff !important;
    z-index: 2 !important;
  }
  
  .partnerWithUs-hero__form-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -12px !important;
    right: -25px !important;
    width: 13px !important;
    height: 13px !important;
    background-color: #282828 !important;
    z-index: 1 !important;
  }
  
  .partnerWithUs-hero__form-title {
    font-size: clamp(18px, 5vw, 24px) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--mobile-spacing-md) !important;
    text-transform: lowercase !important;
    line-height: 1.2 !important;
  }
  
  .partnerWithUs-hero__form {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(14px, 4vw, 18px) !important;
    margin-top: var(--mobile-spacing-lg) !important;
    width: 100% !important;
  }
  
  .partnerWithUs-hero__form input,
  .partnerWithUs-hero__form textarea {
    background: #eaeaea !important;
    border: none !important;
    border-radius: 0 !important;
    padding: clamp(10px, 3vw, 14px) clamp(12px, 3.5vw, 16px) !important;
    font-size: var(--mobile-form-text) !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    font-family: "Jost", Arial, Helvetica, sans-serif;
  }
  
  .partnerWithUs-hero__form input::placeholder,
  .partnerWithUs-hero__form textarea::placeholder {
    color: var(--color-secondary) !important;
    font-family: "Jost", Arial, Helvetica, sans-serif;
    opacity: 0.8 !important;
  }
  
  .partnerWithUs-hero__form-button {
    background: var(--color-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    border: none !important;
    border-radius: 0 !important;
    margin-top: var(--mobile-spacing-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(4px, 1.5vw, 6px) !important;
    padding: clamp(6px, 2vw, 9px) clamp(16px, 5vw, 24px) !important;
    width: auto !important;
    align-self: flex-start !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: "Jost", Arial, Helvetica, sans-serif;
    min-height: unset !important;
  }
  
  .partnerWithUs-hero__form-arrow {
    font-size: 0.9em !important;
  }
  
  .partnerWithUs-hero__form-button:hover {
    background: #d32f2f !important;
  }
  
  .partnerWithUs-hero__form-button:hover .partnerWithUs-hero__form-arrow {
    transform: translateX(clamp(2px, 1vw, 4px)) !important;
  }
  
  /* Form container and views */
  .partnerWithUs-hero__form-container {
    position: relative !important;
    width: 100% !important;
    min-height: clamp(300px, 75vw, 380px) !important;
    margin: 0 auto !important;
  }
  
  .partnerWithUs-hero__form-view {
    opacity: 1 !important;
    transition: opacity 0.4s ease !important;
    width: 100% !important;
  }
  
  .partnerWithUs-hero__success-view {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
    padding: clamp(15px, 4vw, 20px) 0 !important;
  }
  
  .partnerWithUs-hero__success-title {
    font-size: var(--mobile-title-secondary) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--mobile-spacing-sm) !important;
    line-height: 1.3 !important;
  }
  
  .partnerWithUs-hero__success-desc {
    color: var(--color-secondary) !important;
    font-size: var(--mobile-text-base) !important;
    line-height: 1.5 !important;
    font-family: "Jost", Arial, Helvetica, sans-serif;
  }
  
  /* ================= FORM RADIO AND ROW STYLES ================= */
  
  .partnerWithUs-hero__form .form__radio-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: clamp(18px, 5vw, 28px) !important;
    margin: 0 !important;
    width: auto !important;
    flex: none !important;
  }
  
  .partnerWithUs-hero__form .form__radio-label {
    display: flex !important;
    align-items: center !important;
    gap: clamp(8px, 2vw, 14px) !important;
    cursor: pointer !important;
    font-size: var(--mobile-form-text) !important;
    color: #232323 !important;
    font-family: "Jost", Arial, Helvetica, sans-serif;
    width: auto !important;
    padding: clamp(4px, 1.5vw, 6px) 0 !important;
    flex: none !important;
  }
  
  .partnerWithUs-hero__form .form__radio {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #eaeaea !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }
  
  .partnerWithUs-hero__form .form__radio:checked {
    border: none !important;
    background: #fff !important;
  }
  
  .partnerWithUs-hero__form .form__radio:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--color-primary) !important;
  }
  
  .partnerWithUs-hero__form .form__radio:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
  }
  
  .partnerWithUs-hero__form .form__radio-text {
    font-weight: 400 !important;
    user-select: none !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
    flex: none !important;
  }
  
  .form__row {
    display: flex !important;
    flex-direction: row !important;
    gap: clamp(10px, 3vw, 18px) !important;
    width: 100% !important;
  }
  
  .form__col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  
  .form__col .form__input {
    width: 100% !important;
  }
  
  /* ================= DECORATIVE ELEMENTS MOBILE OPTIMIZATION ================= */
  
  .partnerWithUs-hero__form-inner-corner {
    position: absolute !important;
    top: clamp(10px, 3vw, 13px) !important;
    right: clamp(20px, 6vw, 28px) !important;
    width: clamp(18px, 5vw, 24px) !important;
    height: clamp(14px, 4vw, 18px) !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }
  
  .partnerWithUs-hero__form-corner-arrow {
    position: absolute !important;
    top: clamp(-4px, -1vw, -3px) !important;
    right: clamp(12px, 4vw, 16px) !important;
    width: clamp(22px, 6vw, 28px) !important;
    height: clamp(22px, 6vw, 28px) !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }
  body .hero__partners-2 {
    justify-content: normal !important; /* Full width horizontal distribution */
    flex-wrap: nowrap !important; /* Single row */
    gap: clamp(0.5rem, 2vw, 1rem) !important; /* Smaller gaps for full width */
    margin-top: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    padding: 0 !important; /* Remove horizontal padding for full width */
    display: flex !important;
    align-items: center !important;
    width: 100% !important; /* Take full width */
  }
}

/* ================= MOBILE SUB-BREAKPOINTS FOR ENHANCED RESPONSIVE DESIGN ================= */

/* Extra Small Mobile (max-width: 375px) */
@media (max-width: 375px) {
  
  
  .partnerWithUs-hero__container {
    gap: clamp(1.5rem, 5.3vw, 1.9rem) !important;
  }
  
  .partnerWithUs-hero__form-card {
    max-width: 95% !important;
    width: 95% !important;
    border-width: clamp(10px, 2.5vw, 14px) !important;
    padding: clamp(1rem, 4.5vw, 1.3rem) clamp(0.8rem, 3.5vw, 1.1rem) !important;
  }
  
  .partnerWithUs-hero__form {
    gap: clamp(12px, 3.5vw, 16px) !important;
  }
  
  .partnerWithUs-hero__partners {
    gap: clamp(12px, 3.5vw, 16px) !important;
  }
  
  .partnerWithUs-hero__partner-logo {
    max-width: clamp(60px, 18vw, 75px) !important;
    max-height: clamp(30px, 9vw, 37px) !important;
  }
  
  .form__radio {
    width: clamp(16px, 4vw, 20px) !important;
    height: clamp(16px, 4vw, 20px) !important;
  }
  
  .form__radio:checked::after {
    width: clamp(8px, 2vw, 10px) !important;
    height: clamp(8px, 2vw, 10px) !important;
  }
}

/* Small Mobile (376px - 414px) */
@media (min-width: 376px) and (max-width: 414px) {
  
  
  .partnerWithUs-hero__form-card {
    padding: clamp(1.1rem, 4.7vw, 1.5rem) clamp(0.9rem, 3.7vw, 1.2rem) !important;
  }
  
  .partnerWithUs-hero__partners {
    gap: clamp(14px, 3.7vw, 18px) !important;
  }
  
  .partnerWithUs-hero__partner-logo {
    max-width: clamp(65px, 19vw, 80px) !important;
    max-height: clamp(32px, 9.5vw, 40px) !important;
  }
  
  .partnerWithUs-hero__form-inner-corner {
    top: clamp(9px, 2.8vw, 11px) !important;
    right: clamp(18px, 5.5vw, 24px) !important;
    width: clamp(17px, 4.8vw, 22px) !important;
    height: clamp(13px, 3.8vw, 17px) !important;
  }
  
  .partnerWithUs-hero__form-corner-arrow {
    top: clamp(-4.5px, -1.1vw, -3.5px) !important;
    right: clamp(11px, 3.8vw, 15px) !important;
    width: clamp(20px, 5.8vw, 26px) !important;
    height: clamp(20px, 5.8vw, 26px) !important;
  }
  
  .form__radio {
    width: clamp(17px, 4.2vw, 21px) !important;
    height: clamp(17px, 4.2vw, 21px) !important;
  }
  
  .form__radio:checked::after {
    width: clamp(9px, 2.2vw, 11px) !important;
    height: clamp(9px, 2.2vw, 11px) !important;
  }
}

/* Medium Mobile (415px - 480px) */
@media (min-width: 415px) and (max-width: 480px) {
  
  
  .partnerWithUs-hero__form-card {
    padding: clamp(1.2rem, 4.8vw, 1.6rem) clamp(1rem, 3.8vw, 1.3rem) !important;
  }
  
  .partnerWithUs-hero__partners {
    gap: clamp(16px, 3.8vw, 20px) !important;
  }
  
  .partnerWithUs-hero__partner-logo {
    max-width: clamp(70px, 19.5vw, 85px) !important;
    max-height: clamp(35px, 9.7vw, 42px) !important;
  }
  
  .partnerWithUs-hero__form-inner-corner {
    top: clamp(10px, 3vw, 12px) !important;
    right: clamp(20px, 5.8vw, 26px) !important;
    width: clamp(18px, 4.9vw, 23px) !important;
    height: clamp(14px, 3.9vw, 17px) !important;
  }
  
  .partnerWithUs-hero__form-corner-arrow {
    top: clamp(-4px, -1vw, -3px) !important;
    right: clamp(12px, 4vw, 16px) !important;
    width: clamp(22px, 6vw, 28px) !important;
    height: clamp(22px, 6vw, 28px) !important;
  }
  
  .form__radio {
    width: clamp(18px, 4.5vw, 22px) !important;
    height: clamp(18px, 4.5vw, 22px) !important;
  }
  
  .form__radio:checked::after {
    width: clamp(10px, 2.5vw, 12px) !important;
    height: clamp(10px, 2.5vw, 12px) !important;
  }
}

/* Large Mobile (481px - 600px) */
@media (min-width: 481px) and (max-width: 600px) {
  
  
  .partnerWithUs-hero__form-card {
    padding: clamp(1.3rem, 4.9vw, 1.7rem) clamp(1.1rem, 3.9vw, 1.4rem) !important;
  }
  
  .partnerWithUs-hero__partners {
    gap: clamp(18px, 4vw, 22px) !important;
  }
  
  .partnerWithUs-hero__partner-logo {
    max-width: clamp(75px, 20vw, 90px) !important;
    max-height: clamp(37px, 10vw, 45px) !important;
  }
  
  .form__radio {
    width: clamp(19px, 4.7vw, 23px) !important;
    height: clamp(19px, 4.7vw, 23px) !important;
  }
  
  .form__radio:checked::after {
    width: clamp(11px, 2.7vw, 13px) !important;
    height: clamp(11px, 2.7vw, 13px) !important;
  }
}

/* Extra Large Mobile (601px - 767px) */
@media (min-width: 601px) and (max-width: 767px) {
  
  
  .partnerWithUs-hero__container {
    gap: clamp(2rem, 6.5vw, 2.8rem) !important;
  }
  
  .partnerWithUs-hero__form-card {
    padding: clamp(1.4rem, 5vw, 1.8rem) clamp(1.2rem, 4vw, 1.5rem) !important;
    border-width: clamp(10px, 2.2vw, 14px) !important;
  }
  
  .partnerWithUs-hero__partners {
    gap: clamp(20px, 4.2vw, 24px) !important;
  }
  
  .partnerWithUs-hero__partner-logo {
    max-width: clamp(80px, 20.5vw, 95px) !important;
    max-height: clamp(40px, 10.2vw, 47px) !important;
  }
  
  .form__radio {
    width: clamp(20px, 5vw, 24px) !important;
    height: clamp(20px, 5vw, 24px) !important;
  }
  
  .form__radio:checked::after {
    width: clamp(12px, 3vw, 14px) !important;
    height: clamp(12px, 3vw, 14px) !important;
  }
}

/* ================= FORM STATE MANAGEMENT ================= */

@media (max-width: 767px) {
  
  /* Success state for form container */
  .partnerWithUs-hero__form-container--success .partnerWithUs-hero__form-view {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  .partnerWithUs-hero__form-container--success .partnerWithUs-hero__success-view {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Focus states for better accessibility */
  .partnerWithUs-hero__form input:focus,
  .partnerWithUs-hero__form textarea:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    background: #fff !important;
  }
  
  /* Active state for button */
  .partnerWithUs-hero__form-button:active {
    transform: translateY(1px) !important;
  }
  
  /* Enhanced touch targets for mobile */
  .form__radio-label {
    min-height: clamp(44px, 11vw, 48px) !important;
    align-items: center !important;
  }
  
  .partnerWithUs-hero__form-button {
    min-height: clamp(44px, 11vw, 48px) !important;
  }
}

/* ================= END PARTNER WITH US MOBILE RESPONSIVE STYLES ================= */

@media (max-width: 400px) {
  .partnerWithUs-hero__form .form__radio-group {
    gap: 4px !important;
  }
  .partnerWithUs-hero__form .form__radio-label {
    gap: 4px !important;
  }
}