{"id":13892,"date":"2024-02-24T11:01:36","date_gmt":"2024-02-24T05:01:36","guid":{"rendered":"https:\/\/hostim.themetags.com\/?page_id=13892"},"modified":"2025-12-13T11:22:22","modified_gmt":"2025-12-13T11:22:22","slug":"homw","status":"publish","type":"page","link":"https:\/\/hostle.in\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Web Hosting Hero Section<\/title>\r\n <!-- Google Fonts: Poppins -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <!-- FontAwesome -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* --- 1. RESET & VARIABLES --- *\/\r\n :root {\r\n --color-primary: #1d4ed8; \/* MilesWeb Blue *\/\r\n --color-dark: #0f172a; \/* Heading Text *\/\r\n --color-text: #334155; \/* Body Text *\/\r\n --color-green: #16a34a; \/* Success Green *\/\r\n --color-border: #e2e8f0; \/* Light Borders *\/\r\n --color-bg-light: #f8fafc; \/* Graphic Background *\/\r\n --font-main: 'Poppins', sans-serif;\r\n }\r\n\r\n * { box-sizing: border-box; }\r\n body { margin: 0; font-family: var(--font-main); background: #fff; }\r\n\r\n \/* --- 2. LAYOUT CONTAINER --- *\/\r\n .hero-section {\r\n width: 100%;\r\n \/* Increased bottom padding to ensure badges fit *\/\r\n padding: 3rem 5% 5rem 5%; \r\n display: flex;\r\n justify-content: center;\r\n overflow-x: hidden;\r\n background-color: #fff;\r\n }\r\n\r\n .hero-container {\r\n width: 100%;\r\n max-width: 1300px;\r\n display: grid;\r\n grid-template-columns: 1.1fr 0.9fr;\r\n align-items: center;\r\n gap: 2rem;\r\n }\r\n\r\n \/* --- 3. LEFT COLUMN (TEXT) --- *\/\r\n .hero-content {\r\n padding-right: 10px;\r\n z-index: 10;\r\n }\r\n\r\n .tagline {\r\n display: block;\r\n font-size: 0.95rem;\r\n color: #64748b;\r\n margin-bottom: 0.5rem;\r\n font-weight: 500;\r\n }\r\n\r\n .headline {\r\n font-size: clamp(2rem, 3.5vw, 3.5rem); \r\n line-height: 1.15;\r\n font-weight: 800;\r\n color: var(--color-dark);\r\n margin: 0 0 1.5rem 0;\r\n letter-spacing: -1px;\r\n }\r\n\r\n \/* Feature List *\/\r\n .feature-list {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0 0 2rem 0;\r\n }\r\n\r\n .feature-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 0.6rem;\r\n font-size: 1rem;\r\n color: var(--color-text);\r\n font-weight: 500;\r\n }\r\n\r\n .icon-check { color: var(--color-green); }\r\n\r\n .dashed-link {\r\n text-decoration: underline;\r\n text-decoration-style: dotted;\r\n text-decoration-color: #94a3b8;\r\n text-underline-offset: 4px;\r\n color: var(--color-text);\r\n }\r\n\r\n \/* Pricing *\/\r\n .pricing-box {\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .price-wrapper {\r\n display: flex;\r\n align-items: baseline;\r\n color: var(--color-dark);\r\n font-weight: 800;\r\n line-height: 1;\r\n }\r\n\r\n .currency { font-size: 1.5rem; margin-right: 4px; position: relative; top: -12px; }\r\n .amount { font-size: 3.5rem; letter-spacing: -2px; }\r\n .period { font-size: 1rem; color: #64748b; font-weight: 400; margin-left: 4px; }\r\n\r\n .renewal-text {\r\n display: block;\r\n color: var(--color-primary);\r\n font-weight: 600;\r\n font-size: 0.85rem;\r\n margin-top: 8px;\r\n }\r\n\r\n \/* Buttons *\/\r\n .action-group {\r\n display: flex;\r\n gap: 1rem;\r\n margin-bottom: 1.5rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn-primary {\r\n background-color: var(--color-primary);\r\n color: white;\r\n padding: 14px 32px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n text-decoration: none;\r\n border: none;\r\n cursor: pointer;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n font-size: 1rem;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 20px rgba(29, 78, 216, 0.2);\r\n background-color: #1e40af;\r\n color: white !important; \/* FIXED: Force white text on hover *\/\r\n }\r\n\r\n .timer-display {\r\n border: 1px solid var(--color-primary);\r\n color: var(--color-primary);\r\n background: white;\r\n padding: 12px 24px;\r\n border-radius: 8px;\r\n font-family: monospace;\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n min-width: 140px;\r\n text-align: center;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .guarantee-text {\r\n font-size: 0.9rem;\r\n color: #475569;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n \/* --- 4. RIGHT COLUMN (GRAPHIC) --- *\/\r\n .hero-graphic {\r\n position: relative;\r\n height: 550px; \r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n \/* The Scalable Stage *\/\r\n .graphic-stage {\r\n position: relative;\r\n width: 500px;\r\n height: 500px;\r\n transform-origin: center center;\r\n }\r\n\r\n \/* Background Text \"SALE\" *\/\r\n .bg-deco-text {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n font-family: monospace;\r\n font-size: 5rem;\r\n font-weight: 900;\r\n color: #f1f5f9;\r\n letter-spacing: 1rem;\r\n line-height: 1;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n \/* The Model Image *\/\r\n .model-image {\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n max-height: 100%;\r\n width: auto;\r\n z-index: 2;\r\n filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1));\r\n }\r\n\r\n \/* Tech Decoration: Dashed Box *\/\r\n .deco-box {\r\n position: absolute;\r\n top: 60px;\r\n left: 40px;\r\n right: 40px;\r\n bottom: 0;\r\n border: 2px dashed #cbd5e1;\r\n border-radius: 4px;\r\n z-index: 1;\r\n }\r\n\r\n .deco-tag {\r\n position: absolute;\r\n top: 40px;\r\n left: 0;\r\n background: white;\r\n border: 1px dashed #cbd5e1;\r\n padding: 4px 10px;\r\n color: #94a3b8;\r\n font-size: 0.8rem;\r\n letter-spacing: 2px;\r\n font-weight: 700;\r\n z-index: 2;\r\n }\r\n\r\n \/* Badge: 80% OFF *\/\r\n .badge-offer {\r\n position: absolute;\r\n top: 140px;\r\n \/* Adjusted right position to keep it tighter to image *\/\r\n right: 0px; \r\n background: white;\r\n padding: 1.5rem;\r\n border-radius: 8px;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.08);\r\n border: 1px solid var(--color-border);\r\n z-index: 3;\r\n text-align: center;\r\n }\r\n .offer-val {\r\n font-size: 3.5rem;\r\n line-height: 0.8;\r\n font-weight: 900;\r\n color: var(--color-dark);\r\n display: block;\r\n }\r\n .offer-pct { font-size: 1.5rem; vertical-align: top; }\r\n .offer-lbl { \r\n display: block; \r\n text-align: right; \r\n font-weight: 700; \r\n color: var(--color-dark); \r\n font-size: 1rem;\r\n margin-top: 5px;\r\n }\r\n\r\n \/* Badge: Data Center *\/\r\n .badge-dc {\r\n position: absolute;\r\n bottom: 50px;\r\n \/* Adjusted right to prevent overflow *\/\r\n right: -10px; \r\n background: white;\r\n padding: 1.2rem;\r\n border-radius: 8px;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.08);\r\n border: 1px solid var(--color-border);\r\n z-index: 3;\r\n min-width: 190px;\r\n }\r\n .dc-title { font-size: 0.8rem; color: #64748b; margin-bottom: 8px; display: block; }\r\n .flag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\r\n .flag-item { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; color: var(--color-text); }\r\n .flag-item img { width: 18px; border-radius: 2px; }\r\n\r\n \/* Badge: Trust *\/\r\n .badge-trust {\r\n position: absolute;\r\n bottom: 30px;\r\n \/* Adjusted left to prevent overflow *\/\r\n left: 0px;\r\n background: white;\r\n padding: 12px 18px;\r\n border-radius: 8px;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.08);\r\n border: 1px solid var(--color-border);\r\n z-index: 3;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n border-left: 4px solid var(--color-primary);\r\n }\r\n .trust-icon { font-size: 1.8rem; color: var(--color-dark); }\r\n .trust-content h5 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--color-dark); }\r\n .trust-content p { margin: 0; font-size: 0.75rem; color: #64748b; }\r\n\r\n \/* --- 5. RESPONSIVE MEDIA QUERIES --- *\/\r\n\r\n \/* Tablet Mode (Force Side-by-Side until 768px) *\/\r\n @media (max-width: 1024px) {\r\n .hero-container {\r\n gap: 1rem;\r\n }\r\n .headline { font-size: 2rem; }\r\n .amount { font-size: 3rem; }\r\n \r\n .graphic-stage {\r\n transform: scale(0.8);\r\n }\r\n .hero-graphic {\r\n height: 450px;\r\n }\r\n }\r\n\r\n \/* Mobile Mode (Stack only when screen is really small) *\/\r\n @media (max-width: 768px) {\r\n .hero-section {\r\n padding: 2rem 1rem;\r\n }\r\n\r\n .hero-container {\r\n grid-template-columns: 1fr; \/* Stack layout *\/\r\n text-align: center;\r\n gap: 2rem;\r\n }\r\n\r\n .hero-content {\r\n padding-right: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .headline { font-size: 2rem; }\r\n\r\n .feature-list { text-align: left; }\r\n .action-group { justify-content: center; width: 100%; }\r\n .btn-primary, .timer-display { width: 100%; }\r\n .price-wrapper { justify-content: center; }\r\n\r\n .hero-graphic {\r\n height: 380px; \r\n width: 100%;\r\n overflow: visible;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n margin-top: 1rem;\r\n }\r\n .graphic-stage {\r\n transform: scale(0.65);\r\n transform-origin: top center;\r\n margin-left: 0;\r\n left: 0;\r\n }\r\n .bg-deco-text { display: none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"hero-section\">\r\n <div class=\"hero-container\">\r\n \r\n <!-- LEFT COLUMN: Content -->\r\n <div class=\"hero-content\">\r\n <span class=\"tagline\">Web Hosting India \u2013 Year End Sale!<\/span>\r\n <h1 class=\"headline\">Get 80% Off Web hosting + Free Domain<\/h1>\r\n \r\n <ul class=\"feature-list\">\r\n <li class=\"feature-item\">\r\n <i class=\"fa-solid fa-check icon-check\"><\/i> Free SSL and AI website builder\r\n <\/li>\r\n <li class=\"feature-item\">\r\n <i class=\"fa-solid fa-check icon-check\"><\/i> Free email and daily backups\r\n <\/li>\r\n <li class=\"feature-item\">\r\n <i class=\"fa-solid fa-check icon-check\"><\/i> <span class=\"dashed-link\">24\/7 expert support<\/span>\r\n <\/li>\r\n <\/ul>\r\n\r\n <div class=\"pricing-box\">\r\n <div class=\"price-wrapper\">\r\n <span class=\"currency\">\u20b9<\/span>\r\n <span class=\"amount\">99.00<\/span>\r\n <span class=\"period\">\/mo<\/span>\r\n <\/div>\r\n <span class=\"renewal-text\">Same Price at Renewal \u2014 Guaranteed<\/span>\r\n <\/div>\r\n\r\n <div class=\"action-group\">\r\n <a href=\"https:\/\/hostle.in\/plans\" class=\"btn-primary\">View Plans<\/a>\r\n <div class=\"timer-display\" id=\"saleTimer\">00 : 29 : 21<\/div>\r\n <\/div>\r\n\r\n <div class=\"guarantee-text\">\r\n <i class=\"fa-regular fa-circle-check\" style=\"color: var(--color-green); font-size: 1.1rem;\"><\/i>\r\n <span>30-day money-back guarantee<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT COLUMN: Graphic -->\r\n <div class=\"hero-graphic\">\r\n <div class=\"graphic-stage\">\r\n \r\n <!-- Background Decoration -->\r\n <div class=\"bg-deco-text\">SALE<\/div>\r\n <div class=\"deco-tag\">www<\/div>\r\n <div class=\"deco-box\"><\/div>\r\n\r\n <!-- Model Image -->\r\n <img decoding=\"async\" src=\"https:\/\/hostle.in\/wp-content\/uploads\/2025\/12\/Untitled-10.png\" alt=\"Hosting Model\" class=\"model-image\">\r\n\r\n <!-- Badge: 80% Off -->\r\n <div class=\"badge-offer\">\r\n <span class=\"offer-val\">80<span class=\"offer-pct\">%<\/span><\/span>\r\n <span class=\"offer-lbl\">OFF<\/span>\r\n <\/div>\r\n\r\n <!-- Badge: Data Center -->\r\n <div class=\"badge-dc\">\r\n <span class=\"dc-title\">Global data center<\/span>\r\n <div class=\"flag-grid\">\r\n <div class=\"flag-item\"><img decoding=\"async\" src=\"https:\/\/flagcdn.com\/20x15\/in.png\"> IN<\/div>\r\n <div class=\"flag-item\"><img decoding=\"async\" src=\"https:\/\/flagcdn.com\/20x15\/us.png\"> US<\/div>\r\n <div class=\"flag-item\"><img decoding=\"async\" src=\"https:\/\/flagcdn.com\/20x15\/gb.png\"> UK<\/div>\r\n <div class=\"flag-item\"><img decoding=\"async\" src=\"https:\/\/flagcdn.com\/20x15\/au.png\"> AU<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Badge: Trust -->\r\n <div class=\"badge-trust\">\r\n <i class=\"fa-solid fa-trophy trust-icon\"><\/i>\r\n <div class=\"trust-content\">\r\n <h5>1 million +<\/h5>\r\n <p>Websites Trust Us<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Script for Countdown -->\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const timerEl = document.getElementById('saleTimer');\r\n let totalSeconds = 30 * 60; \r\n\r\n const interval = setInterval(() => {\r\n const hours = Math.floor(totalSeconds \/ 3600);\r\n const minutes = Math.floor((totalSeconds % 3600) \/ 60);\r\n const seconds = totalSeconds % 60;\r\n\r\n const fH = hours < 10 ? `0${hours}` : hours;\r\n const fM = minutes < 10 ? `0${minutes}` : minutes;\r\n const fS = seconds < 10 ? `0${seconds}` : seconds;\r\n\r\n timerEl.textContent = `${fH} : ${fM} : ${fS}`;\r\n\r\n if (totalSeconds > 0) {\r\n totalSeconds--;\r\n } else {\r\n totalSeconds = 30 * 60; \/\/ Reset loop\r\n }\r\n }, 1000);\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5c40899 e-con-full e-flex e-con e-parent\" data-id=\"5c40899\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b74f579 elementor-widget elementor-widget-html\" data-id=\"b74f579\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Domain Search Section<\/title>\r\n <!-- Google Fonts -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <!-- FontAwesome -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* --- ISOLATED CSS (No Tailwind) --- *\/\r\n .mw-domain-wrapper {\r\n font-family: 'Poppins', sans-serif;\r\n background-color: #f3f6fa;\r\n padding: 4rem 1rem;\r\n box-sizing: border-box;\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .mw-domain-wrapper * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .mw-domain-wrapper {\r\n --primary-blue: #2563eb;\r\n --dark-blue: #1e3a8a;\r\n --text-dark: #1e293b;\r\n --text-gray: #64748b;\r\n --light-bg: #eff6ff;\r\n --border-color: #e2e8f0;\r\n --success-green: #10b981;\r\n --taken-red: #ef4444;\r\n }\r\n\r\n .mw-domain-container {\r\n width: 100%;\r\n max-width: 1000px;\r\n text-align: center;\r\n }\r\n\r\n \/* Titles *\/\r\n .mw-main-title {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n color: var(--dark-blue);\r\n margin-bottom: 0.5rem;\r\n line-height: 1.2;\r\n }\r\n \r\n .mw-subtitle {\r\n color: var(--text-gray);\r\n margin-bottom: 2.5rem;\r\n font-size: 1rem;\r\n }\r\n\r\n \/* Toggle Switch *\/\r\n .mw-toggle-pill {\r\n display: inline-flex;\r\n background-color: #e0e7ff;\r\n border-radius: 50px;\r\n padding: 4px;\r\n margin-bottom: 2rem;\r\n max-width: 100%; \/* Prevent overflow *\/\r\n }\r\n\r\n .mw-toggle-btn {\r\n padding: 10px 24px;\r\n border-radius: 40px;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n transition: all 0.3s ease;\r\n background: transparent;\r\n color: var(--text-gray);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n white-space: nowrap; \/* Keep text on one line *\/\r\n }\r\n\r\n .mw-toggle-btn.active {\r\n background-color: var(--dark-blue);\r\n color: white;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n \/* Search Bar *\/\r\n .mw-search-box-wrapper {\r\n background-color: var(--light-bg);\r\n padding: 10px;\r\n border-radius: 16px;\r\n border: 1px solid #dbeafe;\r\n margin-bottom: 3rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .mw-search-inner {\r\n background: white;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n padding: 8px 8px 8px 24px;\r\n border: 1px solid var(--border-color);\r\n }\r\n \r\n .mw-search-icon {\r\n color: #94a3b8;\r\n font-size: 1.2rem;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .mw-domain-input {\r\n flex: 1;\r\n border: none;\r\n font-size: 1.1rem;\r\n color: var(--text-dark);\r\n outline: none;\r\n padding: 10px 0;\r\n font-family: inherit;\r\n min-width: 0; \/* Important for flex items *\/\r\n }\r\n\r\n .mw-search-btn {\r\n background-color: var(--primary-blue);\r\n color: white;\r\n border: none;\r\n padding: 14px 32px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n white-space: nowrap;\r\n }\r\n .mw-search-btn:hover { background-color: #1d4ed8; }\r\n\r\n \/* TLD Cards (Visible Default) *\/\r\n .mw-tld-grid {\r\n display: flex;\r\n justify-content: center;\r\n gap: 1.5rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .mw-tld-card {\r\n background: white;\r\n border: 1px solid var(--border-color);\r\n border-radius: 12px;\r\n padding: 1.5rem 2rem;\r\n min-width: 160px;\r\n text-align: center;\r\n transition: transform 0.2s;\r\n }\r\n .mw-tld-card:hover { transform: translateY(-5px); border-color: var(--primary-blue); }\r\n\r\n .mw-tld-logo { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; display: block; }\r\n .mw-tld-com { color: #2563eb; }\r\n .mw-tld-in { color: #ea580c; }\r\n .mw-tld-org { color: #d97706; }\r\n .mw-tld-shop { color: #dc2626; }\r\n\r\n .mw-price-strike { display: block; text-decoration: line-through; color: #94a3b8; font-size: 0.9rem; }\r\n .mw-price-current { display: block; font-weight: 700; color: var(--text-dark); font-size: 1.1rem; }\r\n\r\n \/* RESULTS LIST STYLES *\/\r\n .mw-results-area {\r\n margin-top: 2rem;\r\n text-align: left;\r\n display: none;\r\n max-width: 900px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n .mw-results-area.active { display: block; animation: fadeIn 0.5s ease; }\r\n\r\n .mw-results-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .mw-result-row {\r\n background: white;\r\n border: 1px solid var(--border-color);\r\n border-radius: 10px;\r\n padding: 1.2rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: box-shadow 0.2s;\r\n }\r\n .mw-result-row:hover {\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\r\n border-color: #cbd5e1;\r\n }\r\n\r\n \/* Domain Name & Status Column *\/\r\n .mw-row-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n .mw-row-domain {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n word-break: break-all; \/* Ensure long domains break on mobile *\/\r\n }\r\n .mw-status-badge {\r\n font-size: 0.75rem;\r\n padding: 2px 8px;\r\n border-radius: 4px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n }\r\n .mw-status-avail { background: #dcfce7; color: #166534; }\r\n .mw-status-taken { background: #fee2e2; color: #991b1b; }\r\n\r\n \/* Price & Action Column *\/\r\n .mw-row-action {\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n }\r\n .mw-row-price {\r\n font-weight: 700;\r\n color: var(--text-dark);\r\n font-size: 1.1rem;\r\n }\r\n .mw-row-period {\r\n font-weight: 400;\r\n font-size: 0.85rem;\r\n color: var(--text-gray);\r\n white-space: nowrap;\r\n }\r\n\r\n .mw-btn-cart {\r\n background-color: var(--primary-blue);\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n text-decoration: none; \r\n display: inline-block;\r\n font-size: 0.9rem;\r\n transition: background 0.2s;\r\n white-space: nowrap;\r\n }\r\n .mw-btn-cart:hover { background-color: #1d4ed8; }\r\n \r\n .mw-btn-taken {\r\n background-color: #e2e8f0;\r\n color: #94a3b8;\r\n cursor: not-allowed;\r\n }\r\n\r\n \/* AI Section *\/\r\n .mw-ai-section {\r\n background: white;\r\n border: 1px solid var(--border-color);\r\n border-radius: 12px;\r\n padding: 1.5rem;\r\n }\r\n .mw-suggestions-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\r\n gap: 1rem;\r\n margin-top: 1rem;\r\n }\r\n .mw-suggestion-card {\r\n background: #f8fafc;\r\n border: 1px solid var(--border-color);\r\n padding: 15px;\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n position: relative;\r\n }\r\n .mw-suggestion-card:hover { \r\n border-color: var(--primary-blue);\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n transform: translateY(-2px);\r\n }\r\n .mw-sugg-name {\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n font-size: 1.05rem;\r\n word-break: break-all;\r\n }\r\n .mw-sugg-badges {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n margin-top: 4px;\r\n }\r\n .mw-sugg-reason {\r\n font-size: 0.75rem;\r\n color: #0891b2;\r\n background: #ecfeff;\r\n padding: 2px 6px;\r\n border-radius: 4px;\r\n font-weight: 600;\r\n }\r\n .mw-sugg-buy-icon {\r\n color: var(--primary-blue);\r\n font-size: 1.1rem;\r\n transition: transform 0.2s;\r\n }\r\n .mw-suggestion-card:hover .mw-sugg-buy-icon {\r\n transform: scale(1.1);\r\n }\r\n .mw-loader-msg {\r\n color: var(--text-gray);\r\n font-size: 0.9rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n \/* --- MOBILE RESPONSIVENESS --- *\/\r\n @media (max-width: 768px) {\r\n .mw-domain-wrapper { padding: 2rem 1rem; }\r\n .mw-main-title { font-size: 1.5rem; }\r\n \r\n \/* Toggle: Full width, justified *\/\r\n .mw-toggle-pill { \r\n width: 100%; \r\n display: flex; \r\n padding: 4px; \r\n }\r\n .mw-toggle-btn { \r\n flex: 1; \r\n justify-content: center; \r\n padding: 10px; \r\n font-size: 0.85rem; \r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n \/* Search Bar Stack *\/\r\n .mw-search-inner { \r\n flex-direction: column; \r\n padding: 8px; \r\n gap: 8px; \r\n }\r\n .mw-search-icon { display: none; } \/* Hide icon to save space *\/\r\n .mw-domain-input { \r\n width: 100%; \r\n text-align: center; \r\n border-bottom: 1px solid #f1f5f9; \r\n padding-bottom: 8px; \r\n margin-bottom: 4px;\r\n }\r\n .mw-search-btn { \r\n width: 100%; \r\n padding: 12px; \r\n }\r\n\r\n \/* TLD Grid: 2 per row *\/\r\n .mw-tld-grid { gap: 1rem; }\r\n .mw-tld-card { \r\n min-width: 40%; \r\n flex: 1; \r\n padding: 1rem; \r\n } \r\n\r\n \/* Results: Stack content *\/\r\n .mw-result-row { \r\n flex-direction: column; \r\n align-items: flex-start; \r\n gap: 1rem; \r\n text-align: left; \r\n }\r\n .mw-row-info { width: 100%; }\r\n .mw-row-action { \r\n width: 100%; \r\n justify-content: space-between; \r\n margin-top: 5px; \r\n padding-top: 10px; \r\n border-top: 1px solid #f8fafc;\r\n }\r\n \r\n \/* AI Suggestions: 1 per row *\/\r\n .mw-suggestions-grid { grid-template-columns: 1fr; } \r\n }\r\n\r\n .mw-spinner {\r\n width: 1rem;\r\n height: 1rem;\r\n border: 2px solid #ffffff;\r\n border-bottom-color: transparent;\r\n border-radius: 50%;\r\n display: inline-block;\r\n animation: rotation 1s linear infinite;\r\n }\r\n @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"mw-domain-wrapper\">\r\n <div class=\"mw-domain-container\">\r\n \r\n <h2 class=\"mw-main-title\">Search & Register Domain Names Easily<\/h2>\r\n <p class=\"mw-subtitle\">Search manually or let AI craft the perfect domain for your brand.<\/p>\r\n\r\n <div class=\"mw-toggle-pill\">\r\n <button class=\"mw-toggle-btn active\" id=\"tabManual\">Domain search<\/button>\r\n <button class=\"mw-toggle-btn\" id=\"tabAI\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> AI domain generator<\/button>\r\n <\/div>\r\n\r\n <div class=\"mw-search-box-wrapper\">\r\n <div class=\"mw-search-inner\">\r\n <i class=\"fa-solid fa-magnifying-glass mw-search-icon\"><\/i>\r\n <input type=\"text\" id=\"domainInput\" class=\"mw-domain-input\" placeholder=\"mywebdomain.com\">\r\n <button class=\"mw-search-btn\" id=\"searchBtn\">\r\n <span id=\"btnText\">Search Domains<\/span>\r\n <span id=\"btnSpinner\" class=\"mw-spinner\" style=\"display: none;\"><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Default TLD Pricing Cards -->\r\n <div class=\"mw-tld-grid\" id=\"defaultTlds\">\r\n <div class=\"mw-tld-card\"><span class=\"mw-tld-logo mw-tld-com\">.com<\/span><span class=\"mw-price-strike\">\u20b91,499<\/span><span class=\"mw-price-current\">\u20b9949<\/span><\/div>\r\n <div class=\"mw-tld-card\"><span class=\"mw-tld-logo mw-tld-in\">.in<\/span><span class=\"mw-price-strike\">\u20b9799<\/span><span class=\"mw-price-current\">\u20b9499<\/span><\/div>\r\n <div class=\"mw-tld-card\"><span class=\"mw-tld-logo mw-tld-org\">.org<\/span><span class=\"mw-price-strike\">\u20b91,399<\/span><span class=\"mw-price-current\">\u20b91,099<\/span><\/div>\r\n <div class=\"mw-tld-card\"><span class=\"mw-tld-logo mw-tld-shop\">.co.in<\/span><span class=\"mw-price-strike\">\u20b9599<\/span><span class=\"mw-price-current\">\u20b9399<\/span><\/div>\r\n <\/div>\r\n\r\n <!-- Results Container -->\r\n <div class=\"mw-results-area\" id=\"resultsArea\">\r\n \r\n <!-- Manual Search List -->\r\n <div class=\"mw-results-list\" id=\"resultsList\" style=\"display:none;\"><\/div>\r\n\r\n <!-- AI Search Section -->\r\n <div class=\"mw-ai-section\" id=\"aiSection\" style=\"display:none;\">\r\n <div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;\">\r\n <h4 style=\"margin:0; color:#334155;\">Premium AI Suggestions<\/h4>\r\n <span id=\"aiStatus\" style=\"font-size:0.8rem; color:#64748b;\"><\/span>\r\n <\/div>\r\n <p style=\"margin:0 0 15px 0; font-size:0.9rem; color:#64748b;\">These domains are curated by AI and checked for availability.<\/p>\r\n <div class=\"mw-suggestions-grid\" id=\"aiGrid\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \r\n \/\/ --- CONFIGURATION ---\r\n const CONFIG = {\r\n \/\/ Your WHMCS Cart URL\r\n whmcsUrl: \"https:\/\/hostle.one\/cart.php?a=add&domain=register&query=\",\r\n \r\n \/\/ Prices\r\n tldData: {\r\n '.in': { price: '\u20b9499' },\r\n '.com': { price: '\u20b9949' },\r\n '.xyz': { price: '\u20b9199' },\r\n '.org': { price: '\u20b91,099' },\r\n '.info': { price: '\u20b9499' },\r\n '.net': { price: '\u20b91,049' },\r\n '.tech': { price: '\u20b9399' },\r\n '.co': { price: '\u20b92,299' },\r\n '.co.in': { price: '\u20b9399' }\r\n }\r\n };\r\n\r\n const apiKey = \"\"; \/\/ Runtime Key\r\n\r\n \/\/ Elements\r\n const searchBtn = document.getElementById('searchBtn');\r\n const domainInput = document.getElementById('domainInput');\r\n const resultsArea = document.getElementById('resultsArea');\r\n const defaultTlds = document.getElementById('defaultTlds');\r\n const resultsList = document.getElementById('resultsList');\r\n const aiSection = document.getElementById('aiSection');\r\n const aiGrid = document.getElementById('aiGrid');\r\n const aiStatus = document.getElementById('aiStatus');\r\n const btnText = document.getElementById('btnText');\r\n const btnSpinner = document.getElementById('btnSpinner');\r\n const tabManual = document.getElementById('tabManual');\r\n const tabAI = document.getElementById('tabAI');\r\n\r\n \/\/ --- MAIN SEARCH HANDLER ---\r\n searchBtn.addEventListener('click', async () => {\r\n const inputVal = domainInput.value.trim().toLowerCase();\r\n \r\n if (!inputVal) {\r\n alert(\"Please enter a domain name or brand keyword.\");\r\n return;\r\n }\r\n\r\n setLoading(true);\r\n resultsArea.classList.remove('active');\r\n defaultTlds.style.display = 'none';\r\n \r\n \/\/ Reset Views\r\n resultsList.style.display = 'none';\r\n aiSection.style.display = 'none';\r\n resultsList.innerHTML = '';\r\n aiGrid.innerHTML = '';\r\n aiStatus.innerHTML = '';\r\n\r\n try {\r\n const isAIMode = tabAI.classList.contains('active');\r\n\r\n if (isAIMode) {\r\n \/\/ === AI MODE ===\r\n \/\/ 1. Generate Raw List\r\n aiStatus.innerHTML = '<i class=\"fa-solid fa-brain\"><\/i> Thinking...';\r\n const rawSuggestions = await getGeminiSuggestions(inputVal);\r\n \r\n \/\/ 2. Filter Availability\r\n aiStatus.innerHTML = '<i class=\"fa-solid fa-magnifying-glass\"><\/i> Checking availability...';\r\n const availableDomains = await filterAvailableDomains(rawSuggestions);\r\n \r\n \/\/ 3. Render\r\n renderSuggestions(availableDomains);\r\n aiSection.style.display = 'block';\r\n aiStatus.innerHTML = `<i class=\"fa-solid fa-check\"><\/i> Found ${availableDomains.length} available`;\r\n \r\n } else {\r\n \/\/ === MANUAL MODE ===\r\n let baseName = inputVal;\r\n \/\/ Strip extensions if typed\r\n Object.keys(CONFIG.tldData).forEach(tld => {\r\n if(baseName.endsWith(tld)) baseName = baseName.slice(0, -tld.length);\r\n });\r\n baseName = baseName.replace(\/\\.$\/, \"\");\r\n if(baseName.length < 1) baseName = inputVal;\r\n\r\n const checkPromises = Object.keys(CONFIG.tldData).map(tld => {\r\n return checkAvailability(baseName + tld, tld);\r\n });\r\n\r\n const results = await Promise.all(checkPromises);\r\n renderResultsList(results);\r\n resultsList.style.display = 'flex';\r\n }\r\n\r\n resultsArea.classList.add('active');\r\n\r\n } catch (error) {\r\n console.error(\"Search Error:\", error);\r\n alert(\"An error occurred. Please try again.\");\r\n defaultTlds.style.display = 'flex';\r\n } finally {\r\n setLoading(false);\r\n }\r\n });\r\n\r\n \/\/ --- CORE AVAILABILITY CHECKER ---\r\n async function checkAvailability(domain, tld) {\r\n \/\/ Uses Google DNS over HTTPS as a proxy for availability\r\n \/\/ Status 3 (NXDOMAIN) usually means available.\r\n \/\/ Status 0 (NOERROR) usually means taken.\r\n try {\r\n const response = await fetch(`https:\/\/dns.google\/resolve?name=${domain}`);\r\n const data = await response.json();\r\n \r\n const isAvailable = (data.Status === 3);\r\n return {\r\n domain: domain,\r\n available: isAvailable,\r\n tld: tld,\r\n price: CONFIG.tldData[tld] ? CONFIG.tldData[tld].price : 'Check'\r\n };\r\n } catch (e) {\r\n \/\/ Fail-safe: Assume available if network error so user can proceed to cart\r\n return { domain: domain, available: true, tld: tld, price: 'Check' };\r\n }\r\n }\r\n\r\n \/\/ --- AI LOGIC: Generate + Filter ---\r\n async function getGeminiSuggestions(keyword) {\r\n \/\/ Request 20 candidates to ensure we have enough after filtering\r\n const prompt = `\r\n Act as a domain naming expert. User Keyword: \"${keyword}\".\r\n Generate 20 creative, unique, and brandable domain names ending in .com.\r\n Techniques: Portmanteaus, suffixing (ify, ly, hub), action verbs (get, go).\r\n Return ONLY a comma-separated list of domains. No numbers.\r\n `;\r\n \r\n try {\r\n const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {\r\n method: 'POST',\r\n headers: {'Content-Type': 'application\/json'},\r\n body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })\r\n });\r\n const data = await response.json();\r\n const text = data.candidates[0].content.parts[0].text;\r\n return text.split(',').map(s => s.trim());\r\n } catch(e) { \r\n \/\/ Fallback\r\n return [`get${keyword}.com`, `my${keyword}.com`, `${keyword}hub.com`, `${keyword}app.com`];\r\n }\r\n }\r\n\r\n async function filterAvailableDomains(candidates) {\r\n \/\/ Run availability checks in parallel for all 20 candidates\r\n const checks = candidates.map(domain => checkAvailability(domain, '.com'));\r\n const results = await Promise.all(checks);\r\n \r\n \/\/ Keep only available ones, slice top 8\r\n return results\r\n .filter(res => res.available)\r\n .map(res => res.domain)\r\n .slice(0, 8);\r\n }\r\n\r\n \/\/ --- RENDERERS ---\r\n function renderResultsList(results) {\r\n \/\/ Sort: Available first\r\n results.sort((a, b) => (a.available === b.available) ? 0 : a.available ? -1 : 1);\r\n\r\n results.forEach(res => {\r\n const row = document.createElement('div');\r\n row.className = 'mw-result-row';\r\n const buyLink = CONFIG.whmcsUrl + res.domain;\r\n\r\n if (res.available) {\r\n row.innerHTML = `\r\n <div class=\"mw-row-info\">\r\n <i class=\"fa-solid fa-circle-check\" style=\"color:var(--success-green); font-size:1.2rem;\"><\/i>\r\n <div>\r\n <div class=\"mw-row-domain\">${res.domain}<\/div>\r\n <span class=\"mw-status-badge mw-status-avail\">Available<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mw-row-action\">\r\n <div>\r\n <div class=\"mw-row-price\">${res.price}<\/div>\r\n <div class=\"mw-row-period\">\/ 1st yr<\/div>\r\n <\/div>\r\n <a href=\"${buyLink}\" target=\"_blank\" class=\"mw-btn-cart\"><i class=\"fa-solid fa-cart-plus\"><\/i> Add<\/a>\r\n <\/div>\r\n `;\r\n } else {\r\n row.innerHTML = `\r\n <div class=\"mw-row-info\">\r\n <i class=\"fa-solid fa-circle-xmark\" style=\"color:var(--taken-red); font-size:1.2rem;\"><\/i>\r\n <div>\r\n <div class=\"mw-row-domain\" style=\"color:#94a3b8;\">${res.domain}<\/div>\r\n <span class=\"mw-status-badge mw-status-taken\">Taken<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mw-row-action\">\r\n <button class=\"mw-btn-cart mw-btn-taken\" disabled>Taken<\/button>\r\n <\/div>\r\n `;\r\n }\r\n resultsList.appendChild(row);\r\n });\r\n }\r\n\r\n function renderSuggestions(list) {\r\n if(list.length === 0) {\r\n aiGrid.innerHTML = '<div style=\"grid-column:1\/-1; color:#64748b; padding:20px;\">No available domains found. Try a different keyword.<\/div>';\r\n return;\r\n }\r\n\r\n aiGrid.innerHTML = list.map(name => {\r\n const buyLink = CONFIG.whmcsUrl + name;\r\n let reason = \"Brandable\";\r\n if(name.length < 8) reason = \"Short & Sweet\";\r\n else if(name.includes('get') || name.includes('go')) reason = \"Actionable\";\r\n else if(name.includes('app') || name.includes('tech')) reason = \"Tech Focused\";\r\n\r\n return `\r\n <div class=\"mw-suggestion-card\" onclick=\"window.open('${buyLink}', '_blank')\">\r\n <div class=\"mw-sugg-name\">${name}<\/div>\r\n <div class=\"mw-sugg-badges\">\r\n <span class=\"mw-sugg-reason\">${reason}<\/span>\r\n <i class=\"fa-solid fa-cart-plus mw-sugg-buy-icon\"><\/i>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n }\r\n\r\n function setLoading(state) {\r\n if(state) {\r\n searchBtn.disabled = true;\r\n btnText.style.display = 'none';\r\n btnSpinner.style.display = 'inline-block';\r\n } else {\r\n searchBtn.disabled = false;\r\n btnText.style.display = 'inline';\r\n btnSpinner.style.display = 'none';\r\n }\r\n }\r\n\r\n \/\/ Tab Switcher\r\n tabManual.addEventListener('click', function() {\r\n this.classList.add('active');\r\n tabAI.classList.remove('active');\r\n domainInput.placeholder = \"mywebdomain.com\";\r\n btnText.textContent = \"Search Domains\";\r\n });\r\n tabAI.addEventListener('click', function() {\r\n this.classList.add('active');\r\n tabManual.classList.remove('active');\r\n domainInput.placeholder = \"Describe your business (e.g. Organic tea shop in Mumbai)\";\r\n btnText.textContent = \"Generate with AI\";\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-72c5a64 e-con-full e-flex e-con e-parent\" data-id=\"72c5a64\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c840fe elementor-widget elementor-widget-html\" data-id=\"2c840fe\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Web Hosting Plans<\/title>\r\n <!-- Google Fonts -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <!-- FontAwesome for Icons -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* --- ISOLATED CSS (No Tailwind) --- *\/\r\n \r\n \/* Wrapper to ensure fonts apply only to this section *\/\r\n .mw-pricing-container {\r\n font-family: 'Poppins', sans-serif;\r\n background-color: #f3f6fa;\r\n color: #1f2937;\r\n padding: 4rem 1rem;\r\n box-sizing: border-box;\r\n }\r\n\r\n .mw-pricing-container * {\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* Variables *\/\r\n .mw-pricing-container {\r\n --primary-blue: #204ce5;\r\n --dark-blue: #1a3bb0;\r\n --light-blue-bg: #eff6ff;\r\n --text-gray: #4b5563;\r\n --border-color: #e5e7eb;\r\n --toggle-bg: #e5e7eb;\r\n --price-cut-color: #9ca3af;\r\n }\r\n\r\n \/* Header Section *\/\r\n .mw-header {\r\n text-align: center;\r\n margin-bottom: 2rem;\r\n }\r\n .mw-header h2 {\r\n font-size: 2.25rem;\r\n font-weight: 700;\r\n color: #111827;\r\n margin-bottom: 1rem;\r\n margin-top: 0;\r\n }\r\n .mw-header p {\r\n color: var(--text-gray);\r\n max-width: 42rem;\r\n margin: 0 auto;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* Toggle Switch Styling *\/\r\n .mw-toggle-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 3rem;\r\n gap: 1rem;\r\n font-weight: 600;\r\n color: #374151;\r\n }\r\n \r\n .mw-toggle-label {\r\n cursor: pointer;\r\n transition: color 0.3s;\r\n }\r\n \r\n .mw-toggle-label.active {\r\n color: var(--primary-blue);\r\n }\r\n\r\n .mw-switch {\r\n position: relative;\r\n display: inline-block;\r\n width: 56px;\r\n height: 28px;\r\n }\r\n\r\n .mw-switch input {\r\n opacity: 0;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n .mw-slider {\r\n position: absolute;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: var(--toggle-bg);\r\n transition: .4s;\r\n border-radius: 34px;\r\n }\r\n\r\n .mw-slider:before {\r\n position: absolute;\r\n content: \"\";\r\n height: 20px;\r\n width: 20px;\r\n left: 4px;\r\n bottom: 4px;\r\n background-color: white;\r\n transition: .4s;\r\n border-radius: 50%;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n }\r\n\r\n input:checked + .mw-slider {\r\n background-color: var(--primary-blue);\r\n }\r\n\r\n input:checked + .mw-slider:before {\r\n transform: translateX(28px);\r\n }\r\n \r\n .mw-save-badge {\r\n background-color: #dcfce7;\r\n color: #166534;\r\n font-size: 0.75rem;\r\n padding: 2px 8px;\r\n border-radius: 12px;\r\n margin-left: 0.5rem;\r\n font-weight: 600;\r\n }\r\n\r\n \/* Grid Layout (Desktop\/Tablet) *\/\r\n .mw-grid {\r\n display: flex;\r\n overflow-x: auto; \/* Mobile Slider *\/\r\n scroll-snap-type: x mandatory;\r\n gap: 1.5rem;\r\n padding-bottom: 2rem; \/* Space for scrollbar\/shadow *\/\r\n }\r\n\r\n \/* Media Query for Tablet\/Desktop *\/\r\n @media (min-width: 768px) {\r\n .mw-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n overflow-x: visible;\r\n padding-bottom: 0;\r\n }\r\n }\r\n @media (min-width: 1024px) {\r\n .mw-grid {\r\n grid-template-columns: repeat(4, 1fr);\r\n }\r\n }\r\n\r\n \/* Cards *\/\r\n .mw-plan-card {\r\n background: white;\r\n border: 1px solid var(--border-color);\r\n border-radius: 1rem;\r\n padding: 1.5rem;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n \r\n \/* Mobile Slider Specs *\/\r\n min-width: 85%; \r\n scroll-snap-align: center;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .mw-plan-card {\r\n min-width: auto; \/* Reset for grid *\/\r\n }\r\n }\r\n\r\n .mw-plan-card:hover {\r\n transform: translateY(-10px);\r\n border-color: var(--primary-blue);\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n z-index: 2;\r\n }\r\n\r\n \/* Featured\/Best Value Card *\/\r\n .mw-plan-card.mw-featured {\r\n border: 2px solid var(--primary-blue);\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .mw-plan-card.mw-featured {\r\n transform: translateY(-1rem);\r\n z-index: 5;\r\n }\r\n .mw-plan-card.mw-featured:hover {\r\n transform: translateY(calc(-1rem - 10px));\r\n }\r\n }\r\n\r\n \/* Typography inside cards *\/\r\n .mw-card-header {\r\n text-align: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n .mw-card-title {\r\n font-size: 1.25rem;\r\n font-weight: 700;\r\n margin: 0;\r\n color: #1f2937;\r\n }\r\n .mw-card-subtitle {\r\n font-size: 0.75rem;\r\n color: #6b7280;\r\n margin-top: 0.25rem;\r\n }\r\n .mw-price-wrapper {\r\n margin-top: 0.5rem;\r\n color: #1f2937;\r\n }\r\n .mw-currency {\r\n font-size: 0.875rem;\r\n vertical-align: top;\r\n position: relative;\r\n top: 4px;\r\n }\r\n .mw-amount {\r\n font-size: 2.25rem;\r\n font-weight: 700;\r\n }\r\n .mw-period {\r\n font-size: 0.875rem;\r\n color: #6b7280;\r\n }\r\n\r\n \/* Price Cut Style *\/\r\n .mw-price-cut-wrapper {\r\n font-size: 0.9rem;\r\n color: var(--price-cut-color);\r\n margin-bottom: -5px;\r\n font-weight: 500;\r\n }\r\n .mw-price-cut {\r\n text-decoration: line-through;\r\n }\r\n .mw-discount-tag {\r\n color: #ef4444; \/* Red for discount *\/\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n background: #fef2f2;\r\n padding: 1px 6px;\r\n border-radius: 4px;\r\n margin-left: 5px;\r\n vertical-align: text-bottom;\r\n }\r\n\r\n \/* Buttons *\/\r\n .mw-btn {\r\n display: block;\r\n width: 100%;\r\n padding: 0.75rem 1.5rem;\r\n background-color: var(--primary-blue);\r\n color: white;\r\n text-align: center;\r\n font-weight: 600;\r\n border-radius: 0.5rem;\r\n text-decoration: none;\r\n transition: background-color 0.3s ease;\r\n margin-bottom: 1.5rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n .mw-btn:hover {\r\n background-color: var(--dark-blue);\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 15px -3px rgba(32, 76, 229, 0.3);\r\n }\r\n\r\n \/* Feature List *\/\r\n .mw-feature-list {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n flex-grow: 1;\r\n }\r\n .mw-feature-list li {\r\n display: flex;\r\n align-items: center;\r\n padding: 9px 0;\r\n border-bottom: 1px solid var(--border-color);\r\n font-size: 0.9rem;\r\n color: var(--text-gray);\r\n }\r\n .mw-feature-list li:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n \/* Icons inside list *\/\r\n .mw-feature-list li i {\r\n color: var(--primary-blue);\r\n margin-right: 12px;\r\n width: 20px;\r\n text-align: center;\r\n font-size: 1rem;\r\n }\r\n \r\n .mw-feature-list li strong {\r\n margin-right: 5px;\r\n }\r\n \r\n .mw-feature-list li i.mw-icon-disabled {\r\n color: #d1d5db; \r\n }\r\n .mw-text-disabled {\r\n color: #9ca3af;\r\n }\r\n\r\n \/* Highlight Feature *\/\r\n .mw-highlight-feature {\r\n background-color: var(--light-blue-bg);\r\n border-radius: 6px;\r\n padding-left: 8px !important;\r\n padding-right: 8px !important;\r\n margin: 4px -8px;\r\n border-bottom: none !important;\r\n }\r\n\r\n \/* Ribbon *\/\r\n .mw-ribbon {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: var(--primary-blue);\r\n color: white;\r\n padding: 5px 20px;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n border-bottom-left-radius: 10px;\r\n border-bottom-right-radius: 10px;\r\n box-shadow: 0 4px 6px rgba(32, 76, 229, 0.2);\r\n z-index: 10;\r\n }\r\n\r\n \/* Footer Grid *\/\r\n .mw-footer-features {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 1.5rem;\r\n margin-top: 4rem;\r\n border-top: 1px solid #e5e7eb;\r\n padding-top: 2.5rem;\r\n text-align: center;\r\n }\r\n @media (min-width: 768px) {\r\n .mw-footer-features {\r\n grid-template-columns: repeat(4, 1fr);\r\n }\r\n }\r\n .mw-footer-item h4 {\r\n font-weight: 700;\r\n color: #374151;\r\n margin: 0.5rem 0 0;\r\n }\r\n .mw-footer-item p {\r\n font-size: 0.875rem;\r\n color: #6b7280;\r\n margin: 0;\r\n }\r\n .mw-footer-icon {\r\n font-size: 2.25rem;\r\n color: var(--primary-blue);\r\n margin-bottom: 0.75rem;\r\n display: inline-block;\r\n }\r\n\r\n .mw-grid::-webkit-scrollbar {\r\n display: none;\r\n }\r\n .mw-grid {\r\n -ms-overflow-style: none;\r\n scrollbar-width: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Main Wrapper with Scoped Class -->\r\n <div class=\"mw-pricing-container\">\r\n \r\n <!-- Section Header -->\r\n <div class=\"mw-header\">\r\n <h2>Choose Your Web Hosting Plan<\/h2>\r\n <p>Get world-class cPanel hosting with NVMe SSD storage, LiteSpeed servers, and 24\/7 expert support.<\/p>\r\n <\/div>\r\n\r\n <!-- Toggle Switch -->\r\n <div class=\"mw-toggle-container\">\r\n <span class=\"mw-toggle-label active\" id=\"mw-label-monthly\">Monthly<\/span>\r\n <label class=\"mw-switch\">\r\n <input type=\"checkbox\" id=\"mw-pricing-toggle\">\r\n <span class=\"mw-slider\"><\/span>\r\n <\/label>\r\n <span class=\"mw-toggle-label\" id=\"mw-label-yearly\">Yearly <span class=\"mw-save-badge\">Save 80%<\/span><\/span>\r\n <\/div>\r\n\r\n <!-- Pricing Grid \/ Mobile Slider -->\r\n <div class=\"mw-grid\">\r\n\r\n <!-- Plan 1: Beginner -->\r\n <div class=\"mw-plan-card\">\r\n <div class=\"mw-card-header\">\r\n <h3 class=\"mw-card-title\">Beginner<\/h3>\r\n <p class=\"mw-card-subtitle\">Ideal for personal sites<\/p>\r\n \r\n <!-- Price Cut Block -->\r\n <div class=\"mw-price-cut-wrapper\">\r\n <!-- Placeholder handled by JS -->\r\n <span class=\"mw-currency\">\u20b9<\/span><span class=\"mw-price-cut mw-original-amount\">150<\/span> <span class=\"mw-discount-tag\">80% OFF<\/span>\r\n <\/div>\r\n\r\n <div class=\"mw-price-wrapper\">\r\n <span class=\"mw-currency\">\u20b9<\/span>\r\n <span class=\"mw-amount\" data-monthly=\"30\" data-yearly=\"300\">30<\/span>\r\n <span class=\"mw-period\">\/mo<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <a href=\"#\" class=\"mw-btn\">Add to Cart<\/a>\r\n\r\n <ul class=\"mw-feature-list\">\r\n <li><i class=\"fa-solid fa-globe\"><\/i> <strong>1<\/strong> Website<\/li>\r\n <li><i class=\"fa-solid fa-ban mw-icon-disabled\"><\/i> <span class=\"mw-text-disabled\">No Free Domain<\/span><\/li>\r\n <li><i class=\"fa-solid fa-database\"><\/i> <strong>5GB<\/strong> NVMe SSD<\/li>\r\n <li><i class=\"fa-solid fa-gauge-high\"><\/i> <strong>Unlimited<\/strong> Bandwidth<\/li>\r\n <li><i class=\"fa-solid fa-lock\"><\/i> <strong>Free<\/strong> SSL Certificate<\/li>\r\n <li><i class=\"fa-solid fa-envelope\"><\/i> <strong>5<\/strong> Email Accounts<\/li>\r\n <li><i class=\"fa-solid fa-server\"><\/i> <strong>5<\/strong> Sub Domains<\/li>\r\n <li><i class=\"fa-solid fa-database\"><\/i> <strong>5<\/strong> MySQL Databases<\/li>\r\n <li><i class=\"fa-solid fa-bolt\"><\/i> LiteSpeed Server<\/li>\r\n <li><i class=\"fa-solid fa-shield-halved\"><\/i> Daily Backup<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Plan 2: Advance -->\r\n <div class=\"mw-plan-card\">\r\n <div class=\"mw-card-header\">\r\n <h3 class=\"mw-card-title\">Advance<\/h3>\r\n <p class=\"mw-card-subtitle\">Best for small businesses<\/p>\r\n \r\n <!-- Price Cut Block -->\r\n <div class=\"mw-price-cut-wrapper\">\r\n <span class=\"mw-currency\">\u20b9<\/span><span class=\"mw-price-cut mw-original-amount\">275<\/span> <span class=\"mw-discount-tag\">80% OFF<\/span>\r\n <\/div>\r\n\r\n <div class=\"mw-price-wrapper\">\r\n <span class=\"mw-currency\">\u20b9<\/span>\r\n <span class=\"mw-amount\" data-monthly=\"55\" data-yearly=\"550\">55<\/span>\r\n <span class=\"mw-period\">\/mo<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#\" class=\"mw-btn\">Add to Cart<\/a>\r\n\r\n <ul class=\"mw-feature-list\">\r\n <li><i class=\"fa-solid fa-globe\"><\/i> <strong>5<\/strong> Websites<\/li>\r\n <li class=\"mw-highlight-feature\"><i class=\"fa-solid fa-gift\"><\/i> <strong>Free .XYZ<\/strong> Domain<\/li>\r\n <li><i class=\"fa-solid fa-database\"><\/i> <strong>40GB<\/strong> NVMe SSD<\/li>\r\n <li><i class=\"fa-solid fa-gauge-high\"><\/i> <strong>Unlimited<\/strong> Bandwidth<\/li>\r\n <li><i class=\"fa-solid fa-lock\"><\/i> <strong>Free<\/strong> SSL Certificate<\/li>\r\n <li><i class=\"fa-solid fa-envelope\"><\/i> <strong>5<\/strong> Email Accounts<\/li>\r\n <li><i class=\"fa-solid fa-server\"><\/i> <strong>5<\/strong> Sub Domains<\/li>\r\n <li><i class=\"fa-solid fa-database\"><\/i> <strong>5<\/strong> MySQL Databases<\/li>\r\n <li><i class=\"fa-solid fa-bolt\"><\/i> LiteSpeed Server<\/li>\r\n <li><i class=\"fa-solid fa-shield-halved\"><\/i> Daily Backup<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Plan 3: Business (Highlighted) -->\r\n <div class=\"mw-plan-card mw-featured\">\r\n <div class=\"mw-ribbon\">Best Value<\/div>\r\n <div class=\"mw-card-header\">\r\n <h3 class=\"mw-card-title\" style=\"color: var(--primary-blue);\">Business<\/h3>\r\n <p class=\"mw-card-subtitle\">Optimized for growth<\/p>\r\n \r\n <!-- Price Cut Block -->\r\n <div class=\"mw-price-cut-wrapper\">\r\n <span class=\"mw-currency\">\u20b9<\/span><span class=\"mw-price-cut mw-original-amount\">745<\/span> <span class=\"mw-discount-tag\">80% OFF<\/span>\r\n <\/div>\r\n\r\n <div class=\"mw-price-wrapper\" style=\"color: var(--primary-blue);\">\r\n <span class=\"mw-currency\">\u20b9<\/span>\r\n <span class=\"mw-amount\" data-monthly=\"149\" data-yearly=\"1490\">149<\/span>\r\n <span class=\"mw-period\">\/mo<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#\" class=\"mw-btn\" style=\"box-shadow: 0 10px 15px -3px rgba(32, 76, 229, 0.2);\">Add to Cart<\/a>\r\n\r\n <ul class=\"mw-feature-list\">\r\n <li><i class=\"fa-solid fa-globe\"><\/i> <strong>10<\/strong> Websites<\/li>\r\n <li class=\"mw-highlight-feature\"><i class=\"fa-solid fa-gift\"><\/i> <strong>Free .IN<\/strong> Domain<\/li>\r\n <li><i class=\"fa-solid fa-database\"><\/i> <strong>80GB<\/strong> NVMe SSD<\/li>\r\n <li><i class=\"fa-solid fa-gauge-high\"><\/i> <strong>Unlimited<\/strong> Bandwidth<\/li>\r\n <li><i class=\"fa-solid fa-lock\"><\/i> <strong>Free<\/strong> SSL Certificate<\/li>\r\n <li><i class=\"fa-solid fa-envelope\"><\/i> <strong>10<\/strong> Email Accounts<\/li>\r\n <li><i class=\"fa-solid fa-server\"><\/i> <strong>15<\/strong> Sub Domains<\/li>\r\n <li><i class=\"fa-solid fa-database\"><\/i> <strong>10<\/strong> MySQL Databases<\/li>\r\n <li><i class=\"fa-solid fa-bolt\"><\/i> LiteSpeed Server<\/li>\r\n <li><i class=\"fa-solid fa-shield-halved\"><\/i> Daily Backup<\/li>\r\n <li><i class=\"fa-solid fa-headset\"><\/i> 24\/7 Priority Support<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Plan 4: Ultimate -->\r\n <div class=\"mw-plan-card\">\r\n <div class=\"mw-card-header\">\r\n <h3 class=\"mw-card-title\">Ultimate<\/h3>\r\n <p class=\"mw-card-subtitle\">For high-traffic sites<\/p>\r\n \r\n <!-- Price Cut Block -->\r\n <div class=\"mw-price-cut-wrapper\">\r\n <span class=\"mw-currency\">\u20b9<\/span><span class=\"mw-price-cut mw-original-amount\">995<\/span> <span class=\"mw-discount-tag\">80% OFF<\/span>\r\n <\/div>\r\n\r\n <div class=\"mw-price-wrapper\">\r\n <span class=\"mw-currency\">\u20b9<\/span>\r\n <span class=\"mw-amount\" data-monthly=\"199\" data-yearly=\"1990\">199<\/span>\r\n <span class=\"mw-period\">\/mo<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#\" class=\"mw-btn\">Add to Cart<\/a>\r\n\r\n <ul class=\"mw-feature-list\">\r\n <li><i class=\"fa-solid fa-globe\"><\/i> <strong>Unlimited<\/strong> Websites<\/li>\r\n <li class=\"mw-highlight-feature\"><i class=\"fa-solid fa-gift\"><\/i> <strong>Free .COM \/ .ORG<\/strong><\/li>\r\n <li><i class=\"fa-solid fa-database\"><\/i> <strong>Unlimited<\/strong> NVMe SSD<\/li>\r\n <li><i class=\"fa-solid fa-gauge-high\"><\/i> <strong>Unlimited<\/strong> Bandwidth<\/li>\r\n <li><i class=\"fa-solid fa-lock\"><\/i> <strong>Free<\/strong> SSL Certificate<\/li>\r\n <li><i class=\"fa-solid fa-envelope\"><\/i> <strong>Unlimited<\/strong> Emails<\/li>\r\n <li><i class=\"fa-solid fa-server\"><\/i> <strong>Unlimited<\/strong> Sub Domains<\/li>\r\n <li><i class=\"fa-solid fa-database\"><\/i> <strong>Unlimited<\/strong> MySQL DBs<\/li>\r\n <li><i class=\"fa-solid fa-bolt\"><\/i> LiteSpeed Server<\/li>\r\n <li><i class=\"fa-solid fa-shield-halved\"><\/i> Daily Backup<\/li>\r\n <li><i class=\"fa-solid fa-headset\"><\/i> 24\/7 Priority Support<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Trust Features \/ Footer Section -->\r\n <div class=\"mw-footer-features\">\r\n <div class=\"mw-footer-item\">\r\n <i class=\"fa-brands fa-cpanel mw-footer-icon\"><\/i>\r\n <h4>cPanel<\/h4>\r\n <p>Control Panel<\/p>\r\n <\/div>\r\n <div class=\"mw-footer-item\">\r\n <i class=\"fa-solid fa-rocket mw-footer-icon\"><\/i>\r\n <h4>LiteSpeed<\/h4>\r\n <p>Web Server<\/p>\r\n <\/div>\r\n <div class=\"mw-footer-item\">\r\n <i class=\"fa-solid fa-shield-virus mw-footer-icon\"><\/i>\r\n <h4>Imunify360<\/h4>\r\n <p>Secure & Safe<\/p>\r\n <\/div>\r\n <div class=\"mw-footer-item\">\r\n <i class=\"fa-solid fa-headset mw-footer-icon\"><\/i>\r\n <h4>24\/7 Support<\/h4>\r\n <p>Live Chat<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Toggle Script -->\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const toggle = document.getElementById('mw-pricing-toggle');\r\n const amounts = document.querySelectorAll('.mw-amount');\r\n const periods = document.querySelectorAll('.mw-period');\r\n const originalAmounts = document.querySelectorAll('.mw-original-amount');\r\n const labelMonthly = document.getElementById('mw-label-monthly');\r\n const labelYearly = document.getElementById('mw-label-yearly');\r\n\r\n \/\/ Calculation for 80% OFF (Current Price is 20% of Original)\r\n function calculateOriginal(current) {\r\n return Math.round(current * 5); \r\n }\r\n\r\n \/\/ Function to sync all prices\r\n function syncPrices() {\r\n const isYearly = toggle.checked;\r\n\r\n \/\/ Update Labels\r\n if (isYearly) {\r\n labelMonthly.classList.remove('active');\r\n labelYearly.classList.add('active');\r\n } else {\r\n labelYearly.classList.remove('active');\r\n labelMonthly.classList.add('active');\r\n }\r\n\r\n \/\/ Update Prices, Period, and Strikethrough\r\n amounts.forEach((amount, index) => {\r\n let priceVal;\r\n if (isYearly) {\r\n priceVal = parseInt(amount.getAttribute('data-yearly'));\r\n } else {\r\n priceVal = parseInt(amount.getAttribute('data-monthly'));\r\n }\r\n \r\n amount.textContent = priceVal;\r\n \/\/ Update the corresponding original amount (assuming same order)\r\n if(originalAmounts[index]) {\r\n originalAmounts[index].textContent = calculateOriginal(priceVal);\r\n }\r\n });\r\n\r\n periods.forEach(period => {\r\n period.textContent = isYearly ? '\/yr' : '\/mo';\r\n });\r\n }\r\n\r\n \/\/ Initial calculation\r\n syncPrices();\r\n\r\n \/\/ Event listener\r\n toggle.addEventListener('change', syncPrices);\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fa2684b e-flex e-con-boxed e-con e-parent\" data-id=\"fa2684b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a11206c elementor-widget elementor-widget-html\" data-id=\"a11206c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Products and Services<\/title>\r\n <!-- Google Fonts -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <!-- FontAwesome -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* --- CSS VARIABLES & RESET --- *\/\r\n :root {\r\n --mw-blue: #204ce5;\r\n --mw-dark: #1e293b;\r\n --mw-gray: #64748b;\r\n --mw-orange: #ff6b00;\r\n --mw-light-bg: #f3f6fa;\r\n --mw-border: #e2e8f0;\r\n }\r\n\r\n * { box-sizing: border-box; }\r\n body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }\r\n\r\n \/* --- SECTION CONTAINER --- *\/\r\n .mw-services-section {\r\n padding: 5rem 5%;\r\n background-color: var(--mw-light-bg);\r\n text-align: center;\r\n }\r\n\r\n .mw-section-header {\r\n max-width: 700px;\r\n margin: 0 auto 3rem auto;\r\n }\r\n\r\n .mw-title {\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n color: var(--mw-dark);\r\n margin-bottom: 1rem;\r\n line-height: 1.3;\r\n }\r\n\r\n .mw-subtitle {\r\n font-size: 1.05rem;\r\n color: var(--mw-gray);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* --- TABS LAYOUT --- *\/\r\n .mw-tabs-container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n background: #fff;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n overflow: hidden;\r\n border: 1px solid var(--mw-border);\r\n }\r\n\r\n \/* The Line of Icons *\/\r\n .mw-tabs-nav {\r\n display: flex;\r\n justify-content: space-between;\r\n background-color: #fff;\r\n border-bottom: 1px solid var(--mw-border);\r\n overflow-x: auto; \/* Scroll on mobile *\/\r\n scrollbar-width: none; \/* Hide scrollbar Firefox *\/\r\n }\r\n .mw-tabs-nav::-webkit-scrollbar { display: none; } \/* Hide scrollbar Chrome *\/\r\n\r\n .mw-tab-btn {\r\n flex: 1;\r\n border: none;\r\n background: none;\r\n padding: 1.5rem 1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n min-width: 120px; \/* Ensure fit on mobile *\/\r\n position: relative;\r\n }\r\n\r\n .mw-tab-btn:hover {\r\n background-color: #f8fafc;\r\n }\r\n\r\n .mw-tab-btn.active {\r\n background-color: #fff;\r\n }\r\n\r\n \/* Active Indicator Line *\/\r\n .mw-tab-btn::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background-color: transparent;\r\n transition: background-color 0.3s;\r\n }\r\n .mw-tab-btn.active::after {\r\n background-color: var(--mw-blue);\r\n }\r\n\r\n \/* --- ANIMATIONS --- *\/\r\n @keyframes iconFloat {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-8px); }\r\n }\r\n\r\n @keyframes iconPop {\r\n 0% { transform: scale(0.5); opacity: 0; }\r\n 60% { transform: scale(1.1); opacity: 1; }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n \/* Icons in the Line *\/\r\n .mw-tab-icon {\r\n font-size: 1.8rem;\r\n color: #94a3b8;\r\n transition: all 0.3s ease;\r\n }\r\n .mw-tab-label {\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n color: var(--mw-gray);\r\n transition: color 0.3s;\r\n }\r\n\r\n \/* Hover State *\/\r\n .mw-tab-btn:hover .mw-tab-icon {\r\n color: var(--mw-blue);\r\n transform: translateY(-4px);\r\n }\r\n\r\n \/* Active State (Animated) *\/\r\n .mw-tab-btn.active .mw-tab-icon {\r\n color: var(--mw-blue);\r\n animation: iconFloat 2s ease-in-out infinite;\r\n }\r\n .mw-tab-btn.active .mw-tab-label {\r\n color: var(--mw-dark);\r\n }\r\n\r\n \/* --- CONTENT AREA --- *\/\r\n .mw-content-wrapper {\r\n padding: 3rem 2rem;\r\n text-align: left;\r\n min-height: 300px; \/* Prevent layout jump *\/\r\n }\r\n\r\n .mw-tab-panel {\r\n display: none;\r\n animation: fadeIn 0.4s ease-in-out;\r\n }\r\n \r\n .mw-tab-panel.active {\r\n display: grid;\r\n grid-template-columns: 1.2fr 0.8fr;\r\n gap: 3rem;\r\n align-items: center;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .mw-panel-info h3 {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: var(--mw-dark);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .mw-panel-desc {\r\n font-size: 1rem;\r\n color: var(--mw-gray);\r\n line-height: 1.7;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .mw-panel-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background-color: var(--mw-blue);\r\n color: #fff;\r\n padding: 12px 30px;\r\n border-radius: 6px;\r\n text-decoration: none;\r\n font-weight: 600;\r\n transition: background-color 0.2s;\r\n }\r\n .mw-panel-link:hover {\r\n background-color: #1d4ed8;\r\n }\r\n\r\n \/* Right side image\/graphic placeholder for visual balance *\/\r\n .mw-panel-graphic {\r\n background: #f1f5f9;\r\n border-radius: 12px;\r\n height: 250px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #cbd5e1;\r\n font-size: 5rem;\r\n }\r\n\r\n \/* Animate the large icon when panel appears *\/\r\n .mw-tab-panel.active .mw-panel-graphic i {\r\n animation: iconPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n color: var(--mw-blue); \/* Optional: make the big icon blue too *\/\r\n }\r\n\r\n \/* --- RESPONSIVE --- *\/\r\n @media (max-width: 768px) {\r\n .mw-title { font-size: 2rem; }\r\n .mw-tab-panel.active {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n gap: 2rem;\r\n }\r\n .mw-panel-graphic { height: 180px; }\r\n .mw-panel-link { width: 100%; justify-content: center; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"mw-services-section\">\r\n \r\n <div class=\"mw-section-header\">\r\n <h2 class=\"mw-title\">Our high-grade, performance-powered products and services<\/h2>\r\n <p class=\"mw-subtitle\">Explore our diverse hosting solutions designed to scale with your business needs.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mw-tabs-container\">\r\n \r\n <!-- 1. The \"Icons in a Line\" -->\r\n <div class=\"mw-tabs-nav\">\r\n <button class=\"mw-tab-btn active\" onclick=\"openTab(event, 'shared')\">\r\n <i class=\"fa-solid fa-users mw-tab-icon\"><\/i>\r\n <span class=\"mw-tab-label\">Shared<\/span>\r\n <\/button>\r\n <button class=\"mw-tab-btn\" onclick=\"openTab(event, 'vps')\">\r\n <i class=\"fa-solid fa-server mw-tab-icon\"><\/i>\r\n <span class=\"mw-tab-label\">VPS<\/span>\r\n <\/button>\r\n <button class=\"mw-tab-btn\" onclick=\"openTab(event, 'dedicated')\">\r\n <i class=\"fa-solid fa-database mw-tab-icon\"><\/i>\r\n <span class=\"mw-tab-label\">Dedicated<\/span>\r\n <\/button>\r\n <button class=\"mw-tab-btn\" onclick=\"openTab(event, 'reseller')\">\r\n <i class=\"fa-solid fa-chart-line mw-tab-icon\"><\/i>\r\n <span class=\"mw-tab-label\">Reseller<\/span>\r\n <\/button>\r\n <button class=\"mw-tab-btn\" onclick=\"openTab(event, 'cloud')\">\r\n <i class=\"fa-solid fa-cloud mw-tab-icon\"><\/i>\r\n <span class=\"mw-tab-label\">Cloud<\/span>\r\n <\/button>\r\n <button class=\"mw-tab-btn\" onclick=\"openTab(event, 'wp')\">\r\n <i class=\"fa-brands fa-wordpress mw-tab-icon\"><\/i>\r\n <span class=\"mw-tab-label\">WordPress<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- 2. The Content That \"Comes Out\" -->\r\n <div class=\"mw-content-wrapper\">\r\n \r\n <!-- Shared Panel -->\r\n <div id=\"shared\" class=\"mw-tab-panel active\">\r\n <div class=\"mw-panel-info\">\r\n <h3>Shared Hosting<\/h3>\r\n <p class=\"mw-panel-desc\">Get your website online today with our affordable shared hosting plans. Perfect for personal blogs, portfolios, and small business websites. Includes free SSL, easy control panel, and 24\/7 support.<\/p>\r\n <a href=\"#\" class=\"mw-panel-link\">View Details <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <div class=\"mw-panel-graphic\"><i class=\"fa-solid fa-users\"><\/i><\/div>\r\n <\/div>\r\n\r\n <!-- VPS Panel -->\r\n <div id=\"vps\" class=\"mw-tab-panel\">\r\n <div class=\"mw-panel-info\">\r\n <h3>VPS Hosting<\/h3>\r\n <p class=\"mw-panel-desc\">Full root access and guaranteed resources with our KVM-based VPS hosting. Ideal for developers and growing businesses that need specific software configurations and isolated environments.<\/p>\r\n <a href=\"#\" class=\"mw-panel-link\">View Details <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <div class=\"mw-panel-graphic\"><i class=\"fa-solid fa-server\"><\/i><\/div>\r\n <\/div>\r\n\r\n <!-- Dedicated Panel -->\r\n <div id=\"dedicated\" class=\"mw-tab-panel\">\r\n <div class=\"mw-panel-info\">\r\n <h3>Dedicated Server<\/h3>\r\n <p class=\"mw-panel-desc\">Experience bare-metal power. Get a physical server dedicated entirely to your application. Maximum performance, security, and control for high-traffic websites and large databases.<\/p>\r\n <a href=\"#\" class=\"mw-panel-link\">View Details <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <div class=\"mw-panel-graphic\"><i class=\"fa-solid fa-database\"><\/i><\/div>\r\n <\/div>\r\n\r\n <!-- Reseller Panel -->\r\n <div id=\"reseller\" class=\"mw-tab-panel\">\r\n <div class=\"mw-panel-info\">\r\n <h3>Reseller Hosting<\/h3>\r\n <p class=\"mw-panel-desc\">Start your own web hosting business with our white-labeled reseller plans. Create your own packages, manage clients via WHM, and keep 100% of the profits.<\/p>\r\n <a href=\"#\" class=\"mw-panel-link\">View Details <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <div class=\"mw-panel-graphic\"><i class=\"fa-solid fa-chart-line\"><\/i><\/div>\r\n <\/div>\r\n\r\n <!-- Cloud Panel -->\r\n <div id=\"cloud\" class=\"mw-tab-panel\">\r\n <div class=\"mw-panel-info\">\r\n <h3>Cloud Hosting<\/h3>\r\n <p class=\"mw-panel-desc\">Scale effortlessly with our managed cloud hosting. Your site sits on a cluster of servers, ensuring high availability and automatic failover. Pay for what you use.<\/p>\r\n <a href=\"#\" class=\"mw-panel-link\">View Details <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <div class=\"mw-panel-graphic\"><i class=\"fa-solid fa-cloud\"><\/i><\/div>\r\n <\/div>\r\n\r\n <!-- WordPress Panel -->\r\n <div id=\"wp\" class=\"mw-tab-panel\">\r\n <div class=\"mw-panel-info\">\r\n <h3>WordPress Hosting<\/h3>\r\n <p class=\"mw-panel-desc\">Turbocharge your WordPress site. Our platform is optimized with LiteSpeed caching, automatic updates, and specialized security rules to keep your WP site fast and safe.<\/p>\r\n <a href=\"#\" class=\"mw-panel-link\">View Details <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <div class=\"mw-panel-graphic\"><i class=\"fa-brands fa-wordpress\"><\/i><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <script>\r\n function openTab(evt, tabName) {\r\n \/\/ 1. Hide all panels\r\n var i, tabcontent, tablinks;\r\n tabcontent = document.getElementsByClassName(\"mw-tab-panel\");\r\n for (i = 0; i < tabcontent.length; i++) {\r\n tabcontent[i].classList.remove(\"active\");\r\n }\r\n\r\n \/\/ 2. Deactivate all buttons\r\n tablinks = document.getElementsByClassName(\"mw-tab-btn\");\r\n for (i = 0; i < tablinks.length; i++) {\r\n tablinks[i].classList.remove(\"active\");\r\n }\r\n\r\n \/\/ 3. Show current panel and activate button\r\n document.getElementById(tabName).classList.add(\"active\");\r\n evt.currentTarget.classList.add(\"active\");\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59ae3be elementor-widget elementor-widget-html\" data-id=\"59ae3be\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Hosting FAQ Section<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* --- ISOLATED CSS --- *\/\r\n :root {\r\n --mw-blue: #204ce5;\r\n --mw-dark: #1e293b;\r\n --mw-gray: #64748b;\r\n --mw-border: #e2e8f0;\r\n --mw-bg: #f8fafc;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n margin: 0; padding: 0;\r\n background-color: #fff;\r\n }\r\n\r\n .mw-faq-section {\r\n max-width: 1200px; \/* Increased width for 2 columns *\/\r\n margin: 4rem auto;\r\n padding: 0 1.5rem;\r\n }\r\n\r\n .mw-faq-header {\r\n text-align: center;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .mw-faq-title {\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n color: var(--mw-dark);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .mw-faq-subtitle {\r\n font-size: 1rem;\r\n color: var(--mw-gray);\r\n max-width: 600px;\r\n margin: 0 auto;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Grid Layout for Side-by-Side *\/\r\n .mw-faq-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr); \/* 2 Equal Columns *\/\r\n gap: 1.5rem;\r\n align-items: start; \/* Align items to top *\/\r\n }\r\n\r\n \/* Accordion Style *\/\r\n .mw-faq-item {\r\n background: #fff;\r\n border: 1px solid var(--mw-border);\r\n border-radius: 8px;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n height: fit-content; \/* Ensure height adjusts to content *\/\r\n }\r\n\r\n .mw-faq-item:hover {\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\r\n border-color: #cbd5e1;\r\n }\r\n\r\n .mw-faq-item[open] {\r\n border-color: var(--mw-blue);\r\n box-shadow: 0 4px 12px rgba(32, 76, 229, 0.1);\r\n }\r\n\r\n .mw-faq-question {\r\n padding: 1.25rem 1.5rem;\r\n cursor: pointer;\r\n font-weight: 600;\r\n color: var(--mw-dark);\r\n font-size: 1.05rem;\r\n list-style: none;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: background-color 0.2s;\r\n }\r\n\r\n \/* Remove default triangle *\/\r\n .mw-faq-question::-webkit-details-marker { display: none; }\r\n\r\n .mw-faq-question:hover {\r\n background-color: var(--mw-bg);\r\n }\r\n\r\n \/* Icon Animation *\/\r\n .mw-faq-icon {\r\n color: var(--mw-blue);\r\n font-size: 1.2rem;\r\n transition: transform 0.3s ease;\r\n flex-shrink: 0; \/* Prevent icon shrinking *\/\r\n margin-left: 10px;\r\n }\r\n\r\n .mw-faq-item[open] .mw-faq-icon {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .mw-faq-answer {\r\n padding: 0 1.5rem 1.5rem 1.5rem;\r\n color: var(--mw-gray);\r\n line-height: 1.7;\r\n font-size: 0.95rem;\r\n border-top: 1px solid transparent;\r\n }\r\n\r\n .mw-faq-item[open] .mw-faq-answer {\r\n border-top-color: #f1f5f9;\r\n padding-top: 1rem;\r\n }\r\n\r\n \/* Mobile Adjustments *\/\r\n @media (max-width: 768px) {\r\n .mw-faq-grid {\r\n grid-template-columns: 1fr; \/* Stack on mobile\/tablet *\/\r\n gap: 1rem;\r\n }\r\n .mw-faq-title { font-size: 2rem; }\r\n .mw-faq-question { padding: 1rem; font-size: 1rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"mw-faq-section\">\r\n \r\n <div class=\"mw-faq-header\">\r\n <h2 class=\"mw-faq-title\">Frequently Asked Questions<\/h2>\r\n <p class=\"mw-faq-subtitle\">Everything you need to know about getting your website online. Can't find the answer you're looking for? Chat with our 24\/7 support team.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mw-faq-grid\">\r\n <!-- Left Column Items -->\r\n <div class=\"mw-col-left\" style=\"display: flex; flex-direction: column; gap: 1.5rem;\">\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n What is web hosting and why do I need it?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Web hosting is a service that provides the technology and storage space needed for your website to be viewed on the Internet. Think of your domain name as your address and web hosting as the \"house\" where your website files live. Without hosting, your website cannot be accessed by visitors.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n What is the difference between a domain and web hosting?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n A domain name (like google.com) is the address people type to find your site. Web hosting is the actual storage space for your site's files. You need both to have a functioning website. We help you connect them seamlessly when you purchase a plan.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Can I migrate my existing website to you for free?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Yes! <strong>HostLe<\/strong> offers free website migration. If you are moving from another provider, our expert team will handle the transfer of your files, databases, and emails from your old host to our servers with zero downtime and data loss.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Do I get a free SSL certificate?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Absolutely. <strong>HostLe<\/strong> includes a free Let's Encrypt SSL certificate with every single hosting plan. This activates the padlock icon in the browser, encrypts data, builds trust with your visitors, and even helps boost your SEO rankings.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Can I upgrade my plan later as my business grows?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Yes, <strong>HostLe<\/strong> hosting is fully scalable. You can start with a basic shared hosting plan and easily upgrade to a higher tier or a VPS as your traffic increases. You only pay the difference in price, and there is no downtime during the upgrade.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Is email hosting included in the plans?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Yes, all <strong>HostLe<\/strong> plans come with professional email hosting. You can create custom email addresses (like yourname@yourdomain.com) to build a professional image. You can access your mail via Webmail or connect it to Outlook\/Gmail.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Do you offer a money-back guarantee?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n We are confident you'll love our service. However, if you are not completely satisfied, <strong>HostLe<\/strong> offers a <strong>30-day money-back guarantee<\/strong> on all shared hosting plans. No questions asked, no hidden fees.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Do you provide automatic daily backups?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Yes, at <strong>HostLe<\/strong>, we prioritize your data safety. We provide automated daily backups to ensure your data is always safe. You can easily restore your website files and databases with just a click from your control panel if anything goes wrong.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Can I install WordPress easily?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Absolutely! All <strong>HostLe<\/strong> plans come with a 1-Click App Installer (Softaculous). You can install WordPress, Joomla, Drupal, and over 400 other scripts in seconds without any technical knowledge.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n What control panel do you provide?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n We provide the industry-standard <strong>cPanel<\/strong> with our Linux shared hosting plans. It\u2019s an incredibly easy-to-use interface that lets you manage your files, databases, email accounts, and security settings effortlessly.\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n\r\n <!-- Right Column Items -->\r\n <div class=\"mw-col-right\" style=\"display: flex; flex-direction: column; gap: 1.5rem;\">\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n How long does it take to set up my account?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n <strong>HostLe<\/strong> offers instant account activation. Once your payment is confirmed, your hosting account is set up automatically within minutes, and you will receive your login details via email so you can get started right away.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Where are your servers located?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n <strong>HostLe<\/strong> utilizes Tier-4 data centers located globally (including India, USA, and Europe) to ensure blazing-fast speeds. You can often choose the server location closest to your audience during checkout for optimal performance.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Do you guarantee website uptime?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Yes, we offer a <strong>99.95% Uptime Guarantee<\/strong>. Our infrastructure uses redundant power sources, advanced network architecture, and 24\/7 monitoring to ensure your website stays online around the clock.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Can I run an online store (eCommerce) on your hosting?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Certainly! Our hosting is fully optimized for eCommerce platforms like WooCommerce, Magento, and PrestaShop. With free SSL, fast NVMe storage, and secure payment compatibility, your online store will run smoothly.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Can I host multiple websites on one plan?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n It depends on the plan you choose. Our basic plan supports 1 website, while our \"Advance\" and \"Business\" plans allow you to host multiple or even unlimited websites under a single account.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Do you provide a website builder?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Yes, we provide a free, easy-to-use Website Builder with drag-and-drop functionality. It comes with hundreds of professional templates, allowing you to build a stunning website in minutes without writing a single line of code.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n What payment methods do you accept?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n We accept a wide range of payment methods including Credit\/Debit Cards, PayPal, UPI, Net Banking, and Bank Transfers, making it convenient for you to purchase our services securely.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Do you offer DDoS protection?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Security is our priority. All <strong>HostLe<\/strong> servers are protected by advanced DDoS mitigation systems that detect and block malicious traffic attacks instantly, ensuring your website remains safe and accessible.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Is SSH (Root) access available?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Yes, we provide SSH access for advanced users on our Shared Hosting plans to manage files and execute commands securely. For full Root access, we recommend checking out our VPS and Dedicated Server plans.\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"mw-faq-item\">\r\n <summary class=\"mw-faq-question\">\r\n Will my website load fast?\r\n <i class=\"fa-solid fa-chevron-down mw-faq-icon\"><\/i>\r\n <\/summary>\r\n <div class=\"mw-faq-answer\">\r\n Absolutely. We use <strong>LiteSpeed Web Servers<\/strong> combined with NVMe SSD storage and built-in caching (LSCache). This combination typically makes websites load up to 20x faster compared to traditional hosting setups.\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- SEO Schema Markup (JSON-LD) -->\r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"FAQPage\",\r\n \"mainEntity\": [{\r\n \"@type\": \"Question\",\r\n \"name\": \"What is web hosting and why do I need it?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Web hosting is a service that provides the technology and storage space needed for your website to be viewed on the Internet. Without hosting, your website cannot be accessed by visitors.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"What is the difference between a domain and web hosting?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"A domain name is the address people type to find your site. Web hosting is the actual storage space for your site's files. You need both to have a functioning website.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Can I migrate my existing website to you for free?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Yes! HostLe offers free website migration. Our expert team will handle the transfer of your files, databases, and emails with zero downtime.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Do I get a free SSL certificate?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Absolutely. HostLe includes a free Let's Encrypt SSL certificate with every single hosting plan to encrypt data and build trust.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Can I upgrade my plan later?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Yes, HostLe hosting is fully scalable. You can easily upgrade to a higher tier or VPS as your traffic increases with no downtime.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Do you offer a money-back guarantee?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Yes, HostLe offers a 30-day money-back guarantee on all shared hosting plans. If you are not satisfied, you can request a full refund.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Do you provide automatic daily backups?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Yes, HostLe provides automated daily backups to ensure your data is always safe. You can restore your website files and databases with just a click.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Can I install WordPress easily?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Absolutely! All HostLe plans come with a 1-Click App Installer (Softaculous) to install WordPress and over 400 other scripts in seconds.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"What control panel do you provide?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"We provide the industry-standard cPanel with our Linux shared hosting plans for easy management of your website.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"How long does it take to set up my account?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"HostLe offers instant account activation. Once payment is confirmed, your hosting account is set up automatically within minutes.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Where are your servers located?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"HostLe utilizes Tier-4 data centers located globally (including India, USA, and Europe) to ensure blazing-fast speeds.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Do you guarantee website uptime?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Yes, we offer a 99.95% Uptime Guarantee utilizing redundant power sources and 24\/7 monitoring.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Can I run an online store (eCommerce) on your hosting?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Certainly! Our hosting is fully optimized for eCommerce platforms like WooCommerce and Magento with free SSL and fast storage.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Can I host multiple websites on one plan?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"It depends on the plan. Basic plans support 1 site, while advanced plans support multiple or unlimited websites.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Do you provide a website builder?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Yes, we provide a free drag-and-drop Website Builder with hundreds of professional templates.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"What payment methods do you accept?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"We accept Credit\/Debit Cards, PayPal, UPI, Net Banking, and Bank Transfers.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Do you offer DDoS protection?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Yes, all HostLe servers are protected by advanced DDoS mitigation systems to block malicious attacks.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Is SSH (Root) access available?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Yes, SSH access is available on Shared Hosting. Full Root access is available on VPS and Dedicated plans.\"\r\n }\r\n }, {\r\n \"@type\": \"Question\",\r\n \"name\": \"Will my website load fast?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Absolutely. We use LiteSpeed Web Servers and NVMe SSDs to ensure websites load up to 20x faster.\"\r\n }\r\n }]\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Web Hosting Hero Section Web Hosting India \u2013 Year End Sale! Get 80% Off Web hosting + Free Domain Free SSL and AI website builder Free email and daily backups 24\/7 expert support \u20b9 99.00 \/mo Same Price at Renewal \u2014 Guaranteed View Plans 00 : 29 : 21 30-day money-back guarantee SALE www 80% […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13892","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hostle.in\/index.php\/wp-json\/wp\/v2\/pages\/13892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hostle.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hostle.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hostle.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hostle.in\/index.php\/wp-json\/wp\/v2\/comments?post=13892"}],"version-history":[{"count":77,"href":"https:\/\/hostle.in\/index.php\/wp-json\/wp\/v2\/pages\/13892\/revisions"}],"predecessor-version":[{"id":21037,"href":"https:\/\/hostle.in\/index.php\/wp-json\/wp\/v2\/pages\/13892\/revisions\/21037"}],"wp:attachment":[{"href":"https:\/\/hostle.in\/index.php\/wp-json\/wp\/v2\/media?parent=13892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}