/*
 * Sun Stellar Solar Water Heater Product Pages
 * Shared styles for 100L, 150L, 200L, 250L, 300L and 500L pages.
 */

/* Legacy page utilities and floating contact buttons */
.grid li:before {
                border-left: none;
            }

            .grid li:before {
                border-left: none;
            }

            .paragraph>p {
                font-size: 17px;
                color: #3C4043;
                font-weight: 400;
            }
            
            body{
              overflow-x: hidden;
            }
            .points ul li {
                font-size: 17px;
                color: #3C4043;
                line-height: 50px;
                color: #3C4043;
                font-weight: 400;
            }

            .points ul li span i {
                color: #9eca73;
            }

            iframe.i-video {
                border-radius: 40px;
            }

            .float {
                position: fixed;
                width: 60px;
                height: 60px;
                bottom: 40px;
                left: 40px;
                background-color: #25d366;
                color: #FFF;
                border-radius: 50px;
                text-align: center;
                font-size: 30px;
                box-shadow: 2px 2px 3px #999;
                z-index: 100;
            }

            .my-float {
                margin-top: 16px;
            }

            .float-call {
                position: fixed;
                width: 60px;
                height: 60px;
                bottom: 120px;
                left: 40px;
                background-color: #007a3d;
                color: #FFF;
                border-radius: 50px;
                text-align: center;
                font-size: 30px;
                box-shadow: 2px 2px 3px #999;
                z-index: 100;
            }

            .my-float-call {
                margin-top: 16px;
            }

            @media only screen and (max-width: 767px) {
                .points ul {
                    margin-top: 10px;
                }

                .points ul li {
                    line-height: 25px;
                    font-size: 18px;
                }
            }


