:root{
  --navy: #000000;
  --deep: #004244;
  --cta: #005154;
  --brand-blue: #e30000;
  --deep-blue: #006064;
  --muted: #5f6b7a;
  --card-border: #e30000;
  --card-bg: rgba(255,255,255,0.04);
  --footer-overlay: rgba(255,255,255,0.06);
}

/* Global */
* { box-sizing: border-box; }
body {
  font-family: "Outfit", sans-serif !important;
  margin: 0;
  color: #072a55;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------- Topbar / Hero / Features ---------------- */
.topbar{
  background: var(--navy);
  color: #fff;
  padding: 1.6rem 0;
  box-shadow: 0 2px 6px rgba(3,20,60,0.12);
  position: fixed;
  width: 100%;
  z-index: 99;
}
.top-header{width:100%;background: #ffffff;border-bottom:1px solid #bbbbbb59;margin: 0 0 0px;}
.slider-main.printer-product .testimonial-block.product .discount-block img{
    width: 100%;
    height: 130px;
    object-fit: contain;
    margin: 0 0 10px;
}
.top-header .navbar-brand img{width: 150px;}
.top-header ul li a{color:#fff;font-weight:400;margin: 10px 15px 10px 10px;}
.banner-inner h2{line-height: 48px;color:#fff;font-size: 42px;margin: 0 0 15px;}
.banner-inner p{font-size: 18px;color:#fff;margin: 10px 0 30px;}
.banner-content{margin:0 0 50px;width: 100%;}
.owl-nav{position:absolute;top: 80px;display:flex;align-items:center;justify-content: space-between;width: 100%;right:0}
.owl-nav button:hover{background:#DCA580!important;color:#000!important;border-color:#DCA580!important}
.xl-font{font-size: 42px!important;margin: 0 0 7px;line-height: 54px!important;}
.owl-dots{margin:0 auto;text-align:center;position:absolute;bottom:20px;left:0;right:0}
.owl-dots button.owl-dot.active{background:#6a443a!important;width:30px;border-radius:10px;border-color:#6a443a!important}
.owl-dots button.owl-dot{width:8px;height:8px;background:#fff!important;border-radius:50%;margin:0 3px;border:1px solid #6a443a!important}
.banner-sec:before {content: '';bottom: 0;left: 0;opacity: .5;position: absolute;right: 0;top: 0;background: black;z-index: 0;}
.banner-sec{padding: 80px 0 80px;margin: 80px 0 0;background: url(../images/banner.jpg)no-repeat;background-size: cover;height: 100vh;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;}
.top-header a.navbar-brand{text-transform:uppercase;font-weight:900;font-size:32px;font-family:"Playfair Display",serif;color:#fff}
.top-header ul li a.nav-link{color: #000;transition:.3s ease-in-out;display:inline-block}
.about-sec{padding:30px 0}
.steps { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.step-bubble{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; }
.step-circle{
  width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,0.12);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700;
}
.product-icons .btn{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

.hero{
  position:relative;
  /* change banner path as needed */
  background:
    linear-gradient(90deg, rgb(8 58 122 / 67%) 0%, rgb(44 44 44 / 22%) 55%),
    url(../images/fade_img1.jpg) right center / cover no-repeat;
  color:#fff;
  padding: 10.5rem 0 10.5rem;
  overflow:hidden;
}
.hero .left {padding:1rem 1.5rem;position: relative;z-index: 9;}
.hero h1{
  font-size: 56px;
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:.6rem;
}
.hero .sub{
  color: rgba(255,255,255,0.9);
  font-size:1.05rem;
  margin-bottom:1rem;
  max-width:56ch;
}
.btn-primary-cta{
  background: var(--cta);
  border: 2px solid rgba(255,255,255,0.08);
  padding: .75rem 1.25rem;
  border-radius:6px;
  box-shadow: 0 8px 24px rgba(8,35,80,0.35);
  font-weight:600;
}

/* decorative bottom curve on hero */
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  background: linear-gradient(180deg, #e30000, #dc3545);
  z-index: 0;
  height: 100%;
  opacity: .5;
  top: 0;
}
.banner-content-inner {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 9;
}
.banner-content-inner h2 {
    width: 100%;
    text-align: center;
    margin: 0 0 20px;
    font-size: 48px;
}
.breadcrum ul {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
	align-items: center;
}
.breadcrum ul li a {
    text-decoration: none;
    color: #fff;
    border: 1px solid;
    padding: 5px 15px;
    display: inline-block;
}
.error-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.error-sec .righterror-sec {
    text-align: left;
}

.error-sec .righterror-sec h2 {
    color: red;
}
.setup-sec {
    padding: 150px 0 100px;
    text-align: center;
}
.setup-sec .printer-setup-sec .printers-steps {
    justify-content: center;
}
.about-sec table.table td, .about-sec table.table th {
    border: 1px solid #ccc;
    padding: 15px;
}
  .faq-section{
    padding: 60px 0;
  }
  .faq-title{
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
  }
  .faq-title span{
    color: var(--brand-blue);
  }
  .faq-desc{
    color:#394855;
    line-height:1.7;
    font-size:.96rem;
    max-width:480px;
  }

  /* Accordion styling */
  .faq-accordion .accordion-item{
    border:1px solid #2c63a8;
    border-radius:0;
    margin-bottom:10px;
  }
  .faq-accordion .accordion-item:first-of-type,
  .faq-accordion .accordion-item:last-of-type{
    border-radius:0;
  }
  .faq-accordion .accordion-button{
    font-weight:600;
    font-size:.95rem;
    padding:.75rem 1rem;
    border-radius:0;
    box-shadow:none !important;
    background:#fff;
    color:#071938;
    border-bottom:1px solid #2c63a8;
    background-image:none;           /* remove default arrow */
  }
  .faq-accordion .accordion-button .icon{
    width:18px;
    display:inline-flex;
    justify-content:center;
    margin-right:.75rem;
  }
  .faq-accordion .accordion-button .icon::before{
    content:"+";
    font-weight:800;
    font-size:1.1rem;
  }
  .faq-accordion .accordion-button:not(.collapsed){
    background: var(--navy);
    color:#fff;
  }
  .faq-accordion .accordion-button:not(.collapsed) .icon::before{
    content:"–";                     /* minus when open */
  }
  .faq-accordion .accordion-body{
    font-size:.92rem;
    line-height:1.7;
    color:#394855;
  }
  .services.guide-sec .service-icon img {
    width: 100%;
    margin: 0 0 20px;
}
.terms-section{
  padding: 60px 0 80px;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#111;
}

/* main numbered headings like "2. Products..." */
.terms-heading{
  font-size: 1.9rem;
  font-weight: 800;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

/* paragraph text + sub-point label */
.terms-section p{
  font-size: .98rem;
  line-height: 1.7;
  margin-bottom: .65rem;
  color:#222;
}

.terms-section p strong{
  font-weight: 700;
}

/* first heading little closer to top */
.terms-section .terms-heading:first-of-type{
  margin-top: 0;
}

/* small responsive tweak */
@media (max-width: 575.98px){
  .terms-section{
    padding: 40px 1.25rem 60px;
  }
  .terms-heading{
    font-size: 1.5rem;
  }
}
.services.guide-sec .service-card .service-icon {
    display: contents;
}
.privacy-section{
  padding: 60px 0 80px;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#111;
}

.privacy-section .container{
  max-width: 1100px;   /* screenshots जैसा wide */
}

/* main big headings (Introduction, General Provisions, etc.) */
.privacy-heading{
  font-size: 1.9rem;
  font-weight: 800;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

/* mid-level headings 1., 2., 01. Online Identifiers etc. */
.privacy-subheading{
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: .75rem;
}

/* छोटे numbered sub-titles जैसे 2.1 Controller Information */
.privacy-smallheading{
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 1.4rem;
  margin-bottom: .4rem;
}

/* paragraph text */
.privacy-section p{
  font-size: .98rem;
  line-height: 1.7;
  margin-bottom: .65rem;
  color:#222;
}

.privacy-section p strong{
  font-weight: 700;
}

/* list styling */
.privacy-section ul{
  padding-left: 1.25rem;
  margin-bottom: .8rem;
}
.privacy-section ul li{
  font-size: .98rem;
  line-height: 1.7;
  margin-bottom: .25rem;
}

/* first heading closer to top */
.privacy-section .privacy-heading:first-of-type{
  margin-top: 2rem;
}

@media (max-width: 575.98px){
  .privacy-section{
    padding: 40px 1.25rem 60px;
  }
  .privacy-heading{
    font-size: 1.5rem;
  }
  .privacy-subheading{
    font-size: 1.1rem;
  }
}

/* Feature strip overlapping hero */
.features-wrap{
  background: #e30000;
  padding:2.8rem 0 3.6rem;
  margin-top: 40px;
  position:relative;
  z-index:3;
}
.feat-card{
  background: var(--card-bg);
  border-radius:14px;
  padding:1.25rem;
  height:200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  border: 1px solid rgb(255 255 255 / 40%);
}
.feat-card .icon{
  width:64px;
  height:64px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgb(255 255 255);
  margin-bottom:.7rem;
  font-size:1.6rem;
  color: #e40a0a;
}
.feat-card h6{ font-size:1rem; font-weight:700; margin-bottom:.25rem; }
.feat-card p{ font-size:.88rem; color: rgba(255,255,255,0.85); margin:0; }

/* ---------------- Media + Services sections ---------------- */
.media-section { padding: 60px 0 0; }
.media-card{
  background:#fff;
  border-radius:6px;
  box-shadow: 0 6px 18px rgba(10,30,60,0.12);
  border: 1px solid rgba(0,0,0,0.06);
  min-height:210px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.media-card img{ max-width:100%; height:100%; object-fit:cover; display:block; }

.media-title{
  font-size: 48px;
  font-weight:800;
  margin-bottom: 20px;
  color:#072a55;
  line-height: 60px;
}
.media-title .accent{ color: var(--brand-blue); }
.media-sub{color:#3b4757;line-height:1.6;font-size: 16px;}
.media-sub strong{ color:#0b2b4f; font-weight:700; }

.section-divider{ border-top:1px solid rgba(0,0,0,0.08); margin:36px 0; }

/* Services */
.services{
  padding:48px 0 84px;
  background:#fff;
}
.services .section-title{ text-align:center; margin-bottom:28px; }
.services .section-title h2{
  font-size: 48px;
  font-weight:800;
  margin:0;
  color:#071938;
}
.services .section-title h2 .accent{ color: var(--brand-blue); }

.service-card{
  background:#fff; border-radius:12px; border:1px solid #ccc;
  padding:22px; min-height:210px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  justify-content:flex-start; transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(11,46,88,0.12);
}
.service-icon{
  width:72px; height:72px; border-radius:12px; display:grid; place-items:center;
  background: rgba(11,78,163,0.06); color: var(--brand-blue); font-size:28px; margin-bottom:14px;
}
.service-card h5{ font-size:1rem; font-weight:700; margin-bottom:8px; color:#072a55; }
.service-card p{ color:var(--muted); font-size:.92rem; line-height:1.55; margin:0; padding:0 6px; }

/* ---------------- Choose / Icons row (media+text variant) ---------------- */
.section-wrap{ padding:72px 0 40px; }
.left-heading{ margin-bottom:18px; }
.left-heading h2{
  font-size: 42px;
  font-weight:800;
  margin:0 0 10px;
  line-height: 60px;
}
.left-heading h2 .accent{ color: var(--brand-blue); }

.sub-title{ font-weight:700; font-size:1.05rem; margin-bottom:14px; color:#0b2a4a; }
.desc{ color:#394855; font-size:.96rem; line-height:1.7; margin-bottom:18px; }
.small-legal{ color:#5f6b7a; font-size:.82rem; line-height:1.4; margin-bottom:18px; }

.btn-download{
  background: #e30000;
  color:#fff;
  padding:.72rem 1.1rem;
  border-radius:6px;
  font-weight:700;
  border:none;
  box-shadow: 0 8px 22px rgba(17,45,95,0.14);
}

/* Right media box */
.media-box{
  background:#fff; border-radius:10px; border:1px solid rgba(0,0,0,0.08);
  min-height:340px; box-shadow: 0 8px 22px rgba(10,20,40,0.12);
  overflow:hidden; display:flex; align-items:flex-start; justify-content:center; position:relative;
}
.media-box img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-box::before{
  content:""; position:absolute; left:0; right:0; top:0; height:8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(255,255,255,0.06));
}

/* Icons row reused style (service-card override handled above) */
.icons-row{ margin-top:40px; padding-bottom:32px; }


/* ---------------- Elements / Compatibility / Help sections ---------------- */
.payment-section{ display:flex; align-items:center; padding:64px 0; gap:30px; }
.payment-left{
  flex:1;
  min-height: auto;
  border-radius:6px;
}
.payment-left .small-img{
  width: 100%;
  height: auto;
  background:rgba(0,0,0,0.06);
  margin: 0px auto 0;
  border-radius:2px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
.payment-right{ flex:1; padding:6px 32px; }
.payment-right h2{ font-size:2.05rem; font-weight:800; margin-bottom:8px; }
.payment-right h2 .accent{ color:var(--brand-blue); }
.payment-right p{ color:var(--muted); line-height:1.7; margin-bottom:18px; }
.payment-right .btn-primary{ background: var(--brand-blue); border:0; padding:.78rem 1.1rem; border-radius:6px; font-weight:700; box-shadow: 0 10px 26px rgba(17,44,95,0.12); }

.elements-section{ padding:64px 0 36px; text-align:center; }
.elements-title{ font-size:2rem; font-weight:800; margin-bottom:28px; }
.elem-card{
  border:2px solid var(--card-border); border-radius:10px; padding:26px; min-height:200px; text-align:center;
  transition: transform .18s ease, box-shadow .18s ease; background:#fff;
}
.elem-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(10,30,80,0.06); }
.elem-icon{
  width:64px; height:64px; display:grid; place-items:center; margin:0 auto 14px;
  color:var(--brand-blue); font-size:26px; background: rgba(17,92,163,0.04); border-radius:8px; border:1px solid rgba(17,92,163,0.06);
}
.elem-card h5{ font-weight:700; margin-bottom:10px; color:#072a55; }
.elem-card p{ color:var(--muted); font-size:.92rem; line-height:1.6; margin:0; }

.compat-section{ padding:44px 0 24px; text-align:center; }
.compat-title{ font-size:2rem; font-weight:800; margin-bottom:22px; }
.compat-box{
  background:#f3f8ff; border:2px solid rgba(17,92,163,0.18); border-radius:10px; padding:18px; position:relative;
  overflow:visible; min-height:110px; text-align:center;
}
.compat-box::before{
  content:""; position:absolute; left:0; top:0; width:44px; height:44px;
  background:var(--brand-blue); transform: translate(-22px, -22px) rotate(45deg); border-radius:6px;
  box-shadow: 0 6px 18px rgba(8,30,60,0.08);
}
.compat-box h6{ margin:0 0 10px; font-weight:700; color:#072a55; }
.compat-box p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.6; }

.help-section{
  position:relative;
  padding:64px 0 120px;
  color:#fff;
  background: linear-gradient(180deg, #e30000 0%, #e30000 35%, rgb(227 0 0) 100%);
  overflow:hidden;
  width: 100%;
}

.printer-setup-sec {
    margin: 30px 0 0;
    display: flex;
    justify-content: center;
    gap: 90px;
}

.setup-sec .printer-setup-sec .printers-steps h2 {
    font-size: 21px;
}

a.mybutton, button.mybutton {
    background: #c10912;
    color: #ffffff;
    padding: 11px 30px;
    border-radius: 6px;
    font-weight: 500;
    border: none;
    box-shadow: 0 8px 22px rgba(17, 45, 95, 0.14);
    text-decoration: none;
    border: 1px solid #ffffff;
    font-size: 19px;
    display: inline-block;
}

.printers-steps input {
    height: 55px;
}
.hero.inner .left .smalls {
    color: #fff;
}
.help-inner{ max-width:1140px; margin:0 auto; padding:18px; }
.help-title{ font-size:2rem; font-weight:800; margin-bottom:10px; color:#fff; }
.help-sub{ font-weight:700; color:#fff; opacity:0.95; margin-bottom:18px; }
.help-desc{ color: rgba(255,255,255,0.9); line-height:1.7; margin-bottom:18px; }
.help-cta .btn{background: #fff;border:0;padding:.78rem 1.1rem;border-radius:8px;font-weight:700;box-shadow: 0 10px 26px rgba(10,30,70,0.18);}
.help-row{ display:flex; gap:30px; align-items:flex-start; }
.help-left{ flex:1; }
.help-right{width: 50%;max-width: 550px;}
.help-img-box{ background: rgba(255,255,255,0.08); border-radius:8px; padding:10px; min-height:72px; border:1px solid rgba(255,255,255,0.06); }

/* ---------------- Choose + Footer ---------------- */
.choose-section{ padding:72px 0; }
.choose-row{display:flex;align-items:center;gap: 0;}
.choose-title{ font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight:800; margin-bottom:18px; }
.choose-title .accent{ color: var(--brand-blue); }
.choose-desc{ color:#394855; line-height:1.75; font-size:.98rem; max-width:520px; }
.choose-cards{ max-width:700px; margin-left:auto; }
.feature-card{
  border: 2px solid var(--card-border); border-radius:10px; padding:20px; min-height:160px; text-align:center;
  transition: transform .16s ease, box-shadow .16s ease; background:#fff;
}
.feature-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(10,30,80,0.06); }
.feature-icon{
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center; margin:0 auto 12px;
  background: rgba(17,92,163,0.06); color:var(--brand-blue); font-size:26px; border:1px solid rgba(17,92,163,0.08);
}
.feature-card h6{font-weight:800;margin-bottom:10px;color: #e30000;font-size:1rem;}
.feature-card p{ margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }
.cards-grid{gap: 0;}
.hero.inner {
    background: #002f36;
    position: relative;
    padding: 10.5rem 0 5.5rem;
}
/* Footer layout */
.footer-top{
  background: #e30000; /* replace with pattern image if needed */
  background-size: cover;
  background-position: center;
  padding:48px 0 60px;
  color:#fff;
  position:relative;
}
.hero.inner:after {
    display: none;
}
.service-card h6 {
    font-weight: bold;
}
.right-box-inner img {
    border-radius: 250px;
}
.left-sec.setup img {
    width: 40%;
}
.left-sec.setup h1 {
    font-weight: bold;
}
.setup-sec.progress-sec {
    padding: 10px 0 100px;
}
.error-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.error-sec .righterror-sec {
    text-align: left;
}
.action-sec {
    position: absolute;
    right: 0;
    top: 34%;
    z-index: 9;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
}
.welcome-sec p {
    margin: 0;
}
.action-sec a {
    display: block;
    margin: 0 0 15px;
    text-align: right;
}
.welcome-sec h3 {
    position: relative;
    font-size: 1.5em;
    margin: 0 0 15px;
    line-height: 1.2;
    padding: 0.3em 1em 0.3em 2em;
    border: 1px solid #d9d9d9;
    background-color: #d9d9d9;
    -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 1) inset;
    box-shadow: 0 0 5px rgba(255, 255, 255, 1) inset;
}
.welcome-sec {
    margin: 0 0 20px;
}
.welcome-sec h3:before {
    content: '';
    background: url(../images/ribbon.png) no-repeat;
    width: 40px;
    height: 40px;
    background-size: contain;
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: 9;
}
.error-sec .righterror-sec h2 {
    color: red;
}
.setup-sec {
    padding: 150px 0 100px;
    text-align: center;
}
.printer-form-sec {
    background: #e6e6e6;
    padding: 30px;
    border-radius: 10px;
    margin: 20px 0 0;
}
.printer-name p {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 24px;
    width: 100%;
    text-align: center;
	margin:0;
}

.printer-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
	margin: 0 0 50px;
}
.form-sec-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 20px;
}
.form-sec-main .form-sec {
    width: 100%;
}
.form-sec-main .form-sec input {
    height: 48px;
}
.country-sec {
    max-width: 300px;
    margin: 10px 0 0;
}
.content {
    text-align: center;
}
.content a {
    font-size: 18px;
    margin: 0 0 10px;
    display: block;
    font-weight: 700;
    color: #c00a13;
}
.testimonial-block.product img {
    object-fit: cover;
    height: 400px;
    width: 62% !important;
    border-radius: 10px;
}
.slider-main {
    position: relative;
}
.setup-sec .printer-setup-sec .printers-steps {
    justify-content: center;
}
.footer-top::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,59,115,0.15), rgba(15,59,115,0.18)); pointer-events:none; }
.footer-inner{ position:relative; z-index:2; }
.footer-grid{ display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start; }
.footer-col{ flex:1; min-width:220px; padding:12px 18px; }
.footer-head{ font-weight:700; margin-bottom:12px; color:#fff; font-size:1.05rem; }
.footer-text{ color: rgba(255,255,255,0.9); line-height:1.6; font-size:.95rem; }
.footer-links a{ display:block; color: rgba(255,255,255,0.95); margin-bottom:10px; text-decoration:none; }
.footer-contact p{ color: rgba(255,255,255,0.95); margin-bottom:8px; }
.footer-bottom{ background: var(--navy); color:#e6f0ff; padding:14px 0; text-align:center; font-size:.95rem; }
.help-cta .btn:hover {color: #006064;}
/* Floating buttons */
.support-fab{
  position: fixed; left:18px; bottom:18px; z-index:999; width:44px; height:44px; border-radius:50%;
  background:#0b4ea3; color:#fff; display:grid; place-items:center; box-shadow:0 8px 26px rgba(3,20,60,0.25);
  border:3px solid rgba(255,255,255,0.06);
}
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:999; width:40px; height:40px; border-radius:6px;
  background:#123f93; color:#fff; display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,0.15);
  border:2px solid rgba(255,255,255,0.06);
}

/* ---------------- Responsive (mobile last) ---------------- */
/* Tablets & small desktops */
@media (max-width: 991.98px){
  .hero{ padding:4rem 0 4.5rem; background-position:center 30%; }
  .hero h1{ font-size: clamp(1.8rem,5vw,3rem); }
  .feat-card{ height:auto; padding:1rem; }
  .media-section{ padding:36px 0; }
  .media-card{ min-height:180px; }
  .service-card{ min-height:170px; padding:18px; }
  .service-icon{ width:60px; height:60px; font-size:24px; }
  .section-wrap{ padding:44px 0; }
  .media-box{ min-height:240px; }
  .service-card{ min-height:150px; padding:14px; }
  .plan-card{ min-height:420px; }
  .price-pill::before{ left:-26px; width:56px; height:56px; }
  .payment-section{ flex-direction:column; padding:44px 0; }
  .help-row{ flex-direction:column; }
  .help-right{ width:100%; max-width:100%; }
  .elements-grid .row > [class*="col-"]{ margin-bottom:18px; }
  .choose-row{ flex-direction:column; }
  .choose-cards{ margin:22px 0 0; }
  .footer-grid{ flex-direction:column; }
  .footer-col{ padding:8px 12px; }
}

/* Mobile phones */
@media (max-width: 575.98px){
  .topbar .container{ padding-left:.75rem; padding-right:.75rem; }
  .product-icons{ display:none; }
  .hero{ padding:3.2rem 0 3.6rem; background-position:center 20%; }
  .hero h1{ font-size:1.6rem; }
  .feat-card .icon{ width:56px; height:56px; font-size:1.3rem; }
  .features-wrap{ padding:1.8rem 0 2.4rem; margin-top:-18px; }

  .media-section{ padding:24px 0; }
  .media-card{ min-height:140px; border-radius:8px; }
  .media-title{ font-size:1.15rem; }
  .services{ padding:28px 0 48px; }
  .service-card{ min-height:150px; padding:14px; }
  .service-icon{ width:52px; height:52px; font-size:20px; margin-bottom:10px; }

  .section-wrap{ padding:28px 0; }
  .left-heading h2{ font-size:1.4rem; }
  .media-box{ min-height:180px; border-radius:8px; }
  .service-card{ min-height:140px; padding:12px; }
  .service-icon{ width:50px; height:50px; font-size:20px; }

  .plans-section{ padding:32px 12px 56px; }
  .price-pill{ padding:14px 22px; }
  .price-amount{ font-size:1.6rem; }
  .price-pill::before{ left:-22px; width:48px; height:48px; }

  .payment-section{ padding:28px 12px; }
  .elements-section{ padding:36px 12px; }
  .compat-section{ padding:28px 12px; }
  .help-section{ padding:48px 14px 110px; }
  .elem-card{ padding:18px; min-height:170px; }

  .choose-section{ padding:36px 12px; }
  .feature-icon{ width:56px; height:56px; font-size:22px; }
  .feature-card{ min-height:150px; padding:16px; }
  .footer-top{ padding:30px 0 36px; background-position:center; }
}