:root {
    --primary-color: #2A85FF;
    --text-primary: #092C4C; /* Figma primary text color */
    --text-secondary: #6F767E; /* Google Docs secondary text color */
    --background-light: #FCFCFC;
    --border-color: #E6E8EC;
    --white: #FFFFFF;
    --background-form: #E7F3FF;
    --error-color: #FF4E41;
    --success-color: #83BF6E;
    --white-transparent: rgba(255, 255, 255, 0.8);
    --text-success-submit: #989BA2;
    --Primary-color-Tangerine-red: #FF4E41;
    --Text-Text-Oxford-Blue-Disable: rgba(9, 44, 76, 0.38);
    --Text-Links-Indigo: #2F54EB;
    --text-description-color: rgba(9, 44, 76, 0.87); /* New variable for description text color from Figma */

    /* Font Sizes from Google Docs and Figma */
    --font-size-h1: 56px; /* For contact-banner__title Desktop */
    --font-size-h1-tablet: 32px; /* For contact-banner__title Tablet */
    --font-size-h1-mobile: 28px; /* For contact-banner__title Mobile */
    --font-size-h2: 32px; /* For contact-form__title Desktop */
    --font-size-h2-mobile: 28px; /* For contact-form__title Mobile */
    --font-size-h3: 24px; /* For support__title--social & offer-card__title */
    --font-size-sub1: 18px; /* For contact-banner__subtitle Desktop */
    --font-size-sub1-mobile: 16px; /* For contact-banner__subtitle Mobile */
    --font-size-body: 16px; /* For input, textarea, button text & offer-card__description */
    --font-size-small: 14px; /* For labels */
    --font-size-extra-small: 12px; /* For privacy policy, error messages */
    --font-size-card-title-mobile: 20px; /* For offer-card__title Mobile */
    --font-size-card-title-desktop: 24px; /* For offer-card__title Desktop */

    /* Spacing variables based on Figma. Assuming rem based on existing code */
    --spacing-4: 0.25rem; /* 4px */
    --spacing-6: 0.375rem; /* 6px */
    --spacing-8: 0.5rem; /* 8px */
    --spacing-12: 0.75rem; /* 12px */
    --spacing-16: 1rem; /* 16px */
    --spacing-20: 1.25rem; /* 20px */
    --spacing-24: 1.5rem; /* 24px */
    --spacing-40: 2.5rem; /* 40px */
    --spacing-48: 3rem; /* 48px */
    --spacing-72: 4.5rem; /* 72px */
    --spacing-80: 5rem; /* 80px */
    --spacing-120: 7.5rem; /* 120px */
    --spacing-160: 10rem; /* 160px */
}

