.contact-form-section {
    padding: 9.26vh 1.25vw 9.26vh;
    background: linear-gradient(to top, #d9d9d973 0%, #D9D9D973 30%, #d9d9d973 60%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.contact-form-section::after {
    content: 'JDC.JDC.JDC.JDC.JDC.JDC.JDC.JDC.';
    position: absolute;
    bottom: 1.85vh;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 15.56vh;
    font-weight: 900;
    color: rgb(255 255 255 / 22%);
    letter-spacing: 0.03vh;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    user-select: none;
    font-family: 'Inter', sans-serif;
    text-align: center;
    overflow: hidden;
}

.contact-form-container {
    max-width: 46.88vw;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 3;
}

.contact-form-title {
    font-size: 3.8vh;
    font-weight: 800;
    color: #000000 !important;
    margin-bottom: 2.22vh;
    letter-spacing: -0.04vh;
    line-height: 1.1;
    text-shadow: 0 0.19vh 0.37vh rgba(0, 0, 0, 0.02);
    position: relative;
    white-space: nowrap;
}

.contact-form-title .title-highlight,
.contact-form-title .title-highlight:hover,
.contact-form-title .title-highlight:focus,
.contact-form-title .title-highlight:active,
.contact-form-title .title-highlight:visited,
.contact-form-wizard .contact-form-title .title-highlight,
.contact-form-wizard .contact-form-title .title-highlight:hover,
.contact-form-wizard .contact-form-title .title-highlight:focus,
.contact-form-wizard .contact-form-title .title-highlight:active,
.contact-form-wizard .contact-form-title .title-highlight:visited,
.contact-form-title .services-highlight,
.contact-form-title .title-dot {
    color: #b3ce3a !important;
}

.contact-form-subtitle {
    font-size: 1.63vh;
    color: #545454;
    margin-top: 1.48vh;
    font-weight: 500;
    line-height: 1.5;
    max-width: 26.04vw;
    margin-left: auto;
    margin-right: auto;
}

.contact-form-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.22vh;
    gap: 0.83vw;
}

.contact-form-badge .badge-line {
    width: 2.08vw;
    height: 0.09vh;
    background: linear-gradient(90deg, transparent, #000000, transparent);
    border-top: 0.09vh solid #000000;
}

.contact-form-badge .badge-text {
    font-size: 1.3vh;
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.1vh;
    text-transform: uppercase;
}

.contact-form-description {
    font-size: 1.8vh;
    color: #545454;
    margin: 0;
    line-height: 1.6;
    max-width: 31.25vw;
    margin: 0 auto;
}

.contact-form-content {
    background: transparent;
    padding: 0;
    margin-top: 1.85vh;
}

.contact-form-wizard {
    display: flex;
    flex-direction: column;
    gap: 3.7vh;
}

.form-continue-btn {
    background: #b3ce3a;
    color: white;
    border: none;
    border-radius: 1.48vh;
    padding: 1.85vh 4.44vw;
    font-size: 1.63vh;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 auto;
    min-width: 10.42vw;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.74vh 2.96vh rgba(15, 23, 42, 0.2), 0 0.09vh 0 rgba(255, 255, 255, 0.1) inset;
    letter-spacing: 0.02vh;
}

.form-continue-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.form-continue-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #020617 0%, #000000 100%);
    transform: translateY(-0.37vh) scale(1.02);
    box-shadow: 0 1.48vh 4.44vh rgba(15, 23, 42, 0.3), 0 0.74vh 2.22vh rgba(0, 0, 0, 0.15), 0 0.09vh 0 rgba(255, 255, 255, 0.15) inset;
}

.form-continue-btn:hover:not(:disabled)::before {
    left: 100%;
}

.form-continue-btn:disabled {
    background: #000000;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 0.37vh 1.48vh rgba(148, 163, 184, 0.2);
}

.form-continue-btn:not(:disabled) {
    cursor: pointer;
    pointer-events: auto;
}