/* Solar water heater product page */
.swh-hero { padding: 55px 0; background: #f7f9f6; }
            .swh-breadcrumb { font-size: 14px; margin-top: 18px; margin-bottom: 0; color: #666; }
            .swh-breadcrumb a { color: #5c8f45; }
            .swh-product-image { background:#fff; border:1px solid #e7e7e7; border-radius:16px; padding:30px; text-align:center; }
            .swh-product-image img { max-height:460px; object-fit:contain; }
            .swh-title { font-size:34px; line-height:1.15; margin:10px 0 14px; color:#111; }
            .swh-subtitle { font-size:17px; line-height:1.7; color:#555; margin-bottom:16px; }
            .swh-model { font-size:15px; color:#444; margin-bottom:16px; }
            .swh-price-box { background:#fff; border:1px solid #e6eadf; border-radius:12px; padding:18px 20px; margin:18px 0; }
            .swh-model-selector { margin:16px 0 10px; }
            .swh-model-selector label { display:block; font-size:13px; font-weight:700; color:#333; margin-bottom:7px; }
            .swh-model-selector select { width:100%; max-width:360px; border:1px solid #dfe6d9; background:#fff; border-radius:8px; padding:11px 38px 11px 13px; font-size:15px; color:#222; font-weight:600; outline:none; }
            .swh-model-selector select:focus { border-color:#76a95b; box-shadow:0 0 0 3px rgba(118,169,91,.12); }
            .swh-price-label { font-size:13px; font-weight:600; color:#666; margin-bottom:8px; }
            .swh-price-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
            .swh-price-row .swh-price { margin-right:0; }
            .swh-price-row .swh-mrp { margin-right:0; font-size:17px; }
            .swh-offer-badge { display:inline-block; background:#eef6e9; color:#4f8737; border-radius:30px; padding:5px 10px; font-size:12px; font-weight:700; }
            .swh-selected-model { color:#222; font-weight:700; }

            .swh-price-box-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
            .swh-price-info { flex:1; min-width:0; }
            .swh-price-enquiry-btn { display:inline-block; flex:0 0 auto; background:#76a95b; color:#fff !important; padding:12px 24px; border-radius:5px; font-weight:600; text-decoration:none; white-space:nowrap; }
            .swh-price-enquiry-btn:hover { background:#67984e; color:#fff !important; }
            .swh-enquiry-summary { background:#f7f9f6; border:1px solid #e2e8de; border-radius:10px; padding:14px 16px; margin-bottom:16px; }
            .swh-enquiry-summary strong { display:block; color:#222; margin-bottom:4px; }
            .swh-enquiry-summary span { color:#5c8f45; font-weight:600; }
            #modal-2 .form-control[readonly] { background:#f8f9f7; color:#333; }
            @media (max-width: 767px) {
                .swh-price-box-top { align-items:flex-start; flex-direction:column; }
                .swh-price-enquiry-btn { width:100%; text-align:center; }
            }

.swh-price { font-size:32px; font-weight:700; color:#111; margin-right:12px; }
            .swh-mrp { color:#777; text-decoration:line-through; margin-right:10px; }
            .swh-offer { color:#5c963e; font-weight:700; }
            .swh-note { font-size:12px; color:#777; margin-top:8px; }
            .swh-pills { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 22px; }
            .swh-pill { border:1px solid #dfe6d9; background:#fff; border-radius:30px; padding:8px 13px; font-size:13px; color:#333; }
            .swh-cta { display:flex; flex-wrap:wrap; gap:10px; }
            .swh-cta .btn-main { background:#76a95b; color:#fff; padding:12px 24px; border-radius:5px; font-weight:600; }
            .swh-cta .btn-outline { border:1px solid #76a95b; color:#5c8f45; padding:12px 24px; border-radius:5px; font-weight:600; }
            .swh-section { padding:60px 0; }
            .swh-section.alt { background:#f8f9f7; }
            .swh-heading { text-align:center; margin-bottom:35px; }
            .swh-heading h2 { font-size:28px; color:#111; margin-bottom:10px; }
            .swh-heading p { max-width:800px; margin:0 auto; color:#666; line-height:1.7; }
            .swh-card { height:100%; background:#fff; border:1px solid #e7e7e7; border-radius:12px; padding:24px; }
            .swh-card h3 { font-size:19px; margin:0 0 10px; color:#111; }
            .swh-card p { color:#606060; line-height:1.65; margin:0; }
            .swh-spec { width:100%; border-collapse:collapse; background:#fff; }
            .swh-spec th, .swh-spec td { border-bottom:1px solid #e8e8e8; padding:15px 16px; text-align:left; }
            .swh-spec th { width:36%; color:#222; font-weight:600; background:#fafafa; }

            /* Comparison table: make the header row visually stand out */
            .swh-comparison table.swh-spec tr:first-child th {
                background: #76a95b;
                color: #fff;
                width: auto;
                font-size: 14px;
                text-transform: uppercase;
                letter-spacing: .03em;
                border-bottom: none;
            }
            .swh-comparison table.swh-spec tr:first-child th:first-child { border-radius: 8px 0 0 0; }
            .swh-comparison table.swh-spec tr:first-child th:last-child { border-radius: 0 8px 0 0; }
            .swh-step { text-align:center; padding:20px 14px; }
            .swh-step-num { width:44px; height:44px; line-height:44px; border-radius:50%; background:#76a95b; color:#fff; margin:0 auto 12px; font-weight:700; }

            /* Rounded, symmetrical cards for the "How it works" steps */
            .swh-steps-row { display:flex; flex-wrap:wrap; align-items:stretch; }
            .swh-steps-row > [class*="col-"] { display:flex; margin-bottom:24px; }
            .swh-step {
                background:#fff;
                border:1px solid #e7e7e7;
                border-radius:14px;
                padding:32px 20px;
                width:100%;
                box-shadow:0 2px 10px rgba(0,0,0,0.04);
                position:relative;
                display:flex;
                flex-direction:column;
                align-items:center;
            }
            .swh-step h3 { font-size:18px; margin:0 0 10px; min-height:26px; }
            .swh-step p { margin:0; color:#666; font-size:14.5px; line-height:1.6; }
            /* connecting arrow between steps on desktop */
            @media (min-width: 768px) {
                .swh-steps-row > [class*="col-"]:not(:last-child) .swh-step:after {
                    content: "\f105";
                    font-family: "FontAwesome";
                    position: absolute;
                    right: -22px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #c7d6bd;
                    font-size: 22px;
                    z-index: 1;
                }
            }
            @media (max-width: 767px) {
                .swh-step { padding:26px 18px; }
            }
            .swh-comparison { overflow-x:auto; }
            .swh-comparison table { min-width:700px; }
            .swh-inline-link { color:#5c8f45; font-weight:600; }
            .swh-faq details { margin-bottom:14px; border:1px solid #ddd; border-radius:8px; background:#fff; }
            .swh-faq summary { cursor:pointer; padding:18px 20px; font-weight:600; color:#111; }
            .swh-faq details div { padding:0 20px 18px; color:#5d5d5d; line-height:1.7; }
            .swh-bottom-cta { background:#1f2c22; color:#fff; border-radius:16px; padding:36px; text-align:center; }
            .swh-bottom-cta h2 { color:#fff; margin-bottom:10px; }
            .swh-bottom-cta p { color:#e3e8e1; max-width:700px; margin:0 auto 20px; }
            @media (max-width: 767px) {
                .swh-title { font-size:30px; }
                .swh-hero { padding:35px 0; }
                .swh-section { padding:42px 0; }
                .swh-product-image { margin-bottom:25px; }
            }

            /* Fix: bullet list styling for .feature blocks on this page.
               The site's global CSS scopes this to ".product-details .feature li",
               but this page uses .feature outside that wrapper, so bullets/icons
               were not rendering. This restores proper list styling standalone. */
            .feature ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .feature ul li {
                position: relative;
                padding: 6px 0 6px 28px;
                line-height: 1.6;
                color: #444;
            }
            .feature ul li:before {
                content: "\f00c";
                font-family: "FontAwesome";
                position: absolute;
                left: 0;
                top: 6px;
                color: #76a95b;
                font-size: 14px;
            }

            /* SWH heading hierarchy */
            .swh-section h3, .swh-hero h3 { font-size:22px; line-height:1.35; }
            .swh-section h4, .swh-hero h4 { font-size:18px; line-height:1.4; }
            @media (max-width: 767px) {
                .swh-heading h2 { font-size:26px; }
                .swh-section h3, .swh-hero h3 { font-size:20px; }
                .swh-section h4, .swh-hero h4 { font-size:17px; }
            }


/* Contact popup */
.fixed {
                position: fixed;
                z-index: 10000;
            }

            .cc-contactpop {
                background-color: #fff;
                color: #fff;
                width: 350px;
                bottom: 0;
                right: 15px;
                border-radius: 6px 6px 0px 0px;
            }

            .cc-contactpop h3 {
                border-radius: 6px 6px 0px 0px;
                text-align: left;
                color: #fff;
                text-shadow: none;
                font-size: 16px;
                font-weight: 600;
                background-color: #9eca73;
                font-family: 'poppins', sans-serif;
                margin: 0;
                padding: 15px;
                cursor: pointer;
            }

            .cc-contactpop h3 span {
                font-style: oblique;
            }

            .cc-contactpop p {
                text-align: center;
                padding: 10px 15px;
            }

            .cc-contactpop i {
                position: absolute;
                top: 0px;
                right: 0px;
                color: #fff;
                font-weight: 500;
                font-size: 20px;
                padding: 15px;
                cursor: pointer;
            }
            
            .cc-contactpop .cross {
                position: absolute;
                top: 0px;
                right: 0px;
                font-weight: 500;
                padding: 15px;
                width: 14%;
                cursor: pointer;
            }

            .cc-contactpop form {
                padding: 10px 20px 10px 20px;
            }