.main {
    background: var(--Background-Normal-Linear, linear-gradient(180deg, #f2f7ff 0%, #fff 100%));
}

.section-container {
    /* padding-left: var(--spacing-20);
    padding-right: var(--spacing-20); */
    max-width: 1440px; /* Assuming a max width for content */
    margin: 0 auto;
    padding: var(--spacing-40) 0 var(--spacing-20) 0;
}

.contact-banner {
    position: relative;
    height: 34.0625rem; /* Keep original height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--text-primary); /* Use defined variable */
    text-align: left; /* Align text to left */
}

.contact-banner__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.contact-banner__title {
    position: relative;
    margin-bottom: var(--spacing-16);
    text-transform: capitalize;
    font-size: var(--font-size-h1); /* Use defined variable */
    font-weight: 600;
    line-height: 1.2; /* From Google Docs */
}

.contact-banner__subtitle {
    position: relative;
    z-index: 1;
    color: var(--text-secondary); /* Use defined variable */
    font-size: var(--font-size-sub1); /* Use defined variable */
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* From Google Docs */
    letter-spacing: 0.03125rem;
}

.support-form {
    display: flex;
    justify-content: space-between;
    padding-top: calc(var(--spacing-120) + var(--spacing-72)); /* Adjusted padding */
    padding-bottom: var(--spacing-120); /* Adjusted padding */
    position: relative;
    gap: var(--spacing-80);
}

.support {
    width: 37.5rem; /* Keep original width */
    position: relative;
    z-index: 1;
    flex-shrink: 0; /* Prevent shrinking */
}

/* .support-form .overlay {
    position: absolute;
    width: 60.1875rem;
    height: 52.9375rem;
    flex-shrink: 0;
    border-radius: 60.1875rem;
    opacity: 0.45;
    background: radial-gradient(59.51% 59.51% at 50% 50%, #FFFDFD 20.5%, #FFC7E5 49.5%, #B2E8FF 85%, #5940FC 100%);
    filter: blur(200px);
    left: -25%;
    bottom: -30%;
} */

.support__title {
    color: var(--text-primary); /* Use defined variable */
    line-height: normal;
    font-weight: 600;
    letter-spacing: 0.00938rem;
    font-size: var(--font-size-body); /* Set default to 16px */
}

.support__title--social {
    font-size: var(--font-size-h3); /* From Google Docs */
    padding-bottom: var(--spacing-24);
    border-bottom: 1px solid rgba(9, 44, 76, 0.16);
    margin-bottom: var(--spacing-24);
}

.support__content {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-48);
    color: var(--text-secondary); /* Use defined variable */
    font-size: var(--font-size-body); /* Use defined variable */
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* From Google Docs */
    display: inline-block !important;
}

.support__content a {
    display: inline-block !important;
    color: var(--Text-Links-Indigo);
    font-size: var(--font-size-body); /* Use defined variable */
    font-style: normal;
    font-weight: 600;
    line-height: 1.5; /* From Google Docs */
    letter-spacing: 0.03125rem; /* From Google Docs: letter-spacing-sub1-400 */
}

/* Contact Form 7 specific overrides and validation styles */
.wpcf7-form {
    display: flex;
    flex-direction: column;
}

form > .wpcf7-response-output {
    display: none; /* Hide default, control via JS */
}

.support-form .wpcf7 form .wpcf7-response-output {
    border: none;
    border-color: unset;
    margin: var(--spacing-16) 0 0; /* Adjusted margin */
    color: var(--error-color); /* Use error color */
    font-size: var(--font-size-extra-small); /* Use defined variable */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.025rem;
    padding: 0;
    text-align: center; /* Center the general error message */
}

.support-form .wpcf7 form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: var(--text-success-submit); /* Use success color */
}

.support-form .wpcf7 form .wpcf7-response-output.wpcf7-validation-errors {
    color: var(--error-color); /* Ensure error color for validation messages */
}

@media (min-width: 640px) {
    .support__social-media {
        border-top: 1px solid rgba(9, 44, 76, 0.16);
        padding-top: var(--spacing-24);
    }
    .contact-sales-popup__body__left{
        width: 41.25rem;
    }
}

.support__social-media {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: var(--spacing-16); /* Add gap for consistent spacing */
}

.support__social-item {
    position: relative;
    border-radius: var(--spacing-8); /* 6px converted to rem 0.375rem */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: 0; /* Remove fixed margin for flex gap to handle */
}

.support__social-item-bg {
    border-radius: var(--spacing-8);
    position: absolute;
    border: 1px solid #8997c8; /* This color is not in the variables, keep as is or define if needed */
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background: linear-gradient(180deg, #c6c4df 0%, #7972b6 100%); /* Keep as is or define if needed */
}

.support__social-item-img {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
}

.contact-form {
    flex: 1;
    background-color: var(--background-form); /* Changed to white from Figma */
    padding: var(--spacing-40); /* Adjusted padding */
    border-radius: var(--spacing-24);
    width: 41.25rem;
    text-align: center;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08); /* From Figma */
}

