html, body {overscroll-behavior-y: auto;}
body {font-family: 'Lato', sans-serif; background:#f5f5f5; touch-action: manipulation;}
.topbar {background:#d60000; color:#fff; font-size:14px; padding:8px 0; text-align:center; position:sticky; top:0; z-index:1060;}
.navbar {background:#ffffff; border-bottom:1px solid #e5e5e5; padding:18px 0; position:sticky; top:36px; z-index:1050; transition:box-shadow 0.2s ease, border-bottom 0.2s ease;}

/* Custom Mobile Toggler */
.navbar-toggler {
  width:36px;
  height:36px;
  border:1px solid #013D29;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  padding:0;
}

.mobile-whatsapp {
  width:36px;
  height:36px;
  background:#013D29;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.mobile-whatsapp svg {
  width:18px;
  height:18px;
}

.navbar-toggler:focus {
  box-shadow:none;
}

.navbar-toggler svg {
  width:22px;
  height:22px;
  stroke:#013D29;
  stroke-width:2;
  display:block;
}

@media (max-width: 991px) {

  /* ===== UNIFIED MOBILE SECTION HEADINGS ===== */
  .section-title h3,
  section h3 {
    text-align:center !important;
    font-size:22px !important;
    line-height:1.35 !important;
  }

  .section-title p,
  section .section-title p {
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }


  /* Hassle-Free Installation Image Mobile Fix */
  .installation-img {
    width:100%;
    max-width:100%;
    padding:0 12px;
    margin:0 auto 20px;
    display:block;
  }


  /* ===== Mobile Friendly Process Heading ===== */
  .section-title .process-heading {
    font-size:19px;
    line-height:1.3;
    padding:0 6px;
    margin-bottom:6px;
  }

  .section-title .green-part::after {
    height:2px;
  }


  /* ===== MOBILE HERO WORD UNDERLINE FIX ===== */
  .hero .highlight-green {
    background-image: linear-gradient(#F4B41A, #F4B41A);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1.5px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .hero .highlight-green::after {
    display: none !important;
  }


  /* Hero underline thinner on mobile */
  .hero .highlight-green::after {
    height:1.5px !important;
  }

  /* Hero paragraph 5% smaller on mobile */
  .hero p {
    font-size:12.5px;
  }

  /* Reduce hero underline thickness on mobile */
  .hero .highlight-green::after {
    height:2px;
    bottom:-2px;
  }
  .navbar-toggler {
    padding:5px;
  }
  .navbar-toggler svg {
    width:20px;
    height:20px;
  }
}

.navbar-toggler:focus {
  box-shadow:none;
}

.navbar-toggler svg {
  width:22px;
  height:22px;
  stroke:#013D29;
  stroke-width:2;
  display:block;
}

@media (max-width: 991px) {
  .navbar-toggler {
    padding:5px;
  }
  .navbar-toggler svg {
    width:20px;
    height:20px;
  }
}
.navbar .container {max-width:1240px;}
.navbar-nav {align-items:center;}
.navbar .nav-item {display:flex; align-items:center;}
.navbar .nav-link {color:#222 !important; font-weight:700; font-size:15px; letter-spacing:0.4px;}
.navbar .nav-link:hover {color:#013D29 !important;}
.navbar .btn {color:#ffffff !important; font-weight:700; font-size:14px; letter-spacing:0.4px;}
.hero {background:#013D29; color:#fff; padding:80px 0;}
.hero .container {
  max-width:1240px;
}
.hero .col-md-6:first-child {
  max-width:650px;
}
.hero h2 {
  font-size:32px;
  font-weight:600;
  line-height:1.35;
  margin-bottom:14px;
}

.hero .highlight-green {
  color:#6FD943;
  position:relative;
}

.hero .highlight-green::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:4px;
  background:#F4B41A;
  border-radius:2px;
}

.hero .text-white-part {
  color:#ffffff;
}
.hero p {
  font-size:14px;
  font-weight:400;
  color:#cfcfcf;
  margin-bottom:18px;
  line-height:1.5;
}
.hero .btn-green {
  padding:10px 22px;
  font-size:14px;
  font-weight:400;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.hero .hero-img {
  width:100%;
  max-width:460px;
  border-radius:0;
}
.blank-img {background:#e0e0e0; height:200px; border-radius:10px;}
.section {padding:70px 0;}

/* Grey Section */
.section-grey-layer {
  background-color:#f5f5f5;
}
.section .container {max-width:1240px;}
.section-title {text-align:center; margin-bottom:25px; max-width:700px; margin-left:auto; margin-right:auto;}
.section-title {text-align:center; margin-bottom:40px;}

.section-title .process-heading {
  font-size:30px;
  font-weight:600;
  line-height:1.35;
}

.section-title .dark-part {
  color:#013D29;
}

.section-title .green-part {
  color:#6FD943;
  position:relative;
}

.section-title .green-part::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:3px;
  background:#F4B41A;
  border-radius:2px;
}
.card-custom {border:1px solid rgba(1,61,41,0.4); border-radius:10px; padding:16px; box-shadow:0 3px 8px rgba(0,0,0,0.03); position:relative; overflow:hidden; text-align:left;}
.card-custom::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:4px;
  background:#F4B41A;
}
.card-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#013D29;
  border:1px dotted #6FD943;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.card-icon svg{display:none;}
.card-custom::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:3px;
  background:#F4B41A;
}
.card-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#013D29;
  border:1px dotted #6FD943;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.card-icon svg{
  width:22px;
  height:22px;
  fill:#ffffff;
}
.process-step {text-align:center; padding:0 20px; position:relative; z-index:1;}

/* Straight Dotted Line From 1 to 5 */
.section.bg-white .row.justify-content-between {
  position:relative;
}

.section.bg-white .row.justify-content-between::before {
  content:"";
  position:absolute;
  top:35px;
  left:0;
  right:0;
  border-top:2px dotted rgba(111,217,67,0.65);
  z-index:0;
}
.step-title {
  font-weight:700;
  font-size:18px;
  margin-bottom:8px;
}
.step-desc {
  font-size:14px;
  color:#6c757d;
  max-width:220px;
  margin:0 auto;
}



.process-circle {
  width:70px;
  height:70px;
  border-radius:50%;
  background:#013D29;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}
.process-circle svg {
  width:30px;
  height:30px;
}
.process-circle svg {
  width:22px;
  height:22px;
  fill:#ffffff;
}
.cta-dark {background:#0b2e24; color:#fff; border-radius:15px; padding:50px;}
.footer {background:#0c4b2e; color:#fff; padding:28px 0;}
.footer .container {max-width:1240px;}
.footer .row {margin-left:0; margin-right:0; align-items:flex-start;}

/* Reset footer to clean Bootstrap grid */
.footer .row {
  margin-left:0;
  margin-right:0;
}






.footer h6 {position:relative; display:inline-block; padding-bottom:8px; margin-bottom:14px;}
.footer h6::after {content:""; position:absolute; left:0; bottom:0; width:75%; height:3px; background:#F4B41A; border-radius:2px;}
.footer p {margin-bottom:8px; font-size:13px; line-height:1.55;}
.footer ul {margin-bottom:0;}
.footer .certificates {display:flex; gap:10px; margin-top:10px; align-items:center;}
.footer .certificates img {display:block;}

/* Review Section Styling */
.review-card {
  background:#ffffff;
  padding:22px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  position:relative;
  height:100%;
}
.review-quote {
  font-size:40px;
  color:#6FD943;
  line-height:1;
  margin-bottom:10px;
}
.review-text {
  font-size:14px;
  color:#555;
  line-height:1.6;
  margin-bottom:18px;
}
.review-user {
  display:flex;
  align-items:center;
  gap:10px;
}
.review-avatar {
  width:40px;
  height:40px;
  border-radius:50%;
  background:#013D29;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

/* FAQ Custom Styling */
.faq-accordion .accordion-item {border:1px solid #e5e5e5; border-radius:10px; margin-bottom:12px; overflow:hidden;}
.faq-accordion .accordion-button {background:#ffffff; font-weight:600; color:#013D29; display:flex; justify-content:space-between;}
.faq-accordion .accordion-button::after {background-image:none; content:'+'; font-size:20px; font-weight:700; color:#6FD943; transform:none;}
.faq-accordion .accordion-button:not(.collapsed)::after {content:'–'; color:#013D29;}
.faq-accordion .accordion-button:focus {box-shadow:none;}
.faq-accordion .accordion-body {font-size:14px; color:#555; background:#f9f9f9;}
input, textarea {border-radius:8px !important;}
.btn-green {background:#38b000; color:#fff; border:none;}
.btn-green:hover {background:#2d8f00;}

/* Modern Chevron Arrow */
.navbar .dropdown-arrow {
  display:inline-block;
  width:8px;
  height:8px;
  border-right:2px solid #6FDA44;
  border-bottom:2px solid #6FDA44;
  transform: rotate(45deg);
  margin-left:6px;
  vertical-align:middle;
  position:relative;
  top:-1px;
}

/* Gap Between Menu Items */
.navbar .nav-item {
  margin:0 14px;
  display:flex;
  align-items:center;
}

/* Proper Dropdown Position */
.navbar .dropdown-menu {
  top:100%;
  left:0;
  margin-top:8px; /* reduce gap so hover doesn't break */
  border-radius:10px;
  border:none;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  padding:10px 0;
  display:none;
}

/* Keep dropdown stable on hover */
.navbar .dropdown:hover > .dropdown-menu,
.navbar .dropdown-menu:hover {
  display:block;
}

/* Invisible hover bridge to prevent menu closing */
.navbar .dropdown::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px; /* hover buffer */
}

/* ================= MOBILE OPTIMIZATION (NO DESKTOP CHANGE) ================= */
@media (max-width: 991px) {

  /* Compact Navbar Height (Mobile Only) */
  .navbar { padding:10px 0; }
  .navbar-brand img { height:26px !important; }
  .navbar-toggler { padding:4px 6px; }
  .navbar-toggler svg { width:18px; height:18px; }


  /* Smaller topbar text on mobile */
  .topbar { font-size:11px; padding:6px 10px; line-height:1.3; }
  .topbar strong { display:flex; flex-direction:column; align-items:center; max-width:95%; margin:0 auto; text-align:center; }
  .topbar-line1 { font-weight:700; }
  .topbar-line2 { font-weight:500; }
  .topbar-line1 { font-weight:700; }
  .topbar-line2 { font-weight:500; }

  .hero { padding:50px 0; text-align:center; }
  .hero h2 { font-size:22px; line-height:1.35; margin-bottom:8px; padding:0 8px; }
  .hero p { font-size:13px; line-height:1.45; margin-bottom:14px; }
  .hero .hero-img { max-width:320px; margin:20px auto 0; display:block; }

  /* Center trust section properly on mobile */
  .hero div[style*="margin-top:18px"] {
    justify-content:center !important;
    text-align:center;
  }

  .hero div[style*="margin-top:18px"] > div:last-child {
    text-align:center;
  }

  /* Mobile Final Override - Process Heading Size */
  .section-title .process-heading {
    font-size:21px !important;
    line-height:1.32 !important;
  }

  /* Reduce top spacing for process section on mobile */
  .section.bg-white {
    padding-top:50px !important;
  }

  .section-title {
    margin-bottom:18px !important;
  }
  }

  /* MOBILE underline for 'Process Works' (break-safe) */
  .section-title .green-part {
    background-image: linear-gradient(#F4B41A, #F4B41A);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .section-title .green-part::after {
    display:none !important;
  }

  /* Process Section */
@media (max-width: 991px) {
  .section.bg-white .row.justify-content-between::before { display:none; }
}
  .process-step { padding:0 10px; margin-bottom:30px; }

  /* Cards spacing */
  .card-custom { padding:14px; }

  /* Center Technologies Heading on Mobile */
  section[style*="#f0f0f0"] .col-md-6:first-child {
    align-items:center !important;
    text-align:center !important;
  }

  section[style*="#f0f0f0"] .col-md-6:first-child p {
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Technologies wrap properly */
  .section .d-flex.justify-content-md-start {
    flex-wrap:wrap;
    justify-content:center !important;
    gap:18px !important;
  }

  /* Equal size tech items on mobile */
  .section .d-flex.justify-content-md-start > .text-center {
    width:70px;
  }

  .section .d-flex.justify-content-md-start > .text-center > div {
    width:55px !important;
    height:55px !important;
    margin:0 auto;
  }

  .section .d-flex.justify-content-md-start img {
    max-height:22px !important;
  }

  /* FAQ spacing fix (mobile) */
  .faq-accordion .accordion-item {
    margin-bottom:8px !important;
  }

  .faq-accordion .accordion-button {
    padding:12px 14px;
  }

  /* Review cards spacing */
  .review-card { margin-bottom:15px; }

  /* Contact section stacking */
  section[style*="#FFFBF0"] h3 { font-size:22px; }
  section[style*="#FFFBF0"] p { margin-bottom:14px; }
  section[style*="#FFFBF0"] img { margin:15px auto; display:block; }

  /* Center ONLY Submit Button on Mobile */
  section[style*="#FFFBF0"] form .col-12:last-child {
    text-align:center;
  }

  section[style*="#FFFBF0"] form .col-12:last-child button {
    margin:8px auto 0;
    display:inline-block;
  }

  /* ===== MOBILE FOOTER STRUCTURE ===== */
@media (max-width: 991px) {

  /* Keep logo section full width */
  .footer .col-lg-4 {
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    text-align:center !important;
    margin-bottom:25px;
  }

  /* Center ISO / SSL / Secure badges on mobile */
  .footer .certificates {
    justify-content:center !important;
  }

  /* Create 2-column layout after logo */
  .footer .row.align-items-start {
    display:flex;
    flex-wrap:wrap;
  }

  /* Legal + Support (row 1) */
  .footer .col-lg-2:nth-of-type(2),
  .footer .col-lg-2:nth-of-type(3) {
    width:50% !important;
    max-width:50% !important;
    flex:0 0 50% !important;
    text-align:left !important;
    margin-bottom:25px;
  }

  /* Products + Trusted (row 2) */
  .footer .col-lg-2:nth-of-type(4),
  .footer .col-lg-2:nth-of-type(5) {
    width:50% !important;
    max-width:50% !important;
    flex:0 0 50% !important;
    text-align:left !important;
    margin-bottom:25px;
  }

  /* Trusted logos align left */
  .footer .col-lg-2.text-lg-end {
    text-align:left !important;
  }

  .footer .col-lg-2.text-lg-end > div {
    justify-content:flex-start !important;
  }

  /* Keep copyright centered */
  .footer hr + .text-center {
    text-align:center !important;
  }

  /* Underline reset to left */
  .footer h6::after {
    left:0;
    transform:none;
  }
}

}

/* ===== Modern Clean Sidebar (Stable Fix) ===== */

#mobileMenu {
  background:#ffffff;
}

#mobileMenu .offcanvas-header {
  border:none;
  padding:18px 22px;
}

#mobileMenu .offcanvas-header > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

#mobileMenu .offcanvas-header img {
  height:30px;
}

#mobileMenu .offcanvas-header button {
  background:none;
  border:none;
  padding:6px;
  margin-left:20px;
}

#mobileMenu .offcanvas-body {
  padding:10px 18px 20px 18px;
}

.mobile-menu-list {
  list-style:none;
  padding:0;
  margin:0;
}

.mobile-menu-list li {
  border-bottom:1px solid #e6e6e6;
}

.mobile-menu-list > li > a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  font-weight:600;
  font-size:15px;
  color:#013D29;
  text-decoration:none;
  width:100%;
}

.mobile-menu-list > li > a:hover {
  color:#013D29;
}

.mobile-menu-list .submenu {
  list-style:none;
  padding-left:14px;
  margin:0;
}

.mobile-menu-list .submenu li {
  border-bottom:1px solid #f0f0f0;
}

.mobile-menu-list .submenu li a {
  display:block;
  padding:9px 0;
  font-size:13px;
  color:#555;
  text-decoration:none;
}

.mobile-menu-list .submenu li a:hover {
  color:#013D29;
}

.mobile-plus {
  font-size:16px;
  font-weight:700;
  color:#013D29;
}

/* ============================================================================ */

/* Dropdown Styling */
.navbar .dropdown-menu {
  top:100%;
  left:0;
  margin-top:12px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  padding:8px 0;
}

/* Bold Sub Menu Items */
.navbar .dropdown-item {
  font-weight:700;
  font-size:14px;
  padding:10px 18px;
}

/* Dotted Divider Between Items */
.navbar .dropdown-menu li:not(:last-child) .dropdown-item {
  border-bottom:1px dotted #dcdcdc;
}

.navbar .dropdown:hover .dropdown-menu {
  display:block;
}

/* ===== FINAL MOBILE ALIGNMENT FIX (TOP → HASSLE SECTION) ===== */
@media (max-width: 991px) {

  /* Consistent container padding */
  .container { padding-left:16px !important; padding-right:16px !important; }

  /* Hero full center */
  .hero .row { text-align:center; }
  .hero .col-md-6 { text-align:center !important; }

  /* Process section clean center */
  .section.bg-white .container { text-align:center; }
  .process-slider-wrapper { margin-top:10px; }

  /* Hassle-Free section stacking properly */
  .section-grey-layer .row { text-align:center; }
  .section-grey-layer .col-md-6 { 
    width:100%;
    max-width:100%;
    flex:0 0 100%;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .section-grey-layer h3,
  .section-grey-layer p {
    margin-left:auto;
    margin-right:auto;
  }

  .section-grey-layer button {
    display:inline-flex;
    margin-left:auto;
    margin-right:auto;
  }
}

.binary-bar{
  background:#013D29;
  color:#ffffff;
  padding:30px 0;
  text-align:center;
  position:relative;
}

.binary-bar h1{
  margin:0;
  font-size:32px;
  font-weight:600;
}

/* ORANGE LINE */
.binary-bar::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:4px;
  background:#F4B41A;
}

/* Mobile header size */
@media (max-width:768px){

  .binary-bar{
    padding:22px 0;
  }

  .binary-bar h1{
    font-size:22px;
    line-height:1.3;
  }

}

.binary-content{
  padding:70px 0;
}

.binary-text h3{
  margin-bottom:14px;
  font-weight:600;
}

.binary-list{
  margin-top:12px;
}

.binary-img-rectangle{
  width:100%;
  height:320px;
  background:#e9e9e9;
  border-radius:12px;
  overflow:hidden;
}
.binary-img-rectangle img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.process-heading{
  font-size:30px;
  font-weight:600;
  position:relative;
  display:inline-block;
}

.process-heading .dark-part{
  color:#013D29;
}

.process-heading .green-part{
  color:#6FD943;
  position:relative;
}

.process-heading .green-part::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:3px;
  background:#F4B41A;
  border-radius:2px;
}

.image-green-bg{
  position:relative;
  display:inline-block;
  padding:20px;
}

.image-green-bg::before{
  content:"";
  position:absolute;
  top:20px;
  left:20px;
  width:100%;
  height:100%;
  background:#E9FBEF; /* light parrot green */
  border-radius:16px;
  z-index:-1;
}

/* Always keep content left */
.binary-content-text{
  text-align:left;
}

/* Desktop title left */
.binary-title{
  text-align:left;
}

/* Mobile behaviour */
@media (max-width:768px){

  /* ONLY title center */
  .binary-title{
    text-align:center;
  }

  /* paragraphs + list stay left */
  .binary-content-text p,
  .binary-content-text ul{
    text-align:left;
  }
}

.offer-card{
  background:#ffffff;
  padding:28px;
  border-radius:14px;
  height:100%;
  border:1px solid #eaeaea;
  transition:0.3s ease;
}

.offer-card h4{
  color:#013D29;
  font-weight:600;
  margin-bottom:14px;
}

.offer-card ul{
  margin-top:12px;
  padding-left:18px;
}

.offer-card li{
  margin-bottom:6px;
}

.offer-note{
  margin-top:14px;
  font-size:14px;
  color:#666;
}

/* Premium subtle highlight (custom option) */
.offer-underline{
  color:#F4B41A; /* orange word */

  text-decoration-line: underline;
  text-decoration-color:#6FD943; /* parrot green */
  text-decoration-thickness:2px;

  text-underline-offset:4px; /* 👈 VERY SMALL GAP */
}

.whatsapp-btn{
  background:#013D2A;
  color:#ffffff;
  border:none;
  padding:10px 18px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  font-weight:500;
  transition:0.3s;
}

.whatsapp-btn:hover{
  background:#02563c;
  color:#ffffff;
}

/* Mobile safety fix */
@media (max-width:768px){
  .offer-title{
    line-height:1.4;
  }

  .offer-underline{
    padding-bottom:8px;
  }
}

/* equal column behavior */
.row.g-4 > div{
  display:flex;
}

/* card layout */
.offer-card{
  background:#ffffff;
  padding:30px;
  border-radius:14px;
  width:100%;

  display:flex;
  flex-direction:column;
}

/* main content grows equally */
.offer-card p,
.offer-card ul{
  flex-grow:0;
}

/* push button to bottom cleanly */
.offer-card .whatsapp-btn{
  margin-top:auto;
}

/* borders */
.row.g-4 > div:first-child .offer-card{
  border:1px solid #F4B41A;
}

.row.g-4 > div:last-child .offer-card{
  border:1px solid #6FD943;
}

/* equal paragraph → list spacing */
.offer-card p{
  margin-bottom:12px;   /* control paragraph spacing */
}

.offer-card ul{
  margin-top:0;         /* remove browser default gap */
  padding-left:18px;
}

/* equal bullet spacing */
.offer-card ul li{
  margin-bottom:6px;
}

@media (max-width:768px){

  .offer-title{
    text-align:center;
  }

}





/* SOFTWARE IMAGE STYLE */
/* balance image + text layout */
.software-image{
  display:block;
  max-width:520px;        /* controls visual weight */
  margin:auto;
  padding:14px;
  background:#ffffff;
  border-radius:14px;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.06),
    0 0 0 2px rgba(111,217,67,0.25);
}

.software-image img{
  width:100%;
  height:auto;
  border-radius:10px;
  display:block;
}

/* align text better with image */
.section .row.align-items-center{
  align-items:center !important;
}

/* improve text readability balance */
.section h4{
  max-width:520px;
}

.section p,
.section ul{
  max-width:520px;
}

/* ---------- MOBILE IMAGE ASSOCIATION FIX ---------- */
@media (max-width:768px){

  /* make image smaller & centered */
  .software-image{
    max-width:90%;
    margin:0 auto 18px auto; /* closer to content below */
  }

  /* add separation between blocks */
  .section .row{
    margin-bottom:40px;
  }

  /* tighten heading spacing */
  .section h4{
    margin-top:10px;
  }

}

.binary-subtitle{
  margin-top:4px;      /* reduced gap from heading */
  font-size:10px;
  color:#ffffff;
  opacity:0.65;        /* lighter visibility */
  letter-spacing:0.3px;
    line-height:1;   /* 👈 reduces space between lines */

}

.clients-wrapper{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:25px;
  align-items:center;
}

.client-item{
  background:#ffffff;
  padding:18px;
  border-radius:10px;
  text-align:center;
  transition:0.3s;

  border:1.5px solid #6FD943; /* ✅ parrot green border */
}

.client-item img{
  max-height:55px;
  width:auto;
  opacity:0.85;
  transition:0.3s;
}



@media (max-width:992px){
  .clients-wrapper{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:576px){
  .clients-wrapper{
    grid-template-columns:repeat(2,1fr);
    gap:15px;
  }

  .client-item img{
    max-height:40px;
  }
}

.client-privacy-note{
  max-width:720px;
  margin:40px auto 0;
  padding:14px 20px;

  text-align:center;
  font-size:15px;
  line-height:1.6;
  font-weight:500;

  color:#d12b2b;                 /* attention red text */
  background:#ffffff;

  border:1.5px dotted #6FD943;   /* parrot green dotted border */
  border-radius:8px;
}



/* ===== DEMO GRID ===== */

.demo-wrapper{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1100px;   /* 👈 prevents full stretch */
  margin:auto;        /* center grid */
}

/* CARD */
.demo-item{
  background:#ffffff;
  padding:14px;
  border-radius:10px;
  text-align:center;
  border:1px solid #F4B41A;
  transition:.3s;
}

.demo-item:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(0,0,0,0.08);
}

/* IMAGE */
.demo-img{
  width:100%;
  height:auto;          /* ✅ keeps original ratio */
  max-height:220px;     /* optional safety limit */
  object-fit:contain;   /* ✅ show FULL image */
  background:#f8f8f8;   /* clean empty space */
  border-radius:8px;
  margin-bottom:12px;
  padding:8px;          /* breathing space */
}

/* TITLE */
.demo-item h4{
  font-size:15px;
  font-weight:600;
  color:#013D29;
  margin-bottom:4px;
}

/* STARS */
.stars{
  color:#F4B41A;
  font-size:14px;
  letter-spacing:1px;
  margin-bottom:4px;
}

/* PRICE */
.price{
  font-size:13px;
  margin-bottom:10px;
}

.blur{
  filter:blur(4px);
}

/* BUTTON AREA */
.demo-buttons{
  display:flex;
  gap:8px;
}

/* BUTTONS */
.btn-admin,
.btn-user{
  flex:1;
  padding:8px 6px;
  font-size:12px;
  font-weight:600;
  border-radius:6px;
  text-decoration:none;
  color:#fff;
}

.btn-admin{
  background:linear-gradient(90deg,#F4B41A,#ff8c00);
}

.btn-user{
  background:linear-gradient(90deg,#6FD943,#2EB738);
}

/* ===== TABLET ===== */
@media(max-width:992px){
  .demo-wrapper{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ===== MOBILE (THIS IS WHAT YOU WANTED) ===== */
/* ===== DESKTOP ===== */
.demo-wrapper{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1100px;
  margin:auto;
}

/* ===== TABLET ===== */
@media(max-width:992px){
  .demo-wrapper{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ===== MOBILE (ONE CARD PER ROW) ===== */
@media(max-width:576px){

  .demo-wrapper{
    grid-template-columns:1fr;   /* ✅ ONLY ONE ITEM */
    gap:16px;
  }

  .demo-item{
    padding:14px;
  }

  .demo-img{
    height:170px;
  }

  .demo-buttons{
    flex-direction:column;
    gap:8px;
  }

  .btn-admin,
  .btn-user{
    width:100%;
    font-size:13px;
  }
}

/* ===== MOBILE FIX ===== */
@media(max-width:576px){

  .demo-wrapper{
    grid-template-columns:1fr;
    gap:16px;
  }

  .demo-buttons{
    flex-direction:row;   /* ✅ SIDE BY SIDE */
    gap:8px;
  }

  .btn-admin,
  .btn-user{
    flex:1;
    width:auto;
    font-size:12px;
    padding:9px 6px;
  }
}

/* ================= DEMO POPUP ================= */

.demo-modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background:rgba(0,0,0,0.65);

  display:none;              /* hidden by default */
  align-items:center;
  justify-content:center;

  z-index:99999;             /* above header */
  padding:20px;
}

/* POPUP BOX */
.demo-modal-box{
  background:#ffffff;
  width:100%;
  max-width:420px;
  border-radius:12px;
  padding:28px;
  position:relative;

  animation:popupFade .25s ease;
}

/* TITLE */
.demo-modal-box h4{
  text-align:center;
  margin-bottom:18px;
  color:#013D29;
  font-weight:600;
}

/* INPUTS */
.demo-modal input{
  width:100%;
  padding:11px 12px;
  margin-bottom:12px;
  border:1px solid #e3e3e3;
  border-radius:6px;
  font-size:14px;
}

/* SELECTED DEMO TEXT */
.selected-demo{
  font-size:13px;
  background:#f6fff7;
  border:1px dashed #6FD943;
  padding:8px;
  border-radius:6px;
  margin-bottom:14px;
  text-align:center;
}

/* BUTTON */
.demo-modal button{
  width:100%;
  background:#013D2A;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

.demo-modal button:hover{
  background:#02563c;
}

/* ANIMATION */
@keyframes popupFade{
  from{
    transform:translateY(20px);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

/* MOBILE */
@media(max-width:576px){
  .demo-modal-box{
    padding:22px;
  }
}

.demo-select{
  width:100%;
  padding:11px 12px;
  margin-bottom:12px;
  border:1px solid #e3e3e3;
  border-radius:6px;
  font-size:14px;
  background:#fff;
}

/* ===== SUCCESS STATE CLEAN ===== */

.demo-success{
  display:none;
  text-align:center;
  padding:10px 0 5px; /* reduced height */
}

/* remove circle completely */
.success-icon{
  margin-bottom:8px;
}

.success-icon img{
  width:42px;     /* clean size */
  height:auto;
}

/* heading */
.demo-success h4{
  color:#013D29;
  font-weight:600;
  font-size:18px;
  margin-bottom:6px;
}

/* text */
.success-text{
  color:#555;
  font-size:14px;
  margin-bottom:4px;
}

/* countdown */
.success-close{
  font-size:12px;
  color:#888;
}

.demo-wrapper{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* PC bigger cards */
  gap:28px;
}

/* Tablet */
@media (max-width:992px){
  .demo-wrapper{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Mobile */
@media (max-width:576px){
  .demo-wrapper{
    grid-template-columns:1fr;
  }
}

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

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

/* GRID LAYOUT */
.faq-wrapper{
  display:grid;
  grid-template-columns:repeat(2,1fr); /* PC: 2 columns */
  gap:18px 40px;
  max-width:1000px;
  margin:auto;
}

/* MOBILE VIEW */
@media (max-width:768px){
  .faq-wrapper{
    grid-template-columns:1fr;
    gap:14px;
  }
}


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

.faq-item{
  border-bottom:1px solid #eeeeee;
  padding-bottom:8px;
  transition:0.3s ease;
}

/* subtle hover */
.faq-item:hover{
  border-color:#6FD943;
}


/* =====================================================
   QUESTION BUTTON
===================================================== */

.faq-question{
  width:100%;
  background:none;
  border:none;
  outline:none;

  padding:14px 0;
  font-size:16px;
  font-weight:600;
  color:#013D29;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:space-between; /* TEXT LEFT | ICON RIGHT */

  text-align:left;
}


/* ICON (+) RIGHT SIDE */

.faq-icon{
  font-size:22px;
  color:#6FD943;
  margin-left:15px;
  flex-shrink:0;
  transition:transform .3s ease;
}


/* =====================================================
   ANSWER AREA
===================================================== */

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

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


/* =====================================================
   ACTIVE STATE (OPEN FAQ)
===================================================== */

.faq-item.active .faq-answer{
  max-height:260px;
}

.faq-item.active .faq-icon{
  transform:rotate(45deg); /* + becomes × */
}


/* =====================================================
   SMALL MOBILE POLISH
===================================================== */

@media (max-width:576px){

  .faq-question{
    font-size:15px;
    padding:12px 0;
  }

  .faq-icon{
    font-size:20px;
  }

  .faq-answer p{
    font-size:13.5px;
  }
}

/* ===== FORCE LEFT ALIGN (MOBILE FIX) ===== */

.faq-answer,
.faq-answer p{
  text-align:left !important;
}

/* extra safety for mobile */
@media (max-width:768px){

  .faq-item{
    text-align:left;
  }

  .faq-question{
    text-align:left;
  }

  .faq-answer{
    padding-right:10px;
  }

}

.faq-answer p{
  max-width:520px;
}

/* ================= BLOG SECTION ================= */

.blog-wrapper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* Tablet */
@media (max-width:992px){
  .blog-wrapper{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Mobile */
@media (max-width:576px){
  .blog-wrapper{
    grid-template-columns:1fr;
  }
}

/* CARD */
.blog-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #eee;
  transition:.3s;
}

.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 35px rgba(0,0,0,.07);
}

/* IMAGE */
.blog-img{
  width:100%;
  height:220px;
  object-fit:cover;
}

/* CONTENT */
.blog-content{
  padding:18px;
}

/* META */
.blog-meta{
  font-size:13px;
  color:#777;
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}

/* TITLE */
.blog-content h4{
  font-size:17px;
  color:#013D29;
  font-weight:600;
  margin-bottom:10px;
}

/* TEXT */
.blog-content p{
  font-size:14px;
  color:#555;
  line-height:1.7;
}

/* TAGS */
.blog-tags{
  margin-top:12px;
}

.blog-tags span{
  font-size:12px;
  background:#f3f9f0;
  color:#013D29;
  padding:4px 8px;
  border-radius:6px;
  margin-right:6px;
}

/* BUTTON */
.blog-btn{
  display:inline-block;
  margin-top:14px;
  padding:9px 16px;
  background:#013D29;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-size:14px;
  transition:.3s;
}

.blog-btn:hover{
  background:#02563c;
}

/* ===== BLOG ALIGNMENT FIX ===== */

.blog-card,
.blog-content,
.blog-content h4,
.blog-content p,
.blog-meta,
.blog-tags{
  text-align:left !important;
}

/* ===== BLOG META ALIGNMENT ===== */

.blog-meta{
  display:flex;
  justify-content:space-between; /* LEFT | RIGHT */
  align-items:center;
  font-size:13px;
  color:#555;
  margin-bottom:8px;
}

.meta-item{
  display:flex;
  align-items:center;
  gap:6px;
}

@media (max-width:576px){

  .blog-content{
    padding:16px;
  }

  .blog-meta{
    font-size:12px;
  }

}

/* =====================================================
   CONTACT PAGE ALIGNMENT FIX
===================================================== */

/* force left alignment */
.contact-info,
.contact-info p,
.contact-details,
.contact-item,
.contact-form,
.contact-form input,
.contact-form textarea,
.contact-form select{
  text-align:left !important;
}


/* fix form layout */
.contact-form .row{
  margin-left:0;
  margin-right:0;
}

/* prevent center stacking */
.contact-form .col-md-6,
.contact-form .col-12{
  padding-left:8px;
  padding-right:8px;
}


/* MOBILE FIX */
@media (max-width:768px){

  .contact-info{
    text-align:left !important;
    margin-bottom:30px;
  }

  .contact-form{
    text-align:left !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    display:block;
    width:100%;
  }

}/* ================= CONTACT PAGE ================= */

.contact-info p{
  color:#555;
  line-height:1.7;
}

.contact-details{
  margin-top:25px;
}

.contact-item{
  margin-bottom:18px;
}

.contact-item strong{
  color:#013D29;
  display:block;
  margin-bottom:3px;
}

/* FORM */
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid #e5e5e5;
  border-radius:8px;
  font-size:14px;
  outline:none;
  transition:.3s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:#6FD943;
}

/* BUTTON */
.contact-btn{
  background:#013D29;
  color:#fff;
  border:none;
  padding:12px 22px;
  border-radius:8px;
  font-weight:600;
  transition:.3s;
}

.contact-btn:hover{
  background:#02563c;
}

/* MOBILE */
@media (max-width:768px){
  .contact-info{
    margin-bottom:30px;
  }
}

/* =====================================================
   CONTACT PAGE ALIGNMENT FIX
===================================================== */

/* force left alignment */
.contact-info,
.contact-info p,
.contact-details,
.contact-item,
.contact-form,
.contact-form input,
.contact-form textarea,
.contact-form select{
  text-align:left !important;
}


/* fix form layout */
.contact-form .row{
  margin-left:0;
  margin-right:0;
}

/* prevent center stacking */
.contact-form .col-md-6,
.contact-form .col-12{
  padding-left:8px;
  padding-right:8px;
}


/* MOBILE FIX */
@media (max-width:768px){

  .contact-info{
    text-align:left !important;
    margin-bottom:30px;
  }

  .contact-form{
    text-align:left !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    display:block;
    width:100%;
  }

}

/* =====================================================
   CONTACT FORM MOBILE STYLE
===================================================== */

@media (max-width:768px){

  .contact-form{
    background:#f4fde9;          /* light parrot green */
    border:1px solid #013D29;    /* thin yellow border */
    border-radius:12px;
    padding:18px 14px;
  }

}

.contact-success{
  text-align:center;
  padding:25px 15px;
  border:1px solid #e9e9e9;
  border-radius:12px;
  background:#ffffff;
}

.contact-success img{
  height:48px;
  margin-bottom:10px;
}

.contact-success h4{
  color:#013D29;
  margin-bottom:6px;
  font-weight:600;
}

.contact-success p{
  margin:0;
  color:#555;
}

/* CONTACT SUBMIT BUTTON */

.contact-submit-btn{
  width:100%;
  background:#013D2A;
  color:#ffffff;
  border:none;
  padding:12px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  transition:0.3s;
  cursor:pointer;
}

.contact-submit-btn:hover{
  background:#02563c;
}

/* CONTACT RESPONSE MESSAGE */

.contact-response{
  border:2px dotted #6FD943;   /* parrot green dotted */
  background:#f9fff7;          /* very light green tint */
  color:#013D29;               /* dark green text */

  padding:12px 14px;
  margin-bottom:16px;
  border-radius:6px;

  font-size:14px;
  font-weight:500;
  text-align:left;

  animation:fadeSlide .35s ease;
}

/* smooth entry */
@keyframes fadeSlide{
  from{
    opacity:0;
    transform:translateY(-5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* mobile */
@media(max-width:768px){
  .contact-response{
    font-size:13px;
    padding:10px 12px;
  }
}

/* ================= LEGAL PAGE FINAL FIX ================= */

.legal-section{
  padding:80px 20px;
  background:#ffffff;
}

/* FULL WIDTH PAGE CONTROL */
.legal-page{
  max-width:900px;
  margin:0 auto;          /* TRUE CENTER */
}

/* HEADER */
.legal-header{
  text-align:center;
  margin-bottom:50px;
}

.legal-header h1{
  color:#013D29;
  font-size:34px;
  font-weight:600;
  margin-bottom:12px;
}

.legal-header p{
  color:#555;
  line-height:1.7;
}

/* CONTENT */
.legal-content{
  text-align:left;
  line-height:1.9;
  color:#333;
}

.legal-content h4{
  color:#013D29;
  margin-top:28px;
  margin-bottom:10px;
  font-weight:600;
}

.legal-content p{
  margin-bottom:16px;
}

/* MOBILE */
@media(max-width:768px){

  .legal-section{
    padding:60px 16px;
  }

  .legal-header h1{
    font-size:26px;
  }

}

/* ================= LEGAL ALIGN FIX ================= */

/* make legal block use full container width */
.container .legal-content{
  width:100%;
  flex:0 0 100%;        /* stops flex shrink */
  max-width:100%;
  margin:0;
  text-align:left;
}

/* override theme center alignment */
.legal-content,
.legal-content *{
  text-align:left !important;
}

/* improve reading spacing */
.legal-content{
  line-height:1.9;
  color:#333;
}

/* headings */
.legal-content h4{
  color:#013D29;
  margin-top:28px;
  margin-bottom:10px;
  font-weight:600;
}

/* paragraphs */
.legal-content p{
  margin-bottom:16px;
}

    /* ===== TRUSTED BY MOBILE FIX ===== */
@media (max-width: 991px) {

  .footer .col-lg-2.text-lg-end div {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* AB CD EF */
    justify-content: center !important;
    gap: 10px;
    max-width: 140px;
  }

  .footer .col-lg-2.text-lg-end img {
    width: 100%;
    height: auto;
  }

}

/* ===== SHOW ONLY A–F IN MOBILE ===== */
@media (max-width: 991px) {

  .footer .col-lg-2.text-lg-end div img:nth-child(n+7) {
    display: none;
  }

}

/* ===== TRUST STACK MOBILE STYLE ===== */
@media (max-width: 991px) {

  /* center whole section */
  .trust-stack {
    justify-content: center !important;
    gap: 2px !important;
  }

  /* avatar container */
  .trust-stack > div:first-child {
    display: flex;
    align-items: center;
  }

  /* smaller avatars */
  .trust-stack img {
    width: 26px !important;
    height: 26px !important;
    margin-left: -8px !important; /* slight overlap */
  }

  /* first image should not shift */
  .trust-stack img:first-child {
    margin-left: 0 !important;
  }

  /* text spacing */
  .trust-stack > div:last-child {
    margin-left: 6px;
    font-size: 13px;
    white-space: nowrap;
  }

}

.binary-bar{
  background:#013D29;
  color:#ffffff;
  padding:30px 0;
  text-align:center;
}

.binary-bar h1{
  margin:0;
  font-size:32px;
  font-weight:600;
  letter-spacing:0.4px;
}