:root {

            --primary: #0056b3;

            --primary-light: #e6f0fa;

            --success: #28a745;

            --success-light: #eaf6ec;

            --bg: #f4f6f9;

             --bg: #f4f6f9;

            --card-bg: #ffffff;

            --text-main: #1e293b;

            --text-muted: #64748b;

            --border: #cbd5e1;

            --radius: 12px;

        }

        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

            font-family: 'Inter', sans-serif;

        }



       .wrapper {

            width: 100%;

/*            max-width: 700px;

*/    

            background: var(--card-bg);

            border-radius: var(--radius);

            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

            padding: 40px;

        }



        /* --- UX Stepper Progress Bar --- */

        .stepper {

            display: flex;

            justify-content: space-between;

            align-items: center;

            position: relative;

            margin-bottom: 40px;

        }



        .stepper::before {

            content: '';

            position: absolute;

            top: 18px;

            left: 0;

            width: 100%;

            height: 3px;

            background: #e2e8f0;

            z-index: 1;

        }



        .step-node {

            position: relative;

            z-index: 2;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 8px;

        }



        .circle {

            width: 38px;

            height: 38px;

            background: #fff;

            border: 3px solid #e2e8f0;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: 600;

            color: var(--text-muted);

            font-size: 14px;

            transition: all 0.3s ease;

        }



        .step-label {

            font-size: 12px;

            font-weight: 500;

            color: var(--text-muted);

            transition: all 0.3s ease;

        }



        /* Stepper Active States */

        .step-node.active .circle {

            border-color: var(--primary);

            background: var(--primary);

            color: #fff;

            box-shadow: 0 0 0 4px var(--primary-light);

        }



        .step-node.active .step-label {

            color: var(--primary);

            font-weight: 600;

        }



        .step-node.completed .circle {

            border-color: var(--success);

            background: var(--success);

            color: #fff;

        }



        /* --- Form Elements UX --- */

        .step-content {

            display: none;

        }



        .step-content.active {

            display: block;

            animation: fadeIn 0.4s ease-in-out;

        }



        @keyframes fadeIn {

            from { opacity: 0; transform: translateY(8px); }

            to { opacity: 1; transform: translateY(0); }

        }



        h2 {

            font-size: 22px;

            font-weight: 700;

            color: var(--text-main);

            margin-bottom: 24px;

        }



        .form-group {

            margin-bottom: 24px;

        }



        label {

            display: block;

            font-size: 14px;

            font-weight: 600;

            margin-bottom: 8px;

            color: #334155;

        }



        /* Modern Input Styling */

        input[type="text"], input[type="email"], input[type="tel"] {

            width: 100%;

            padding: 12px 16px;

            border: 1px solid var(--border);

            border-radius: 8px;

            font-size: 15px;

            outline: none;

            transition: all 0.2s;

            background: #f8fafc;

        }



        input:focus {

            border-color: var(--primary);

            background: #fff;

            box-shadow: 0 0 0 3px var(--primary-light);

        }



        /* Custom Grid Selectable Pills for CSS, Voltage etc. */

        .pill-grid {

            display: flex;

            flex-wrap: wrap;

            gap: 10px;

        }



        .pill-item {

            position: relative;

        }



        .pill-item input[type="radio"], .pill-item input[type="checkbox"] {

            position: absolute;

            opacity: 0;

            width: 0;

            height: 0;

        }



        .pill-label {

            display: inline-block;

            padding: 10px 20px;

            background: #f1f5f9;

            border: 1px solid #e2e8f0;

            border-radius: 20px;

            font-size: 14px;

            font-weight: 500;

            cursor: pointer;

            transition: all 0.2s;

            user-select: none;

        }



        .pill-item input:checked + .pill-label {

            background-color: var(--primary);

            border-color: var(--primary);

            color: #fff;

            box-shadow: 0 4px 10px rgba(0, 86, 179, 0.2);

        }



        /* Structural Cards for Step 1 Application Grid */

        .card-grid {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 12px;

        }



        .card-item-label {

            border: 2px solid #e2e8f0;

            padding: 16px;

            border-radius: 8px;

            cursor: pointer;

            display: flex;

            align-items: center;

            font-weight: 500;

            font-size: 15px;

            transition: all 0.2s;

            background: #f8fafc;

        }



        .card-item input:checked + .card-item-label {

            border-color: var(--primary);

            background: var(--primary-light);

            color: var(--primary);

            font-weight: 600;

        }



        /* Split layout row */

        .flex-row {

            display: flex;

            gap: 16px;

        }

        .flex-row .form-group { width: 50%; }



        /* --- Drag and Drop File Zone UI --- */

        .dropzone {

            border: 2px dashed #cbd5e1;

            border-radius: var(--radius);

            padding: 32px;

            text-align: center;

            background: #f8fafc;

            cursor: pointer;

            transition: all 0.2s;

        }



        .dropzone:hover {

            border-color: var(--primary);

            background: #f0f7ff;

        }



        .dropzone svg {

            width: 42px;

            height: 42px;

            fill: var(--text-muted);

            margin-bottom: 12px;

        }



        .info-box {

            margin-top: 16px;

            background: var(--success-light);

            border-left: 4px solid var(--success);

            padding: 16px;

            border-radius: 6px;

            font-size: 13.5px;

            color: #1e4620;

            line-height: 1.5;

        }



        /* Big Component Choice for GA Drawing */

        .toggle-box {

            background: #f8fafc;

            border: 1px solid var(--border);

            border-radius: var(--radius);

            padding: 20px;

            display: flex;

            align-items: center;

            justify-content: space-between;

        }



        /* --- Navigation Buttons Footer --- */

        .footer-nav {

            display: flex;

            justify-content: space-between;

            margin-top: 40px;

            border-top: 1px solid #e2e8f0;

            padding-top: 24px;

        }

        /*.footer-nav{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

}*/




        button {

            padding: 13px 28px;

            border-radius: 8px;

            font-size: 15px;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.2s;

            outline: none;

            border: none;

        }



        .btn-back {

            background: #e2e8f0;

            color: var(--text-main);

        }



        .btn-back:hover { background: #cbd5e1; }



        .btn-action {

            background: var(--primary);

            color: #fff;

            margin-left: auto;

        }



        .btn-action:hover { background: #004085; }

        

        /* Specific highlight color for Quote step action */

        .btn-quote {

            background: var(--success);

            color: white;

        }

        .btn-quote:hover { background: #218838; }



        @media (max-width: 550px) {

            .card-grid { grid-template-columns: 1fr; }

            .flex-row { flex-direction: column; gap: 0; }

            .flex-row .form-group { width: 100%; }

            .wrapper { padding: 20px; }

            .step-label { display: none; }
              }


/*product css start*/

/*crp css
*/
 ul.myul li{
     margin-top: 15px!important;
     padding-left: 5px!important;
     }
.section-padding {
padding: 20px 0!important;
}

.panel-box{
    border:1px solid #69b43f;
    border-radius:8px;
    padding:25px 20px;
    margin-bottom:30px;
    text-align:center;
    transition:.3s;
}
.panel-box:hover{
    border-color:#0d6efd;
    box-shadow:0 8px 20px rgba(0,0,0,.1);
    transform:translateY(-5px);
}
.panel-box i{
    font-size:36px;
    color:#69b43f;
    margin-bottom:15px;
}
.panel-box h4{
    margin:0;
    font-size:18px;
    font-weight:600;
    line-height:28px;
}

.application-boxes .col-md-3{
    margin-bottom:30px;
}

.app-card{
    position:relative;
    background:#fff;
    border-radius:12px;
    padding:55px 20px 25px;
    text-align:center;
    border:1px solid #e7e7e7;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    transition:.35s;
    min-height:230px;
}

.app-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
    border-color:#2f6fb8;
}

.app-icon{
    position:absolute;
    top:-28px;
    left:50%;
    transform:translateX(-50%);
    width:58px;
    height:58px;
    line-height:58px;
    border-radius:50%;
    background:linear-gradient(135deg,#1f5fae,#43b649);
    color:#fff;
    font-size:24px;
    box-shadow:0 8px 18px rgba(31,95,174,.35);
}

.app-card h4{
    margin:10px 0 0;
    color:#173c73;
    font-size:19px;
    line-height:30px;
    font-weight:600;
}

/*substations
*/

.submit-section{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:10px;

}



#captchaBox{

    width:250px;

}


/* Modern UI Wrapper Styles */
.ui-modern-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

/* Category Badge */
.ui-badge {
    display: inline-block;
    background-color: #1e489e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

/* Dynamic Content Formatting */
.project-single-details h3 {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
}

.project-single-details p {
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Subheadings inside dynamic description */
.project-single-details h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 24px 0 16px 0;
}

/* Convert UL/LI into 2-Column Cards Automatically */
.project-single-details ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    padding-left: 0;
    list-style: none;
    margin-bottom: 24px;h
}

.project-single-details ul li {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    color: #334155;
    display: flex;
    align-items: center;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.project-single-details ul li:hover {
    border-color: #2a7a72;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.project-single-details ul li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: #e6f4f1;
    color: #2a7a72;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    margin-right: 10px;
}

/* Image Card Styling */
.project-single-img {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-single-img img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* Action Buttons */
.ui-cta-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.btn-primary-custom {
    background-color: #5b8e55;
    color: #fff;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: 0.3s;
}

.btn-primary-custom:hover {
    background-color: #4a7545;
    color: #fff;
}

.btn-secondary-custom {
    background-color: transparent;
    color: #2a7a72;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid #2a7a72;
    transition: 0.3s;
}

.btn-secondary-custom:hover {
    background-color: #2a7a72;
    color: #fff;
}

/*infrastructure
*/
.product-box{
    border:1px solid #ddd;
    border-left:4px solid #1E489E;
    padding:15px;
    margin-bottom:20px;
    border-radius:6px;
    background:#f8f7f7;
    min-height:70px;

    display:flex;
    align-items:center;
    font-weight:600;
    transition:.3s;
}

.product-box i{
    color:#28a745;
    font-size:20px;
    margin-right:12px;
    flex-shrink:0;
}

.product-box:hover{
    box-shadow:0 5px 15px rgba(0,0,0,.12);
    transform:translateY(-3px);
}

    .design-list{
    list-style:none;
    padding:0;
    margin:25px 0;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.design-list li{
    display:flex;
    align-items:center;
    background:#f8f9fa;
    border:1px solid #dfe7dd;
    border-radius:30px;
    padding:10px 18px;
    font-size:14px;
    font-weight:500;
    color:#333;
    transition:.3s;
}

.design-list li::before{
    content:"✓";
    width:22px;
    height:22px;
    line-height:22px;
    text-align:center;
    border-radius:50%;
    background:#69b43f;
    color:#fff;
    font-size:12px;
    margin-right:10px;
    flex-shrink:0;
}

.design-list li:hover{
    background:#69b43f;
    color:#fff;
    transform:translateY(-2px);
}

.design-list li:hover::before{
    background:#fff;
    color:#69b43f;
}

/* ====================================================
   Image Design UI System
   ==================================================== */

/* Main Outer Light Card Container */
.mfs-main-card {
    background: #f1f5f9;
    border-radius: 24px;
    padding: 36px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid #e2e8f0;
}

/* Image Container Frame Layout */
.mfs-image-frame-wrapper {
    position: relative;
    padding: 20px 0 20px 20px;
    display: flex;
    align-items: center;
}

.mfs-image-frame-wrapper.mfs-reverse-frame {
    padding: 20px 20px 20px 0;
}

/* Green Outline Box behind image */
.mfs-green-border-box {
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    left: 20px;
    border: 1.5px solid #2d6a61;
    border-radius: 20px;
    z-index: 1;
}

.mfs-reverse-frame .mfs-green-border-box {
    left: 0;
    right: 0;
}

/* Badge on top left of outline box */
.mfs-badge {
    position: absolute;
    top: 12px;
    left: 18px;
    background: #2d6a61;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: 0.8px;
}

/* White Floating Card for Image */
.mfs-floating-img-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    margin-left: -20px;
    width: calc(100% + 10px);
}

.mfs-reverse-frame .mfs-floating-img-card {
    margin-left: 0;
    margin-right: -20px;
}

.mfs-floating-img-card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

/* Content Area Typography */
.mfs-subtitle {
    color: #2d6a61;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.mfs-title {
    color: #0b1f48;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.mfs-text {
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
}

/* Highlighted Keywords */
.mfs-highlight {
    background-color: #e2e8f0;
    color: #0f172a;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}

/* 3-Column Grid Tiles for Features */
.mfs-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px 0;
}

.mfs-tile {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.mfs-tile-icon {
    font-size: 14px;
    background: #eef6f5;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
}

/* Bottom Action Buttons */
.mfs-action-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
}

.mfs-btn-group {
    display: flex;
    gap: 12px;
}

.mfs-btn-dark {
    background-color: #0b1f48;
    color: #ffffff !important;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.mfs-btn-dark:hover {
    background-color: #1e40af;
    transform: translateY(-2px);
}

.mfs-btn-outline {
    background-color: #dce7e5;
    color: #2d6a61 !important;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #2d6a61;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.mfs-btn-outline:hover {
    background-color: #2d6a61;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Mobile & Tablet Responsive Tweaks */
@media (max-width: 991px) {
    .mfs-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mfs-floating-img-card {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .mfs-green-border-box {
        display: none;
    }
    .mfs-image-frame-wrapper,
    .mfs-image-frame-wrapper.mfs-reverse-frame {
        padding: 0;
    }
}

@media (max-width: 576px) {
    .mfs-tiles-grid {
        grid-template-columns: 1fr;
    }
    .mfs-main-card {
        padding: 20px;
    }
}


/*infrastructure end
*/
/*client start*/
 .client-box{

    border:1px solid #ddd;

    border-radius:8px;

    padding:15px;

    background:#fff;

    text-align:center;

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:0.3s;

}



.client-box:hover{

    border-color:#007bff;

    box-shadow:0 4px 10px rgba(0,0,0,0.1);

}



.client-box img{

    max-width:100%;

    max-height:80px;

    object-fit:contain;

}