.contact-form__title {
    margin: auto;
    max-width: 27.25rem;
    margin-bottom: var(--spacing-48);
    color: var(--text-primary);
    font-size: var(--font-size-h2); /* Adjusted from Google Docs */
    font-weight: 600;
}

.contact-form__groups {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: var(--spacing-8); /* Gap between fields */
    margin-bottom: var(--spacing-20); /* Added margin-bottom */
}

.contact-form__groups .contact-form__field {
    flex: 1;
    min-width: 48%; /* To allow two fields per row on desktop */
}

.contact-form__groups .contact-form__field:not(:last-child) {
    margin-right: 0; /* Remove fixed margin for flex gap to handle */
}

.contact-form__form {
    display: flex;
    flex-direction: column;
}

.contact-form__field {
    margin-bottom: var(--spacing-8); /* Consistent spacing */
    text-align: left;
    transition: all 0.3s ease-in-out; /* Smooth transition for hidden fields */
}

/* Initially hide all conditional fields */
.contact-form__field--hidden {
    display: none !important;
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.contact-form__field--visible {
    display: block !important;
    opacity: 1;
    height: auto;
    overflow: visible;
    margin-bottom: var(--spacing-20) !important;
    padding-top: unset !important;
    padding-bottom: unset !important;
}

#affiliate-working-field{
    margin-top: var(--spacing-20) !important;
}

#other-describe-field{
    margin-top: var(--spacing-20) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset;
}
/* .multi-select-options label{
    width: 100%;
} */

.contact-form__subheading {
    color: var(--text-primary); /* Use defined variable */
    font-size: var(--font-size-body); /* From Google Docs */
    font-weight: 500;
    margin-bottom: var(--spacing-8); /* Adjusted for better spacing */
    text-align: left;
    font-family: var(--font-body);
    font-style: normal;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.5px;
}

.support-form .contact-form__field .wpcf7-not-valid-tip {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600; /* From Google Docs */
    line-height: normal; /* From Google Docs */
    letter-spacing: 0.025rem;
    transition: 0.3s ease-in-out;
    color: var(--error-color);
    font-size: var(--font-size-extra-small);
    margin-top: var(--spacing-4); /* Add some space below the input */
    display: block; /* Ensure it takes its own line */
}

.contact-form__input,
.contact-form__textarea {
    width: 100%;
    padding: var(--spacing-12) var(--spacing-16); /* Adjusted padding */
    border: 1px solid var(--border-color); /* Solid border from Figma */
    border-radius: var(--spacing-4);
    background: var(--white-transparent);
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: 500;
    line-height: 1.5; /* From Google Docs */
    letter-spacing: 0.00938rem;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: var(--Text-Text-Oxford-Blue-Disable); /* Use defined variable */
    font-size: var(--font-size-body); /* Should match input font size */
    font-weight: 500;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none;
    border-color: var(--primary-color); /* Highlight on focus */
    background-color: var(--white); /* Solid white on focus */
}

.wpcf7-not-valid {
    border-color: var(--error-color) !important; /* Red border for invalid fields */
}

.contact-form__field--submit {
    position: relative;
    margin-top: var(--spacing-20); /* Adjusted margin-top */
    margin-bottom: var(--spacing-8); /* Space before privacy policy */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Stack button and privacy text */
}
.contact-form__field--submit p {
    width: 100%;
    min-width: 129px;
}

.contact-form__field--submit .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.contact-form__button {
    width: 100%; /* Full width button */
    padding: var(--spacing-16) var(--spacing-40); /* Adjusted padding */
    border-radius: var(--spacing-4);
    background-color: var(--Primary-color-Tangerine-red);
    color: var(--white);
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.5; /* From Google Docs */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.contact-form__button:hover {
    background-color: #e64236; /* Slightly darker red on hover */
}

.contact-form__button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
#footer-form{
    text-align: left !important;
}