.section-divider {
    padding: 5.56vh 1.25vw;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.divider-line {
    position: relative;
    max-width: 10.42vw;
    margin: 0 auto;
    height: 0.19vh;
    background: linear-gradient(90deg, transparent, rgba(179, 206, 58, 0.6), transparent);
    border-radius: 1.48vh;
}

.form-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.22vh;
    margin-bottom: 5.56vh;
    margin-top: 6.48vh;
}

.form-option {
    background: rgba(255, 255, 255, 0.95);
    border: 0.09vh solid rgba(226, 232, 240, 0.6);
    border-radius: 1.48vh;
    padding: 3.7vh 2.5vw;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(1vh);
    box-shadow: 0 0.37vh 1.85vh rgba(0, 0, 0, 0.04), 0 0.09vh 0 rgba(255, 255, 255, 0.8) inset;
    transform: translateY(0);
}

.form-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 93, 35, 0.02) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-option:hover {
    transform: translateY(-1.11vh) scale(1.02);
    box-shadow: 0 1.85vh 5.56vh rgba(26, 36, 16, 0.2), 0 0.74vh 2.31vh rgba(26, 36, 16, 0.1), 0 0 0 0.09vh rgba(26, 36, 16, 0.05);
    border-color: rgba(26, 36, 16, 0.15);
    background: #ffffff;
}

.form-option:hover::before {
    opacity: 1;
}

.form-option.selected {
    border: 0.2vh solid #000000;
    background: linear-gradient(135deg, rgba(26, 36, 16, 0.02) 0%, rgba(45, 74, 26, 0.02) 100%);
    box-shadow: 0 0.8vh 3.2vh rgba(26, 36, 16, 0.15);
    transform: translateY(-0.2vh);
}

.form-option.selected .option-icon {
    background: #000000;
    transform: scale(1.05);
}

.form-option.selected .option-icon svg {
    color: #ffffff;
    transform: scale(1.1);
    filter: drop-shadow(0 0.2vh 0.4vh rgba(0, 0, 0, 0.2));
}

.form-option.selected .option-title {
    color: #000000;
    font-weight: 700;
}

.form-option:active,
.form-option.selected:active {
    transform: translateY(-0.1vh) scale(0.98);
    transition: all 0.1s ease;
}

.option-icon {
    width: 5.93vh;
    height: 5.93vh;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 1.48vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2.22vh;
    color: #475569;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.37vh 1.11vh rgba(0, 0, 0, 0.05);
}

.option-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 1.6vh;
    opacity: 0;
}

.option-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    opacity: 0;
    transform: rotate(0deg);
}

.option-icon svg {
    width: 2.8vh;
    height: 2.8vh;
    color: #475569;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0.19vh 0.37vh rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

.form-option:hover .option-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 1.11vh 3.24vh rgba(26, 36, 16, 0.25);
    background: #b3ce3a;
}

.form-option:hover .option-icon::before {
    opacity: 1;
}

.form-option:hover .option-icon::after {
    opacity: 1;
    transform: rotate(180deg);
    transition: all 0.6s ease;
}

.form-option:hover .option-icon svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0.4vh 0.8vh rgba(0, 0, 0, 0.2));
    color: #ffffff;
}

.form-option:hover .option-title {
    color: #000000;
    transform: translateY(-0.2vh);
}

.form-option:hover .option-description {
    color: #545454;
}

