:root {
  --primary-color-form: #6D28D9;
  --primary-color-form-light: #f1ebff;
  --form-box-selected-color: #7e57c2;
}



* {
border-style: none;
box-sizing: border-box;
padding: 0;
margin: 0;
}

body {
font-family: 'Poppins', sans-serif;
color: #333;
line-height: 1.6;
}

.feature-checkbox {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    border: 1px solid var(--primary-color-form);
}

.feature-checkbox.selected {
    background: var(--form-box-selected-color);
    border: 1px solid var(--primary-color-form);
}

.feature-checkbox:hover {
    transform: translateY(-2px);
}

.feature-input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;
top: 0;
left: 0;
}


.feature-checkbox.selected .feature-label{
color: white;
}

.feature-checkbox.selected .feature-label .fas::before {
color: white;
}

.for-border-radius {
    border-radius: 0.5rem;
}
.feature-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #495057;
    width: 100%;
}

.feature-label .fas::before {
    font-size: 20px;
    color: var(--primary-color-form);
}


.gap-adjusted-2 {
gap:3rem;
}

.fa-arrow-left::before {
    color: #7C3AED;
}

.for-btn-gap {
    gap: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
text-align: center;
padding: 20px;
}

.text-align-center-main-form {
    text-align: center;
}
.gridpd {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 20px;

}
.to-purple-700 {
--tw-gradient-to: rgba(126, 34, 206, 1);
}

.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 1000;
width: 90%;
max-width: 900px;
max-height: 85vh;
overflow-y: auto;
border: 1px solid rgba(0, 0, 0, 0.1);
animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
from {
opacity: 0;
transform: translate(-50%, -60%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}

.modal h2 {
color: #5e35b1;
margin-top: 0;
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f3f4f6;
display: flex;
align-items: center;
gap: 10px;
}

.modal h2 i {
font-size: 28px;
color: #7e57c2;
}

.modal button {
background-color: #7e57c2;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
font-size: 16px;
box-shadow: 0 4px 6px rgba(126, 87, 194, 0.2);
}

.modal button:hover {
background-color: #5e35b1;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(126, 87, 194, 0.3);
}

.modal button:disabled {
background-color: #e5e7eb;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.modalbuttons {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding-top: 20px;
border-top: 2px solid #f3f4f6;
gap: 15px;
}

.modalbuttons button {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.modalbuttons button i {
font-size: 18px;
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
backdrop-filter: blur(5px);
transition: opacity 0.3s ease;
}

.overlay.active {
display: block;
animation: overlayFadeIn 0.3s ease-out;
}

@keyframes overlayFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.step select {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 2px solid #e5e7eb;
border-radius: 8px;
background-color: #f9fafb;
font-size: 16px;
transition: all 0.3s ease;
}

.step select:focus {
outline: none;
border-color: #7e57c2;
box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.1);
}

.steps-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
padding: 15px;
background-color: #f9fafb;
border-radius: 12px;
position: relative;
}

.steps-indicator::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background-color: #e5e7eb;
transform: translateY(-50%);
z-index: 1;
}

.step-indicator {
position: relative;
z-index: 2;
font-weight: 600;
color: #7e57c2;
padding: 12px 20px;
border-radius: 8px;
background-color: #fff;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.step-indicator i {
font-size: 18px;
color: #7e57c2;
}

.step-indicator.active {
background-color: #7e57c2;
color: white;
box-shadow: 0 4px 8px rgba(126, 87, 194, 0.3);
}

.step-indicator.active i {
color: white;
}

.step-indicator.completed {
background-color: #10b981;
color: white;
}

.step-indicator.completed i {
color: white;
}

.step-options {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin: 30px 0;
}

.step-option-box .fas::before, .fab::before {
    color: var(--primary-color-form);
}

.step-option-box .fab::before {
    color: var(--primary-color-form);
}

.step-option-box.selected .fab::before {
    color: white;
}

.step-option-box.selected .fas::before, .fab::before {
    color: white;
}