#footer-form span {
    font-size: var(--font-size-extra-small);
    font-weight: 400; /* From Google Docs */
    line-height: 1.5; /* From Google Docs */
    letter-spacing: 0.025rem;
    display: inline;
    white-space: normal;
    word-wrap: break-word;
    color: var(--oxford-blue-oxford-blue-72, rgba(9, 44, 76, 0.72));
    font-family: var(--font-body);
    font-style: italic;
    line-height: normal;
    letter-spacing: 0.4px;
}

#footer-form a {
    color: var(--text-secondary);
    text-decoration: underline;
    display: inline;
}

/* Custom Select Dropdown (for "You are contacting us as:") */
.contact-form__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="12" height="12"><path fill="%23092C4C" d="M207.029 381.476L12.69 181.44c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 283.432l154.745-154.845c9.389-9.355 24.549-9.337 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem; /* Make space for the custom arrow */
}

/* Hide the default arrow in IE/Edge */
.contact-form__select::-ms-expand {
    display: none;
}

/* Multi-select checkbox custom styling */
.contact-form__field--multi-select {
    position: relative;
}

.multi-select-display {
    width: 100%;
    padding: var(--spacing-12) var(--spacing-16);
    border: 1px solid var(--border-color);
    border-radius: var(--spacing-4);
    background: var(--white-transparent);
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.00938rem;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.multi-select-display.placeholder {
    color: var(--Text-Text-Oxford-Blue-Disable);
}

.multi-select-dropdown-icon {
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23092C4C" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}

.multi-select-display.active .multi-select-dropdown-icon {
    transform: rotate(180deg);
}

.multi-select-popup {
    position: absolute;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--spacing-4);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    top: 100%; /* Position below the input */
    left: 0;
    width: 100%;
    z-index: 10;
    display: none; /* Hidden by default, controlled by JS */
    max-height: 400px; /* Max height for scrolling */
    overflow-y: auto; /* Enable scrolling */
    flex-direction: column;
}

.multi-select-popup.active {
    display: flex;
}

.multi-select-search {
    width: 94%; /* Account for padding */
    padding: var(--spacing-12) var(--spacing-16);
    border: 1px solid var(--border-color);
    border-radius: var(--spacing-4);
    margin: var(--spacing-16);
    font-size: var(--font-size-body);
    color: var(--text-primary);
    /* Add icon styles */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16"><path fill="%236F767E" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>');
    background-repeat: no-repeat;
    background-position: var(--spacing-16) center; /* Position icon with left padding */
    padding-left: calc(var(--spacing-16) + 16px + var(--spacing-8)); /* Add padding for icon + icon width + small gap */
}

.multi-select-options .wpcf7-list-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-12) var(--spacing-16);
    cursor: pointer;
    margin: 0;
}

.multi-select-options .wpcf7-list-item:hover {
    background-color: rgba(9, 44, 76, 0.05); /* Light hover effect */
}

.multi-select-options input[type="checkbox"] {
    margin-right: var(--spacing-8);
    width: auto; /* Override default 100% */
    height: auto; /* Override default padding */
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--spacing-4);
    background: transparent;
    appearance: checkbox; /* Ensure default checkbox appearance */
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
}

.multi-select-options .wpcf7-list-item-label {
    flex: 1;
    font-size: var(--font-size-body);
    color: var(--text-primary);
    cursor: pointer;
}

/* Style for disabled multi-select options */
.multi-select-options .multi-select-option--disabled {

    color: var(--Text-Text-Oxford-Blue-Disable); /* Gray out text */
    cursor: not-allowed;
}

.multi-select-options .multi-select-option--disabled .wpcf7-list-item-label {
    color: var(--Text-Text-Oxford-Blue-Disable, rgba(9, 44, 76, 0.38)) !important;
    font-weight: 500;
    opacity: 1;
    cursor: not-allowed;
}
.multi-select-options .multi-select-option--disabled input[type="checkbox"] {
    opacity: 0.5;
    cursor: not-allowed;
}

