/* Page-specific styles for ecommerce-website-design-company-india.php; extracted without visual redesign. */

/* =========================================================
           IBOX444 ECOMMERCE PAGE
           Clean / Black / White / Yellow
           PHP 5.6 Compatible
        ========================================================= */

        :root{
            --ibox-black:#111111;
            --ibox-dark:#181818;
            --ibox-yellow:#ffc900;
            --ibox-yellow-dark:#e3ad00;
            --ibox-white:#ffffff;
            --ibox-light:#f7f7f7;
            --ibox-border:#e5e5e5;
            --ibox-text:#202020;
            --ibox-muted:#666666;
            --ibox-green:#18a957;
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            margin:0;
            padding:0;
            font-family:Arial, Helvetica, sans-serif;
            color:var(--ibox-text);
            background:#ffffff;
            font-size:15px;
            line-height:1.65;
        }

        *,
        *:before,
        *:after{
            box-sizing:border-box;
        }

        img{
            max-width:100%;
            height:auto;
        }

        a{
            text-decoration:none;
        }

        p,
        li,
        span,
        label,
        input,
        select,
        textarea,
        button{
            font-size:15px;
        }

        h1,h2,h3,h4,h5,h6{
            font-family:Arial, Helvetica, sans-serif;
            font-weight:700;
        }

        /* =========================
           GENERAL
        ========================= */

        .ibox-section{
            padding:80px 0;
        }

        .ibox-container{
            width:92%;
            max-width:1200px;
            margin:0 auto;
        }

        .ibox-center{
            text-align:center;
        }

        .ibox-eyebrow{
            display:inline-block;
            padding:7px 14px;
            background:var(--ibox-yellow);
            color:#111111;
            border-radius:30px;
            font-size:12px;
            font-weight:700;
            letter-spacing:.7px;
            text-transform:uppercase;
            margin-bottom:15px;
        }

        .ibox-section-title{
            margin:0 0 14px;
            color:#111111;
            font-size:38px;
            line-height:1.2;
        }

        .ibox-section-subtitle{
            max-width:800px;
            margin:0 auto 45px;
            color:#555555;
            font-size:16px;
        }

        .ibox-yellow-line{
            width:65px;
            height:4px;
            background:var(--ibox-yellow);
            margin:15px auto 20px;
            border-radius:10px;
        }

        /* =========================
           HERO
        ========================= */

        .ecom-hero{
            position:relative;
            overflow:hidden;
            padding:90px 0 85px;
            background:
                radial-gradient(circle at 85% 20%, rgba(255,201,0,.18), transparent 28%),
                radial-gradient(circle at 10% 80%, rgba(255,201,0,.10), transparent 25%),
                linear-gradient(135deg,#0e0e0e 0%,#191919 50%,#101010 100%);
            color:#ffffff;
        }

        .ecom-hero:before{
            content:"";
            position:absolute;
            width:450px;
            height:450px;
            border:1px solid rgba(255,201,0,.16);
            border-radius:50%;
            right:-180px;
            top:-160px;
        }

        .ecom-hero:after{
            content:"";
            position:absolute;
            width:300px;
            height:300px;
            border:1px solid rgba(255,255,255,.06);
            border-radius:50%;
            left:-150px;
            bottom:-150px;
        }

        .hero-content{
            position:relative;
            z-index:2;
        }

        .hero-content h1{
            color:#ffffff;
            font-size:54px;
            line-height:1.12;
            margin:0 0 22px;
            max-width:850px;
        }

        .hero-content h1 span{
            color:var(--ibox-yellow);
            font-size:inherit;
        }

        .hero-content p{
            max-width:850px;
            color:#ffffff;
            font-size:18px;
            line-height:1.75;
            margin:0 0 30px;
        }

        .hero-buttons{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-bottom:38px;
        }

        .ibox-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:48px;
            padding:12px 22px;
            border-radius:5px;
            font-weight:700;
            transition:all .25s ease;
            border:2px solid transparent;
            cursor:pointer;
        }

        .ibox-btn-yellow{
            background:var(--ibox-yellow);
            color:#111111;
        }

        .ibox-btn-yellow:hover{
            background:#ffffff;
            color:#111111;
        }

        .ibox-btn-outline{
            background:transparent;
            color:#ffffff;
            border-color:#ffffff;
        }

        .ibox-btn-outline:hover{
            background:#ffffff;
            color:#111111;
        }

        .ibox-btn-whatsapp{
            background:var(--ibox-green);
            color:#ffffff;
        }

        .ibox-btn-whatsapp:hover{
            background:#128b46;
            color:#ffffff;
        }

        .hero-mini-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:14px;
            max-width:1000px;
        }

        .hero-mini{
            border:1px solid rgba(255,255,255,.14);
            background:rgba(255,255,255,.05);
            border-radius:8px;
            padding:18px;
        }

        .hero-mini i{
            color:var(--ibox-yellow);
            font-size:23px;
            margin-bottom:8px;
        }

        .hero-mini strong{
            display:block;
            color:#ffffff;
            font-size:15px;
            margin-bottom:3px;
        }

        .hero-mini span{
            display:block;
            color:#ffffff;
            font-size:12px;
        }

        /* =========================
           PRICING
        ========================= */

        .pricing-section{
            background:#ffffff;
            padding:85px 0;
        }

        .pricing-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:24px;
            align-items:stretch;
        }

        .price-card{
            position:relative;
            display:flex;
            flex-direction:column;
            height:100%;
            background:#ffffff;
            border:1px solid #dddddd;
            border-radius:10px;
            overflow:hidden;
            box-shadow:0 8px 28px rgba(0,0,0,.07);
            transition:all .25s ease;
        }

        .price-card:hover{
            transform:translateY(-6px);
            box-shadow:0 18px 40px rgba(0,0,0,.12);
            border-color:var(--ibox-yellow);
        }

        .price-card.popular{
            border:2px solid var(--ibox-yellow);
        }

        .popular-label{
            position:absolute;
            top:0;
            right:0;
            background:var(--ibox-yellow);
            color:#111111;
            padding:8px 15px;
            border-bottom-left-radius:8px;
            font-size:11px;
            font-weight:800;
            z-index:3;
        }

        .price-top{
            padding:28px 25px 22px;
            background:#111111;
            min-height:205px;
        }

        .price-icon{
            width:48px;
            height:48px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:50%;
            background:var(--ibox-yellow);
            color:#111111;
            margin-bottom:15px;
            font-size:20px;
        }

        .price-top h3{
            color:#ffffff;
            font-size:22px;
            margin:0 0 6px;
        }

        .price-top p{
            color:#ffffff;
            margin:0;
            font-size:13px;
        }

        /*
           IMPORTANT:
           Price is separate from right-side label.
           This prevents ₹24,999/- overlap/cut.
        */

        .price-value-wrap{
            padding:20px 25px 12px;
            background:#ffffff;
            border-bottom:1px solid #eeeeee;
        }

        .price-value-row{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:10px;
            flex-wrap:wrap;
        }

        .price-value{
            color:#111111;
            font-size:31px;
            line-height:1.1;
            font-weight:800;
            white-space:nowrap;
        }

        .price-value small{
            font-size:12px;
            font-weight:600;
            color:#555555;
        }

        .price-tag{
            display:inline-block;
            padding:5px 9px;
            background:#f1f1f1;
            color:#222222;
            border-radius:4px;
            font-size:11px;
            font-weight:700;
            white-space:normal;
            text-align:center;
        }

        .price-features{
            padding:20px 25px 10px;
            flex:1;
            background:#ffffff;
        }

        .price-features ul{
            margin:0;
            padding:0;
            list-style:none;
        }

        .price-features li{
            position:relative;
            padding:8px 0 8px 25px;
            color:#333333;
            font-size:13px;
            line-height:1.5;
            border-bottom:1px solid #f0f0f0;
        }

        .price-features li:last-child{
            border-bottom:0;
        }

        .price-features li:before{
            content:"\f00c";
            font-family:"FontAwesome";
            position:absolute;
            left:0;
            top:9px;
            color:#111111;
            background:var(--ibox-yellow);
            width:17px;
            height:17px;
            border-radius:50%;
            font-size:9px;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .price-footer{
            padding:20px 25px 25px;
            background:#ffffff;
        }

        .price-footer .ibox-btn{
            width:100%;
        }

        .pricing-note{
            margin:30px auto 0;
            max-width:950px;
            padding:15px 20px;
            background:#fff8d8;
            border-left:4px solid var(--ibox-yellow);
            color:#333333;
            font-size:13px;
            text-align:center;
        }

        /* =========================
           FEATURE STRIP
        ========================= */

        .feature-strip{
            background:#f6f6f6;
            padding:35px 0;
            border-top:1px solid #eeeeee;
            border-bottom:1px solid #eeeeee;
        }

        .feature-strip-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:20px;
        }

        .strip-item{
            display:flex;
            align-items:center;
            gap:14px;
            padding:18px;
            background:#ffffff;
            border:1px solid #e4e4e4;
            border-radius:7px;
        }

        .strip-item i{
            flex:0 0 45px;
            width:45px;
            height:45px;
            border-radius:50%;
            background:#111111;
            color:var(--ibox-yellow);
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:18px;
        }

        .strip-item strong{
            display:block;
            color:#111111;
            font-size:14px;
        }

        .strip-item span{
            color:#555555;
            font-size:12px;
        }

        /* =========================
           FEATURES
        ========================= */

        .features-section{
            background:#ffffff;
        }

        .feature-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:20px;
        }

        .feature-box{
            padding:28px 22px;
            border:1px solid #e5e5e5;
            background:#ffffff;
            border-radius:8px;
            transition:all .25s ease;
        }

        .feature-box:hover{
            transform:translateY(-4px);
            box-shadow:0 12px 30px rgba(0,0,0,.08);
            border-color:var(--ibox-yellow);
        }

        .feature-box i{
            width:48px;
            height:48px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#111111;
            color:var(--ibox-yellow);
            border-radius:7px;
            font-size:20px;
            margin-bottom:18px;
        }

        .feature-box h3{
            color:#111111;
            font-size:18px;
            margin:0 0 9px;
        }

        .feature-box p{
            color:#555555;
            margin:0;
            font-size:13px;
        }

        /* =========================
           BUSINESS TYPES
        ========================= */

        .business-section{
            background:#f7f7f7;
        }

        .business-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:20px;
        }

        .business-box{
            background:#ffffff;
            border:1px solid #dddddd;
            padding:25px;
            border-radius:8px;
        }

        .business-box h3{
            color:#111111;
            font-size:19px;
            margin:0 0 10px;
        }

        .business-box p{
            color:#555555;
            margin:0;
            font-size:14px;
        }

        .business-box i{
            color:#111111;
            font-size:24px;
            margin-bottom:13px;
        }

        /* =========================
           PROCESS
        ========================= */

        .process-section{
            background:#ffffff;
        }

        .process-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:20px;
        }

        .process-box{
            position:relative;
            background:#ffffff;
            border:1px solid #dedede;
            border-radius:9px;
            padding:25px 20px;
            min-height:225px;
            box-shadow:0 5px 18px rgba(0,0,0,.04);
        }

        .process-number{
            position:absolute;
            top:15px;
            right:15px;
            color:#dddddd;
            font-size:35px;
            line-height:1;
            font-weight:900;
        }

        .process-icon{
            width:48px;
            height:48px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            background:var(--ibox-yellow);
            color:#111111;
            font-size:18px;
            margin-bottom:18px;
        }

        .process-box h3{
            color:#111111;
            font-size:17px;
            margin:0 0 10px;
        }

        .process-box p{
            color:#555555;
            font-size:13px;
            margin:0;
        }

        /* =========================
           DARK WHY SECTION
        ========================= */

        .why-section{
            background:#111111;
            color:#ffffff;
        }

        .why-section .ibox-section-title{
            color:#ffffff;
        }

        .why-section .ibox-section-subtitle{
            color:#ffffff;
        }

        .why-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:20px;
        }

        .why-box{
            padding:28px 23px;
            background:#1c1c1c;
            border:1px solid #333333;
            border-radius:8px;
        }

        .why-box i{
            color:var(--ibox-yellow);
            font-size:25px;
            margin-bottom:15px;
        }

        .why-box h3{
            color:#ffffff;
            font-size:18px;
            margin:0 0 9px;
        }

        .why-box p{
            color:#ffffff;
            font-size:13px;
            margin:0;
        }

        /* =========================
           REACH SECTION
        ========================= */

        .reach-section{
            background:#f7f7f7;
        }

        .reach-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:25px;
        }

        .reach-card{
            background:#ffffff;
            border:1px solid #dddddd;
            border-radius:9px;
            padding:35px;
        }

        .reach-card.dark{
            background:#111111;
            border-color:#111111;
        }

        .reach-card h3{
            color:#111111;
            font-size:25px;
            margin:0 0 12px;
        }

        .reach-card.dark h3{
            color:#ffffff;
        }

        .reach-card p{
            color:#555555;
            font-size:14px;
        }

        .reach-card.dark p{
            color:#ffffff;
        }

        .reach-tags{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:20px;
        }

        .reach-tag{
            display:inline-block;
            padding:7px 12px;
            background:#f1f1f1;
            color:#222222;
            border-radius:20px;
            font-size:12px;
            font-weight:700;
        }

        .reach-card.dark .reach-tag{
            background:#2a2a2a;
            color:#ffffff;
        }

        /* =========================
           CTA
        ========================= */

        .cta-section{
            background:var(--ibox-yellow);
            padding:55px 0;
        }

        .cta-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:30px;
        }

        .cta-inner h2{
            color:#111111;
            font-size:34px;
            margin:0 0 7px;
        }

        .cta-inner p{
            color:#222222;
            margin:0;
            font-size:15px;
        }

        .cta-actions{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }

        .cta-actions .ibox-btn-outline{
            border-color:#111111;
            color:#111111;
        }

        .cta-actions .ibox-btn-outline:hover{
            background:#111111;
            color:#ffffff;
        }

        /* =========================
           PROFILE + ENQUIRY
        ========================= */

        .profile-section{
            background:#111111;
            color:#ffffff;
            padding:80px 0;
        }

        .profile-grid{
            display:grid;
            grid-template-columns:380px 1fr;
            gap:35px;
            align-items:stretch;
        }

        .profile-card{
            background:#1c1c1c;
            border:1px solid #333333;
            border-radius:10px;
            padding:35px 25px;
            text-align:center;
        }

        .profile-photo{
            width:170px;
            height:170px;
            object-fit:cover;
            border-radius:50%;
            border:5px solid var(--ibox-yellow);
            margin:0 auto 20px;
            background:#ffffff;
        }

        .profile-card h3{
            color:#ffffff;
            font-size:26px;
            margin:0 0 4px;
        }

        .profile-card .profile-role{
            color:var(--ibox-yellow);
            font-size:13px;
            font-weight:700;
            margin-bottom:15px;
        }

        .profile-card p{
            color:#ffffff;
            font-size:13px;
        }

        .profile-social{
            display:flex;
            justify-content:center;
            flex-wrap:wrap;
            gap:8px;
            margin:20px 0;
        }

        .profile-social a{
            width:38px;
            height:38px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:50%;
            background:#ffffff;
            color:#111111;
            font-size:16px;
            transition:all .2s ease;
        }

        .profile-social a:hover{
            background:var(--ibox-yellow);
            color:#111111;
            transform:translateY(-3px);
        }

        .profile-contact{
            border-top:1px solid #333333;
            margin-top:20px;
            padding-top:20px;
        }

        .profile-contact a{
            color:#ffffff;
            display:block;
            margin:8px 0;
            font-size:13px;
        }

        .profile-contact i{
            color:var(--ibox-yellow);
            width:20px;
        }

        /* =========================
           ENQUIRY FORM
        ========================= */

        .enquiry-card{
            background:#ffffff;
            border-radius:10px;
            padding:35px;
        }

        .enquiry-card h2{
            color:#111111;
            font-size:30px;
            margin:0 0 8px;
        }

        .enquiry-card > p{
            color:#555555;
            margin:0 0 25px;
            font-size:14px;
        }

        .form-row{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:15px;
        }

        .form-group{
            margin-bottom:15px;
        }

        .form-group.full{
            grid-column:1 / -1;
        }

        .form-group label{
            display:block;
            color:#111111;
            font-weight:700;
            font-size:13px;
            margin-bottom:6px;
        }

        .form-control{
            width:100%;
            height:48px;
            border:1px solid #d5d5d5;
            border-radius:5px;
            padding:10px 13px;
            color:#222222;
            background:#ffffff;
            outline:none;
            font-size:14px;
        }

        textarea.form-control{
            height:120px;
            resize:vertical;
        }

        .form-control:focus{
            border-color:#111111;
            box-shadow:0 0 0 2px rgba(255,201,0,.25);
        }

        .whatsapp-note{
            margin-top:13px;
            color:#555555;
            font-size:12px;
        }

        .whatsapp-note i{
            color:var(--ibox-green);
        }

        /* =========================
           FAQ
        ========================= */

        .faq-section{
            background:#ffffff;
            padding:80px 0;
        }

        .faq-wrap{
            max-width:950px;
            margin:0 auto;
        }

        .faq-item{
            border:1px solid #dddddd;
            border-radius:6px;
            margin-bottom:12px;
            overflow:hidden;
            background:#ffffff;
        }

        .faq-question{
            position:relative;
            width:100%;
            border:0;
            outline:0;
            background:#ffffff;
            color:#111111;
            text-align:left;
            padding:18px 50px 18px 20px;
            cursor:pointer;
            font-size:15px;
            font-weight:700;
        }

        .faq-question:after{
            content:"\f067";
            font-family:"FontAwesome";
            position:absolute;
            right:20px;
            top:18px;
            color:#111111;
        }

        .faq-item.active .faq-question{
            background:#111111;
            color:#ffffff;
        }

        .faq-item.active .faq-question:after{
            content:"\f068";
            color:var(--ibox-yellow);
        }

        .faq-answer{
            display:none;
            padding:18px 20px;
            background:#ffffff;
            border-top:1px solid #dddddd;
        }

        .faq-answer p{
            color:#555555;
            margin:0;
            font-size:14px;
        }

        .faq-item.active .faq-answer{
            display:block;
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media(max-width:1100px){

            .hero-content h1{
                font-size:46px;
            }

            .pricing-grid{
                grid-template-columns:repeat(2,1fr);
            }

            .feature-grid{
                grid-template-columns:repeat(2,1fr);
            }

            .process-grid{
                grid-template-columns:repeat(2,1fr);
            }

            .feature-strip-grid{
                grid-template-columns:repeat(2,1fr);
            }

            .why-grid{
                grid-template-columns:repeat(2,1fr);
            }
        }

        @media(max-width:900px){

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

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

            .business-grid{
                grid-template-columns:repeat(2,1fr);
            }

            .cta-inner{
                display:block;
                text-align:center;
            }

            .cta-actions{
                justify-content:center;
                margin-top:20px;
            }

        }

        @media(max-width:767px){

            body{
                font-size:14px;
            }

            p,
            li,
            span,
            label,
            input,
            select,
            textarea,
            button{
                font-size:14px;
            }

            .ibox-section{
                padding:60px 0;
            }

            .ibox-container{
                width:92%;
            }

            .ibox-section-title{
                font-size:30px;
            }

            .hero-content h1{
                font-size:36px;
            }

            .hero-content p{
                font-size:15px;
            }

            .hero-mini-grid{
                grid-template-columns:repeat(2,1fr);
            }

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

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

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

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

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

            .feature-strip-grid{
                grid-template-columns:1fr;
            }

            .price-top{
                min-height:auto;
            }

            .price-value{
                font-size:29px;
            }

            .price-value-row{
                align-items:flex-start;
            }

            .form-row{
                grid-template-columns:1fr;
            }

            .form-group.full{
                grid-column:auto;
            }

            .enquiry-card{
                padding:25px 18px;
            }

            .cta-inner h2{
                font-size:28px;
            }

        }

        @media(max-width:480px){

            .hero-content h1{
                font-size:31px;
            }

            .hero-buttons{
                display:block;
            }

            .hero-buttons .ibox-btn{
                width:100%;
                margin-bottom:9px;
            }

            .hero-mini-grid{
                grid-template-columns:1fr;
            }

            .price-value{
                font-size:26px;
            }

            .price-tag{
                font-size:10px;
            }

            .profile-photo{
                width:145px;
                height:145px;
            }

        }