.option-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.option-title {
    font-size: 1.63vh;
    font-weight: 800;
    color: #000000;
    margin-bottom: 0.74vh;
    line-height: 1.3;
    letter-spacing: -0.01vh;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-badge {
    display: inline-block;
    background: #E5E7EB;
    color: #374151;
    font-size: 1.11vh;
    font-weight: 600;
    padding: 0.37vh 0.83vw;
    border-radius: 0.56vh;
    margin-bottom: 0.74vh;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.option-description {
    font-size: 1.6vh;
    transition: all 0.3s ease;
    color: #545454;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

.form-step-2 {
    margin-top: 5.56vh;
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translateY(2.78vh);
    animation-fill-mode: forwards;
}

.form-step-2 .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.48vh;
    margin-bottom: 1.85vh;
    max-width: 100%;
}

.form-step-2 .service-card {
    padding: 1.85vh 1vw;
    min-height: 14.81vh;
    background: #FFFFFF;
    border-radius: 1.48vh;
    box-shadow: 0 0.19vh 1.11vh rgba(26, 36, 16, 0.06);
    border: 0.09vh solid rgba(26, 36, 16, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.form-step-2 .service-card .icon-circle,
.form-step-2 .service-card .icon-circle svg,
.form-step-2 .service-card .service-title {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-step-2 .service-card:hover {
    transform: translateY(-0.37vh) scale(1.01);
    box-shadow: 0 0.74vh 2.31vh rgba(26, 36, 16, 0.12);
    border-color: rgba(26, 36, 16, 0.1);
}

.form-step-2 .service-card.selected {
    border: 0.2vh solid #000000;
    background: linear-gradient(135deg, rgba(26, 36, 16, 0.02) 0%, rgba(45, 74, 26, 0.02) 100%);
    box-shadow: 0 0.8vh 3.2vh rgba(26, 36, 16, 0.15);
    transform: translateY(-0.2vh);
}

.form-step-2 .service-card.selected .icon-circle {
    background: #000000;
    transform: scale(1.05);
}

.form-step-2 .service-card.selected .icon-circle svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0.2vh 0.4vh rgba(0, 0, 0, 0.2));
}

.form-step-2 .service-card.selected .service-title {
    color: #000000;
    font-weight: 700;
}

.form-step-2 .service-card:active,
.form-step-2 .service-card.selected:active {
    transform: translateY(-0.1vh) scale(0.98);
    transition: all 0.1s ease;
}

.form-step-2 .service-card.featured {
    border: 0.2vh solid #000000;
    box-shadow: 0 0.4vh 2vh rgba(26, 36, 16, 0.1);
}

.form-step-2 .service-icon {
    margin-bottom: 1.48vh;
}

.form-step-2 .icon-circle {
    width: 4.07vh;
    height: 4.07vh;
    border-radius: 1.11vh;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.form-step-2 .icon-circle svg {
    width: 1.85vh;
    height: 1.85vh;
    color: #ffffff;
    transition: all 0.3s ease;
}

.form-step-2 .service-title {
    font-size: 1.6vh;
    font-weight: 600;
    color: #000000;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

.services-header {
    text-align: center;
    margin-bottom: 4.63vh;
}

.form-step-2 .services-title {
    font-size: 2.04vh;
    font-weight: 700;
    color: #000000;
    margin-bottom: 1.11vh;
    line-height: 1.2;
}

.services-subtitle {
    font-size: 1.63vh;
    color: #545454;
    font-weight: 500;
    max-width: 26.04vw;
    margin: 0 auto;
    line-height: 1.5;
}

.services-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.85vh;
    margin-bottom: 2.78vh;
    max-width: 52.08vw;
    margin-left: auto;
    margin-right: auto;
}

.service-card:nth-child(1) { animation-delay: 0.1s; position: relative; z-index: 10;}
.service-card:nth-child(2) { animation-delay: 0.2s; position: relative; z-index: 10;}
.service-card:nth-child(3) { animation-delay: 0.3s; position: relative; z-index: 10;}
.service-card:nth-child(4) { animation-delay: 0.4s; position: relative; z-index: 10;}
.service-card:nth-child(5) { animation-delay: 0.5s; position: relative; z-index: 10;}
.service-card:nth-child(6) { animation-delay: 0.6s; position: relative; z-index: 10;}
.service-card:nth-child(7) { animation-delay: 0.7s; position: relative; z-index: 10;}
.service-card:nth-child(8) { animation-delay: 0.8s; position: relative; z-index: 10;}

.service-row-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 93, 35, 0.02) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-row-2:hover {
    border-color: rgba(74, 93, 35, 0.3);
    background: rgba(255, 255, 255, 0.98);
    transform: translateY(-0.6vh) scale(1.02);
    box-shadow: 0 2vh 6vh rgba(74, 93, 35, 0.12), 0 0.8vh 2.4vh rgba(0, 0, 0, 0.08), 0 0.1vh 0 rgba(255, 255, 255, 0.9) inset;
}

.service-row-2:hover::before {
    opacity: 1;
}

.service-row-2.selected {
    border-color: #4a5d23;
    background: rgba(74, 93, 35, 0.05);
    box-shadow: 0 0.8vh 3.2vh rgba(74, 93, 35, 0.15), 0 0.1vh 0 rgba(255, 255, 255, 0.9) inset;
}

.form-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vh;
    margin-top: 8vh;
    position: relative;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 0.8vh;
    background: transparent;
    border: 0.2vh solid rgba(100, 116, 139, 0.3);
    color: #64748b;
    padding: 1.4vh 2.4vh;
    border-radius: 1.6vh;
    font-size: 1vh;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: absolute;
    left: 0;
}

.btn-back svg {
    width: 1.8vh;
    height: 1.8vh;
}

.btn-back:hover {
    border-color: #000000;
    color: #000000;
    background: rgba(74, 93, 35, 0.05);
    transform: translateX(-0.2vh);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(3vh); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(4vh) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.form-step-3 {
    margin-top: 3vh;
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translateY(3vh);
    animation-fill-mode: forwards;
}

.email-collection {
    max-width: 25vw;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.email-header {
    margin-bottom: 4vh;
}

.email-icon {
    width: 6vh;
    height: 6vh;
    margin: 0 auto 2.4vh;
    background: #4a5d23;
    border-radius: 1.6vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.4vh 1.6vh rgba(74, 93, 35, 0.15);
    position: relative;
    overflow: hidden;
}

.email-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

.email-icon svg {
    width: 2.8vh;
    height: 2.8vh;
    color: white;
    z-index: 1;
    position: relative;
}

.email-title {
    font-size: 2vh;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1.2vh;
    letter-spacing: -0.02vh;
}

.email-subtitle {
    font-size: 1.125vh;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

.email-form {
    margin-bottom: 4vh;
}

.email-input-group {
    margin-bottom: 3.2vh;
}

.input-wrapper {
    position: relative;
    margin-bottom: 0.8vh;
}

.email-input {
    width: 100%;
    padding: 1.8vh 2.4vh;
    font-size: 1.6vh;
    border: 0.2vh solid rgba(100, 116, 139, 0.2);
    border-radius: 1.6vh;
    background: white;
    color: var(--gray-900);
    transition: all 0.3s ease;
    outline: none;
    box-shadow: 0 0.4vh 2vh rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 5;
    display: block;
    visibility: visible;
    opacity: 1;
}

.email-input::placeholder {
    color: var(--gray-400);
    font-weight: 400;
}

.email-input:hover,
.email-input:focus {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0.6vh 2.4vh rgba(0, 0, 0, 0.08), 0 0 0 0.2vh rgba(0, 0, 0, 0.05);
    transform: translateY(-0.1vh);
    background: rgba(255, 255, 255, 0.98);
}

.input-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0.2vh solid transparent;
    border-radius: 1.6vh;
    background: #000000 border-box;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.email-input:focus + .input-border {
    opacity: 1;
}

.input-glow {
    position: absolute;
    top: -0.2vh;
    left: -0.2vh;
    right: -0.2vh;
    bottom: -0.2vh;
    background: #000000;
    border-radius: 1.6vh;
    opacity: 0;
    filter: blur(0.8vh);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.email-input:focus ~ .input-glow {
    opacity: 0.3;
}

.email-validation {
    font-size: 1.6vh;
    font-weight: 500;
    min-height: 2vh;
    transition: all 0.3s ease;
}

.email-validation.valid {
    color: #22c55e;
}

.email-validation.invalid {
    color: #ef4444;
}

.email-benefits {
    display: flex;
    flex-direction: column;
    gap: 1.6vh;
    margin-top: 1.8vh;
    margin-bottom: 3.2vh;
}

.benefit-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2vh;
    padding: 1.2vh 1.6vh;
    background: rgba(0, 0, 0, 0.08);
    border: 0.1vh solid rgba(0, 0, 0, 0.15);
    border-radius: 1.6vh;
    color: #000000;
    font-size: 1.2vh;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.benefit-item:hover {
    background: rgba(0, 0, 0, 0.12);
    transform: translateX(0.4vh);
}

.benefit-item svg {
    width: 1.6vh;
    height: 1.6vh;
    color: #000000;
    flex-shrink: 0;
}

.benefit-item span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-loading svg {
    width: 2vh;
    height: 2vh;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.personal-info-collection {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40vh;
    padding: 4vh 0;
}

.personal-info-form {
    width: 100%;
    max-width: 60vw;
    margin: 0 auto;
}

.name-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vh;
    margin-bottom: 3vh;
}

.input-group {
    position: relative;
}

.name-input,
.message-input {
    width: 100%;
    padding: 2vh 2.4vh;
    font-size: 1.6vh;
    font-weight: 500;
    color: #000000;
    background: #ffffff;
    border: 0.2vh solid rgba(0, 0, 0, 0.2);
    border-radius: 1.6vh;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 0.4vh 2vh rgba(0, 0, 0, 0.04);
}

.name-input:hover,
.message-input:hover {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0.6vh 2.4vh rgba(0, 0, 0, 0.08), 0 0 0 0.2vh rgba(0, 0, 0, 0.05);
    transform: translateY(-0.1vh);
    background: rgba(255, 255, 255, 0.98);
}

.name-input:focus {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0.6vh 2.4vh rgba(74, 93, 35, 0.08), 0 0 0 0.2vh rgba(74, 93, 35, 0.05);
    transform: translateY(-0.1vh);
    background: rgba(255, 255, 255, 0.98);
}

.message-input {
    resize: vertical;
    min-height: 12vh;
    font-family: inherit;
    line-height: 1.6;
}

.message-input:focus {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0.6vh 2.4vh rgba(0, 0, 0, 0.08), 0 0 0 0.2vh rgba(0, 0, 0, 0.05);
    transform: translateY(-0.1vh);
    background: rgba(255, 255, 255, 0.98);
}

.name-input::placeholder,
.message-input::placeholder {
    color: #545454;
    font-weight: 400;
}

.message-input-group {
    position: relative;
    margin-bottom: 2vh;
}

.form-error-message {
    display: flex;
    align-items: center;
    gap: 1.2vh;
    padding: 1.6vh 2vh;
    margin-bottom: 2vh;
    background: #fef2f2;
    border: 0.2vh solid #fecaca;
    border-left: 0.4vh solid #ef4444;
    border-radius: 1.2vh;
    color: #991b1b;
    font-size: 1.4vh;
    font-weight: 500;
    animation: slideInError 0.3s ease-out;
    box-shadow: 0 0.2vh 0.8vh rgba(239, 68, 68, 0.1);
}

.form-error-message .error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4vh;
    height: 2.4vh;
    flex-shrink: 0;
    color: #ef4444;
}

.form-error-message .error-icon svg {
    width: 100%;
    height: 100%;
}

.form-error-message .error-text {
    flex: 1;
    line-height: 1.5;
}

@keyframes slideInError {
    from {
        opacity: 0;
        transform: translateY(-1vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-step-5 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 6vh 0;
}

.success-message {
    text-align: center;
    max-width: 25vw;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    border: none;
}

.success-icon {
    width: 8vh;
    height: 8vh;
    margin: 0 auto 3.2vh;
    background: linear-gradient(135deg, #000000, #333333);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successPulse 2s ease-in-out infinite;
}

.success-icon svg {
    width: 4vh;
    height: 4vh;
    color: white;
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 2vh rgba(0, 0, 0, 0); }
}

.success-title {
    font-size: 3.2vh;
    font-weight: 700;
    color: #000000;
    margin-bottom: 1.6vh;
}

.success-subtitle {
    font-size: 1.6vh;
    color: #545454;
    margin-bottom: 2.4vh;
    font-weight: 500;
}

.success-details {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 1.6vh;
    padding: 2.4vh;
    margin-bottom: 4vh;
    border-left: 0.4vh solid #000000;
}

.success-details p {
    color: #545454;
    font-size: 1.6vh;
    line-height: 1.6;
    margin: 0;
}

.success-actions {
    display: flex;
    justify-content: center;
    gap: 2vh;
}

.btn-start-new {
    background: #000000;
    color: white;
    border: 0.1vh solid #000000;
    border-radius: 1.6vh;
    padding: 1.5vh 2vh;
    font-size: 1.3vh;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.4vh 1.2vh rgba(0, 0, 0, 0.1);
}

.btn-start-new:hover {
    transform: translateY(-0.2vh);
    box-shadow: 0 0.4vh 1.2vh rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.3);
    color: #000000;
}

.btn-start-new:active {
    transform: translateY(0);
}

@media (max-width: 768px) and (min-width: 481px) {
    .form-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.85vh;
        margin-bottom: 4.44vh;
    }

    .form-option {
        padding: 2.22vh 1.39vw;
    }
}

@media (max-width: 480px) {
    .contact-form-section {
        padding: 7.41vh 1.48vw 5.56vh;
    }

    .contact-form-section::after {
        font-size: 8.8vh;
        bottom: 0.93vh;
        letter-spacing: 0.024vh;
    }

    .contact-form-container {
        max-width: 100vw !important;
        padding: 0 2vw !important;
    }

    .contact-form-title {
        font-size: 2.5vh;
        line-height: 1.2;
        white-space: nowrap;
    }

    .contact-form-subtitle {
        font-size: 1.6vh;
        margin-top: 1vh;
        max-width: 85vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .contact-form-badge {
        margin-bottom: 1.48vh;
    }

    .contact-form-badge .badge-line {
        width: 2.31vh;
    }

    .contact-form-badge .badge-text {
        font-size: 1.1vh;
    }

    .contact-form-description {
        font-size: 1.2vh;
        max-width: 85vw !important;
        margin: 0 auto !important;
    }

    .form-options {
        grid-template-columns: 1fr !important;
        gap: 1.5vh !important;
        margin-bottom: 3.7vh;
        max-width: 90vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .contact-form-section .form-option {
        padding: 5vh 4vw !important;
        min-height: 18vh !important;
        height: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .option-icon {
        width: 5vh !important;
        height: 5vh !important;
        margin-bottom: 2vh !important;
    }

    .option-icon svg {
        width: 2.2vh !important;
        height: 2.2vh !important;
    }

    .contact-form-section .form-option .option-title {
        font-size: 1.7vh !important;
        margin-bottom: 1vh !important;
        font-weight: 600 !important;
    }

    .contact-form-section .form-option .option-badge {
        font-size: 1vh !important;
        padding: 0.3vh 1.5vw !important;
        margin-bottom: 0.8vh !important;
    }

    .contact-form-section .form-option .option-description {
        font-size: 1.6vh !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
    }

    .contact-form-content {
        padding: 0;
    }

    .form-continue-btn {
        width: 100%;
        padding: 1.48vh 2.96vw;
        font-size: 1.52vh;
        margin-bottom: 5.56vh;
    }

    .form-step-2 .services-grid {
        grid-template-columns: 1fr;
        gap: 1.2vh;
    }

    .contact-form-section .form-step-2 .service-card {
        padding: 1.5vh 1.5vw !important;
        min-height: 6vh !important;
        height: auto !important;
        border-radius: 1vh !important;
    }

    .contact-form-section .form-step-2 .icon-circle {
        width: 3.5vh !important;
        height: 3.5vh !important;
        border-radius: 0.8vh !important;
        margin-bottom: 0vh !important;
    }

    .contact-form-section .form-step-2 .icon-circle svg {
        width: 1.6vh !important;
        height: 1.6vh !important;
    }

    .contact-form-section .form-step-2 .service-title {
        font-size: 1.5vh !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    .form-step-2 .services-title {
        font-size: 2.56vh;
    }

    .services-subtitle {
        font-size: 1.44vh;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.11vh;
        max-width: 65vw;
    }

    .service-card {
        padding: 1.85vh 1.48vw;
    }

    .service-icon {
        width: 4.44vh;
        height: 4.44vh;
        margin-bottom: 1.11vh;
    }

    .service-icon svg {
        width: 1.85vh;
        height: 1.85vh;
    }

    .service-name {
        font-size: 1.52vh;
    }

    .section-divider {
        padding: 2.78vh 1.48vw;
    }

    .personal-info-form {
        max-width: 85vw !important;
    }

    .name-input,
    .message-input {
        padding: 1.3vh 1.48vw;
        font-size: 1.3vh;
    }

    .message-input {
        min-height: 9.26vh;
    }

    .email-collection {
        max-width: 80vw;
    }

    .email-form {
        margin-bottom: 3vh;
    }

    .email-input {
        padding: 1.5vh 2vh;
        font-size: 1.2vh;
    }

    .benefit-item {
        padding: 1vh 1.2vh;
        font-size: 1vh;
    }

    .success-message {
        padding: 0;
        margin: 0 auto !important;
        max-width: 70vw;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        border: none;
    }

    .success-title {
        font-size: 3.2vh;
    }

    .success-subtitle {
        font-size: 1.8vh;
    }

    .btn-start-new {
        padding: 1.3vh 2.59vw;
        font-size: 1.6vh;
    }

    .form-navigation {
        display: flex;
        justify-content: center;
        align-items: flex-start !important;
        gap: 1vw;
        margin-top: 4vh;
        padding: 0 2vw;
        width: 100%;
        box-sizing: border-box;
    }

    .form-navigation .btn-back {
        flex: 0 0 auto;
        padding: 1.2vh 1.5vw;
        font-size: 0.9vh;
        min-width: 18vw;
        max-width: 22vw;
        margin-top: 0.5vh !important;
        align-self: flex-start !important;
    }

    .form-continue-btn {
        flex: 0 0 auto;
        padding: 1.2vh 2vw;
        font-size: 0.9vh;
        min-width: 25vw;
        max-width: 30vw;
    }

    .form-error-message {
        padding: 1.4vh 1.6vh;
        font-size: 1.2vh;
        gap: 1vh;
    }

    .form-error-message .error-icon {
        width: 2vh;
        height: 2vh;
    }
}

/* Mobile Landscape (Horizontal) - Formulário */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 900px) {
    .contact-form-section {
        padding: 2vh 0.5vw !important;
    }

    .contact-form-section::after {
        font-size: 6vh !important;
        bottom: 0.5vh !important;
    }

    .contact-form-container {
        max-width: 95vw !important;
        padding: 0 1vw !important;
    }

    .contact-form-title {
        font-size: 2.2vh !important;
        margin-bottom: 1vh !important;
    }

    .contact-form-badge {
        margin-bottom: 0.6vh !important;
        gap: 0.6vw !important;
    }

    .contact-form-badge .badge-line {
        width: 1.2vw !important;
        height: 0.08vh !important;
    }

    .contact-form-badge .badge-text {
        font-size: 0.9vh !important;
    }

    .contact-form-description {
        font-size: 1.4vh !important;
        margin-bottom: 1.2vh !important;
    }

    .contact-form-subtitle {
        font-size: 1.3vh !important;
        margin-top: 0.6vh !important;
    }

    /* Step 1 - Form Options */
    .form-options {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.8vh !important;
        margin-bottom: 2vh !important;
        margin-top: 1.5vh !important;
        max-width: 80vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .contact-form-section .form-option {
        padding: 1.5vh 0.5vw !important;
        min-height: 20vh !important;
        max-height: 25vh !important;
        border-radius: 1.5vh !important;
        max-width: 100% !important;
    }

    .contact-form-section .form-option .option-icon,
    body .contact-form-section .form-option .option-icon {
        width: 5vh !important;
        height: 5vh !important;
        margin-bottom: 1.2vh !important;
        border-radius: 1vh !important;
    }

    .contact-form-section .form-option .option-icon svg,
    body .contact-form-section .form-option .option-icon svg {
        width: 2.5vh !important;
        height: 2.5vh !important;
    }

    .contact-form-section .form-option .option-title {
        font-size: 1.8vh !important;
        margin-bottom: 0.6vh !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    .contact-form-section .form-option .option-badge {
        font-size: 1.1vh !important;
        padding: 0.35vh 1.2vw !important;
        margin-bottom: 0.6vh !important;
    }

    .contact-form-section .form-option .option-description {
        font-size: 1.5vh !important;
        line-height: 1.4 !important;
    }

    .contact-form-section .form-continue-btn,
    body .contact-form-section .form-continue-btn {
        padding: 1.8vh 3vw !important;
        font-size: 1.7vh !important;
        margin-bottom: 2vh !important;
        border-radius: 1.5vh !important;
    }

    /* Step 2 - Service Cards */
    .form-step-2 {
        margin-top: 2vh !important;
    }

    .form-step-2 .services-title {
        font-size: 1.8vh !important;
        margin-bottom: 0.8vh !important;
    }

    .services-subtitle {
        font-size: 1.3vh !important;
        margin-bottom: 1vh !important;
    }

    .form-step-2 .services-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.6vh !important;
        margin-bottom: 1vh !important;
        max-width: 55vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .contact-form-section .form-step-2 .service-card {
        padding: 1.2vh 0.5vw !important;
        min-height: 15vh !important;
        max-height: 18vh !important;
        border-radius: 0.5vh !important;
    }

    .contact-form-section .form-step-2 .icon-circle {
        width: 3vh !important;
        height: 3vh !important;
        border-radius: 0.6vh !important;
        margin-bottom: 0.5vh !important;
    }

    .contact-form-section .form-step-2 .icon-circle svg {
        width: 1.5vh !important;
        height: 1.5vh !important;
    }

    .contact-form-section .form-step-2 .service-title {
        font-size: 1.4vh !important;
        line-height: 1.3 !important;
    }

    /* Step 3 - Email Input */
    .email-collection {
        max-width: 90vw !important;
    }

    .email-form {
        margin-bottom: 1.5vh !important;
    }

    .email-input {
        padding: 1vh 1.5vw !important;
        font-size: 1.3vh !important;
        border-radius: 0.6vh !important;
    }

    .benefit-item {
        padding: 0.8vh 1vw !important;
        font-size: 1.2vh !important;
    }

    /* Step 4 - Personal Info */
    .personal-info-form {
        max-width: 90vw !important;
    }

    .name-input,
    .message-input {
        padding: 1vh 1.5vw !important;
        font-size: 1.3vh !important;
        border-radius: 0.6vh !important;
    }

    .message-input {
        min-height: 6vh !important;
    }

    /* Navigation Buttons */
    .form-navigation {
        margin-top: 1.5vh !important;
        gap: 0.8vw !important;
    }

    .form-navigation .btn-back {
        padding: 1vh 1.5vw !important;
        font-size: 1.3vh !important;
        border-radius: 0.6vh !important;
    }

    .form-continue-btn {
        padding: 1vh 1.8vw !important;
        font-size: 1.3vh !important;
        border-radius: 0.6vh !important;
    }

    /* Success Message */
    .success-message {
        max-width: 85vw !important;
    }

    .success-title {
        font-size: 2.2vh !important;
    }

    .success-subtitle {
        font-size: 1.4vh !important;
    }

    .btn-start-new {
        padding: 1vh 2.5vw !important;
        font-size: 1.3vh !important;
        border-radius: 0.6vh !important;
    }
}