#btn-submit{
    border-radius: var(--spacing-4);
    background: #092C4C;
    display: flex;
    width: 100%;
    padding: var(--16, 16px) var(--32, 32px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.contact-sales-popup__body__right__form .form__collab__inputs .wpcf7-not-valid-tip::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Pro';
    font-size: 0.75rem;
    color: var(--error-color, #FF4E41);
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* .custom-checkbox-error::before, */
.wpcf7-not-valid-tip::before {
    content: '\f06a';
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 0.75rem;
    color: #FF4E41;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
}
[type="radio"]
{
    accent-color: #1D85E8;
    transform: scale(1.5387);
    margin-right: 8px;
    padding: 4px 0px;
}

[type="checkbox"]
{
    accent-color: #1D85E8;
    transform: scale(1.2311);
    margin-right: 8px;
    padding: 4px 0px;
}
.brand-campaign .wpcf7-list-item label{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.brand-campaign .wpcf7-list-item label{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.brand-campaign .wpcf7-list-item:first-child{
    margin-left: 0.25rem;
}
#custom-success-message{
    color: #0C5132;
    font-family: var(--font-body);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.4px;
}

.support-form .overlay {
    display: none;
}
.contact-sales-popup__body__left__header{
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-h1);
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 78.4px */
    text-transform: capitalize;
}
.contact-sales-popup__body__left__sub-title{
    font-family: var(--font-body);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-40);
}
.contact-sales-popup__body__left__logo-title{
    font-family: var(--font-body);
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
}

.contact-us-title-description-support {
    color: rgba(9, 44, 76, 0.72);
}

.section-app__title {
    color: var(--text-primary);
    text-align: center;
    font-size: 3rem; /* 48px from Figma, converted to rem */
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-80);
}

.offers-grid {
    display: flex;
    justify-content: space-between; /* Changed to space-between for flush left/right alignment */
    gap: var(--spacing-40); /* Gap between cards remains 40px */
    padding-bottom: var(--spacing-80);
}

.offer-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background-color: var(--white);
    border-radius: 0.625rem;
    padding: var(--spacing-40);
    gap: var(--spacing-20);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    width: 27.5rem; /* Set width to 440px (27.5rem) to fit 3 cards with 40px gaps in a 1400px effective width */
    max-width: 27.5rem; /* Also set max-width to 440px (27.5rem) */
    border: 0.0625rem solid #EBEBEB;
}

.offer-card__icon {
    margin-bottom: 0;
    width: 3.75rem;
    height: 3.75rem;
}