.step-option-box {
padding: 12px 20px;
border: 2px solid #7e57c2;
border-radius: 16px;
background-color: #f9fafb;
color: #5e35b1;
font-weight: 500;
cursor: pointer;
text-align: center;
transition: all 0.3s ease;
flex: 1;
max-width: 180px;
font-size: 14px;
box-shadow: 0 4px 6px rgba(126, 87, 194, 0.1);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}

.step-option-box i {
font-size: 32px;
transition: all 0.3s ease;
}

.step-option-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(126, 87, 194, 0.2);
background-color: #ede7f6;
}

.step-option-box:hover i {
transform: scale(1.1) rotate(5deg);
}

.step-option-box.selected {
background-color: #7e57c2;
border-color: #5e35b1;
color: white;
box-shadow: 0 8px 15px rgba(126, 87, 194, 0.3);
}

.step-option-box.selected i {
color: white;
transform: scale(1.1);
}

.option-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.option-title {
font-weight: 600;
font-size: 18px;
}

.option-description {
font-size: 14px;
color: #6b7280;
line-height: 1.4;
}

.step {
margin-bottom: 30px;
padding: 25px;
background-color: #f9fafb;
border-radius: 16px;
border: 1px solid #e5e7eb;
}

.step p {
font-size: 16px;
margin-bottom: 15px;
color: #4b5563;
line-height: 1.6;
display: flex;
align-items: center;
gap: 8px;
}

.step p i {
color: #7e57c2;
font-size: 18px;
}

.blur {
filter: blur(5px);
transition: filter 0.3s ease;
}

.close-button {
position: absolute;
top: 20px;
right: 20px;
background: none !important;
color: #6b7280 !important;
font-size: 24px;
border: none;
cursor: pointer;
padding: 8px !important;
line-height: 1;
border-radius: 50%;
transition: all 0.3s ease;
}

.close-button:hover {
color: #5e35b1 !important;
background-color: #f3f4f6 !important;
}

.selected-service {
background-color: #7c3aed !important; /* Light purple */
border-color: #9c27b0 !important; /* Darker purple */

box-shadow: 0 4px 10px rgba(156, 39, 176, 0.5) !important; /* Optional: Add shadow for emphasis */
/* transform: scale(1.05) !important; Slightly enlarge the card */
transition: all 0.3s ease !important; /* Smooth transition for visual feedback */
}

.selected-service label {
background-color: #d1a3e0 !important; /* Light purple */
border: 2px solid #9c27b0 !important; /* Darker purple */

box-shadow: 0 4px 10px rgba(156, 39, 176, 0.5) !important; /* Optional: Add shadow for emphasis */

transition: all 0.3s ease !important; /* Smooth transition for visual feedback */
}
.service-card {
height: 192px;
position: relative;
transition: all 0.3s ease;
margin-bottom: 30px;
cursor: pointer;
display: flex;
flex-direction: column;
border: none !important; /* Remove any border */
color: #333;
}

.service-card label {
display: flex;
flex-direction: column;
align-items: flex-start; /* Left align content */
justify-content: flex-start;
padding: 30px;
height: 100%;
width: 100%;
border-radius: 0;
background-color: transparent !important;
backdrop-filter: none !important;
transition: all 0.3s ease;
border: none !important;
position: relative;
}



.service-card.selected-service::after {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 23px;
right: 30px;
color: #6D28D9;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
z-index: 100;
background-color: #FFD700;
}


/* Override for Tailwind */
.service-card.selected-service label.bg-white\/80,
.service-card.selected-service label.backdrop-blur-md {
background-color: #d1a3e0 !important;
backdrop-filter: none !important;
}

/* Selected service styles */
.service-card.selected-service {
background-color: rgba(139, 92, 246, 0.3);
color: white;/* Increased opacity for better visibility */
}