.offer-card__icon img {
    object-fit: contain;
    border-radius: 8.752px;
    background: var(--2, linear-gradient(330deg, #11DCFD -70.8%, #5F95FF 22.01%, #31AECA 101.07%));
    box-shadow: 0 5.854px 13.61px 0 rgba(0, 166, 255, 0.34);
    width: 100%;
    height: 100%;
}

.offer-card__title {
    color: var(--text-primary);
    font-size: var(--font-size-h3); /* 24px from Figma, using existing variable */
    font-weight: 600;
    line-height: 1.5; /* 1.5em from Figma */
    margin-bottom: 0;
}

.offer-card__description {
    color: var(--text-description-color); /* Using new variable for rgba(9, 44, 76, 0.87) */
    font-size: var(--font-size-body); /* 16px from Figma, using existing variable */
    line-height: 1.6; /* 1.6em from Figma */
    letter-spacing: 0.03125rem; /* 3.125% from Figma, converted to rem */
    margin-bottom: 0;
    flex-grow: 1;
    height: 5rem; /* 80px from Figma, converted to rem for fixed height */
    overflow: hidden; /* Ensure text does not overflow fixed height */
}

.offer-card__button {
    display: inline-block;
    padding: var(--spacing-8) var(--spacing-20); /* 8px 20px from Figma, converted to rem */
    border: 0.0625rem solid var(--text-primary); /* 1px solid #092C4C from Figma */
    border-radius: var(--spacing-4); /* 4px from Figma, using existing variable */
    color: var(--text-primary); /* #092C4C from Figma */
    font-size: var(--font-size-body); /* 16px from Figma, using existing variable */
    font-weight: 500;
    line-height: 1.5; /* 1.5em from Figma */
    letter-spacing: 0.015625rem; /* 1.5625% from Figma, converted to rem */
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    align-self: flex-start;
}

.offer-card__button:hover {
    background-color: var(--Neutral-Grascale-colors-Gray-4, #e5e7eb); /* Changed to --text-primary for hover effect */
}

/* Responsive Styles for the new section */
@media (max-width: 1024px) {
    .section-app__title {
        font-size: var(--font-size-h2); /* Adjust title for tablets */
        margin-bottom: var(--spacing-48);
    }

    .offers-grid {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-24);
        padding-bottom: var(--spacing-72);
        justify-content: center; /* Revert to center for stacked cards on smaller screens */
    }

    .offer-card {
        width: 100%;
        max-width: 600px;
        padding: var(--spacing-40);
    }
}

@media (max-width: 768px) {
    .contact-sales-popup__body__left__sub-title{
        margin-bottom: var(--spacing-40);
    }
    /* Styles for the main section and grid */
    .section-container {
        padding-top: var(--spacing-40);
        padding-bottom: var(--spacing-40);
    }
    #main .contact-sales-popup__container, .contact-app .section-app__title, .offers-grid{
        padding-right: var(--spacing-20);
        padding-left: var(--spacing-20);
    }
    

    .section-app__title {
        font-size: var(--font-size-h1-mobile); /* 28px from Figma, using existing variable */
        margin-bottom: var(--spacing-40); /* 40px gap below title */
        text-align: left; /* Text alignment left as per Figma for mobile */
    }

    .offers-grid {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-40); /* 40px gap between cards */
        padding-bottom: var(--spacing-40); /* 40px padding bottom */
    }

    /* Styles for individual offer cards */
    .offer-card {
        padding: var(--spacing-20); /* 20px padding from Figma */
        gap: var(--spacing-20); /* 20px gap between content elements */
        border-radius: 0.625rem; /* 10px from Figma */
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08); /* From Figma */
        border: 0.0625rem solid #EBEBEB; /* 0.67px border from Figma */
        width: 100%; /* Full width on mobile */
        max-width: 100%; /* Ensure it takes full width */
    }

    .offer-card__icon {
        margin-bottom: 0;
    }

    .offer-card__title {
        font-size: var(--font-size-card-title-mobile); /* 20px from Figma, using new variable */
        line-height: 1.5; /* 1.5em from Figma */
        margin-bottom: 0;
    }

    .offer-card__description {
        font-size: var(--font-size-body); /* 16px from Figma */
        line-height: 1.6; /* 1.6em from Figma */
        letter-spacing: 0.03125rem; /* 3.125% from Figma */
        height: 5rem; /* 80px fixed height from Figma */
        margin-bottom: 0;
    }

    .offer-card__button {
        padding: var(--spacing-8) var(--spacing-20); /* 8px 20px from Figma */
        border: 0.0625rem solid var(--text-primary); /* 1px solid #092C4C from Figma */
        border-radius: var(--spacing-4); /* 4px from Figma */
        font-size: var(--font-size-body); /* 16px from Figma */
        font-weight: 500;
        line-height: 1.5; /* 1.5em from Figma */
        letter-spacing: 0.015625rem; /* 1.5625% from Figma */
    }
    .main .support-form{
        padding-top: 6.75rem;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-40);
    }
    .support-form .contact-form__groups{
        display: flex;
        flex-direction: column;
    }
    .support-form .contact-form {
        width: 100%;
    }
    .contact-sales-popup__body__left__sub-title{
        margin-bottom: 0;
        font-size: 1rem;
    }

    .contact-sales-popup__body__left__header{
        font-size: 2.125rem;
    }
    .multi-select-search {
        width: 100%;
        margin: 0;
    }
}
@media screen and (min-device-width: 425px) and (max-device-width: 1000px) { 
    [data-name="brand-campaign"] label span{
        font-size: var(--font-size-small);
        font-weight: 500;
    }
}

.contact-sales-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black-light-3);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100lvw;
    height: 100lvh;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out;
  }

  #expected-monthly-ref-sale {
    	appearance: none;       /* Chrome, Safari */
      -webkit-appearance: none; /* Safari */
      -moz-appearance: none; 
  }

  #expected-monthly-ref-sale + i {
    color:#000000;
    position: absolute;
    right: 0.75rem;
    top: 0.25rem;  
  }

  .form__contact__sales--submit {
    input {
      width: 100%;
      display: inline-block;
      margin-top: 0.25rem;
      border-radius: 4px;
      background: linear-gradient(271deg, #3B291F -34.31%, #A78656 53.84%);
      box-shadow: 0px 4px 59.7px 0px rgba(255, 241, 241, 0.25);
      color: #FFF;
      text-align: center;
      font-family: var(--font-body);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      letter-spacing: 0.009rem;
      outline: none!important;
      border: none!important;
      transition: all 0.25s linear;
    }
  }

  .form__contact__sales--submit {
    display: block;
    position: relative;
  }

  .form__contact__sales--submit span {
    position: absolute;
    top: 26%;
    right: 0;
    left: 40%;
    bottom: 0;
    display: inline-block;
  }

  .form__contact__sales--submit input:hover {
    cursor: pointer;
    background: linear-gradient(271deg, #3B291F -34.31%, #7f6237b7 53.84%);
  }

  .form__collab__inputs .wpcf7-form-control-wrap input::placeholder, .form__collab__inputs .wpcf7-form-control-wrap select.placeholder {
    color: rgba(94, 94, 94, 0.38);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: 0.009375rem;
  }

  .wrapper__infinity{
    display: flex;
    align-items: center;
  }
  .wrapper__infinity .gallery{
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
    white-space: nowrap;
    animation: rotation 5s linear infinite;
    max-width: 26.813rem;
    height: 3.75rem;
  }

  .wrapper__infinity .gallery img:first-of-type {
    margin-left: 0;
  }

  .wrapper__infinity img {
    width: 6.2rem;
    height: 4.8rem;
    object-fit: cover;
    margin-left: 1.25rem;
  }
    .contact-sales-popup__body__left__logo-wrapper .contact-sales-popup__body__left__logo {
    display: flex;
    align-items: center;
    gap: 1.775rem;
    overflow: hidden;
  }

  @keyframes rotation {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

.wpcf7-response-output.wpcf7-validation-errors {
    display: none !important;
}
.multi-select-no-data {
    width: 100%;
    min-height: var(--spacing-160);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #BFC8D5;
    font-size: var(--font-size-sub1);
    font-weight: 500;
    gap: var(--spacing-16);
    background: var(--white);
    border-radius: var(--spacing-12);
    margin-top: var(--spacing-16);
}
.multi-select-no-data__icon {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.multi-select-no-data__text {
    color: #607380;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: 400;
    line-height: var(--spacing-20);
}

.multi-select-tag {
    display: inline-block;
    background: #E6E8EC;
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-weight: 500;
    border-radius: var(--spacing-6);
    padding: var(--spacing-4) var(--spacing-12);
    margin-right: var(--spacing-4);
    margin-bottom: 0;
    vertical-align: middle;
    box-shadow: none;
    border: none;
    letter-spacing: 0.01em;
    opacity: 0.72;
}

.multi-select-tag--more {
    background: #E6E8EC;
    color: var(--text-primary);
    font-weight: 500;
    opacity: 0.72;
}
.multi-select-display {
    min-height: var(--spacing-40);
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    display: flex;
    justify-content: flex-start;
}