.service-card:hover .service-icon {
transform: translateY(-5px);
}
.service-card.selected-service .service-icon {
background-color: #fff3;
box-shadow: 0 4px 20px rgba(109, 40, 217, 0.4);
}
/* Change divider color for selected card */
.service-card.selected-service .service-divider {
background: linear-gradient(90deg, #FFD700 0%, #FFC000 100%); /* Yellow gradient for selected card */
}

/* Override for Tailwind */
.service-card.selected-service label {
transform: none;
}

/* Button styles */
.next-button {
width: 200px;
background-color: #7C3AED;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: inline-block;
}

.next-button:disabled {
background-color: #A5A6F6;
cursor: not-allowed;
opacity: 0.7;
}

.navigation-button {
background-color: transparent;
border: 2px solid var(--primary-color-form);
color: #6366f1;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}

.navigation-button:hover {
background-color: var(--primary-color-form-light);
color: white;
}



/* Form styles */
.form-label {
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
color: #333;
}


.form-input {
width: 100%;
padding: 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 0.375rem;
background-color: #f9fafb;
color: #333;
transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
outline: none;
border-color: #7c3aed;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.form-input.error {
border-color: #ef4444;
}

.pdfontcolor {
color: #6300ff;
}

.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
input:focus, textarea:focus {
outline: 3px solid #c88aff;

}


.service-icon {
width: 64px;
height: 64px;
background-color: #7c3aed;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.5rem;
color: white;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
margin-top: 0;
}


.service-divider {
height: 0.25rem;
width: 100%;
background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
position: absolute;
bottom: 0;
left: 0;
transition: all 0.3s ease;
}


.service-title {
font-weight: 600;
font-size: 1.25rem;
line-height: 1.75rem;
margin-top: 0;
margin-bottom: 12px; /* Push title to top */
text-align: left; /* Left align text */
}

.brandscolor .fa-brands::before {
color: grey;
}
#prevBtn.hidden {
display: none;
}
#prevBtn {
display: flex;
}



@media (max-width: 458px) {
.service-card {
height: 122px;
margin-bottom: 15px;
}


.gap-adjusted-2 {
gap:2rem;
}

.service-icon {
width: 45px;
height: 45px;
margin-bottom: 0.8rem !important;
}

.service-title {
margin-bottom: 0;
font-size: 0.78em;
line-height:1.3;
}


.service-card.selected-service::after {
top: 28px;
right: 8px;
width: 21px;
    height: 21px;
        font-size: 11px;
}

.grid {
gap: 5px;
padding: 0px;
}

.service-card label {
padding: 10px;
}

.fa-solid, .fas {
font-size: 16px;
}
}

.for-check-box {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 12px;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            border: 1px solid #6D28D9;
        }

        .for-check-box.selected {
            background: #6D28D9;
            border: 1px solid #6D28D9;
        }

        .for-check-box:hover {
            transform: translateY(-2px);
        }

        .for-feature-input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
        }

        .for-check-box.selected .for-feature-label {
            color: white;
        }

        .for-check-box.selected .for-feature-label .fab::before {
            color: white;
        }

        .for-check-box.selected .for-feature-label .fas::before {
            color: white;
        }

        .for-feature-label {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 16px;
            color: #495057;
            width: 100%;
        }

        .for-feature-label .fab::before {
            font-size: 20px;
            color: #6D28D9;
        }
        .for-feature-label .fas::before {
            font-size: 20px;
            color: #6D28D9;
        }
        .for-feature-label.select .fas::before {
            font-size: 20px;
            color: white;
        }
        @media screen and (max-width: 770px) {
            .gridpd {
                grid-template-columns: repeat(1, 1fr);
            }
            .display-none {
                display: none;
            }
            .step-option-box {
                font-size: 12px;
            }
            .for-feature-label {
                font-size: 12px;
            }
        }
        @media screen and (max-width: 475px) {
            .gridpd {
                padding: 0px;
            }
            .modal button {
                padding: 8px 6px;
                 font-size: 12px;
            }
            .modal {
                 padding: 30px;
            }
        }